Hooks for building fast and extendable tables and datagrids for React. v7 was a major refactor of the library, eliminating the
The most recent version of react-table is the @tanstack/react-table adapter of the TanStack Table libary. This tag is specifically for questions about v7, which was a major refactor over previous versions, and differs in other ways from v8 and beyond.
Website
https://react-table-v7.tanstack.com/
Demos
https://react-table-v7.tanstack.com/docs/examples/basic
Docs
https://react-table-v7.tanstack.com/docs/overview
Example
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow,
} = useTable({
columns,
data,
})
// Render the UI for your table
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, i) => {
prepareRow(row)
return (
<tr {...row.getRowProps()}>
{row.cells.map(cell => {
return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
})}
</tr>
)
})}
</tbody>
</table>
)
