data · Normal DOM only

DataTable

Higher-level Table — built-in search, client-side sort, page size selector, selection counter, toolbar slot.

Use DataTable for typical CRM lists (deals, contacts, tasks) where the user expects search + pagination out of the box. For raw data or server-driven pagination, drop down to Table.

Install

Pull from the workspace packages (already available if you ran pnpm add):

ts
import { DataTable } from '@8maverik8/twenty-design';

Examples

87-row deals table

Deal	Stage	Owner	Amount
ADeal 1 — Acme	new	Alice	$1,000
BDeal 2 — OAPPS	qualified	Bob	$1,137
CDeal 3 — Notion	won	Carol	$1,274
DDeal 4 — Stripe	lost	Dan	$1,411
EDeal 5 — Vercel	new	Eve	$1,548
ADeal 6 — Acme	qualified	Alice	$1,685
BDeal 7 — OAPPS	won	Bob	$1,822
CDeal 8 — Notion	lost	Carol	$1,959
DDeal 9 — Stripe	new	Dan	$2,096
EDeal 10 — Vercel	qualified	Eve	$2,233

1–10 of 87

Per page

tsx
<DataTable columns={…} data={…} searchableKeys={['name','owner']} selectable />

Guidelines

✓

Pass searchableKeys for the columns the user actually searches by.Searching by id is rarely what the user wants — name, owner, email are typical.

Use DataTable for >1k rows in the browser.Move sort + filter to the server and feed back already-paginated data.