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.

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.

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.

^^^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`	[^scoped-slot-sub-row]

^^^scoped-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 datasource, 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).