Create a table from data.
Props
cells
A record of table cell definitions.
{ [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
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.
(row: any) => any
(d) => d
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
(row, i) => {
if (typeof row === string) return row;
logger.warn.once(
es-table:,
`Key not found for row ${row} at index ${i}. Using index as key (unsafe).`,
Pass the `getRowKey` prop to convert your row into a key.,
);
return `${i}`;
}headless
Do not render header.
boolean
false
identifier
Passed to cell renderer as
parent.
string
table
linkRowTo
A function to calculate a href from the cell data.
((data: any) => string)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
renderExpansion
Allows rendering a node after the row.
(h: typeof h, row: any, key: string, i: number) => stringor
VNodeor
VNode[]or
null
() => null
rowClass
A function to calculate the class or classes of the row from the cellData.
(data: any, row: any) => 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.
unknown[]
sort
How the table is sorted
[key: string, order: SortOrder]or
undefined
stickyHeader
Header sticks to scroll parent.
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.
SortOrder
The order that the table column is sorted in.
Events
clickRow
ClickRow<any>
Triggered whenever a row is clicked.
clickSort
string
Triggered whenever a sortable header is clicked