Structured data in rows and columns
Cells are flexible and can hold text, icons, form inputs, or action buttons. Supports striped rows for readability and a compact size for denser layouts.
Default
| Name | Role | |
|---|---|---|
Alice Chen | Designer | alice@example.com |
Bob Rivera | Engineer | bob@example.com |
Carol Osei | Product Manager | carol@example.com |
Dan Petrov | Data Analyst | dan@example.com |
Compact
| Name | Role | |
|---|---|---|
Alice Chen | Designer | alice@example.com |
Bob Rivera | Engineer | bob@example.com |
Carol Osei | Product Manager | carol@example.com |
Dan Petrov | Data Analyst | dan@example.com |
Striped
| Name | Role | |
|---|---|---|
Alice Chen | Designer | alice@example.com |
Bob Rivera | Engineer | bob@example.com |
Carol Osei | Product Manager | carol@example.com |
Dan Petrov | Data Analyst | dan@example.com |
With icons
| Name | Department | Status |
|---|---|---|
personAlice Chen | Design | check_circle |
personBob Rivera | Engineering | check_circle |
personCarol Osei | Product | cancel |
With controls
| select | Name | Role | Actions | |
|---|---|---|---|---|
personAlice Chen | Designer | alice@example.com | EditDelete | |
personBob Rivera | Engineer | bob@example.com | EditDelete | |
personCarol Osei | Product Manager | carol@example.com |
With inputs
| Setting | Value |
|---|---|
Display name | |
Email address | |
Location |
// From the npm package
import { Table } from 'rift-ds/components/Table/Table';
// Or as source you own, via the shadcn CLI
npx shadcn@latest add https://rift-ds.com/r/table.json