# Table
> Generated from table.contract.json — do not edit by hand.

A data grid — results, leaderboard, participant/admin list — rendered through the shared DataTable.

Tier: **composite-antd**. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.

Surfaces: editor, dashboard, admin.

## Props
| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `columns` | Column[] | `[]` | dataIndex / key / title / sorter / filter / fixed / width |
| `dataSource` | object[] | `[]` | row data |
| `rowKey` | string | fn | `—` | unique row id |
| `pagination` | object | false | `—` | brand-outlined page + N/page size changer |
| `reorderable` | boolean | `false` | drag headers to reorder |
| `freezable` | boolean | `false` | right-click header to freeze one column |

## Visual standard (measured)
- Container: white surface, 1px #E3E3E3 border, radius 8 — wraps the whole grid
- Header: white #fff + secondary-grey #8A8A8A labels (row 60px)
- Body: horizontal dividers #E3E3E3 only, no zebra; row 60px
- Radius: 8
- Cell padding: 16 (literal)
- Row hover: gray-30 #F1F1F1
- Customisations (DS V3): sorting (single arrow) · filtering (checklist/range) · reorder · resize · rows-per-page · freeze · add/remove columns

## When to use
- **DataTable** — any rows×columns grid — results, leaderboard, admin list
- **never a raw <Table>** — a bare antd Table restyled per call site is the drift this replaces

White header (not antd grey #fafafa), single-arrow sort (not dual caret), Phosphor icons, tokenised colour. The look is theme-driven; call sites pass data + columns only.