Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
@tanstack/react-table
Advanced tools
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.
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)
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 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 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 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.
FAQs
Headless UI for building powerful tables & datagrids for React.
The npm package @tanstack/react-table receives a total of 1,785,576 weekly downloads. As such, @tanstack/react-table popularity was classified as popular.
We found that @tanstack/react-table demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.