## What is TanStack Table?

Have you built a data table in your application and wanted to customize the table? Well, there is a great library to incorporate into your application. [React](https://react.dev/) has become one of the most popular and widely-used frameworks for building user interfaces. However, React is just one piece of the puzzle when it comes to building complex web applications. TanStack is a library that assists in building tables and displaying data in a cohesive way.  

[TanStack Table](https://tanstack.com/table/v8) is a headless UI library made for creating tables and data grids. A [headless UI](https://tanstack.com/table/v8/docs/guide/introduction) library takes care of the complex aspects such as logic and state, and leaves the rest up to you. TanStack Table is not just compatible with React, but also JavaScript/TypeScript, Vue, Solid, and Svelte. TanStack Table has adapters for each framework to keep your interactions with your tables and framework simple.

## Why Use TanStack Table?

One of the key features of TanStack Table is its built-in support for database operations, which makes it an excellent choice for building web applications that require persistent data storage.

### Core Features

TanStack Table has features made to easily interact with your database and tables. Within your table, you can customize the header and footer, set up pagination, sort through data, and filter through columns. All these features are integrated into TanStack Table from the beginning.

Even better, you can use TanStack with any framework you’d like. According to their documentation, [“TanStack Table's core is **framework agnostic**, which means its API is the same regardless of the framework you're using.”](https://tanstack.com/table/v8/docs/guide/overview) The features will not change from a React application to a Svelte application. This standard makes working with Tanstack Table in any application easy and hassle-free.

### Dynamic Tables

If you are considering building an application with a larger amount of data displayed, TanStack Table is a great option. The features offered and flexibility allows your tables the space to expand in complexity. While the styling and themes change, your table functionality will be unaffected, allowing for table expansion in any part of the application build.

One drawback of using TanStack is its bundle size. TanStack table is recommended for applications with larger data sets, such as compiled reports or financial information.

## How to Use TanStack with React

To use the TanStack Table in your React application, you must first install the `@tanstack/react-table` package.

```bash
# Using npm
$ npm install @tanstack/react-table

# Using Yarn
$ yarn add @tanstack/react-table
```

Installing TanStack will update your `package.json` file, as well as your `yarn.lock` or `package-lock.json` file. This is updating the environment to use TanStack Table elements in your code.

Some main elements of TanStack Table are: `columns`, `data`, `rows`, `useReactTable`, `getTableProps`, and`headerGroups`. TanStack Table has its own functions to return `rows`, `props`, and `headers` to name a few. The elements used in the next example focus on `columns`, `rows`, `useReactTable`, along with a few functions to help the build process. It may seem like a lot, but follow the [documentation here](https://tanstack.com/table/v8/docs/guide/features) for guidance on specific features accessible.

### Displaying User Data

Let’s take a look now at how to use TanStack with a dataset of users. We’ll use mock data to display the table but refer to [TanStack’s documentation](https://tanstack.com/table/v8/docs/api/core/table) for interacting with external APIs and databases.

For the table setup, I will incorporate columns, rows, and a few elements mentioned above. The following is a basic component build using TypeScript:

```tsx
file: Users.tsx
import { createColumnHelper, flexRender, getCoreRowModel, useReactTable,
} from '@tanstack/react-table'

type User = {
 id: number
 name: string
 age: number
}

const defaultData: User[] = [
 { id: 1, name: 'J. R. R. Tolkien', age: 40, },
 { id: 2, name: 'Jane Austen', age: 24, },
 { id: 3, name: 'Mary Shelley', age: 32, },
]

const columnHelper = createColumnHelper<User>()

const columns = [
columnHelper.accessor("id", {
   header: "ID",
   cell: (info) => info.getValue(),
 }),
 columnHelper.accessor("name", {
   header: "Name",
   cell: (info) => info.getValue(),
 }),
 columnHelper.accessor("age", {
   header: "Age",
   cell: (info) => info.getValue(),
 }),
]

const Users = () => {
 const [data, setData] = React.useState(() => [...defaultData])

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

In the example above, we define an array of columns with headers and an array of data to populate the table. Then we create a table variable using TanStack’s `useReactTable` hook, which helps to render the implementation of what is passed through. In this case, we are passing the `data`, `columns`, and `getCoreRowModel()`. `getCoreRowModel()` is a Tanstack Table function that returns the row model for the data table.

These pieces are a setup for what we are going to actually render. In the following code, the elements we have previously created are displaying the data in TanStack Table fashion. We are separating the columns and rows and mapping over data. This table is flexible and can be expanded at any time during the development process.

```tsx
file: Users.tsx
return (
   <div>
     <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>
   </div>
 )
```

From here, you can add styles to the table without worrying much about breaking rendering logic. This is only a small example of how to use TanStack Table.

## Conclusion

Overall, Tanstack Table is a powerful and flexible tool for creating dynamic tables in data-driven applications. By simplifying the process of creating and managing tables, developers can easily build complex and expandable tables.

Tanstack Table features such as searching, sorting, and filtering clarify the build process. You still have the freedom to style and develop your UI separately from these tables without compromising the functionality. Incorporate TanStack Table in your next project. Happy building!

‍

Photo by Sean Stratton on Unsplash

‍