Best React Table Libraries in 2026

// TanStack Table — define columns with full TypeScript types
import {
  useReactTable,
  getCoreRowModel,
  getSortedRowModel,
  getFilteredRowModel,
  getPaginationRowModel,
  flexRender,
  type ColumnDef,
  type SortingState,
} from '@tanstack/react-table';
import { useState } from 'react';

interface Package {
  name: string;
  version: string;
  downloads: number;
  size: number;
  license: string;
}

const columns: ColumnDef<Package>[] = [
  {
    accessorKey: 'name',
    header: 'Package',
    cell: ({ row }) => (
      <a href={`/packages/${row.original.name}`} className="font-mono text-blue-600">
        {row.original.name}
      </a>
    ),
  },
  {
    accessorKey: 'downloads',
    header: ({ column }) => (
      <button
        onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
        className="flex items-center gap-1 font-semibold"
      >
        Downloads
        {column.getIsSorted() === 'asc' ? ' ↑' : column.getIsSorted() === 'desc' ? ' ↓' : ' ↕'}
      </button>
    ),
    cell: ({ getValue }) => getValue<number>().toLocaleString(),
  },
  {
    accessorKey: 'size',
    header: 'Bundle Size',
    cell: ({ getValue }) => `${(getValue<number>() / 1024).toFixed(1)} KB`,
  },
  {
    accessorKey: 'license',
    header: 'License',
  },
];

// TanStack Table — full component with sorting, filtering, and pagination
function PackagesTable({ data }: { data: Package[] }) {
  const [sorting, setSorting] = useState<SortingState>([]);
  const [globalFilter, setGlobalFilter] = useState('');

  const table = useReactTable({
    data,
    columns,
    state: { sorting, globalFilter },
    onSortingChange: setSorting,
    onGlobalFilterChange: setGlobalFilter,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    initialState: { pagination: { pageSize: 25 } },
  });

  return (
    <div className="space-y-4">
      <input
        value={globalFilter}
        onChange={(e) => setGlobalFilter(e.target.value)}
        placeholder="Search packages..."
        className="w-full max-w-sm rounded border px-3 py-2 text-sm"
      />

      <div className="rounded-md border">
        <table className="w-full text-sm">
          <thead className="bg-muted/50">
            {table.getHeaderGroups().map(headerGroup => (
              <tr key={headerGroup.id}>
                {headerGroup.headers.map(header => (
                  <th key={header.id} className="px-4 py-3 text-left font-medium">
                    {flexRender(header.column.columnDef.header, header.getContext())}
                  </th>
                ))}
              </tr>
            ))}
          </thead>
          <tbody>
            {table.getRowModel().rows.map(row => (
              <tr key={row.id} className="border-t hover:bg-muted/25">
                {row.getVisibleCells().map(cell => (
                  <td key={cell.id} className="px-4 py-3">
                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
                  </td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <div className="flex items-center justify-between">
        <span className="text-sm text-muted-foreground">
          Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
        </span>
        <div className="flex gap-2">
          <button onClick={() => table.previousPage()} disabled={!table.getCanPreviousPage()}
            className="rounded border px-3 py-1 text-sm disabled:opacity-50">
            Previous
          </button>
          <button onClick={() => table.nextPage()} disabled={!table.getCanNextPage()}
            className="rounded border px-3 py-1 text-sm disabled:opacity-50">
            Next
          </button>
        </div>
      </div>
    </div>
  );
}

// shadcn/ui + TanStack Table — column visibility toggle (standard pattern)
import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Button } from "@/components/ui/button";
import type { Table } from "@tanstack/react-table";

function ColumnVisibilityToggle({ table }: { table: Table<Package> }) {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline" size="sm">
          Columns
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        {table
          .getAllColumns()
          .filter(column => column.getCanHide())
          .map(column => (
            <DropdownMenuCheckboxItem
              key={column.id}
              checked={column.getIsVisible()}
              onCheckedChange={(value) => column.toggleVisibility(value)}
            >
              {column.id}
            </DropdownMenuCheckboxItem>
          ))}
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

// AG Grid Community — enterprise data grid setup
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/styles/ag-grid.css';
import 'ag-grid-community/styles/ag-theme-quartz.css';
import type { ColDef, GridReadyEvent } from 'ag-grid-community';
import { useCallback, useRef } from 'react';

const columnDefs: ColDef<Package>[] = [
  {
    field: 'name',
    headerName: 'Package',
    filter: true,
    sortable: true,
    pinned: 'left',
  },
  {
    field: 'downloads',
    headerName: 'Weekly Downloads',
    sortable: true,
    filter: 'agNumberColumnFilter',
    valueFormatter: ({ value }) => value?.toLocaleString() ?? '0',
  },
  {
    field: 'size',
    headerName: 'Bundle Size',
    sortable: true,
    valueFormatter: ({ value }) => `${(value / 1024).toFixed(1)} KB`,
  },
  {
    headerName: 'Actions',
    cellRenderer: ({ data }: { data: Package }) => (
      <button onClick={() => window.open(`/compare/${data.name}`)}>Compare</button>
    ),
    sortable: false,
    filter: false,
    width: 100,
  },
];

function PackageGrid({ rowData }: { rowData: Package[] }) {
  const gridRef = useRef<AgGridReact>(null);

  const onGridReady = useCallback((params: GridReadyEvent) => {
    params.api.sizeColumnsToFit();
  }, []);

  const exportToExcel = useCallback(() => {
    gridRef.current?.api.exportDataAsExcel();  // Enterprise feature only
  }, []);

  return (
    <div className="ag-theme-quartz" style={{ height: 600 }}>
      <AgGridReact
        ref={gridRef}
        rowData={rowData}
        columnDefs={columnDefs}
        pagination={true}
        paginationPageSize={50}
        rowSelection="multiple"
        onGridReady={onGridReady}
        animateRows={true}
        // Virtual scrolling handles 1M+ rows — built-in, no configuration needed
      />
    </div>
  );
}

// react-data-grid — Excel-like editable grid
import DataGrid, { textEditor, type Column } from 'react-data-grid';
import { useState } from 'react';

interface Row {
  id: number;
  name: string;
  downloads: number;
  license: string;
}

const columns: Column<Row>[] = [
  {
    key: 'id',
    name: 'ID',
    width: 60,
    frozen: true,   // Pin column to left (equivalent of AG Grid's pinned: 'left')
  },
  {
    key: 'name',
    name: 'Package',
    editor: textEditor,  // Built-in text editor — click to edit inline
    editorOptions: { editOnClick: true },
  },
  {
    key: 'downloads',
    name: 'Downloads',
    renderCell: ({ row }) => row.downloads.toLocaleString(),
  },
  {
    key: 'license',
    name: 'License',
    editor: textEditor,
  },
];

function EditablePackageGrid() {
  const [rows, setRows] = useState<Row[]>([
    { id: 1, name: 'react', downloads: 25000000, license: 'MIT' },
    { id: 2, name: 'next', downloads: 9000000, license: 'MIT' },
  ]);

  return (
    <DataGrid
      columns={columns}
      rows={rows}
      onRowsChange={setRows}    // Inline edits flow through this callback
      rowKeyGetter={(row) => row.id}
      style={{ height: '100%' }}
      // Virtual scrolling is built-in — no additional configuration needed
    />
  );
}

// TanStack Table + @tanstack/react-virtual — row virtualization
import { useVirtualizer } from '@tanstack/react-virtual';
import { useRef } from 'react';

function VirtualizedTable({ data }: { data: Package[] }) {
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
  });

  const { rows } = table.getRowModel();
  const parentRef = useRef<HTMLDivElement>(null);

  const virtualizer = useVirtualizer({
    count: rows.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 40,   // Estimated row height in pixels
    overscan: 20,             // Render extra rows outside viewport for smooth scrolling
  });

  return (
    <div ref={parentRef} style={{ height: '600px', overflow: 'auto' }}>
      <table style={{ width: '100%' }}>
        <thead>
          {table.getHeaderGroups().map(headerGroup => (
            <tr key={headerGroup.id}>
              {headerGroup.headers.map(header => (
                <th key={header.id} className="px-4 py-2 text-left sticky top-0 bg-white">
                  {flexRender(header.column.columnDef.header, header.getContext())}
                </th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody style={{ height: `${virtualizer.getTotalSize()}px`, position: 'relative' }}>
          {virtualizer.getVirtualItems().map(virtualRow => {
            const row = rows[virtualRow.index];
            return (
              <tr
                key={row.id}
                style={{
                  position: 'absolute',
                  top: 0,
                  transform: `translateY(${virtualRow.start}px)`,
                  width: '100%',
                }}
              >
                {row.getVisibleCells().map(cell => (
                  <td key={cell.id} className="px-4 py-2">
                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
                  </td>
                ))}
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}

// TanStack Table — server-side pagination with manualPagination
function ServerSideTable() {
  const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 25 });
  const [sorting, setSorting] = useState<SortingState>([]);

  const { data, isLoading } = useQuery({
    queryKey: ['packages', pagination, sorting],
    queryFn: () => fetch(
      `/api/packages?page=${pagination.pageIndex}&limit=${pagination.pageSize}` +
      (sorting.length ? `&sort=${sorting[0].id}&order=${sorting[0].desc ? 'desc' : 'asc'}` : '')
    ).then(r => r.json()),
  });

  const table = useReactTable({
    data: data?.rows ?? [],
    columns,
    pageCount: data?.pageCount ?? -1,
    state: { pagination, sorting },
    onPaginationChange: setPagination,
    onSortingChange: setSorting,
    getCoreRowModel: getCoreRowModel(),
    manualPagination: true,    // Disable client-side pagination
    manualSorting: true,       // Disable client-side sorting
  });

  if (isLoading) return <TableSkeleton />;

  return <StandardTableLayout table={table} />;
}