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
          background: #e6e6e6;
          background: #f6f6f6;
        background: #f9f9f9;



  • 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

        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 🙂

Log in to reply