data · Normal DOM only

Table

Generic <Table<T>> with sortable headers, optional row selection, custom cell render, sticky header.

Table is the low-level surface for tabular data — pass columns + data, get a styled HTML table back. For larger lists with built-in search and pagination see DataTable; for kanban-style data see Kanban.

Install

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

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

Examples

Sortable + selectable

Name	Role	Status	Deals
EEve Tanaka	Marketing	won	21
AAlice Cooper	Founder	won	12
CCarol Smith	Designer	open	8
BBob Lee	Engineer	open	4
DDaniel Park	Sales	lost	1

0 selected

tsx
<Table columns={…} data={…} selectable sort={…} onSortChange={…} />

Anatomy

columns[].renderOptional custom cell renderer — receives the row and the index.

columns[].sortableClick the header to toggle asc → desc → off.

selectableAdds a leading checkbox column + bulk-select header.

onRowClickWhole-row click handler; hover highlight follows.

Guidelines

✓

Pass stable getRowKey.React reconciliation by index breaks selection state when rows reorder.

✓

Pin numeric columns with align="end".Right-aligned numbers stack visually for fast scanning.

Render >100 rows directly through Table.Use DataTable (paginates) or VirtualList for long data.