Table
Lay out your data grid-style, like setting dishes on a dinner table clear and organized, perfect for comparison and review.
Installation
CLI
Manual
Basic
View
Code
# | Name | Type | Level |
---|---|---|---|
1 | Charizard | Fire, Flying | 67 |
2 | Blastoise | Water | 56 |
3 | Venusaur | Grass, Poison | 83 |
4 | Pikachu | Electric | 100 |
Bulk Actions
View
Code
# | Name | Type | Level | |
---|---|---|---|---|
1 | Charizard | Fire, Flying | 67 | |
2 | Blastoise | Water | 56 | |
3 | Venusaur | Grass, Poison | 83 | |
4 | Pikachu | Electric | 100 |
selected: []
Drag and Drop
Similar to GridList and ListBox, tables can also support drag and drop functionality.
View
Code
# | Name | Type | Level | ||
---|---|---|---|---|---|
1 | Charizard | Fire, Flying | 67 | ||
2 | Blastoise | Water | 56 | ||
3 | Venusaur | Grass, Poison | 83 | ||
4 | Pikachu | Electric | 100 |
Sorting
View
Code
Title | Director | Producer | Release Date | |
---|---|---|---|---|
Filtering
View
Code
Resizable
View
Code
# | Name | Type | Level |
---|---|---|---|
1 | Charizard | Fire, Flying | 67 |
2 | Blastoise | Water | 56 |
3 | Venusaur | Grass, Poison | 83 |
4 | Pikachu | Electric | 100 |
Href
To create a clickable link within a table row, use the href
prop.
<Table.Row href='/collections/table-demo' />