Table component
Figma Component
Tables display information in a way that's easy to scan, so that users can look for patterns and insights.
| ID | Status | Name | Description |
|---|---|---|---|
| 1 | danger | John 1 Doe | Lorem ipsum dolor sit amet, consectetur adipiscing elit |
| 2 | info | John 2 Doe | Lorem ipsum dolor sit amet, consectetur adipiscing elit |
| 3 | success | John 3 Doe | Lorem ipsum dolor sit amet, consectetur adipiscing elit |
| 4 | warning | John 4 Doe | Lorem ipsum dolor sit amet, consectetur adipiscing elit |
| 5 | danger | John 5 Doe | Lorem ipsum dolor sit amet, consectetur adipiscing elit |
0-5 of 45
Properties
| Name | Description | Default |
|---|---|---|
| active | Active table rows | - |
| columns required | Table columns | - |
| data required | Table data | - |
| expandable | Enable expandable table rows by indicating rows that can be expanded Return list of new rows to make a individual row expandable | - |
| expanded | Expanded table rows | - |
| keyId | Data key to be used as row id | - |
| layout | Sets table layout css property | - |
| noDataFound | Empty data table informative label | No data found |
| onExpand | Table row expand callback | - |
| onResize | Callback which is called on resize event and returns resize state | - |
0-10 of 21
Note: This table does not include native DOM and React properties like `onClick`, `ref`, `id`, `aria-label` (and many others) supported by this component.
Empty
| ID | Status | Name | Description | ||
|---|---|---|---|---|---|
No data found | |||||
States
| ID | Status | Name | Description | |
|---|---|---|---|---|
| 1 | danger | John 1 Doe | Lorem ipsum dolor sit amet, consectetur adipiscing elit | |
| 2 | info | John 2 Doe | Lorem ipsum dolor sit amet, consectetur adipiscing elit | |
| 3 | success | John 3 Doe | Lorem ipsum dolor sit amet, consectetur adipiscing elit | |
| 4 | warning | John 4 Doe | Lorem ipsum dolor sit amet, consectetur adipiscing elit | |
| 5 | danger | John 5 Doe | Lorem ipsum dolor sit amet, consectetur adipiscing elit |
0-5 of 45
{
"selected": [
1
],
"active": [
1,
4,
6,
7,
10,
14
]
}
Filtering
| 45 | danger | John 45 Doe | Lorem ipsum dolor sit amet, consectetur adipiscing elit | |
| 44 | warning | John 44 Doe | Lorem ipsum dolor sit amet, consectetur adipiscing elit | |
| 41 | danger | John 41 Doe | Lorem ipsum dolor sit amet, consectetur adipiscing elit | |
| 40 | warning | John 40 Doe | Lorem ipsum dolor sit amet, consectetur adipiscing elit | |
| 37 | danger | John 37 Doe | Lorem ipsum dolor sit amet, consectetur adipiscing elit |
0-5 of 23
Actions
| ID | Status | Name | Description | |
|---|---|---|---|---|
| rowData.id | John 1 Doe | Lorem ipsum dolor sit amet, consectetur adipiscing elit | ||
| rowData.id | John 2 Doe | Lorem ipsum dolor sit amet, consectetur adipiscing elit | ||
| rowData.id | John 3 Doe | Lorem ipsum dolor sit amet, consectetur adipiscing elit | ||
| rowData.id | John 4 Doe | Lorem ipsum dolor sit amet, consectetur adipiscing elit | ||
| rowData.id | John 5 Doe | Lorem ipsum dolor sit amet, consectetur adipiscing elit |
0-5 of 45
Column Visibility
| ID | Status | Name | Description |
|---|---|---|---|
| 1 | danger | John 1 Doe | Lorem ipsum dolor sit amet, consectetur adipiscing elit |
| 2 | info | John 2 Doe | Lorem ipsum dolor sit amet, consectetur adipiscing elit |
| 3 | success | John 3 Doe | Lorem ipsum dolor sit amet, consectetur adipiscing elit |
| 4 | warning | John 4 Doe | Lorem ipsum dolor sit amet, consectetur adipiscing elit |
| 5 | danger | John 5 Doe | Lorem ipsum dolor sit amet, consectetur adipiscing elit |
0-5 of 45
{
"columnVisibility": [
{
"id": "id",
"title": "ID",
"required": true,
"width": 80
},
{
"id": "state",
"title": "Status",
"groupName": "Info"
},
{
"id": "content",
"title": "Content",
"groupName": "Info",
"columns": [
{
"id": "name",
"title": "Name"
},
{
"id": "description",
"title": "Description",
"maxWidth": 250,
"ellipsis": true
}
]
}
]
}
Expandable
| ID | Status | Name | Description | |
|---|---|---|---|---|
| 1 | danger | John 1 Doe | Lorem ipsum dolor sit amet, consectetur adipiscing elit | |
| 2 | info | John 2 Doe | Lorem ipsum dolor sit amet, consectetur adipiscing elit | |
| 3 | success | John 3 Doe | Lorem ipsum dolor sit amet, consectetur adipiscing elit | |
| 4 | warning | John 4 Doe | Lorem ipsum dolor sit amet, consectetur adipiscing elit | |
| - | - | - | - | |
| -- | -- | -- | -- | |
| 5 | danger | John 5 Doe | Lorem ipsum dolor sit amet, consectetur adipiscing elit |
0-5 of 45
{
"expanded": [
3
]
}
Resizable
| ID | Status | Name | Description |
|---|---|---|---|
| 1 | danger | John 1 Doe | Lorem ipsum dolor sit amet, consectetur adipiscing elit |
| 2 | info | John 2 Doe | Lorem ipsum dolor sit amet, consectetur adipiscing elit |
| 3 | success | John 3 Doe | Lorem ipsum dolor sit amet, consectetur adipiscing elit |
| 4 | warning | John 4 Doe | Lorem ipsum dolor sit amet, consectetur adipiscing elit |
| 5 | danger | John 5 Doe | Lorem ipsum dolor sit amet, consectetur adipiscing elit |
0-5 of 45
{
"resize": {}
}