Scrollable TreeTable

[Weigle]

Hey people.
I'm was searching for one function that freezes the column in primeVue, but doesn't exist.

This feature has in Primefaces and Primeng

I going created this issue to leave registered

thanks, everyone

[cagataycivici]

It was left out as we first want to play with the position sticky before porting DataTable scrolling to TreeTable.

[melinashak-noaa]

Any update on this? It'd be great to have or is there any workout to implement this by customizing the CSS?

[Weigle]

Hello, this problem can be resolve using CSS Style z-index.
Set in your column z-index: 1 for exemple
work for me

[melinashak-noaa]

Hmm tried that but didn't have any luck. Added style="z-index: 1" to the pColumn tag but columns are still scrolling. Also tried adding it to headerStyle and filterHeaderStyle but that didn't work either. And tried adding my own css as displayed below, but that didn't work either.

thead.p-treetable-thead {
z-index: 1
}

I'm trying to get my table to scroll both horizontally and vertically. Right now without any modifications the table scrolls horizontally, but the column headers are not sticky and disappear when scrolling to the bottom of the table.

I've tried adding custom css to get the columns to stick. This works, but the horizontal scrolling stops working for the headers. Is there any way to get horizontal and vertical scrolling working together properly for tree table?

thead.p-treetable-thead {
display: block;
overflow: hidden;
}

tbody.p-treetable-tbody {
display: block;
position: relative;
height: calc(100vh - 600px);
overflow: auto;
}

[Weigle]

yes, this is one exemple

<TreeTable
      :value="data"
      :lazy="true"
      @node-expand="onExpand"
      :rows="rows"
      :loading="loading"
      resizableColumns
    >
      <Column
        bodyClass="sticky left"
        headerClass="sticky top left titles"
        field="HEADER FIX "
        header="HEADER FIX "
        :expander="true"
      >
      </Column>
        <Column
          v-for="column in newColumns" :key="column.key"
          :header="column.label"
          headerClass="sticky top table-cell"
          bodyClass="table-cell"
          :bodyStyle="`background: ${column.bgColor};`"
        >
          <template #body="slotProps">
              {{slotProps.data)}}
          </template>
        </Column>
    </TreeTable>

<style lang="sass">
  .sticky
    overflow: hidden
    position: sticky !important
    &.titles
      z-index: 1
      width: 350px !important
    &.left
      left: 0px
    &.top
      top: 0px
  .table-cell
    overflow: hidden
    width: 100px !important
    padding: 2px!important
    margin: 0!important
</style>

i hope help you

[melinashak-noaa]

cool I'll try that out thanks!

[cagataycivici]

We've reimplemented the scrolling of the DataTable recently and after fixing the minor glitches, will port it to TreeTable.

[cagataycivici]

Implemented Scrollable TreeTable with the frozen columns bonus feature.

[melinashak-noaa]

Hi, thanks for working on this this is very exciting. Just curious when will it be available to use? Just checked the documentation and don't see any updates there or any updates to the primevue version on npm.