@tanstack/table-core

What is @tanstack/table-core?

The @tanstack/table-core npm package is a headless utility for building powerful tables and datagrid experiences. It provides the core logic needed to manage the state and features of a table without enforcing any rendering or styling, allowing developers to build fully customized tables.

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

Column Ordering

This feature allows users to define the order of columns in their table. The code sample demonstrates how to use the useTable hook to create a table instance and render the headers based on the defined column order.

{"useTable": ("hooks, columns, data") => {"const instance = useTable({"columns, data"});"return instance.getHeaderGroups().map(headerGroup => headerGroup.headers.map(column => column.render('Header')));"}}

Row Selection

This feature enables row selection within a table. The code sample shows how to use the useRow hook to get the props necessary for toggling row selection and how to apply them to a row component.

{"useTable": ("hooks, columns, data") => {"const {"getToggleRowSelectedProps"} = useRow();"return data.map(row => {"const rowProps = row.getToggleRowSelectedProps();"return <div {...rowProps}>{row.values.name}</div>;"});"}}

Sorting

This feature allows users to sort data in the table by one or more columns. The code sample illustrates how to initialize a table with sorting on the 'name' column and how to get the props needed to toggle sorting on a header component.

{"useTable": ("hooks, columns, data") => {"const {"headers"} = useTable({"columns, data, initialState: {"sortBy: [{"id": 'name', "desc": false}]"}});"return headers.map(column => column.getSortByToggleProps());"}}

Other packages similar to @tanstack/table-core

react-table

React-table is a lightweight, flexible, and extendable datagrid built for React. It is similar to @tanstack/table-core but was the predecessor created by the same author. React-table offers hooks for building complex grids and has a larger community and ecosystem.

ag-grid-community

AG Grid is a feature-rich datagrid designed for the enterprise. Unlike @tanstack/table-core, which is headless and requires developers to build their UI, AG Grid comes with a set of default styles and interactions, making it easier to use out of the box but potentially less flexible for extensive customization.

mui-datatables

MUI Datatables is a data tables component built on Material-UI. It provides UI components for building tables with sorting, filtering, and pagination. It is less flexible than @tanstack/table-core in terms of customization, as it comes with predefined Material-UI styles and components.