Table
Display data in rows and columns
Introduction
The Table component displays structured data in rows and columns, making it easier for users to scan, compare, and analyze information. Tables are well suited for tabular data such as lists of users, items, transactions, or any content where values share a common set of attributes.
Bifrost tables support sorting, selectable rows, expandable rows, and vertical layouts. They are responsive by default and adapt to smaller screens.
Variants
- Standard: A horizontal table with column headers on top. Best for most use cases where you display a list of records with shared attributes.
- Vertical: A vertical layout where headers are placed in the first column. Useful for displaying the properties of a single item, or comparing a small number of items side by side.
- Two-dimensional: Combines a top header row and a left header column. Often used for comparison matrices, such as feature comparisons across plans.
Interactive demo
Try the interactive demo below to explore different table configurations.
| Ticket | Subject | Priority | Status |
|---|---|---|---|
| #4521 | Login fails after update | Medium | Open |
| #4522 | Cannot export PDF | High | In progress |
| #4523 | Password reset email missing | Low | Resolved |
Best practices
- Sortable columns: Make columns sortable when users are likely to want to reorder the data, like name, date, or status.
- Expandable rows: Use expandable rows to show additional detail without cluttering the main view.
- Responsive design: Ensure tables are responsive and usable on smaller screens. Consider using a vertical layout or hiding less important columns on mobile.
- Clear headers: Use clear and concise column headers that accurately describe the content of each column.
Example
Use short, descriptive column headers and keep each cell focused on a single piece of information. This makes the table easy to scan.
Avoid writing long and descriptive headers with multiple values. Split the data across dedicated columns instead so users can scan and compare values.
Related components
Tables can be combined with several other Bifrost components to support filtering, navigation, and detail views. See the links below for more information.