How to make the column sticky in a wide table

[mohdhaider07]

I have a table with 8-10 columns, and when performing certain actions, I often need to scroll to the right to access the "Action" column. This makes the user experience less efficient. I would like to make the "Action" column sticky, so it stays visible even when scrolling horizontally. Any suggestions or solutions on how to achieve this?

[suprunchuk]

hi. without the source code, it is difficult to suggest something. always try to attach the source code or a repository with the code.

[cookieMonsterDev]

Here is a code for general case:

<div class="wrapper">
  <table>
    <thead>
      <tr>
        <th></th>
        <th>column 1</th>
        <th>column 2</th>
        <!-- ... -->
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>row 1</th>
        <td>scroll</td>
        <td>scroll</td>
        <!-- ... -->
      </tr>
      <!-- ... -->
    </tbody>
  </table>
</div>

.wrapper {
  width: 320px;
  height: 200px;
  overflow: auto;
  position: relative;
}

table {
  table-layout: fixed;
}

thead,
tr>th {
  position: sticky;
  background: #fff;
}

thead {
  top: 0;
  z-index: 2;
}
tr>th {
  left: 0;
  z-index: 1;
}
thead tr>th:first-child {
  z-index: 3;
}

You may need to override default behavior of data-table, possibly by adding custom prop to table where can be passed function that will create component for your actions actions.

[antonioken22]

I have a table with 8-10 columns, and when performing certain actions, I often need to scroll to the right to access the "Action" column. This makes the user experience less efficient. I would like to make the "Action" column sticky, so it stays visible even when scrolling horizontally. Any suggestions or solutions on how to achieve this?

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.

Comment:

• In your case, you may want to adjust the 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)] to the right as I'm using it to the left.

[rishabh02dev]

Can't we do it via passing some props for our shad cn table?