Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@tanstack/react-table

Package Overview
Dependencies
Maintainers
2
Versions
220
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@tanstack/react-table

Headless UI for building powerful tables & datagrids for React.

  • 8.20.5
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
2.2M
decreased by-11.39%
Maintainers
2
Weekly downloads
 
Created

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

Keywords

FAQs

Package last updated on 24 Aug 2024

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc