data-table

npx shadcn@latest add @design/data-table

Memoize columns and data with useMemo in the consumer. Sorting is opt-in: call column.toggleSorting() in a column's header renderer. For multiple tables on one page, label each region.

EmailRole
Alice Andersenalice@example.comAdmin
Bob Brennanbob@example.comEditor
Carol Chencarol@example.comViewer
David Diallodavid@example.comMember
Eva Erikssoneva@example.comOwner
Frank Fischerfrank@example.comAdmin
Grace Garciagrace@example.comEditor
Hans Hoffmannhans@example.comViewer
Ingrid Ivanovaingrid@example.comMember
James Johanssonjames@example.comOwner
Page 1 of 3