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 ids | - |
| backgroundColor | Sets background color of the table when column or header is sticky. | - |
| 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 OR a function which can be used to get ID form given rowData. If not provided, index will be used as ID. | - |
| layout | Sets table layout css property | - |
| noDataFound | Empty data table informative label | No data found |
| onExpand | Table row expand callback | - |
0-10 of 23
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
Table with selected, active states along with sticky column
| 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": {}
}
Small Size
| Action | Input | Parameters | Expected |
|---|---|---|---|
| Convert Date | 2014-06-11 10:07:42.000 | result_format=timestamp | date1 |
| Convert Date | 20140611 100742 | exclude_millis=yes | date2 |
| Should Be Equal | date1 | date2 |