5.6 KiB
Table
:::tip
Table
is required to be used within Column
.
:::
Demos
Content density
Available density variants for the ui
prop: compact
/ loose
.
Advanced
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.
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 scope properties 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` |
+++ | ||
^^^ |