Fixing Columns in React Table: A Comprehensive Guide

React Table is a powerful tool for displaying tabular data, but managing fixed columns can be tricky. This guide provides a clear, version-specific approach to keeping columns stationary while scrolling horizontally.

Table of Contents

• Using react-table-sticky for React Table v7 and Above
• Using react-table-hoc-fixed-columns for React Table v6 and Below

Using react-table-sticky for React Table v7 and Above

React Table v7 introduced significant API changes. For fixed columns, react-table-sticky offers a streamlined solution.

1. Installation

npm install react-table-sticky
# or
yarn add react-table-sticky

2. Implementation

This example demonstrates fixing the ‘ID’ column to the left:

import React from 'react';
import { useTable, useSticky } from 'react-table';
import { FixedColumnsTable } from 'react-table-sticky';

const data = [
  { id: 1, name: 'John Doe', age: 30, city: 'New York' },
  { id: 2, name: 'Jane Doe', age: 25, city: 'London' },
  // ... more data
];

const columns = [
  { Header: 'ID', accessor: 'id', sticky: 'left' },
  { Header: 'Name', accessor: 'name' },
  { Header: 'Age', accessor: 'age' },
  { Header: 'City', accessor: 'city' },
];

function MyTable({ columns, data }) {
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
  } = useTable({ columns, data }, useSticky);

  return (
    <FixedColumnsTable {...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, i) => {
          prepareRow(row);
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map(cell => (
                <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
              ))}
            </tr>
          );
        })}
      </tbody>
    </FixedColumnsTable>
  );
}

export default MyTable;

The sticky: 'left' property in the column definition makes the ‘ID’ column fixed. Use sticky: 'right' for right-side fixed columns.

Using react-table-hoc-fixed-columns for React Table v6 and Below

For older React Table versions, react-table-hoc-fixed-columns provides a solution using Higher-Order Components (HOCs).

1. Installation

npm install react-table-hoc-fixed-columns
# or
yarn add react-table-hoc-fixed-columns

2. Implementation

The implementation depends on your specific React Table version. Consult the library’s documentation for detailed instructions. The general approach involves wrapping your table component with the fixedColumns HOC. A simplified example (refer to the library’s documentation for version-specific details):

import React from 'react';
import { useTable } from 'react-table';
import { fixedColumns } from 'react-table-hoc-fixed-columns';

// ... your data and columns definition ...

const MyTable = fixedColumns(({ getTableProps, ...rest }) => (
  <YourOriginalTableComponent {...rest} {...getTableProps()} />
));

// ... rest of your component

Always refer to the official documentation of react-table-sticky and react-table-hoc-fixed-columns for the most accurate and up-to-date information.