TanStack Table Explained: Everything You Need to Know

Unlocking TanStack table potential to get started with it. Learn by creating something cool with it.

Prachi Sahu

June 18, 2024·5 min read

Share this article

Introduction

In the world of modern web development, displaying data effectively and efficiently is a common challenge. Whether it's a simple list of users or a complex financial report, tables are essential. While there are many libraries available to handle tables in React, few offer the flexibility, performance, and ease of use that TanStack Table does.

TanStack Table, previously known as React Table, has quickly become the go-to solution for developers needing powerful and customizable table components. TanStack is not only compatible with React but it also supports Angular, Lit, Qwik, Solid, Svelte, Vue, and also Vanilla JavaScript/TypeScript.

In this blog post, we'll dive into what makes TanStack Table stand out, explore its core features, and provide a hands-on example to get you started.

What is TanStack Table?

TanStack Table is a lightweight, highly customizable, and headless UI for building powerful tables & data grids. By "headless," we mean it comes with all the core functionality and logic for table operations without any user interface. This gives us total control over our table's appearance while also taking advantage of the built-in functionality.

Why choose the TanStack table?

Choosing a table library for your project can be confusing as so many options are available online. Here’s why TanStack Table might be the best fit for your next project:

1. Performance

When our dataset is large managing it efficiently becomes crucial as we also have to take performance into account. TanStack uses features like Virtualization and Tree shaking which are methods for optimising performance. It also optimizes rendering to ensure that even if there are tens of thousands of rows the performance is smooth.

Tree shaking is a process of optimising during final javascript bundling, it removes all the dead code or unused code from the bundle.

Virtualization or Windowing is a technique to improve performance by only rendering the items that are currently in view.

2. Adaptability

TanStack table supports headless architecture which allows us to be free from any built-in UI. Its high customizability lets us integrate it with any CSS framework or theme. This flexibility comes in very handy when design changes are required for almost every project.

3. Advanced Feature

TanStack Table supports a wide range of feature lists such as:

Sorting with customizable sort functions.

import * as React from 'react'; import { createColumnHelper, flexRender, getCoreRowModel, useReactTable, } from '@tanstack/react-table'; export type User = { id: number; name: string; age: number; email: string; country: string; subscription: string; wallet_balance: number; }; export const users: User[] = [ { id: 1, name: 'John Doe', age: 35, email: 'john.doe@example.com', country: 'United States', subscription: 'Premium', wallet_balance: 150.25, }, { id: 2, name: 'Alice Smith', age: 28, email: 'alice.smith@example.com', country: 'Canada', subscription: 'Basic', wallet_balance: 50.75, } ]; const columnHelper = createColumnHelper<User>(); const columns = [ columnHelper.accessor('name', { header: () => 'Name', cell: (info) => info.getValue(), }), columnHelper.accessor('age', { header: () => 'Age', cell: (info) => info.getValue(), }), columnHelper.accessor('email', { header: () => 'Email', cell: (info) => info.getValue(), }), columnHelper.accessor('country', { header: () => 'Country', }), columnHelper.accessor('subscription', { header: 'Subscription', }), columnHelper.accessor('wallet_balance', { header: 'Wallet balance', }), ]; const Table = () => { const [data, _setData] = React.useState([...users]); 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} > {header.isPlaceholder ? null : 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> ); }; export default Table;

Services

Case Studies

About CreoWis

Culture

InterMentorship

Hatch-n-Hype

Meet Our People

Careers at CreoWis

Blog

Let's Talk

TanStack Table Explained: Everything You Need to Know

Introduction

What is TanStack Table?

Why choose the TanStack table?

1. Performance

2. Adaptability

3. Advanced Feature

4. Active Community and Support

Key challenges when using TanStack Table

Getting Started with TanStack Table

Step 1: Install TanStack Table

Step 2: Set Up the Table

Step 3: Customize accordingly

Conclusion

Resources