Data Table
ProA full-featured table for displaying structured data with sortable columns, row selection via checkboxes, pagination, and optional row actions. Supports striped rows, sticky headers, and responsive horizontal scrolling. The primary component for listing, comparing, and managing records.
8 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | Standard data table with sortable headers and pagination. | Use for displaying tabular data with more than 5 rows — user lists, orders, records. |
| Compact | Dense table with reduced row height for data-heavy views. | Use for technical data, logs, or admin views where density matters. |
| With Selection |
Usage Guidelines
Do
Use proper <table>, <thead>, <tbody>, <th>, and <td> elements.
Don't
Use tables for layout — only for actual tabular data.
Do
Add scope="col" to column headers and scope="row" to row headers.
Don't
Hide important columns on mobile without providing an alternative view.
Do
Indicate sort direction with aria-sort="ascending" or "descending" on sorted <th>.
Don't
Omit pagination for large datasets — never render 1000+ rows.
Code
Design Tokens
Accessibility
- Use native <table> elements with proper <thead>, <tbody>, <th>, and <td>.
- Column headers must have scope="col"; row headers use scope="row".
- Sorted columns use aria-sort="ascending", "descending", or "none".
- Selectable rows use checkboxes with aria-label="Select [row identifier]".
- Pagination controls should be labelled with aria-label="Table pagination".