Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
useTable
✓ import { useTable } from 'react-table'
✗ const useTable = require('react-table')
useTable is a named export, primarily used in modern React (ESM) setups. CommonJS requires specific destructuring.
useSortBy
✓ import { useTable, useSortBy } from 'react-table'
✗ import useSortBy from 'react-table'
Plugin hooks like useSortBy are named exports and are passed as an array to useTable during initialization.
Column
✓ import { Column } from 'react-table'
✗ type Column = any
For TypeScript users, importing the Column type provides strong typing for column definitions, preventing common data mismatches.
This quickstart demonstrates how to create a basic data table using `react-table` v7, incorporating sorting and pagination functionalities with custom UI rendering.
import React from 'react';
import { useTable, useSortBy, usePagination, Column } from 'react-table';
interface MyData {
id: number;
firstName: string;
lastName: string;
age: number;
visits: number;
status: string;
}
function MyTable() {
const data: MyData[] = React.useMemo(
() => [
{ id: 1, firstName: 'Tanner', lastName: 'Linsley', age: 30, visits: 100, status: 'complicated' },
{ id: 2, firstName: 'Kevin', lastName: 'Van Cott', age: 25, visits: 40, status: 'single' },
{ id: 3, firstName: 'Sarah', lastName: 'Doe', age: 35, visits: 20, status: 'married' },
],
[]
);
const columns: Column<MyData>[] = React.useMemo(
() => [
{ Header: 'ID', accessor: 'id' },
{ Header: 'First Name', accessor: 'firstName' },
{ Header: 'Last Name', accessor: 'lastName' },
{ Header: 'Age', accessor: 'age' },
{ Header: 'Visits', accessor: 'visits' },
{ Header: 'Status', accessor: 'status' }
],
[]
);
const {
getTableProps,
getTableBodyProps,
headerGroups,
page,
nextPage,
previousPage,
canNextPage,
canPreviousPage,
pageOptions,
state: { pageIndex, pageSize },
prepareRow,
} = useTable<
MyData
>(
{
columns,
data,
initialState: { pageIndex: 0, pageSize: 2 },
},
useSortBy,
usePagination
);
return (
<div>
<table {...getTableProps()} style={{ border: '1px solid black', width: '100%' }}>
<thead>
{headerGroups.map(headerGroup => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map(column => (
<th
{...column.getHeaderProps(column.getSortByToggleProps())}
style={{ borderBottom: 'solid 3px red', background: 'aliceblue', color: 'black', fontWeight: 'bold' }}
>
{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: '10px',
border: 'solid 1px gray',
background: 'papayawhip',
}}
>
{cell.render('Cell')}
</td>
))}
</tr>
);
})}
</tbody>
</table>
<div style={{ padding: '10px' }}>
<button onClick={() => previousPage()} disabled={!canPreviousPage}>
Previous Page
</button>
<button onClick={() => nextPage()} disabled={!canNextPage}>
Next Page
</button>
<span>
Page{' '}
<strong>
{pageIndex + 1} of {pageOptions.length}
</strong>{' '}
</span>
</div>
</div>
);
}
export default MyTable;
Errors
Common errors & fixes
Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
Using React Table hooks (e.g., `useTable`) outside of a functional React component, or violating other React Rules of Hooks.
fixEnsure all React hooks are called from the top level of your function component, not inside loops, conditions, or nested functions.
TypeError: Cannot read properties of undefined (reading 'map')
Attempting to render table rows or cells before `prepareRow` has been called, or if `data` or `columns` are undefined/null.
fixAlways 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`.
Uncaught Error: react-table@7.x.x requires React as a peer dependency.
React is not installed or the installed version does not satisfy the `react-table` peer dependency requirement.
fixInstall 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`).
Audit
Dependencies
reactrequiredPeer dependency for all React-based component and hook libraries.