react-table

Hooks for building lightweight, fast and extendable datagrids for React

weekly downloads1.6M

versionv7.8.0

licenseMIT

categoryfrontend

reacttablereact-tabledatagrid

Overview

react-table is a headless utility library that provides hooks and state management for building complex data tables in React applications. Unlike traditional table libraries that bundle pre-styled components, react-table offers only the logic layer—sorting algorithms, filtering mechanisms, pagination state, row selection handlers—leaving all rendering and styling decisions to developers. This architectural choice results in a minimal footprint (4-14kb depending on features) while enabling unlimited UI customization.

The library uses a plugin-based hook system centered around useTable, which accepts column definitions and data arrays to produce table instance objects with methods and props for rendering. Developers destructure these objects to wire up their own HTML table elements or custom components. Version 7.x (the version in question) introduced a mature hook-based API that chains plugins like useSortBy, useFilters, usePagination, and useRowSelect to progressively add functionality without bloating the bundle.

react-table is particularly popular in enterprise applications and admin dashboards where tables need complex interactions (multi-column sorting, inline editing, nested rows) but must match existing design systems. With over 1.6 million weekly downloads, it's become a standard tool for developers who need table functionality without the constraints of opinionated UI frameworks. The library has since evolved into TanStack Table (v8+), making it framework-agnostic, though version 7.x remains widely used in React-specific projects.

The package excels at handling large datasets through built-in support for virtualization and server-side data fetching patterns. Its controlled component approach allows external state management libraries (Redux, Zustand, etc.) to drive table state, making it suitable for applications requiring synchronized state across components or persistent table configurations.

Quick Start

typescript

import React from 'react';
import { useTable, useSortBy, usePagination } from 'react-table';

function DataTable({ data }) {
  const columns = React.useMemo(
    () => [
      {
        Header: 'Name',
        accessor: 'name',
      },
      {
        Header: 'Email',
        accessor: 'email',
      },
      {
        Header: 'Status',
        accessor: 'status',
        Cell: ({ value }) => (
          <span style={{ color: value === 'active' ? 'green' : 'gray' }}>
            {value}
          </span>
        ),
      },
    ],
    []
  );

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    page,
    prepareRow,
    canPreviousPage,
    canNextPage,
    pageOptions,
    nextPage,
    previousPage,
    state: { pageIndex },
  } = useTable(
    {
      columns,
      data,
      initialState: { pageSize: 10 },
    },
    useSortBy,
    usePagination
  );

  return (
    <div>
      <table {...getTableProps()} style={{ border: '1px solid black' }}>
        <thead>
          {headerGroups.map(headerGroup => (
            <tr {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map(column => (
                <th {...column.getHeaderProps(column.getSortByToggleProps())}>
                  {column.render('Header')}
                  <span>
                    {column.isSorted
                      ? column.isSortedDesc
                        ? ' 🔽'
                        : ' 🔼'
                      : ''}
                  </span>
                </th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody {...getTableBodyProps()}>
          {page.map(row => {
            prepareRow(row);
            return (
              <tr {...row.getRowProps()}>
                {row.cells.map(cell => (
                  <td {...cell.getCellProps()} style={{ padding: '8px', border: '1px solid #ddd' }}>
                    {cell.render('Cell')}
                  </td>
                ))}
              </tr>
            );
          })}
        </tbody>
      </table>
      <div style={{ marginTop: '10px' }}>
        <button onClick={() => previousPage()} disabled={!canPreviousPage}>
          Previous
        </button>
        <span style={{ margin: '0 10px' }}>
          Page {pageIndex + 1} of {pageOptions.length}
        </span>
        <button onClick={() => nextPage()} disabled={!canNextPage}>
          Next
        </button>
      </div>
    </div>
  );
}

export default DataTable;

Use Cases

Enterprise admin panels where tables display thousands of records with requirements for multi-level sorting, advanced filtering, and CSV export. react-table handles the state logic while developers implement custom filter UIs matching their design system.

Data exploration dashboards that need pivot tables, column aggregation, and dynamic grouping. The library's aggregation hooks enable building spreadsheet-like interfaces where users can sum, average, or count grouped data interactively.

E-commerce product listings requiring faceted search, sortable columns, and persistent selection across paginated results. react-table's row selection hooks maintain selection state even when users navigate between pages.

Real-time monitoring interfaces displaying streaming data with auto-refresh capabilities. The headless nature allows developers to implement custom row animations, color-coded cells, and sparkline charts within table cells while react-table manages the underlying data updates.

Mobile-responsive data tables where developers need complete control over breakpoint behavior. Since react-table doesn't impose HTML structure, teams can render cards or lists on mobile and traditional tables on desktop using the same table logic.

Pros & Cons

Pros

+Truly headless design provides complete UI/UX control without fighting framework defaults or overriding styles
+Lightweight bundle size (4-14kb) with excellent tree-shaking keeps application bundles small
+Composable plugin system allows using only needed features (sorting, filtering, etc.) without loading unused code
+Well-documented hook patterns and TypeScript support make complex table interactions predictable and type-safe
+Strong performance with large datasets through built-in virtualization support and optimized re-render logic

Cons

−Steep initial learning curve requires understanding hook composition and the library's mental model before building anything
−Significantly more boilerplate than pre-styled alternatives—developers must manually wire up all HTML and event handlers
−Version 7.x is in maintenance mode as development shifted to v8 (TanStack Table), meaning fewer updates and improvements
−Documentation examples sometimes lack real-world complexity, making advanced use cases (like editable cells with validation) harder to implement
−No built-in accessibility features—developers must manually implement ARIA attributes, keyboard navigation, and screen reader support

Alternatives

react-data-gridv7.0.0-beta.59

Feature-rich and customizable data grid React component

frontendreactdata grid

286K / week

Comparisons

@tanstack/react-table vs react-table

frontend

Install

bash

npm install react-table

bash

pnpm add react-table

bash

bun add react-table

Overview

Quick Start

typescript

import React from 'react';
import { useTable, useSortBy, usePagination } from 'react-table';

function DataTable({ data }) {
  const columns = React.useMemo(
    () => [
      {
        Header: 'Name',
        accessor: 'name',
      },
      {
        Header: 'Email',
        accessor: 'email',
      },
      {
        Header: 'Status',
        accessor: 'status',
        Cell: ({ value }) => (
          <span style={{ color: value === 'active' ? 'green' : 'gray' }}>
            {value}
          </span>
        ),
      },
    ],
    []
  );

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    page,
    prepareRow,
    canPreviousPage,
    canNextPage,
    pageOptions,
    nextPage,
    previousPage,
    state: { pageIndex },
  } = useTable(
    {
      columns,
      data,
      initialState: { pageSize: 10 },
    },
    useSortBy,
    usePagination
  );

  return (
    <div>
      <table {...getTableProps()} style={{ border: '1px solid black' }}>
        <thead>
          {headerGroups.map(headerGroup => (
            <tr {...headerGroup.getHeaderGroupProps()}>
              {headerGroup.headers.map(column => (
                <th {...column.getHeaderProps(column.getSortByToggleProps())}>
                  {column.render('Header')}
                  <span>
                    {column.isSorted
                      ? column.isSortedDesc
                        ? ' 🔽'
                        : ' 🔼'
                      : ''}
                  </span>
                </th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody {...getTableBodyProps()}>
          {page.map(row => {
            prepareRow(row);
            return (
              <tr {...row.getRowProps()}>
                {row.cells.map(cell => (
                  <td {...cell.getCellProps()} style={{ padding: '8px', border: '1px solid #ddd' }}>
                    {cell.render('Cell')}
                  </td>
                ))}
              </tr>
            );
          })}
        </tbody>
      </table>
      <div style={{ marginTop: '10px' }}>
        <button onClick={() => previousPage()} disabled={!canPreviousPage}>
          Previous
        </button>
        <span style={{ margin: '0 10px' }}>
          Page {pageIndex + 1} of {pageOptions.length}
        </span>
        <button onClick={() => nextPage()} disabled={!canNextPage}>
          Next
        </button>
      </div>
    </div>
  );
}

export default DataTable;

Use Cases

Pros & Cons

Pros

+Truly headless design provides complete UI/UX control without fighting framework defaults or overriding styles
+Lightweight bundle size (4-14kb) with excellent tree-shaking keeps application bundles small
+Composable plugin system allows using only needed features (sorting, filtering, etc.) without loading unused code
+Well-documented hook patterns and TypeScript support make complex table interactions predictable and type-safe
+Strong performance with large datasets through built-in virtualization support and optimized re-render logic

Cons

−Steep initial learning curve requires understanding hook composition and the library's mental model before building anything
−Significantly more boilerplate than pre-styled alternatives—developers must manually wire up all HTML and event handlers
−Version 7.x is in maintenance mode as development shifted to v8 (TanStack Table), meaning fewer updates and improvements
−Documentation examples sometimes lack real-world complexity, making advanced use cases (like editable cells with validation) harder to implement
−No built-in accessibility features—developers must manually implement ARIA attributes, keyboard navigation, and screen reader support