QDataTable sticky column style enhancement



  • the current table style when there’s a sticky column can be confusing, you don’t know where a column end and another starts, I made some changes and get something like I needed, if anyone ever complained about it 🙂

    .q-data-table-sticky-right, .q-data-table-sticky-left
      tr:nth-child(odd)
        td:not(.invisible)
          background: #e6e6e6;
    
      tr:nth-child(even)
        td:not(.invisible)
          background: #f6f6f6;
    
      th:not(.invisible)
        background: #f9f9f9;
    

    Before:
    0_1505952316566_before.png

    After:
    0_1505952338975_after.png



  • But how do you make the columns sticky ?



  • @danielo515 said in QDataTable sticky column style enhancement:

    But how do you make the columns sticky ?

    Sticky columns are available for 0.14.x not for 0.15.x for now.



  • Is there a way to get the titles to stick?



  • I’m trying to make the headers sticky using this…but i’m still working on it
    Adding this to app.styl

    #maintable
      .q-table-middle.scroll
        overflow-y scroll
        height auto
        max-height 356px
        margin-top 36px
      .q-table-middle.scroll thead
        position absolute
        width 100%
        background-color #f9f9f9
        z-index 1
        margin-top -36px
    

    In the layout of all my q-pages, i had to add this when any kind of changes is detected on my tables

    let thead = document.querySelector('#maintable thead tr')
    let tbody = document.querySelector('#maintable tbody tr')
    if (thead !== null && tbody !== null) {
      thead = thead.querySelectorAll('th')
      tbody = tbody.querySelectorAll('td')
      for (let i = 0; i < tbody.length; i++) {
      thead[i].style.width = tbody[i].offsetWidth + 'px'
    }
    

    But i get an ugly effect of my titles moving to his new sizes
    still working on it x2…



  • Hi !

    I already did something to on my own that you can find here. Hope it will help 🙂