TanStack Table vs AG Grid vs react-data-grid 2026

import {
  createColumnHelper,
  flexRender,
  getCoreRowModel,
  getSortedRowModel,
  getFilteredRowModel,
  getPaginationRowModel,
  useReactTable,
  type SortingState,
} from "@tanstack/react-table"
import { useState } from "react"

type Package = {
  name: string
  version: string
  downloads: number
  size: number
  license: string
}

const columnHelper = createColumnHelper<Package>()

const columns = [
  columnHelper.accessor("name", {
    header: "Package",
    cell: (info) => (
      <a href={`/packages/${info.getValue()}`} className="font-mono text-blue-500">
        {info.getValue()}
      </a>
    ),
  }),
  columnHelper.accessor("downloads", {
    header: "Weekly Downloads",
    cell: (info) => info.getValue().toLocaleString(),
    sortingFn: "basic",
  }),
  columnHelper.accessor("size", {
    header: "Bundle Size",
    cell: (info) => `${(info.getValue() / 1024).toFixed(1)}KB`,
  }),
  columnHelper.accessor("license", {
    header: "License",
    filterFn: "equals",
  }),
]

function PackageTable({ data }: { data: Package[] }) {
  const [sorting, setSorting] = useState<SortingState>([])
  const [globalFilter, setGlobalFilter] = useState("")

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

  return (
    <div>
      <input
        value={globalFilter}
        onChange={(e) => setGlobalFilter(e.target.value)}
        placeholder="Search packages..."
        className="border rounded px-3 py-2 mb-4"
      />

      <table className="w-full border-collapse">
        <thead>
          {table.getHeaderGroups().map((headerGroup) => (
            <tr key={headerGroup.id}>
              {headerGroup.headers.map((header) => (
                <th
                  key={header.id}
                  className="text-left p-2 border-b bg-gray-50 cursor-pointer select-none"
                  onClick={header.column.getToggleSortingHandler()}
                >
                  {flexRender(header.column.columnDef.header, header.getContext())}
                  {{ asc: " ↑", desc: " ↓" }[header.column.getIsSorted() as string] ?? ""}
                </th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody>
          {table.getRowModel().rows.map((row) => (
            <tr key={row.id} className="hover:bg-gray-50">
              {row.getVisibleCells().map((cell) => (
                <td key={cell.id} className="p-2 border-b">
                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>

      {/* Pagination: */}
      <div className="flex gap-2 mt-4">
        <button
          onClick={() => table.previousPage()}
          disabled={!table.getCanPreviousPage()}
        >
          Previous
        </button>
        <span>Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}</span>
        <button
          onClick={() => table.nextPage()}
          disabled={!table.getCanNextPage()}
        >
          Next
        </button>
      </div>
    </div>
  )
}

import { useVirtualizer } from "@tanstack/react-virtual"

function VirtualTable({ data }: { data: Package[] }) {
  const table = useReactTable({ data, columns, getCoreRowModel: getCoreRowModel() })
  const { rows } = table.getRowModel()
  const parentRef = useRef<HTMLDivElement>(null)

  const virtualizer = useVirtualizer({
    count: rows.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => 35,
    overscan: 20,
  })

  return (
    <div ref={parentRef} style={{ height: 600, overflow: "auto" }}>
      <table>
        <thead>{/* Headers */}</thead>
        <tbody style={{ height: virtualizer.getTotalSize() }}>
          {virtualizer.getVirtualItems().map((virtualRow) => {
            const row = rows[virtualRow.index]
            return (
              <tr
                key={row.id}
                ref={virtualizer.measureElement}
                data-index={virtualRow.index}
                style={{ position: "absolute", transform: `translateY(${virtualRow.start}px)` }}
              >
                {row.getVisibleCells().map((cell) => (
                  <td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
                ))}
              </tr>
            )
          })}
        </tbody>
      </table>
    </div>
  )
}

import { AgGridReact } from "ag-grid-react"
import { ColDef, GridReadyEvent, CellValueChangedEvent } from "ag-grid-community"
import "ag-grid-community/styles/ag-grid.css"
import "ag-grid-community/styles/ag-theme-quartz.css"

const columnDefs: ColDef[] = [
  { field: "name", headerName: "Package", filter: true, sortable: true, pinned: "left" },
  {
    field: "downloads",
    headerName: "Weekly Downloads",
    sortable: true,
    filter: "agNumberColumnFilter",
    valueFormatter: (p) => p.value.toLocaleString(),
    cellStyle: { textAlign: "right" },
  },
  {
    field: "size",
    headerName: "Bundle Size",
    editable: true,  // Inline editing!
    valueFormatter: (p) => `${(p.value / 1024).toFixed(1)}KB`,
  },
  { field: "license", filter: true, floatingFilter: true },
]

function AGGridTable({ rowData }: { rowData: Package[] }) {
  const onCellValueChanged = (event: CellValueChangedEvent) => {
    console.log(`${event.colDef.field} changed: ${event.oldValue} → ${event.newValue}`)
    // Persist the edit
  }

  return (
    <div className="ag-theme-quartz" style={{ height: 500, width: "100%" }}>
      <AgGridReact
        rowData={rowData}
        columnDefs={columnDefs}
        defaultColDef={{ resizable: true, sortable: true }}
        pagination={true}
        paginationPageSize={50}
        onCellValueChanged={onCellValueChanged}
        // Virtualization built-in:
        rowVirtualizationThreshold={500}
        // Row selection:
        rowSelection="multiple"
        // Excel-style copy/paste:
        enableCellTextSelection={true}
        // Column groups:
        suppressColumnVirtualisation={false}
      />
    </div>
  )
}

// Community is free and includes:
// - Sorting, filtering, pagination
// - Inline editing (basic)
// - Row drag-and-drop
// - Themes

// Enterprise adds ($$$ license):
// - groupRowsByColumn (grouping + aggregation)
// - serverSideRowModel
// - setFilter (multi-select filter)
// - masterDetail
// - clipboard (Ctrl+C/V like Excel)
// - rangeSelection (Excel-style cell range selection)

import DataGrid, { Column, textEditor, SelectCellFormatter } from "react-data-grid"
import "react-data-grid/lib/styles.css"

type Row = { id: number; package: string; version: string; downloads: number }

const columns: Column<Row>[] = [
  { key: "id", name: "ID", width: 60, frozen: true },
  {
    key: "package",
    name: "Package",
    editor: textEditor,  // Inline text editing
    frozen: true,
  },
  { key: "version", name: "Version", editor: textEditor },
  {
    key: "downloads",
    name: "Downloads",
    renderCell: ({ row }) => row.downloads.toLocaleString(),
  },
]

function SpreadsheetGrid() {
  const [rows, setRows] = useState<Row[]>(data)

  return (
    <DataGrid
      columns={columns}
      rows={rows}
      onRowsChange={setRows}  // Called when cells are edited
      rowKeyGetter={(row) => row.id}
      // Virtual scrolling built-in — handles 100K+ rows:
      className="rdg-light"
      style={{ height: 500 }}
    />
  )
}

// react-table v7 (old)
import { useTable, useSortBy, useFilters, usePagination } from "react-table"

const columns = useMemo(() => [
  { Header: "Package", accessor: "name" },
  { Header: "Downloads", accessor: "downloads" },
], [])

const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = useTable(
  { columns, data },
  useFilters,
  useSortBy,
  usePagination
)

// @tanstack/react-table v8 (new)
import { createColumnHelper, useReactTable, getCoreRowModel, getSortedRowModel } from "@tanstack/react-table"

const columnHelper = createColumnHelper<Package>()

const columns = [
  columnHelper.accessor("name", { header: "Package" }),
  columnHelper.accessor("downloads", { header: "Downloads" }),
]

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

// Before: TanStack Table with custom editing (complex)
function EditableCell({ getValue, row, column, table }) {
  const [editing, setEditing] = useState(false)
  const [value, setValue] = useState(getValue())

  if (editing) {
    return (
      <input
        value={value}
        onChange={(e) => setValue(e.target.value)}
        onBlur={() => {
          table.options.meta?.updateData(row.index, column.id, value)
          setEditing(false)
        }}
        autoFocus
      />
    )
  }
  return <span onDoubleClick={() => setEditing(true)}>{value}</span>
}

// After: AG Grid with built-in editing (simple)
const columnDefs = [
  { field: "name", editable: true },      // Just set editable: true
  { field: "downloads", editable: true }, // AG Grid handles the rest
]
// Plus onCellValueChanged callback for persistence