QDataTable sticky column style enhancement

[talski]

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:

After:

[danielo515]

But how do you make the columns sticky ?

[natxocc]

@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.

[Hawkeye64]

Is there a way to get the titles to stick?

[peric0valdez]

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…

[Sweetyy]

Hi !

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