Column

Column is required to be used within Table.

Demos

See the demos of Table.

API

Props

Name	Type	Default	Description
`title`	`string`	-	The column title.
`field`	`string`	-	The field name as a key of items in the `data` prop of the parent `Table` component.
`width`	`string=\|number=`	-	The column width in `px` value.
`sortable`	`boolean=`	`false`	Whether current column is sortable. `Column` does not handle sorting itself. It only emits a `sort` event on `Table` when the sorter is clicked so users need handle sorting themselves.
`align`	`string=`	-	The alignment of cell content in the column. Supports `left` / `center` / `right`.
`span`	`function(number): Object=`		A function that defines how cells should span across rows/columns. The type is `function(index: number): { row: number, col: number }`, where `index` being the index of current row inside the `data` prop of the parent `Table`. The `row` / `col` of the return value correspond to table cell's `rowspan` / `colspan` attribut, with a default value of `1`. You can learn more abut how to use this in `Table` component's Demos › Selection and sorting.
`desc`	`string`	-	The description of the column head.
`filter-value`	`*`	-	`.sync` The value of current filter condition. `null` means not filtered. When `filter-multiple` is `true`, the value is an array of selected values.
`filter-multiple`	`boolean=`	`false`	Whether the built-in filter is multi-select or not.
`filter-options`	`Array<Object>`	-	The list of filter options, with items of type `{label, value, options, disabled, ...}`, see the `options` prop of the `Select` component.
`filter-title`	`string=`	-	The title of the filter dropdown.
`allowed-orders`	`Array`	`[false, 'desc', 'asc']`	[^allowed-orders]
`tooltip`	`boolean \| ((item: Object) => string)`	-	Whether to automatically show tooltips when content overflows. The tooltip displays the field corresponding to the `field` prop of the [`data`](. /table#props-data) prop of `Table` component the current column belongs to. When being a function, the `item` argument is the entire data item and the returned string will be displayed as tooltip content.

Slots

Name Description

head The table head.

foot

The table foot.

Column's foot slot will be ignored if users provide content for Table's foot slot.

default

The content of the table cell. Displays the property value corresponds to the field prop in table's data prop.

The slot scope properties are the same as each item inside data, with an extra index: number, which denotes the index within the row data.

sub-row

The content of cells in a sub row. Sub row data comes from the children array inside the row data in Tables data prop. The number of sub rows are determined by the length of the children array and the sub rows share the same column configuration with the table.

Displays the value keyed by the field prop inside the sub row data, which is data[i].children[j] of the parent table.

The slot scope properties are the same as each item inside children, with an extra index: number, which denotes the index within the row data.

The sub-row slot of Column will be ignored when content is provided for Table's sub-row slot.

desc

The content of the description overlay. Will override the desc prop when set.

Name	Type	Description
`close`	`function(): void`	Used to close the description overlay.

filter

The content of the filter dropdown.

Name	Type	Description
`close`	`function(): void`	Used to close the filter dropdown.

Edit this page on GitHubEdit