Is there any option for sticky columns in @tanstack/react-table. I am migrating from React-table v6 to v8

Question

I am migrating from React table V6 to @tanstack/react-table V8. I am able to migrate the basic functionality like sorting, filtering and column resizing etc.

Previously I was using "react-table-hoc-fixed-columns"(https://www.npmjs.com/package/react-table-hoc-fixed-columns) to fix certain columns.

I have spent large chunk of my time going through source code. Here are my findings:

1. There is hook version of same hoc react-table-sticky for React-table version V7.
2. I have also looked at the source code of this hook, but I am unable to find a way to inject the styling like react-table-sticky package do.

If someone encountered this problem or have any advice how can I make it work in @tanstack/react-table v8.

Answer 1

You can add sticky properties for a column in the className into column meta.

import "@tanstack/react-table";
import { RowData } from "@tanstack/react-table";

declare module "@tanstack/react-table" {
  interface ColumnMeta<TData extends RowData, TValue> {
    className: string;
  }
}

const columns = [
    {
      header: "Sticky Column",
      accessorKey: "stickyColumn",
      meta: {
        className:
          "sticky right-0",
       },
    },
// other columns
]



//Then, you can get it through the column.columnDef.meta?.className. Add the className in th and td tag.
<th
className={`${
header.column.columnDef.meta?.className ?? ""
} 
// other tailwind CSS properties
`}
key={header.id}
colSpan={header.colSpan}
>
<td
key={cell.id}
className={`${
cell.column.columnDef.meta?.className ?? ""
} 
// other tailwind CSS properties
`}
>