Adding sticky column for data table.

[atiqueMorshed]

It's typical for a table to have the identifier column or the action column to retain its position on horizontal scroll. Would love to see that being implemented with the data table.

[antonioken22]

It's typical for a table to have the identifier column or the action column to retain its position on horizontal scroll. Would love to see that being implemented with the data table.

This is how I managed to create a sticky column (with decent visual cues):

table.tsx

const TableRow = React.forwardRef<
  HTMLTableRowElement,
  React.HTMLAttributes<HTMLTableRowElement>
>(({ className, ...props }, ref) => (
  <tr
    ref={ref}
    className={cn(
      "bg-background border-b transition-colors hover:bg-[#D6D3CD] dark:hover:bg-muted data-[state=selected]:bg-[#D6D3CD] dark:data-[state=selected]:bg-muted",
      className
    )}
    {...props}
  />
));
TableRow.displayName = "TableRow"; 

const TableHead = React.forwardRef<
  HTMLTableCellElement,
  React.ThHTMLAttributes<HTMLTableCellElement>
>(({ className, ...props }, ref) => (
  <th
    ref={ref}
    className={cn(
      "bg-inherit h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
      className
    )}
    {...props}
  />
));
TableHead.displayName = "TableHead";

const TableCell = React.forwardRef<
  HTMLTableCellElement,
  React.TdHTMLAttributes<HTMLTableCellElement>
>(({ className, ...props }, ref) => (
  <td
    ref={ref}
    className={cn(
      "bg-inherit p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
      className
    )}
    {...props}
  />
));
TableCell.displayName = "TableCell";

Note:

• bg-background to TableRow and bg-inherit to TableHead and TableCell to prevent "see-through" issues. Adjust as you wish.
• Adjust the hover:* or dark:hover:* and data-[state=selected]:* or dark:data-[state=selected]:* to a solid color to prevent "see-through" issues when hovering and selecting data when you're using the select feature.

data-table.tsx

<TableHead
  key={header.id}
  className={`border ${
    stickyColumnId?.includes(header.column.id)
      ? "sticky left-0 z-10 shadow-[inset_-2px_0_0_0_rgba(255,255,255,0.8)] dark:shadow-[inset_-2px_0_0_0_rgba(108,117,125,0.5)]"
      : ""
  }`}
>

<TableCell
  key={cell.id}
  className={`border ${
    stickyColumnId?.includes(cell.column.id)
      ? "sticky left-0 z-10 shadow-[inset_-2px_0_0_0_rgba(255,255,255,0.8)] dark:shadow-[inset_-2px_0_0_0_rgba(108,117,125,0.5)]"
      : ""
  }`}
>

Note:

• For a consistent styling, I've applied the same styling to my TableHead and TableCell components. You may experiment with your style.
• Since I'm using border for each of my TableHead and TableCell, I've applied an inset shadow (thin indicator line) to the right of the sticky column because the border is not preserved during the layout shift and only the bg-inherit. If you know a way to preserve it together with the bg-inherit, I'd love to hear about it. Also, if you know of a better implementation, please let me know too.