Sticky Table Header Not Working When Data is Present

[parthy018]

When rendering a

using @tanstack/react-table with a scrollable container, the header appears sticky when there is no data, but scrolls along with rows when data is loaded.

The table header ( / ) should stay fixed at the top when data rows are scrollable.

This behavior should be consistent whether data is present or not.

{table.getHeaderGroups().map((headerGroup) => ( {headerGroup.headers.map((header) => ( {header.isPlaceholder ? null : flexRender( header.column.columnDef.header, header.getContext() )} ))} ))}

      <TableBody>
        {table.getRowModel().rows?.length ? (
          table.getRowModel().rows.map((row) => (
            <TableRow
              key={row.id}
              data-state={row.getIsSelected() && "selected"}
              className="border-muted/20 h-6 hover:bg-muted/50 cursor-pointer"
              onClick={() => router.push(`/dashboard/companies/${row.original.id}`)}
            >
              {row.getVisibleCells().map((cell) => (
                <TableCell key={cell.id}>
                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
                </TableCell>
              ))}
            </TableRow>
          ))
        ) : (
          <TableRow>
            <TableCell colSpan={columns.length} className="h-24 text-center font-medium text-sm text-muted-foreground">
              <div className="w-full flex flex-col items-center justify-center gap-y-2">
                <CircleOff className="h-8 w-8 text-foreground/70" />
                <p>No results found</p>
              </div>
            </TableCell>
          </TableRow>
        )}
      </TableBody>
    </Table>
  </div>