@tanstack/react-table

What is @tanstack/react-table?

The @tanstack/react-table package is a lightweight, headless (UI-agnostic) library for building powerful tables & datagrids for your React applications. It provides hooks and utilities to create tables with sorting, filtering, pagination, and more, without enforcing any specific styling or structure.

What are @tanstack/react-table's main functionalities?

Sorting

This feature allows users to sort table data by one or more columns. The code sample demonstrates initializing a table with sorting on the 'age' column in descending order.

const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable({ columns, data, initialState: { sortBy: [{ id: 'age', desc: true }] } })

Filtering

This feature enables users to filter data based on criteria. The code sample shows how to set up a table with filtering capabilities using the useFilters hook.

const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow, setFilter } = useTable({ columns, data }, useFilters)

Pagination

This feature provides the ability to paginate the table data. The code sample illustrates how to use the usePagination hook to add pagination controls to a table.

const { getTableProps, getTableBodyProps, headerGroups, page, prepareRow, canPreviousPage, canNextPage, pageOptions, pageCount, gotoPage, nextPage, previousPage, setPageSize } = useTable({ columns, data }, usePagination)

Row Selection

This feature allows users to select table rows. The code sample demonstrates how to integrate row selection into a table using the useRowSelect hook.

const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow, selectedFlatRows } = useTable({ columns, data }, useRowSelect)

Column Resizing

This feature lets users resize table columns. The code sample shows how to enable column resizing in a table with the useResizeColumns hook.

const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow, resetResizing } = useTable({ columns, data }, useResizeColumns)

Other packages similar to @tanstack/react-table

react-table

react-table is a predecessor of @tanstack/react-table. It offers similar functionalities but is less modular and not as actively maintained as @tanstack/react-table.

ag-grid-react

ag-grid-react is a feature-rich data grid component for React. It includes features like sorting, filtering, and pagination, similar to @tanstack/react-table, but it is more heavyweight and comes with a built-in UI.

material-table

material-table is built on top of Material-UI and provides a set of components for building tables with sorting, filtering, and pagination. It is more opinionated in terms of design and less headless compared to @tanstack/react-table.

react-data-grid

react-data-grid is a customizable data grid component that supports features like sorting, filtering, and pagination. It is more focused on providing a ready-to-use grid with less emphasis on being headless compared to @tanstack/react-table.