[v8] Working Sticky column and header implementation with tailwind and react

[reczy]

Hi!

I know the question of pinning headers and columns comes up a lot here/elsewhere, so I wanted to share a fairly minimal working example using tailwind and @tanstack/react-table.

https://codesandbox.io/s/sticky-header-and-first-column-tanstack-table-and-tailwind-3dfxod?file=/src/App.js

import cx from "clsx";
import React from "react";
import {
  flexRender,
  getCoreRowModel,
  useReactTable,
  createColumnHelper
} from "@tanstack/react-table";

const columnHelper = createColumnHelper();

let columns = []; // 100 columns
for (let i = 0; i < 100; i++) {
  columns.push(
    columnHelper.accessor(`COLUMN-${i}`, {
      header: () => `COLUMN-${i}`
    })
  );
}

let data = []; // 100 rows
for (let row = 0; row < 100; row++) {
  let rowData = {};
  for (let col = 0; col < 100; col++) {
    rowData[`COLUMN-${col}`] = `ROW-${row}--COLUMN-${col}`;
  }
  data.push(rowData);
}

const TableHead = (props) => {
  const { table } = props;

  return (
    <thead className="font-medium">
      {table.getHeaderGroups().map((headerGroup) => {
        return (
          <tr key={headerGroup.id}>
            {headerGroup.headers.map((header, idx) => {
              const { columnDef } = header.column;

              return (
                <th
                  scope="col"
                  key={header.id}
                  className={cx(
                    "px-4 py-3 border border-gray-500 sticky z-20 top-0 bg-green-100",
                    idx === 0 && "sticky left-0 z-30 bg-purple-100"
                  )}
                >
                  {header.isPlaceholder
                    ? null
                    : flexRender(columnDef.header, header.getContext())}
                </th>
              );
            })}
          </tr>
        );
      })}
    </thead>
  );
};

const TableBody = (props) => {
  const { table } = props;

  return (
    <tbody className="bg-white text-xs">
      {table.getRowModel().rows.map((row, idx) => (
        <tr key={row.id} className="group">
          {row.getVisibleCells().map((cell, idx) => {
            const { columnDef } = cell.column;
            return (
              <td
                key={cell.id}
                className={cx(
                  "px-4 py-1 whitespace-nowrap border border-gray-500 bg-white",
                  idx === 0 && "sticky left-0 z-10 bg-red-100"
                )}
              >
                {flexRender(columnDef.cell, cell.getContext())}
              </td>
            );
          })}
        </tr>
      ))}
    </tbody>
  );
};

const Table = (props) => {
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel()
  });

  return (
    <div>
      <table>
        <TableHead table={table} />
        <TableBody table={table} />
      </table>
    </div>
  );
};

export default function App() {
  return (
    <div className="h-screen w-screen">
      <Table />
    </div>
  );
}

NOTES:

• I ordinarily use z-[1] z-[2] z-[3] instead of z-10 z-20 z-30 to play nice with my modals. I just resorted to standard tailwind classes here since the tailwind compiler is not set up.
• On Chrome and Safari, when you scroll left and right, you can "see through" the stickied column at the left-most margin (maybe 1px worth?) Same thing on the top-most margin when you scroll up and down (take a look at rendered page in full page mode to see this more clearly).
• On Firefox, the borders on the sticky elements don't seem to show up.

I haven't investigated these issues in too much depth, but I think the Firefox nuance might be solvable using box shadow. If anyone has suggestions for improvements, I'd love to see them posted here!

[jkcorrea]

Thanks for this! Fyi, adding border-separate to my <table /> component fixed the "see through" issue on chrome/safari for me.

[livevsonline]

Is it possible to achieve sticky footer?, right now i have a fixed height on my wrapper to also get virtualized scroll, but i need the footer to be fixed in the bottom

[LexQzim]

Finally a simple and clear example. Thank you

[Andi365]

Instead of using the index, i used css first-child and last-child selectors to give the same result!

`const TableBody = (props) => {
const { table } = props;

return (

{table.getRowModel().rows.map((row, idx) => (

{row.getVisibleCells().map((cell, idx) => {
const { columnDef } = cell.column;
return (
<td
key={cell.id}
className={cx(
"px-4 py-1 whitespace-nowrap border border-gray-500 bg-white first:sticky first:left-0 first:z-30 last:sticky last:right-0 last:z-30",
)}
>
{flexRender(columnDef.cell, cell.getContext())}

);
})}

))}

);`

Thanks for the solution, it was fire🔥

[bgrgv]

Figured out a solution for the time being:
TanStack/virtual#640 (comment)