Reference | Client | Role | Status | Amount |
|---|---|---|---|---|
PRJ-001 | Riverside Studio | Designer | Confirmed | $180 |
PRJ-002 | Northgate Labs | Developer | Pending | $240 |
PRJ-003 | Harbour Media | Copywriter | Confirmed | $150 |
PRJ-004 | Eastfield Group | Designer | Completed | $210 |
PRJ-005 | Southbank Digital | Consultant | Pending | $320 |
<DataTable.Root
columns={columns}
data={projects}
columnPinning={{ start: ["reference"], end: ["amount"] }}
/>;The edges are logical rather than physical: start and end follow the
reading direction, so the same table freezes the right columns under RTL.
Naming one edge is enough — the other defaults to empty.
Pinned columns stack, so several per side work. An edge rule marks where the frozen part ends — without it the two run together mid-scroll.