~/tablv2.4.1
0starsGet started

v2.4 · a headless table for React

A table lighter than your favicon

Sorting, grouping, virtualisation and types — without a single style. tabl gives you the data and the behaviour, you draw the markup.

npm i tabl
  • 4 KB gzip
  • TypeScript
  • 0 dependencies
  • MIT
$

// playground

Try it without installing

Every toggle is one option in code. On the left — what you write, on the right — what you get.

  1. Sorting

    sort: { by: "size" } — one line, and the column is sorted. Stable, with any comparator.

  2. Grouping

    groupBy: "type" — rows gather under headings with a count. Totals are computed for you.

  3. Zebra

    view.zebra — even rows are tinted, a long table is easier to read.

  4. Compact

    density: "compact" — a third more rows in the same viewport. Still your markup.

table.tsx
import { useTable } from "tabl"

const table = useTable({
  data,
  columns: ["name", "type", "size", "updated"],
})

return <Table {...table.props} />
result
nametypesize, kbupdated
invoice-0412.pdfpdf412today
logo.svgimage18yesterday
report-q3.xlsxsheet12903 days
cover.webpimage240a week
contract.pdfpdf980a month
budget.xlsxsheet2100a month

// features

Everything a table needs. Nothing it doesn't

Six things you usually write yourself and then fix. Here they are written once.

Virtualisation out of the box

48,000 rows render like 12: only what is in the viewport is in the DOM. Switches on by itself once there are more than two hundred rows.

Sorting

By any column, with a custom comparator and a stable order.

The theme is yours

Not a single style inside. Light, dark, branded — the table picks up any of them.

Types inferred from data

Columns know the cell type: the editor will hint, TypeScript will check.

Grouping

One key — and rows gather into collapsible groups with totals.

4 KB and zero dependencies

Smaller than an icon. Tree-shaking: you take only what you use.

// comparison

Smaller means faster

Gzipped size of headless tables for React. Data from bundlephobia on the day of the 2.4 release.

gzip, minimal import

  • tabl2.4.10.0 KB
  • react-table8.x0.0 KB
  • ag-grid community31.x0 KB
  • mui data grid7.x0 KB
    4.1 KB includes
  • sorting
  • grouping
  • virtualisation
  • column types
  • SSR
  • row selection

Measured with `import { useTable }` and no styles. The full tabl feature set — 6.8 KB.

// community

Made by 214 people from 31 countries

Every pull request is reviewed by two maintainers, every release passes 1,900 tests. Join in — there is always a good first issue.

  • 0contributors
  • 0stars on GitHub
  • 0MM installs a month
0+0 this month

stars on GitHub · 12 months

// version history

What changed

Semantic versions, breaking changes are marked. The full list is in CHANGELOG.md.

Full changelog →
    • rows of different heights without measuring ahead — ResizeObserver as they appear
    • `table.scrollTo(rowIndex)` for programmatic scrolling
    • fixed jitter on fast trackpad scrolling
    • `groupBy` accepts a function, not only a key
    • `sum`, `avg`, `count` aggregates in the group row
    • `onGroupToggle` events with state
    • a column can be a function of the row — the type is inferred automatically
    • `ColumnDef<T>` is exported for external definitions
    • the types documentation is rewritten
    • the styled `<Table>` component is removed — only the `useTable` hook
    • `onSort` now receives `{ by, dir }` instead of two arguments
    • bundle size 4.1 KB instead of 11
    • React 19 and Server Components

One star — one more maintainer

GitHub stars are the only metric by which a project gets into curated lists and finds people. If tabl saved you an evening — give a minute back.