Data Tables

Sorting, filtering, pagination, virtual scrolling, and TanStack Table.

Overview

Data tables display structured data with interactive features for large datasets.

Key Concepts

• TanStack Table — Headless table library for React
• Column Definitions — Configure columns with accessors and formatters
• Sorting — Click headers to sort data
• Filtering — Search and filter table rows
• Virtual Scrolling — Render thousands of rows efficiently

Code Examples

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

const columns = [
  { accessorKey: 'name', header: 'Name' },
  { accessorKey: 'email', header: 'Email' },
  { accessorKey: 'role', header: 'Role' },
  {
    id: 'actions',
    cell: ({ row }) => (
      <button onClick={() => handleEdit(row.original)}>Edit</button>
    )
  }
];

function DataTable({ data }) {
  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>
  );
}

Practice

Build a data table with sorting, filtering, pagination, and row selection.