docs_vue2/one/docs/en-US/components/table.md

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`
+++
^^^