Create a nested table from data.
Props
activePath
A path to a the currently active row, to auto expand its parent and show it as selected.
string[]or
undefined
canExpand
Function to decide if a row can take expand, to show a nested table.
(key: string, data: any, depth: number) => boolean
() => true
canExpandMore
Function to decide if a row can expand more, to show more rows in the nested table.
(key: string, count: number) => boolean
() =>
falsecells
A record of table cell definitions.Some built in cells are cells are available for use:
--borderless: A blank placeholder cell with no border, for aligning with the parent cell.--no-pad: A blank placeholder cell, for aligning with the parent cell.--expander: The expander button.
{ [x: string]: TableCell<any, any>; }columns
The order and keys of the cells to be rendered. If omitted, all cells will be rendered.
string[]or
undefined
Object.keys(this.cells)
defaultExpanded
Number of rows to be expanded by default
((key: string, depth: number) => number)or
undefined
expandBy
Number number of rows to display in expansion
number
10
extraCellProps
Pass extra props to cells
((key: string, data: any) => Record<string, any>)or
undefined
getCellData
Sync function for extracting the data from the row. By default, it assumes you passed an array of data as your columns.
((key: string) => any)or
undefined
getNestedCellData
Sync function for extracting the data from the nested row. By default, it assumes you passed an array of data as your columns.
((key: string) => any)or
undefined
getNestedRowKey
Sync function for extracting a key from your nested row data. By default, if the passed rows are strings it will use them directly, otherwise it will warn and use the index.
((row: any, i: number) => string)or
undefined
getNestedRows
Sync function for extracting a list of rows for the nested table
((key: string, count: number) => any[]or
undefined)or
undefined
getRowKey
Sync function for extracting a key from your row data. By default, if the passed rows are strings it will use them directly, otherwise it will warn and use the index.
((row: any, i: number) => string)or
undefined
headless
Do not render header.
boolean
false
linkRowTo
A function to calculate a href from the cell data.
((row: any) => string)or
undefined
loadNested
async function for loading nested data when a row is expanded.
((key: string, data: any) => Promise<void>)or
undefined
loading
Indicates if the loading indicators should be displayed
booleanor
undefined
loadingRows
Specifies the number of rows to display when loading is true. Defaults to 1.
number
1
nestedColumns
The order and keys of the cells to be rendered in a nested table. If omitted, all cells will be rendered.
string[]or
undefined
nestedIdentifier
Passed to cell renderer as
parent.
string
nested-table
nestedRowTakesFocus
If the nested rows should be allowed to take focus.
booleanor
undefined
outerIdentifier
Passed to cell renderer as
parent.
string
table
rowClass
A function to calculate the class or classes of the row from the cellData.
(row: any, key: string) => stringor
Record<string, boolean>or
undefined
() => undefined
rowTakesFocus
If rows should be allowed to take focus
booleanor
undefined
rows
An array of rows to render. Each item in the array is passed to getCellData, to allow passing keys or other identifiers.
any[]
stickyHeader
Header sticks to scroll parent.
boolean
false
toggleRowOnClick
If clicking a row should expand it.
boolean
false
TableCell
A single table cell definition.
Allows aligning the cell and header.
start(default)endcenter
The cell renderer. By default it will take the it's key in in the record, and extract that key from the row data.
Pass a custom class function, string or record to apply to the cell.
The anticipated length of the loaded text to be provided to es-loading-text.
If this cell should be grouped with others.
If the table can be sorted by this column
The title to be placed in the header.
Appends a random number of characters (up to the specified amount) to the expectedLength.
Allows specifiying a predefined variant for the cell.
default: The default styling.no-pad: Removes padding.borderless: Removes border, if set.full-width: Breaks the cell onto its own row, taking the full width. **Only use on last cell of row, or in es-table-detail. Not supported in es-table-virtualized **exclude: Disables the cell.
Events
clickRow
any
Triggered whenever a row (or nested row) is clicked. The detail is the item in the row array.
expansion
{ data: any; key: string; }Triggered whenever a row is expanded.