Table
Lightweight data table component with declarative column definitions.
$ npm install @bloc-ui/table
Basic usage
Default
Data-driven table using declarative column definitions. Pass any object array to [data].
| Name | Role | |
|---|---|---|
| Alice Johnson | alice@example.com | Admin |
| Bob Smith | bob@example.com | Editor |
| Carol White | carol@example.com | Viewer |
| Dave Brown | dave@example.com | Editor |
| Eve Davis | eve@example.com | Admin |
| Frank Miller | frank@example.com | Viewer |
| Grace Lee | grace@example.com | Editor |
| Henry Wilson | henry@example.com | Viewer |
| Iris Chen | iris@example.com | Admin |
States
Empty data
Rendered when [data] is an empty array.
| Name | Role |
|---|
Variants
Striped
Alternating row backgrounds via [striped].
| Name | |
|---|---|
| Alice Johnson | alice@example.com |
| Bob Smith | bob@example.com |
| Carol White | carol@example.com |
| Dave Brown | dave@example.com |
| Eve Davis | eve@example.com |
| Frank Miller | frank@example.com |
| Grace Lee | grace@example.com |
| Henry Wilson | henry@example.com |
| Iris Chen | iris@example.com |
Bordered
Cell borders via [bordered].
| Name | |
|---|---|
| Alice Johnson | alice@example.com |
| Bob Smith | bob@example.com |
| Carol White | carol@example.com |
| Dave Brown | dave@example.com |
| Eve Davis | eve@example.com |
| Frank Miller | frank@example.com |
| Grace Lee | grace@example.com |
| Henry Wilson | henry@example.com |
| Iris Chen | iris@example.com |
Hoverable
Row highlight on hover via [hoverable].
| Name | Role | |
|---|---|---|
| Alice Johnson | alice@example.com | Admin |
| Bob Smith | bob@example.com | Editor |
| Carol White | carol@example.com | Viewer |
| Dave Brown | dave@example.com | Editor |
| Eve Davis | eve@example.com | Admin |
| Frank Miller | frank@example.com | Viewer |
| Grace Lee | grace@example.com | Editor |
| Henry Wilson | henry@example.com | Viewer |
| Iris Chen | iris@example.com | Admin |
Sticky header
Keep header fixed while scrolling via [sticky]. Scroll down to see the header stay in place.
| Name | Role | Status | |
|---|---|---|---|
| Alice Johnson | alice@example.com | Admin | Active |
| Bob Smith | bob@example.com | Editor | Active |
| Carol White | carol@example.com | Viewer | Inactive |
| Dave Brown | dave@example.com | Editor | Active |
| Eve Davis | eve@example.com | Admin | Inactive |
| Frank Miller | frank@example.com | Viewer | Active |
| Grace Lee | grace@example.com | Editor | Active |
| Henry Wilson | henry@example.com | Viewer | Active |
| Iris Chen | iris@example.com | Admin | Active |
| Jack Taylor | jack@example.com | Editor | Inactive |
| Karen Anderson | karen@example.com | Viewer | Active |
| Leo Martinez | leo@example.com | Admin | Active |
| Maria Garcia | maria@example.com | Editor | Active |
| Nathan Rodriguez | nathan@example.com | Viewer | Inactive |
| Olivia Thomas | olivia@example.com | Editor | Active |
Sizes
Small
| Name | |
|---|---|
| Alice Johnson | alice@example.com |
| Bob Smith | bob@example.com |
| Carol White | carol@example.com |
| Dave Brown | dave@example.com |
| Eve Davis | eve@example.com |
| Frank Miller | frank@example.com |
| Grace Lee | grace@example.com |
| Henry Wilson | henry@example.com |
| Iris Chen | iris@example.com |
Large
| Name | |
|---|---|
| Alice Johnson | alice@example.com |
| Bob Smith | bob@example.com |
| Carol White | carol@example.com |
| Dave Brown | dave@example.com |
| Eve Davis | eve@example.com |
| Frank Miller | frank@example.com |
| Grace Lee | grace@example.com |
| Henry Wilson | henry@example.com |
| Iris Chen | iris@example.com |
Custom cell template
Status column with template
Use blocCellDef for custom cell rendering.
| Name | Status | |
|---|---|---|
| Alice Johnson | alice@example.com | Active |
| Bob Smith | bob@example.com | Active |
| Carol White | carol@example.com | Inactive |
| Dave Brown | dave@example.com | Active |
| Eve Davis | eve@example.com | Inactive |
| Frank Miller | frank@example.com | Active |
| Grace Lee | grace@example.com | Active |
| Henry Wilson | henry@example.com | Active |
| Iris Chen | iris@example.com | Active |
Theming
Custom token
Override table colours via CSS custom properties.
| Name | Role | |
|---|---|---|
| Alice Johnson | alice@example.com | Admin |
| Bob Smith | bob@example.com | Editor |
| Carol White | carol@example.com | Viewer |
| Dave Brown | dave@example.com | Editor |
| Eve Davis | eve@example.com | Admin |
| Frank Miller | frank@example.com | Viewer |
| Grace Lee | grace@example.com | Editor |
| Henry Wilson | henry@example.com | Viewer |
| Iris Chen | iris@example.com | Admin |