Convert Figma logo to code with AI

TanStack logotable

🤖 Headless UI for building powerful tables & datagrids for TS/JS - React-Table, Vue-Table, Solid-Table, Svelte-Table

24,849
3,067
24,849
176

Top Related Projects

12,496

The best JavaScript Data Table for building Enterprise Applications. Supports React / Angular / Vue / Plain JavaScript.

JavaScript data grid with a spreadsheet look & feel. Works with React, Angular, and Vue. Supported by the Handsontable team ⚡

Datatable for React based on material-ui's table with additional features

Next Generation of react-bootstrap-table

Feature-rich and customizable data grid React component

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.

Quick Overview

TanStack Table is a powerful and flexible headless UI library for building tables and data grids in React, Vue, and Solid. It provides a set of hooks and utilities to manage table state, sorting, filtering, pagination, and more, while giving developers full control over the UI rendering.

Pros

  • Headless design allows for complete customization of the UI
  • Supports multiple frameworks (React, Vue, Solid)
  • Excellent TypeScript support
  • Highly performant, even with large datasets

Cons

  • Steeper learning curve compared to some other table libraries
  • Requires more setup and boilerplate code
  • Limited built-in UI components (by design)
  • Documentation can be overwhelming for beginners

Code Examples

  1. Basic table setup in React:
import { useReactTable, getCoreRowModel, flexRender } from '@tanstack/react-table'

function Table({ data, columns }) {
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
  })

  return (
    <table>
      <thead>
        {table.getHeaderGroups().map(headerGroup => (
          <tr key={headerGroup.id}>
            {headerGroup.headers.map(header => (
              <th key={header.id}>
                {flexRender(header.column.columnDef.header, header.getContext())}
              </th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody>
        {table.getRowModel().rows.map(row => (
          <tr key={row.id}>
            {row.getVisibleCells().map(cell => (
              <td key={cell.id}>
                {flexRender(cell.column.columnDef.cell, cell.getContext())}
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  )
}
  1. Adding sorting functionality:
import { useReactTable, getCoreRowModel, getSortedRowModel } from '@tanstack/react-table'

function SortableTable({ data, columns }) {
  const [sorting, setSorting] = useState([])

  const table = useReactTable({
    data,
    columns,
    state: { sorting },
    onSortingChange: setSorting,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
  })

  // Render table with sorting UI...
}
  1. Implementing pagination:
import { useReactTable, getCoreRowModel, getPaginationRowModel } from '@tanstack/react-table'

function PaginatedTable({ data, columns }) {
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
  })

  return (
    <>
      {/* Render table */}
      <div>
        <button onClick={() => table.previousPage()} disabled={!table.getCanPreviousPage()}>
          Previous
        </button>
        <button onClick={() => table.nextPage()} disabled={!table.getCanNextPage()}>
          Next
        </button>
      </div>
    </>
  )
}

Getting Started

To get started with TanStack Table in a React project:

  1. Install the package:

    npm install @tanstack/react-table
    
  2. Import necessary functions and create a basic table:

    import { useReactTable, getCoreRowModel, flexRender } from '@tanstack/react-table'
    
    function MyTable({ data, columns }) {
      const table = useReactTable({
        data,
        columns,
        getCoreRowModel: getCoreRowModel(),
      })
    
      // Render your table using the table instance
    }
    
  3. Define your columns and data, then use the MyTable component in your app.

Competitor Comparisons

12,496

The best JavaScript Data Table for building Enterprise Applications. Supports React / Angular / Vue / Plain JavaScript.

Pros of ag-grid

  • Feature-rich with built-in functionality like sorting, filtering, and pagination
  • Excellent performance for handling large datasets
  • Extensive documentation and enterprise support options

Cons of ag-grid

  • Steeper learning curve due to its comprehensive API
  • Larger bundle size, which may impact initial load times
  • Some advanced features require a paid license

Code Comparison

ag-grid:

<AgGridReact
  columnDefs={columnDefs}
  rowData={rowData}
  defaultColDef={defaultColDef}
  onGridReady={onGridReady}
/>

TanStack Table:

const table = useReactTable({
  data,
  columns,
  getCoreRowModel: getCoreRowModel(),
})

Key Differences

  • ag-grid provides a more complete out-of-the-box solution, while TanStack Table offers a lightweight, flexible foundation
  • TanStack Table has a smaller footprint and is easier to customize, but requires more manual implementation of advanced features
  • ag-grid excels in enterprise scenarios with complex requirements, whereas TanStack Table is ideal for simpler use cases or when full control over the table implementation is needed

Both libraries have their strengths, and the choice between them depends on project requirements, performance needs, and desired level of customization.

JavaScript data grid with a spreadsheet look & feel. Works with React, Angular, and Vue. Supported by the Handsontable team ⚡

Pros of Handsontable

  • Full-featured spreadsheet-like interface with built-in cell types and editors
  • Extensive documentation and enterprise support options
  • Large ecosystem with plugins and integrations

Cons of Handsontable

  • Heavier bundle size due to comprehensive feature set
  • Steeper learning curve for customization
  • Commercial license required for some use cases

Code Comparison

Handsontable:

const hot = new Handsontable(container, {
  data: data,
  columns: [
    { type: 'text', title: 'Name' },
    { type: 'numeric', title: 'Age' }
  ],
  rowHeaders: true,
  colHeaders: true
});

TanStack Table:

const table = useReactTable({
  data,
  columns: [
    { accessorKey: 'name', header: 'Name' },
    { accessorKey: 'age', header: 'Age' }
  ],
  getCoreRowModel: getCoreRowModel()
});

Key Differences

  • Handsontable provides a more Excel-like experience out of the box
  • TanStack Table offers greater flexibility and lighter weight
  • Handsontable has built-in cell types and editors, while TanStack Table requires custom implementation
  • TanStack Table is framework-agnostic, whereas Handsontable has separate versions for different frameworks

Both libraries are powerful tools for creating data grids, but they cater to different use cases and development preferences.

Datatable for React based on material-ui's table with additional features

Pros of material-table

  • Integrated with Material-UI, providing a consistent look and feel
  • Built-in features like sorting, filtering, and pagination
  • Simpler setup for basic use cases

Cons of material-table

  • Less flexible for complex customizations
  • Heavier bundle size due to Material-UI dependencies
  • Limited to React applications

Code Comparison

material-table:

import MaterialTable from 'material-table';

<MaterialTable
  columns={[
    { title: 'Name', field: 'name' },
    { title: 'Age', field: 'age', type: 'numeric' },
  ]}
  data={[
    { name: 'John', age: 30 },
    { name: 'Jane', age: 25 },
  ]}
/>

table:

import { useTable } from '@tanstack/react-table';

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

// Render table using the returned properties and methods

Summary

material-table offers a quick setup with built-in features and Material-UI integration, making it ideal for projects already using Material-UI. However, it's less flexible and has a larger bundle size. table provides more flexibility and framework-agnostic options but requires more setup for basic features. Choose based on your project's specific needs and existing tech stack.

Next Generation of react-bootstrap-table

Pros of react-bootstrap-table2

  • Easier integration with Bootstrap styling
  • Built-in pagination and sorting functionality
  • More straightforward setup for basic table needs

Cons of react-bootstrap-table2

  • Less flexible for complex table requirements
  • Limited customization options compared to TanStack Table
  • Smaller community and less frequent updates

Code Comparison

react-bootstrap-table2:

import BootstrapTable from 'react-bootstrap-table-next';

const columns = [{
  dataField: 'id',
  text: 'Product ID'
}, {
  dataField: 'name',
  text: 'Product Name'
}];

<BootstrapTable keyField='id' data={ products } columns={ columns } />

TanStack Table:

import { useTable } from '@tanstack/react-table'

const columns = useMemo(() => [
  { Header: 'Product ID', accessor: 'id' },
  { Header: 'Product Name', accessor: 'name' },
], [])

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

Both libraries offer solutions for creating tables in React applications. react-bootstrap-table2 provides a more straightforward approach with built-in features, making it suitable for simpler use cases. TanStack Table, on the other hand, offers greater flexibility and customization options, making it more appropriate for complex table requirements and advanced use cases.

Feature-rich and customizable data grid React component

Pros of react-data-grid

  • Built specifically for React, offering a more integrated experience
  • Provides a rich set of built-in features like cell editing, sorting, and filtering
  • Offers better performance for large datasets with virtualization out of the box

Cons of react-data-grid

  • Less flexible and customizable compared to table
  • Limited to React applications, while table is framework-agnostic
  • Steeper learning curve due to its more opinionated structure

Code Comparison

react-data-grid:

import ReactDataGrid from 'react-data-grid';

const columns = [
  { key: 'id', name: 'ID' },
  { key: 'name', name: 'Name' }
];

const rows = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' }
];

function MyGrid() {
  return <ReactDataGrid columns={columns} rows={rows} />;
}

table:

import { useTable } from '@tanstack/react-table';

function MyTable() {
  const data = [
    { id: 1, name: 'John' },
    { id: 2, name: 'Jane' }
  ];
  const columns = [
    { Header: 'ID', accessor: 'id' },
    { Header: 'Name', accessor: 'name' }
  ];
  const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable({ columns, data });
  // Render table using the returned properties and methods
}

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.

Pros of Material-UI

  • Comprehensive UI component library with a wide range of pre-built components
  • Follows Google's Material Design principles, ensuring a consistent and modern look
  • Extensive documentation and community support

Cons of Material-UI

  • Larger bundle size due to the extensive component library
  • Steeper learning curve for customization and theming
  • May require more setup and configuration for specific use cases

Code Comparison

Material-UI example:

import { Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material';

<Table>
  <TableHead>
    <TableRow>
      <TableCell>Name</TableCell>
      <TableCell>Age</TableCell>
    </TableRow>
  </TableHead>
  <TableBody>
    {/* Table rows */}
  </TableBody>
</Table>

TanStack Table example:

import { useTable } from '@tanstack/react-table';

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

<table {...getTableProps()}>
  <thead>{/* Header rows */}</thead>
  <tbody {...getTableBodyProps()}>{/* Table rows */}</tbody>
</table>

TanStack Table focuses specifically on table functionality, offering a more lightweight and flexible solution for complex table requirements. Material-UI provides a complete UI framework with pre-styled components, making it easier to create consistent designs across an entire application.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

TanStack Table Header

TanStack Table v8

Headless UI for building powerful tables & datagrids for React, Solid, Vue, Svelte, Qwik and TS/JS.

#TanStack semantic-release Join the discussion on Github

Looking for version 7 of react-table? Click here!

Enjoy this library?

Try other TanStack libraries:

Visit tanstack.com/table for docs, guides, API and more!

You may know TanStack Table by our adapter names, too!

Summary

TanStack Table is a headless table library, which means it does not ship with components, markup or styles. This means that you have full control over markup and styles (CSS, CSS-in-JS, UI Component Libraries, etc) and this is also what gives it its portable nature. You can even use it in React Native!

If you want a lightweight table with full control over markup and implementation, then you should consider using TanStack Table, a headless table library.

If you want a ready-to-use component-based table with more power but more constraints around markup/styles/implementation, you should consider using AG Grid, a component-based table library from our OSS partner AG Grid.

TanStack Table and AG Grid are respectfully the best table/datagrid libraries around. Instead of competing, we're working together to ensure the highest quality table/datagrid options are available for the entire JS/TS ecosystem and every use-case.

Quick Features

  • Agnostic core (JS/TS)
  • 1st-class framework bindings for React, Vue, Solid
  • ~15kb or less (with tree-shaking)
  • 100% TypeScript (but not required)
  • Headless (100% customizable, Bring-your-own-UI)
  • Auto out of the box, opt-in controllable state
  • Filters (column and global)
  • Sorting (multi-column, multi-directional)
  • Grouping & Aggregation
  • Pivoting (coming soon!)
  • Row Selection
  • Row Expansion
  • Column Visibility/Ordering/Pinning/Resizing
  • Table Splitting
  • Animatable
  • Virtualizable
  • Server-side/external data model support

Migrating from React Table v7

Notable Changes

  • Full rewrite to TypeScript with types included in the base package
  • Removal of plugin system to favor more inversion of control
  • Vastly larger and improved API (and new features like pinning)
  • Better controlled state management
  • Better support for server-side operations
  • Complete (but optional) data pipeline control
  • Agnostic core with framework adapters for React, Solid, Svelte, Vue, and potentially more in the future
  • New Dev Tools

Migration

There are a fair amount of breaking changes (they're worth it, trust us!):

  • Turns out that TypeScript makes your code a lot better/safer, but also usually requires breaking changes to architecture.
  • Plugin system has been removed so plugins must be rewritten to wrap/compose the new functional API. Contact us if you need help!
  • Column configuration options have changed, but only slightly.
  • Table options are mostly the same, with some larger changes around optional state management/control and data pipeline control
  • The table instance while similar in spirit to v7 has been reconfigured to be much faster.

Installation

Install one of the following packages based on your framework of choice:

# Npm
npm install @tanstack/angular-table
npm install @tanstack/lit-table
npm install @tanstack/qwik-table
npm install @tanstack/react-table
npm install @tanstack/solid-table
npm install @tanstack/svelte-table
npm install @tanstack/vue-table
npm install @tanstack/table-core #vanilla js that can work with any framework

How to help?

  • Try out the already-migrated examples
  • Try it out in your own projects.
  • Introspect the types! Even without the docs finished, the library ships with 100% typescript to help you explore its capabilities.
  • Read the contribution guidelines
  • Write some docs! Start with the API docs and try adding some information about one or more of the features. The types do a decent job of showing what's supported and the capabilities of the library.
  • Using a plugin? Try rewriting your plugin (v8 doesn't have a plugin system any more) as a functional wrapper that uses TanStack Table internally. The new API is much more powerful and easier to compose. If you find something you can't figure out, let us know and we'll add it to the API.

Become a Sponsor