stickyHeader for DataTable

[James-Cocker]

Hello, I know the stickyHeader is an experimental feature, however, I'd like to know if I'm doing anything wrong here. I've removed all my CSS, so there should be nothing interfering with my specific scenario. I've also attempted removing the <TableToolbarContent> as well as the isSortable prop. Not too sure if it's me or the component, as i can't quite see how it can't work when i remove all my CSS and set of props. To be specific, the issue is that the scroll bar appears without the grab handle, so it is appearing in the correct spot, and it recognises that there is too much data, but still refuses to comply. The top screenshot is without css, the bottom is with my custom css.

<DataTable stickyHeader isSortable rows={filteredRows} headers={headers}>
        {({
          rows,
          headers,
          getTableProps,
          getHeaderProps,
          getRowProps,
        }: {
          rows: DataTableRow[];
          headers: DataTableHeader[];
          getHeaderProps: (options: any) => TableHeadProps;
          getRowProps: (options: any) => TableRowProps;
          getTableProps: () => TableBodyProps;
        }) => (
          <TableContainer>
            <TableToolbarContent>
              <TableToolbarSearch
                placeholder={translations('searchPlaceholder')}
                persistent
                onChange={(e: any) => {
                  setSearchTerm(e.target.value);
                }}
              />
              <Dropdown
                className={styles.terminalDropdownMenu}
                label="Select a terminal"
                items={terminalnames}
                itemToString={(item: DropdownOption | null) => (item ? item.label : '')}
                onChange={({ selectedItem }: { selectedItem: DropdownOption | null }) => {
                  setSelectedTerminal(selectedItem);
                }}
                selectedItem={selectedTerminal}
              />
            </TableToolbarContent>
            <Table {...getTableProps()}>
              <TableHead>
                <TableRow>
                  {headers.map((header) => (
                    <TableHeader key={header.header} {...getHeaderProps({ header })}>
                      {header.header}
                    </TableHeader>
                  ))}
                </TableRow>
              </TableHead>
              <TableBody className={styles.tableBodyComponent}>
                {rows.map((row) => (
                  <TableRow
                    key={row.id}
                    {...getRowProps({ row })}
                    onClick={() => handleRowClick(runId, row.id)}
                    className={styles.clickableRow}
                  >
                    {row.cells.map((cell) => (
                      <TableCell key={cell.id}>{cell.value}</TableCell>
                    ))}
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </TableContainer>
        )}
      </DataTable>
      ```

[alishanawer]

Hi James!

I ran into the same issue when trying to use stickyHeader with DataTable, so you’re not doing anything wrong, this is a known limitation of the current implementation. A few points that might help:

1. Parent container scroll
   The stickyHeader feature only works if the scroll container is the TableContainer. If a parent element (like your page layout or a surrounding div) controls the scroll instead, the header won’t “stick” correctly. Try giving the TableContainer a fixed height with overflow-y: auto:

   .bx--data-table-container {
     max-height: 500px; /* adjust as needed */
     overflow-y: auto;
   }

   This ensures the scrollbar is applied to the table itself, not the page.

2. Toolbar positioning
   If you’re using <TableToolbarContent>, keep in mind it’s not part of the sticky header. The sticky behavior only applies to the <TableHead>. If you expect the toolbar to stick as well, you’ll need to make that position: sticky separately in your CSS.

3. CSS conflicts
   Even though you removed your custom styles, check if global styles (like resets, flex layouts, or container overflow rules) are affecting scroll behavior. In particular, if an ancestor has overflow: hidden, it will prevent the sticky positioning from working.

4. Experimental state
   Since stickyHeader is still marked experimental, there are edge cases where it doesn’t behave consistently. Sometimes setting a specific TableContainer height is the only reliable way to make the grab-handle scrollbar appear correctly.

Here’s a minimal example that works for me:

<TableContainer style={{ maxHeight: '500px', overflowY: 'auto' }}>
  <DataTable stickyHeader rows={rows} headers={headers}>
    {({ rows, headers, getTableProps, getHeaderProps, getRowProps }) => (
      <Table {...getTableProps()}>
        <TableHead>
          <TableRow>
            {headers.map((header) => (
              <TableHeader key={header.key} {...getHeaderProps({ header })}>
                {header.header}
              </TableHeader>
            ))}
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map((row) => (
            <TableRow key={row.id} {...getRowProps({ row })}>
              {row.cells.map((cell) => (
                <TableCell key={cell.id}>{cell.value}</TableCell>
              ))}
            </TableRow>
          ))}
        </TableBody>
      </Table>
    )}
  </DataTable>
</TableContainer>

So in short: you’re not missing a prop, the key is making sure the TableContainer itself has a fixed height + scroll, otherwise stickyHeader won’t kick in.

Hope that helps! 😊

[James-Cocker]

Hello!

Thank you very much for your speedy reply, it is certainly very comprehensive. Unfortunately the same bug seems to still persist, where the outer has a scroll bar with grab handle, as well as a separate inner scroll bar without one. I've attached an image of what your example looks like in my webui without any CSS, and after ensuring there are no flexbox, floating or overflow attributes set. I've spent quite a few hours attempting different combinations over the last few days - and it looks like I can't assign header columns to have position: sticky manually anyways. If anything jumps out to you please do let me know! I'd love your help.

Many thanks,
James.

[James-Cocker]

For anyone wondering I managed to fix it by making the inner table have a maximum height as followed:

<DataTable isSortable rows={filteredRows} headers={headers} stickyHeader>
      {({
        rows,
        headers,
        getTableProps,
        getHeaderProps,
        getRowProps,
      }: {
        rows: DataTableRow[];
        headers: DataTableHeader[];
        getHeaderProps: (options: any) => TableHeadProps;
        getRowProps: (options: any) => TableRowProps;
        getTableProps: () => TableBodyProps;
      }) => (
        <TableContainer>
          <TableToolbarContent>
            <TableToolbarSearch
              placeholder={translations('searchPlaceholder')}
              persistent
              onChange={(e: any) => {
                setSearchTerm(e.target.value);
              }}
              data-testid="search-input"
            />
            <Dropdown
              className={styles.terminalDropdownMenu}
              label="Select a terminal"
              items={terminalnames}
              itemToString={(item: DropdownOption | null) => (item ? item.label : '')}
              onChange={({ selectedItem }: { selectedItem: DropdownOption | null }) => {
                setSelectedTerminal(selectedItem);
              }}
              selectedItem={selectedTerminal}
              data-testid="terminal-input"
            />
          </TableToolbarContent>
          <Table stickyHeader {...getTableProps()} style={{maxHeight: '500px', overflowY: 'auto'}}>
            <TableHead>
              <TableRow>
                {headers.map((header) => (
                  <TableHeader key={header.header} {...getHeaderProps({ header })}>
                    {header.header}
                  </TableHeader>
                ))}
              </TableRow>
            </TableHead>
            <TableBody>
              {rows.map((row) => (
                <TableRow
                  key={row.id}
                  {...getRowProps({ row })}
                  onClick={() => handleRowClick(runId, row.id)}
                  className={styles.clickableRow}
                  data-testid="table-row"
                >
                  {row.cells.map((cell) => (
                    <TableCell key={cell.id}>{cell.value}</TableCell>
                  ))}
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </TableContainer>
      )}
    </DataTable>