sticky datagrid header

HeroUI Pro DataGrid currently appears to tie sticky header behavior to virtualization. While virtualization can make the header appear sticky through properties such as rowHeight and headingHeight, this is not an acceptable requirement when the application does not need virtualization.

A sticky header and row virtualization solve two completely different problems:

  • Sticky headers are a scrolling and usability concern.

  • Virtualization is a performance optimization for rendering large datasets.

These concerns should not be coupled.

Right now, if the only requirement is to keep the column headers visible while scrolling, developers are effectively forced to enable virtualization and provide fixed dimensions. This creates unnecessary limitations and can prevent the use of normal DataGrid behavior, particularly when rows need to support dynamic or variable heights.

For example, enabling virtualization may require:

  • Fixed rowHeight values

  • Fixed headingHeight values

  • Giving up naturally dynamic row heights

  • Additional configuration that is completely unrelated to sticky headers

  • Using a different rendering mode purely to achieve a basic scrolling behavior

This makes a common UI requirement unnecessarily difficult to implement.

Proposed API

<DataGrid stickyHeader />

or:

<DataGrid headerBehavior="sticky" />

The sticky header should work independently of virtualization.

For example:

<DataGrid
  stickyHeader
  selectionMode="multiple"
  isPaginated
>
  ...
</DataGrid>

This should preserve normal DataGrid functionality, including:

  • Dynamic and variable row heights

  • Row selection

  • Sorting

  • Horizontal scrolling

  • Pagination

  • Normal non-virtualized rendering

  • Existing table accessibility behavior

The expected implementation would simply keep the column header sticky within the DataGrid's vertical scroll container, rather than making virtualization a prerequisite.

Why this matters

Developers should not have to choose between dynamic content and sticky headers.

A DataGrid often contains rows with content that naturally changes height, such as:

  • Long descriptions

  • Multi-line text

  • Status messages

  • Expandable content

  • Custom cell components

  • Responsive content

In these cases, forcing a fixed rowHeight just to get a sticky header is a significant limitation.

Sticky headers are also a standard table usability feature. They should be available regardless of whether the table is rendering 20 rows or 20,000 rows. Virtualization should remain an optional performance optimization, not a dependency for basic header behavior.

Expected behavior

<DataGrid stickyHeader>
  ...
</DataGrid>

Expected result:

  • The DataGrid scroll container scrolls vertically.

  • The column header remains visible at the top of that container.

  • Body rows can retain natural and dynamic heights.

  • Horizontal scrolling continues to work normally.

  • Virtualization remains optional.

  • No rowHeight or headingHeight configuration should be required solely for sticky header behavior.

This would make the DataGrid API significantly more flexible and would separate scrolling behavior from rendering strategy, which is the more appropriate API design.

At the moment, requiring virtualization just to achieve a sticky header feels like an unnecessary architectural constraint and limits valid DataGrid use cases.

Please authenticate to join the conversation.

Upvoters
Status

In Review

Board

πŸ’‘ Feature Request

Date

6 days ago

Author

iqromprasetyo

Subscribe to post

Get notified by email when there are changes.