Tables

Learn how to use TanStack Tables in the admin-boil dashboard for data visualization and management.

Using TanStack Tables in admin-boil

The TanStack Table is a powerful and flexible table component integrated into the admin-boil dashboard. It offers advanced features for data handling, making it easy to create dynamic and reusable tables for your projects.

Key Features of TanStack Table

Sorting: Easily sort data by any column.
Filtering: Built-in column and global filtering support for flexible data searches.
Pagination: Seamlessly manage large datasets with server-side and client-side pagination.
Column Resizing & Reordering: Adjust column widths and rearrange columns for a custom view.
Row Selection: Enable row selection for bulk actions or data comparisons.
Fully Customizable: Tailor the table's design and behavior with hooks and configuration options.

How to Use TanStack Tables in admin-boil

You can quickly set up a reusable table using TanStack in your admin-boil dashboard by following these steps:

Step 1: Import the Table Components

import {
  useReactTable,
  ColumnDef,
  getCoreRowModel
} from '@tanstack/react-table'

Step 2: Define Your Table Columns

const columns: ColumnDef<{ name: string; age: number }>[] =
  [
    { accessorKey: 'name', header: 'Name' },
    { accessorKey: 'age', header: 'Age' }
  ]

Step 3: Prepare the Data

const data = [
  { name: 'John Doe', age: 28 },
  { name: 'Jane Smith', age: 34 }
]

Step 4: Initialize the Table

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

Step 5: Render the Table in the Dashboard

<table>
  <thead>
    {table.getHeaderGroups().map((headerGroup) => (
      <tr key={headerGroup.id}>
        {headerGroup.headers.map((header) => (
          <th key={header.id}>
            {header.column.columnDef.header}
          </th>
        ))}
      </tr>
    ))}
  </thead>
  <tbody>
    {table.getRowModel().rows.map((row) => (
      <tr key={row.id}>
        {row.getVisibleCells().map((cell) => (
          <td key={cell.id}>{cell.renderCell()}</td>
        ))}
      </tr>
    ))}
  </tbody>
</table>

Reusing the TanStack Table Component

To make the TanStack Table reusable across your admin-boil dashboard:

Step 1: Create a Reusable Component

import React from 'react'
import {
  useReactTable,
  ColumnDef,
  getCoreRowModel
} from '@tanstack/react-table'

interface TableProps<T> {
  data: T[]
  columns: ColumnDef<T>[]
}

export function CustomTable<T>({
  data,
  columns
}: TableProps<T>) {
  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.column.columnDef.header}
              </th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody>
        {table.getRowModel().rows.map((row) => (
          <tr key={row.id}>
            {row.getVisibleCells().map((cell) => (
              <td key={cell.id}>{cell.renderCell()}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  )
}

Step 2: Use the Reusable Component

import { CustomTable } from './CustomTable'

const columns = [
  { accessorKey: 'name', header: 'Name' },
  { accessorKey: 'email', header: 'Email' }
]

const data = [
  { name: 'John Doe', email: 'john@example.com' },
  { name: 'Jane Doe', email: 'jane@example.com' }
]

export default function Dashboard() {
  return <CustomTable data={data} columns={columns} />
}

Best Practices for Using TanStack Tables

Avoid Overloading: Minimize the number of rows rendered at once for performance optimization.
Use Server-side Pagination: For large datasets, leverage server-side pagination.
Keep Columns Flexible: Define columns with accessorKey for easier data handling.
Use Memoization: Memoize columns and data to avoid unnecessary re-renders.

Need Help?

If you have questions about using TanStack tables or need further assistance, check out the official TanStack documentation or reach out to our Support Page.

Tables

On this page