Table

The Table component is used to show information from a data set.

View source code

Table

columns
```
TableColumn<T>[]
```
The columns to display.
data
```
T[]
```
The data to display.
className
```
string
```
className for the element.
defaultSortState
```
SortState
```
Defines the default sort state (direction and column id). Sorting capability is disabled when groupBy is provided.
Default: { direction: 'none', columnId: null, }
emptyState
```
{ title: string; subtitle?: ReactNode; }
```
The content to display if the data is empty.
footer
```
ReactNode
```
The footer of the Table.
getIsRowActive
```
(row: T) => boolean
```
Function to get whether a row is active.
getIsRowCheckable
```
(option: T) => boolean
```
Get whether a given row should be checkable. By default, all options can be checked.
getIsRowDisabled
```
(row: T) => boolean
```
Function to get whether a row is disabled.
getRowId
```
(row: T) => string
```
Function to get a row's unique identifier.
getRowVariant
```
(row: T) => TableVariant
```
Function to get the row's visual style.
groupBy
```
(row: T) => string
```
Function to group row together. Disable sorting capability.
maxHeight
```
string | number
```
The maximum height of the Table (will allow the rows to be scrollable).
nextSortDirection
```
NextSortDirection
```
Defines the direction following each sort direction. Sorting capability is disabled when groupBy is provided.
Default: { // when you click on an unsorted column, it goes to Descending order none: 'descending', descending: 'ascending', ascending: 'none', }
onAllRowsSelectionChange
```
(rows: T[], rowIds: string[], isChecked: boolean) => void
```
Handler that is called when the top checkbox state changes.
onRowClick
```
(row: T) => void
```
Handler that is called when a row is clicked.
onRowSelectionChange
```
(row: T, rowId: string, isChecked: boolean) => void
```
Handler that is called when the selection changes.
renderGroupedRowHeader
```
(value: string, aggregatedRows: T[]) => ReactNode
```
Render function for grouped option. If not provided, the key returned by groupBy will be displayed
rowHeight
```
"compact" | "normal"
```
The size of the rows.
Default: normal
selectedRowIds
```
string[]
```
The current checked items in the Table.

TableMini

columns
```
TableMiniColumn<T>[]
```
The columns to display.
data
```
T[]
```
The data to display.
getRowId
```
(row: T) => string
```
Function to get a row's unique identifier.
className
```
string
```
className for the element.

Table

The Table component is used to show information from a data set.

View source code

Table

columns
```
TableColumn<T>[]
```
The columns to display.
data
```
T[]
```
The data to display.
className
```
string
```
className for the element.
defaultSortState
```
SortState
```
Defines the default sort state (direction and column id). Sorting capability is disabled when groupBy is provided.
Default: { direction: 'none', columnId: null, }
emptyState
```
{ title: string; subtitle?: ReactNode; }
```
The content to display if the data is empty.
footer
```
ReactNode
```
The footer of the Table.
getIsRowActive
```
(row: T) => boolean
```
Function to get whether a row is active.
getIsRowCheckable
```
(option: T) => boolean
```
Get whether a given row should be checkable. By default, all options can be checked.
getIsRowDisabled
```
(row: T) => boolean
```
Function to get whether a row is disabled.
getRowId
```
(row: T) => string
```
Function to get a row's unique identifier.
getRowVariant
```
(row: T) => TableVariant
```
Function to get the row's visual style.
groupBy
```
(row: T) => string
```
Function to group row together. Disable sorting capability.
maxHeight
```
string | number
```
The maximum height of the Table (will allow the rows to be scrollable).
nextSortDirection
```
NextSortDirection
```
Defines the direction following each sort direction. Sorting capability is disabled when groupBy is provided.
Default: { // when you click on an unsorted column, it goes to Descending order none: 'descending', descending: 'ascending', ascending: 'none', }
onAllRowsSelectionChange
```
(rows: T[], rowIds: string[], isChecked: boolean) => void
```
Handler that is called when the top checkbox state changes.
onRowClick
```
(row: T) => void
```
Handler that is called when a row is clicked.
onRowSelectionChange
```
(row: T, rowId: string, isChecked: boolean) => void
```
Handler that is called when the selection changes.
renderGroupedRowHeader
```
(value: string, aggregatedRows: T[]) => ReactNode
```
Render function for grouped option. If not provided, the key returned by groupBy will be displayed
rowHeight
```
"compact" | "normal"
```
The size of the rows.
Default: normal
selectedRowIds
```
string[]
```
The current checked items in the Table.

TableMini

columns
```
TableMiniColumn<T>[]
```
The columns to display.
data
```
T[]
```
The data to display.
getRowId
```
(row: T) => string
```
Function to get a row's unique identifier.
className
```
string
```
className for the element.