virtual scroll: sticky header/footer

[amcdnl]

Requirement

We need the ability to make things sticky within the virtual scroll area. This directly relates to sticky header/footer/rows in the table.

API

An idea for the API would be to expose a new content projection area like:

  <cdk-virtual-scroll-viewport [itemSize]="35">
    <cdk-virtual-scroll-sticky position="start">
      MY HEADER
    </cdk-virtual-scroll-sticky>
    <div *cdkVirtualFor="let row of rows$ | async">
    </div>
    <cdk-virtual-scroll-sticky position="end">
      MY FOOTER
    </cdk-virtual-scroll-sticky>
</cdk-virtual-scroll-viewport>

Then we could set position sticky to those sticky projections. One issue with this approach is how do we tell the cdk-virtual-scroll-content-wrapper to accommodate the offset of the header/footer?

[amcdnl]

//cc @mmalerba @andrewseguin

[amcdnl]

After thinking about this, I think we should go w/ a different approach for the table thus making this not applicable.

[rutsche]

any news on this?

[ahmadakra]

@amcdnl
We are trying to do exactly that, keep the thead sticky and apply virtual scrolling to the tbody, what was the different approach you came up with? Best wishes

[Hotalenw]

@amcdnl Same question as @ahmadakra above? The

<thead>

needs to remain sticky.

[gurshinder78]

Any update? This is must requirement for data with large data set as user lost focus while scrolling and difficult to identify column

[AbhijithSugunan]

apply virtual scroll to body gonna inject a div inside the tbody, which gonna make start a style battle

[shashankinbab]

I also need sticky header in table. On scroll it sticky content got disturb and displayed in middle. Any luck

[rahulbhooteshwar]

@shashankinbab I am facing the same issue . Is there any update on the same ?

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}