{"id":11877,"library":"react-table","title":"React Table v7","description":"React Table v7 is a set of headless hooks for building highly customizable and performant data tables in React applications. As of version 7.8.0, it provides core functionalities like sorting, filtering, pagination, row selection, and expansion through a flexible plugin system. Its \"headless\" nature means it provides the logic and state management, leaving all UI rendering and styling entirely up to the developer, offering maximum customization. While `react-table` v7 remains stable and widely used, active development and new features have shifted to the `@tanstack/react-table` package (v8 and beyond). Developers starting new projects are generally advised to use the newer TanStack Table versions, which offer a similar headless approach across various frameworks. This package (v7) is now in a maintenance phase.","status":"maintenance","version":"7.8.0","language":"javascript","source_language":"en","source_url":"https://github.com/tannerlinsley/react-table","tags":["javascript","react","table","react-table","datagrid"],"install":[{"cmd":"npm install react-table","lang":"bash","label":"npm"},{"cmd":"yarn add react-table","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-table","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for all React-based component and hook libraries.","package":"react","optional":false}],"imports":[{"note":"useTable is a named export, primarily used in modern React (ESM) setups. CommonJS requires specific destructuring.","wrong":"const useTable = require('react-table')","symbol":"useTable","correct":"import { useTable } from 'react-table'"},{"note":"Plugin hooks like useSortBy are named exports and are passed as an array to useTable during initialization.","wrong":"import useSortBy from 'react-table'","symbol":"useSortBy","correct":"import { useTable, useSortBy } from 'react-table'"},{"note":"For TypeScript users, importing the Column type provides strong typing for column definitions, preventing common data mismatches.","wrong":"type Column = any","symbol":"Column","correct":"import { Column } from 'react-table'"}],"quickstart":{"code":"import React from 'react';\nimport { useTable, useSortBy, usePagination, Column } from 'react-table';\n\ninterface MyData {\n  id: number;\n  firstName: string;\n  lastName: string;\n  age: number;\n  visits: number;\n  status: string;\n}\n\nfunction MyTable() {\n  const data: MyData[] = React.useMemo(\n    () => [\n      { id: 1, firstName: 'Tanner', lastName: 'Linsley', age: 30, visits: 100, status: 'complicated' },\n      { id: 2, firstName: 'Kevin', lastName: 'Van Cott', age: 25, visits: 40, status: 'single' },\n      { id: 3, firstName: 'Sarah', lastName: 'Doe', age: 35, visits: 20, status: 'married' },\n    ],\n    []\n  );\n\n  const columns: Column<MyData>[] = React.useMemo(\n    () => [\n      { Header: 'ID', accessor: 'id' },\n      { Header: 'First Name', accessor: 'firstName' },\n      { Header: 'Last Name', accessor: 'lastName' },\n      { Header: 'Age', accessor: 'age' },\n      { Header: 'Visits', accessor: 'visits' },\n      { Header: 'Status', accessor: 'status' }\n    ],\n    []\n  );\n\n  const {\n    getTableProps,\n    getTableBodyProps,\n    headerGroups,\n    page,\n    nextPage,\n    previousPage,\n    canNextPage,\n    canPreviousPage,\n    pageOptions,\n    state: { pageIndex, pageSize },\n    prepareRow,\n  } = useTable<\n    MyData\n  >(\n    {\n      columns,\n      data,\n      initialState: { pageIndex: 0, pageSize: 2 },\n    },\n    useSortBy,\n    usePagination\n  );\n\n  return (\n    <div>\n      <table {...getTableProps()} style={{ border: '1px solid black', width: '100%' }}>\n        <thead>\n          {headerGroups.map(headerGroup => (\n            <tr {...headerGroup.getHeaderGroupProps()}>\n              {headerGroup.headers.map(column => (\n                <th\n                  {...column.getHeaderProps(column.getSortByToggleProps())}\n                  style={{ borderBottom: 'solid 3px red', background: 'aliceblue', color: 'black', fontWeight: 'bold' }}\n                >\n                  {column.render('Header')}\n                  <span>\n                    {column.isSorted\n                      ? column.isSortedDesc\n                        ? ' 🔽'\n                        : ' 🔼'\n                      : ''}\n                  </span>\n                </th>\n              ))}\n            </tr>\n          ))}\n        </thead>\n        <tbody {...getTableBodyProps()}>\n          {page.map(row => {\n            prepareRow(row);\n            return (\n              <tr {...row.getRowProps()}>\n                {row.cells.map(cell => (\n                  <td\n                    {...cell.getCellProps()}\n                    style={{\n                      padding: '10px',\n                      border: 'solid 1px gray',\n                      background: 'papayawhip',\n                    }}\n                  >\n                    {cell.render('Cell')}\n                  </td>\n                ))}\n              </tr>\n            );\n          })}\n        </tbody>\n      </table>\n      <div style={{ padding: '10px' }}>\n        <button onClick={() => previousPage()} disabled={!canPreviousPage}>\n          Previous Page\n        </button>\n        <button onClick={() => nextPage()} disabled={!canNextPage}>\n          Next Page\n        </button>\n        <span>\n          Page{' '}\n          <strong>\n            {pageIndex + 1} of {pageOptions.length}\n          </strong>{' '}\n        </span>\n      </div>\n    </div>\n  );\n}\n\nexport default MyTable;","lang":"typescript","description":"This quickstart demonstrates how to create a basic data table using `react-table` v7, incorporating sorting and pagination functionalities with custom UI rendering."},"warnings":[{"fix":"For new projects, consider using `@tanstack/react-table` (v8/v9) instead. For existing v7 projects, refer to the official migration guides for upgrading or continue using v7 which is in maintenance mode.","message":"React Table v7 is succeeded by `@tanstack/react-table` (v8 and v9), which introduces significant API changes and is published under a new package scope. Migration from v7 to v8/v9 requires substantial code refactoring due to the different hook structures and option definitions.","severity":"breaking","affected_versions":">=7.0.0"},{"fix":"Evaluate if your project can upgrade to `@tanstack/react-table` for continued feature development and support. If not, be aware that v7 will only receive critical bug fixes.","message":"The `react-table` package (v7) is now in maintenance mode. While it remains stable, it will not receive new features or major updates. All active development has shifted to `@tanstack/react-table`.","severity":"deprecated","affected_versions":">=7.0.0"},{"fix":"Be prepared to implement your own UI components for the table structure, headers, rows, and cells. This offers maximum flexibility but requires more initial setup compared to 'batteries-included' table libraries.","message":"React Table is a 'headless' library, meaning it provides logic and state but no default UI components or styling. Developers must provide all rendering components (table, tr, td, th) and apply their own styling.","severity":"gotcha","affected_versions":">=7.0.0"},{"fix":"Ensure that plugin hooks are passed correctly as additional arguments to `useTable` in the desired order, as specified in the React Table v7 documentation.","message":"Incorrectly applying or misordering plugin hooks (e.g., `useSortBy`, `usePagination`) in the `useTable` call can lead to unexpected behavior or runtime errors.","severity":"gotcha","affected_versions":">=7.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure all React hooks are called from the top level of your function component, not inside loops, conditions, or nested functions.","cause":"Using React Table hooks (e.g., `useTable`) outside of a functional React component, or violating other React Rules of Hooks.","error":"Error: Invalid hook call. Hooks can only be called inside of the body of a function component."},{"fix":"Always call `prepareRow(row)` for each row before attempting to render it. Verify that your `data` and `columns` arrays are properly initialized and passed to `useTable`.","cause":"Attempting to render table rows or cells before `prepareRow` has been called, or if `data` or `columns` are undefined/null.","error":"TypeError: Cannot read properties of undefined (reading 'map')"},{"fix":"Install a compatible version of React: `npm install react@^16.8.3` or `npm install react@^17.0.0` or `npm install react@^18.0.0` (or `yarn add`).","cause":"React is not installed or the installed version does not satisfy the `react-table` peer dependency requirement.","error":"Uncaught Error: react-table@7.x.x requires React as a peer dependency."}],"ecosystem":"npm"}