5.8 KiB
Table
:::tip
Table is required to be used within Column.
:::
Demos
Content density
Available density variants for the ui prop: compact / loose.
Selection and sorting
Supports specifying row keys, mode of selection, and sorting by values of specific column.
Filter
Use the filter slot of the Column component to enable custom column filter dropdown.
Scroll inside
Allow table content to be scrollable inside the table body, i.e. the effect of fixed head/foot.
Fixed columns
Use the scroll of Table and the fixed prop of Column to enable fixed columns.
Expandable row
Rows can be expanded into sub-rows.
Header descriptions
Use the desc prop or the desc slot to provide description for the column header.
Truncation tooltips
Use the tooltip attribute of the Column component to specify that a hover tooltip is displayed when the content is truncated.
API
Props
| Name | Type | Default | Description |
|---|---|---|---|
ui |
string= |
- | [^ui] |
data |
Array<Object> |
- | Table data in rows. |
key-field |
string |
- | Denotes the unique key of the table data. The value should be a key defined in the data object of each row. The corresponding field will be regarded as the key attribute for each row element. When selectable is true, it also indicates the rows of which column should be selected from (and in this occasion the value should be defined as the field prop for one of the children Column components). |
selectable |
boolean |
false |
Whether the rows are selectable. |
select-mode |
string |
'multiple' |
The mode of row selection. Available values are single / multiple, which denote single selection and multiple selection respectively. |
selected |
`Array<*> | *` | [] |
expandable |
boolean |
false |
Whether the rows can be expanded into sub-rows. |
expanded |
Array<*> |
[] |
[^expanded] |
order |
`string | boolean` | false |
order-by |
string |
- | The column which is currently sorted by. The value should be defined as the field prop for one of the children Column components. |
scroll |
number |
- | The maximun height of the scrollable area inside the table body. When table content exceeds the specified height, internal scroll will be enabled and the head/foot will become fixed. |
loading |
boolean |
false |
Whether table data is being loaded. |
^^^ui Style variants.
+++Enum values
| Value | Description |
|---|---|
compact |
Compact style. |
loose |
Loose style. |
s |
Small. |
m |
Medium. |
| +++ | |
| ^^^ |
^^^selected
:::badges
.sync
:::
The value(s) of selected rows. When select-mode is 'multiple', the value is an array of values keyed by the key-field prop from the row data . When select-mode is 'single', the value is such key value of the selected row.
^^^
^^^expanded
:::badges
.sync
:::
The values of expanded rows. Each item is the value keyed by the key-field prop from the row data.
^^^
Slots
| Name | Description |
|---|---|
default |
The columns of the table. Can only have Column components as children. |
no-data |
The content to be displayed when there's no data to show. |
foot |
The content of the table foot. Will span across all columns when defined. |
sub-row |
[^slot-sub-row] |
^^^slot-sub-row
The content of the expanded sub-row. Will span across all columns and override the sub-row slot of the Column components inside the table.
The slot props are the same as each item inside data, with an extra index: number, which denotes the index within the datasource.
^^^
Events
| Name | Description |
|---|---|
select |
[^event-select] |
sort |
[^event-sort] |
^^^event-select
Triggered when the selected item(s) are changed. The callback parameter list is (selected, item, selectedItems).
+++Parameters
| Name | Type | Description |
|---|---|---|
selected |
boolean |
Whether the item is selected after change. |
item |
Object |
The item in the data prop that is being selected/unselected. When it involves row span for the key-field mapped column, the data of the first related row is returned. |
selectedItems |
`Object<string, Object | Array>` |
| +++ | ||
| ^^^ |
^^^event-sort
Triggered when users sort a specific column. The callback parameter list is (field, order).
+++Parameters
| Name | Type | Description |
|---|---|---|
field |
string |
Which column to be sort by. The value should be defined as the field prop for one of the children Column components. |
order |
`string | boolean` |
| +++ | ||
| ^^^ |