Prism Docs

Data Table

Displays data in rows and columns with sorting, pagination, and custom templates.

Financial Ledger

Transaction ID Date Amount Status
TX-1001 2023-01-15 $1,500.00 Completed
TX-1002 2023-01-16 -$450.50 Refund
TX-1003 2023-01-17 $3,200.00 Completed

Team Roster

Employee Role Status Actions
S
Sarah Connor
 Frontend Lead Active
J
John Doe
 Product Designer Offline
J
Jane Smith
 DevOps Engineer Active

Inventory

Preview Product Category Stock Price
Product Gaming Laptop Electronics 12 1299
Product Mech Keyboard Accessories 0 149
Product Wireless Mouse Accessories 55 89

Single Selection

Selected:None
Name Role Status
Alice Johnson Engineer Active
Bob Williams Designer Active
Charlie Brown Manager Offline
David Smith Developer Active
Eve White Product Owner Active

Multiple Selection

Selection Count:0
Name Role Status
Alice Johnson Engineer Active
Bob Williams Designer Active
Charlie Brown Manager Offline
David Smith Developer Active
Eve White Product Owner Active

Empty State

Name Role Status
Temporary Data Tester Active

Component API

NameTypeDefaultDescription
dataT[][]Array of data to display in the table.
columnsPrismColumn<T>[][]Column definitions including keys, headers, and optional templates.
stripedbooleanfalseEnable alternating row background colors.
gridlinesbooleanfalseShow borders between cells.
size'sm' | 'md' | 'lg''md'Size of the table rows and padding.
widthstring'100%'Width of the table container (e.g., "100%", "500px").
paginatorbooleanfalseEnable pagination controls.
rowsnumber10Number of rows per page when paginator is enabled.
selectionMode'single' | 'multiple'nullEnable row selection.
selectionT | T[]nullTwo-way binding for selected row(s).
dataKeystringnullProperty to uniquely identify a row (required for selection).