Basic Column Pinning Setup

Demonstrate how to pin a column to the left of the React TanStack Table by configuring the initial column settings.

import { useTable } from 'react-table';

Import the useTable hook from react-table to create the table.

const columns = React.useMemo(() => [
  {
    Header: 'Name',
    accessor: 'name',
    // Specifying column to be pinned to the left
    sticky: 'left'
  },
  {
    Header: 'Age',
    accessor: 'age'
  },
  {
    Header: 'Visits',
    accessor: 'visits'
  }
], []);

Define the columns for the table, specifying one column (Name) to be pinned to the left using the sticky property.

const data = React.useMemo(() => [
  { name: 'Jane Doe', age: 30, visits: 100 },
  { name: 'John Doe', age: 32, visits: 120 }
], []);

Define the data to be displayed in the table.

const tableInstance = useTable({ columns, data });

Create a table instance using the useTable hook, passing in the columns and data.

const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = tableInstance;

Destructure necessary properties and methods from the table instance to set up the table structure.

// In the render or return statement of your component
return (
  <table {...getTableProps()}>
    <thead>
      {headerGroups.map(headerGroup => (
        <tr {...headerGroup.getHeaderGroupProps()}>
          {headerGroup.headers.map(column => (
            <th {...column.getHeaderProps()}>{column.render('Header')}</th>
          ))}
        </tr>
      ))}
    </thead>
    <tbody {...getTableBodyProps()}>
      {rows.map(row => {
        prepareRow(row);
        return (
          <tr {...row.getRowProps()}>
            {row.cells.map(cell => (
              <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
            ))}
          </tr>
        );
      })}
    </tbody>
  </table>
);

Render the table structure using JSX. Mapping over headerGroups to render headers, and rows to render each row with its cells. The column set to be pinned will automatically stick to the left.