Data tables are everywhere—dashboards, data exploration, search results—yet hand-rolling sortable columns, pagination, search, and expandable rows forces you to wire state manually across scattered components and reinvent the interaction patterns. Inline tables accumulate Tailwind class-soup, break when a designer touches tokens, and leave agents with no stable handles to read/write rows, sort state, or pagination without DOM scraping.

Table is a controlled compound component that owns sort state (sortKey, sortDir), pagination (page), and search query across Table.Head, Table.Body, Table.Row, Table.Cell, Table.Column, Table.Pagination, Table.Search, and row-detail Table.Tray/Table.RowTray. All subcomponents expose stable data-react-fancy-table-* attributes; Table.Row supports controllable expansion (expanded, onExpandedChange) and a collapsible detail tray via the tray prop.

Import from @particle-academy/react-fancy, wrap your table in <Table>, use <Table.Column sortKey="name" label="Name"> to enable sort toggles, drop in <Table.Search /> and <Table.Pagination total={count} /> to expose pagination and search, and pass a detail tray={<Table.Tray>...</Table.Tray>} to <Table.Row> for expandable rows. Call useTable() from within the Table tree to read/write sortKey, page, and searchQuery for agent operability.