Data display

Table

Columns are plain serialisable data — no render functions — so a column definition is identical in all four frameworks. Custom cell content is a per-framework slot keyed by column id, which is the one place a shared API genuinely cannot work: a `cell` returning React JSX cannot render in Vue.

data-scope="table"@tanstack/table-core

What you get for free

Keyboard-operable sorting — v0's <th> had a bare click handler with no tabindex, role or Enter handler
aria-sort on the header cell
Windowed page buttons — v0 rendered one per page, 50 of them for 500 rows
A page-size changer that works; v0's dropdown was always empty
Sorting that does not mutate the array you passed

Usage

ReactVueSvelteAngular

<Table
  data={people}
  columns={[
    { id: "name", header: "Name", accessor: "name", sortable: true },
    { id: "age", header: "Age", accessor: "age", align: "end" },
  ]}
  renderCell={{ name: row => <strong>{row.name}</strong> }}
  showSizeChanger
/>

<Table :data="people" :columns="columns" show-size-changer>
  <template #cell:name="{ row }"><strong>{{ row.name }}</strong></template>
</Table>

<Table data={people} {columns} showSizeChanger cells={{ name: nameCell }} />

{#snippet nameCell(row)}<strong>{row.name}</strong>{/snippet}

<ck-table [data]="people" [columns]="columns" showSizeChanger>
  <ng-template ckTableCell="name" let-row>
    <strong>{{ row.name }}</strong>
  </ng-template>
</ck-table>

Props

Prop	Type	Default	Notes
`data`	T[]	—	Rows. v0 called this dataSource.
`columns`	TableColumn<T>[]	—	id, header, accessor, sortable.
`getRowId`	(row, i) => string	—	v0 took a `rowKey` field name.
`density`	"small" \| "middle" \| "large"	`"middle"`	Row padding. v0 called this `size`.
`bordered / striped / hoverable / stickyHeader`	boolean	—	Styling flags.
`loading`	boolean	`false`	Overlays a spinner without dropping rows.
`sorting / onSortingChange`	SortingState	—	Controlled sorting.
`pagination`	boolean	`true`	Pass false to render every row.
`pageSize`	number	`10`	Rows per page.
`manualPagination / rowCount`	boolean / number	—	Server-side paging.
`showSizeChanger`	boolean	`false`	Rows-per-page Select.

Prop names are identical in all four frameworks. Only two-way binding differs, and each framework uses its own idiom over the same underlying prop.

Migrating from react-ui-toolkit

v0	v1	Notes
`dataSource`	`data`
`columns[].title / .dataIndex / .key`	`.header / .accessor / .id`
`columns[].render`	`a per-framework cell slot`
`columns[].sorter`	`sortable + optional sortFn`
`rowKey: keyof T`	`getRowId: (row, i) => string`
`size`	`density`
`scroll.x / scroll.y`	`--ck-table-min-width / --ck-table-max-height`
`pagination: { current, pageSize, total, onChange }`	`pagination: boolean + pageSize / paginationState / onPaginationChange`