Column Table column

The Column component needs to be used within the Table component.

Examples

See Table examples.

API

Props

Name Type Default Description

title string - The column title.

field string - The key name of the column, corresponds to a field of a data item in the data prop of the Table component.

width string=|number - The width of the column in pixel value.

sortable

boolean

false

Whether this column supports sorting.

The component itself does not handle sorting logic, it only throws a sort event on the Table when the sorting button is clicked, and the user needs to handle the sorting logic themselves.

align string - The alignment of the column content, supports left / center / right.

span

function(number): Object

Cell merge configuration. The type is function(index: number): { row: number, col: number }. index is the index of the current row in the data prop of the Table component. The row / col properties of the return value correspond to the rowspan / colspan of the cell, and the default values are both 1.

Refer to the example › Selection mode and sorting in the Table component to learn how to use it.

desc string - The description of the table header.

fixed boolean | 'left' | 'right' false Whether the column is fixed. 'left' means fixed on the left side, 'right' means fixed on the right side.

filter-value

*

.sync

The filter condition value. The value null means not filtered. When filter-multiple is true, the value is an array of selected item values.

filter-multiple boolean false Whether the built-in filter is multi-select.

filter-options Array<Object> - The filtering options list, the item type is {label, value, options, disabled, ...}, refer to the options prop of the Select component.

filter-title string - The title of the filter drop-down.

allowed-orders

Array

[false, 'desc', 'asc']

Specifies the sorting range of this column. When the user clicks, it will switch in the order specified.

Value	Description
`false`	No sorting.
`'asc'`	Ascending order.
`'desc'`	Descending order.

ellipsis boolean tablecolumn.ellipsis Whether to automatically truncate cell content when it overflows.

tooltip boolean | ((item: Object) => string) - Whether to automatically truncate cell content and display a tooltip when it overflows. By default, it displays the current cell's textContent. When a function is provided, the item parameter represents the entire data item, and the returned string will be shown as the tooltip content.

Slots

Name Description

head The column header area.

foot

The column footer area.

If the associated Table component defines a foot slot, the individual column footer configuration will be overridden.

default

The content of the cell.

Default content: The value of the field corresponding to the field prop in the table data item.

The slot props are all properties in the current row data in data.

sub-row

The content of the sub-row after the row is expanded. When using this slot, the content will be the cell content of the corresponding column in the expanded sub-row below the row. The row data source comes from the children array in data corresponding to the main row data, and the number of expanded sub-rows is the same as the number of data items in children, using the same column configuration.

Default content: The value of the field corresponding to the field prop in the table data[i].children[j] item.

The slot props are all properties in the current sub-row data and the current main row corresponding index value index.

If the associated Table component defines a sub-row slot, the individual column sub-row slot will be overridden.

desc

The description of the header. When using this slot, it will override the desc prop of the Column.

Name	Type	Description
`close`	`function(): void`	Close the container that displays the description content.

filter

The content of the filter layer.

Name	Type	Description
`close`	`function(): void`	Close the filter layer.

Events

Name	Description
`filterchange`	Triggered when the filter of this column is modified. The callback parameter is `(value)`. `value` is the current value of the filter.

Configs

Key	Type	Default	Description
`tablecolumn.ellipsis`	`boolean`	`false`	Whether to automatically truncate cell content when it overflows.
`tablecolumn.tooltip`	`boolean \| ((item: Object) => string)`	`false`	Whether to automatically truncate cell content and display a tooltip when it overflows. By default, it displays the current cell's textContent. When a function is provided, the item parameter represents the entire data item, and the returned string will be shown as the tooltip content.

Edit this page on GitHubEdit