Table
A high-performance, customizable table component for efficiently displaying large datasets.
Basic
A table displays data in rows and columns, allowing navigation via directional keys. It can optionally support row selection and sorting.
Installation
If you hit any issues, make sure you check out the installation guide here for more information.
Composed Components
When you install this component via the CLI, it automatically loads all composed components, so you don’t need to add them individually.
The Table comes packed with several components to enhance functionality and provide a seamless experience.
Manual Installation
Make sure you also install the composed components and the required packages for the component to function properly.
Anatomy
Bulk Actions
Tables may require bulk actions for handling multiple entries at once.
# | Title | Author | Genre | Published | |
|---|---|---|---|---|---|
| 1 | To Kill a Mockingbird | Harper Lee | Fiction | 1960 | |
| 2 | 1984 | George Orwell | Dystopian | 1949 | |
| 3 | The Great Gatsby | F. Scott Fitzgerald | Fiction | 1925 | |
| 4 | The Catcher in the Rye | J.D. Salinger | Fiction | 1951 | |
| 5 | Pride and Prejudice | Jane Austen | Romance | 1813 | |
| 6 | The Lord of the Rings | J.R.R. Tolkien | Fantasy | 1954 | |
| 7 | Harry Potter and the Sorcerer's Stone | J.K. Rowling | Fantasy | 1997 |
Drag and Drop
Similar to GridList, tables can also support drag and drop functionality.
Sorting
Tables can be made sortable. Activate sorting by clicking on a column header.
Resizable
Tables can be made resizable. To enable resizing, set the allowResize prop to true. And to make a column resizable, set the isResizable prop to true on the column.
ID | Name | Email | Age | Role | Band | Status |
|---|---|---|---|---|---|---|
| 1 | Randy Blythe | randy.blythe@example.com | 52 | Vocalist | Lamb of God | Active |
| 2 | Phil Anselmo | phil.anselmo@example.com | 55 | Vocalist | Pantera | Active |
| 3 | George Fisher | george.fisher@example.com | 53 | Vocalist | Cannibal Corpse | Active |
| 4 | Corey Taylor | corey.taylor@example.com | 50 | Vocalist | Slipknot | Active |
| 5 | Trevor Strnad | trevor.strnad@example.com | 41 | Vocalist | The Black Dahlia Murder | Inactive |
| 6 | Chuck Schuldiner | chuck.schuldiner@example.com | 34 | Vocalist | Death | Deceased |
| 7 | Mitch Lucker | mitch.lucker@example.com | 28 | Vocalist | Suicide Silence | Deceased |
Href
To create a clickable link within a table row, use the href prop.
Bleed
Use the bleed prop to make the table stretch to the edges of its container. This is especially useful in layouts like sidebars, where you want the table to align with the container's outer padding.
With Card
When placing a table inside a card, you can use bleed and adjust the --spacing variable to align with the card’s padding, allowing the table to span the full width.
See the full demo at Sidebar 15.