ant-design-vue/components/table/index.en-US.md

8.8 KiB

API

Table

Property Description Type Default
bordered Whether to show all table borders boolean false
childrenColumnName The column contains children to display string[] children
columns Columns of table config array -
components Override default table elements object -
dataSource Data record array to be displayed any[] -
defaultExpandAllRows Expand all rows initially boolean false
defaultExpandedRowKeys Initial expanded row keys string[] -
expandedRowKeys Current expanded row keys string[] -
expandedRowRender Expanded container render for each row Function(record, index, indent, expanded):VNode|slot-scope -
expandIcon Customize row expand Icon. Function(props):VNode | slot="expandIcon" slot-scope="props" -
expandRowByClick Whether to expand row by clicking anywhere in the whole row boolean false
footer Table footer renderer Function(currentPageData)|slot-scope
indentSize Indent size in pixels of tree data number 15
loading Loading status of table boolean|object false
locale i18n text including filter, sort, empty text, etc object filterConfirm: 'Ok'
filterReset: 'Reset'
emptyText: 'No Data'
pagination Config of pagination. You can ref table pagination config or full pagination document, hide it by setting it to false object
rowClassName Row's className Function(record, index):string -
rowKey Row's unique key, could be a string or function that returns a string string|Function(record, index):string key
rowSelection Row selection config object null
scroll Set horizontal or vertical scrolling, can also be used to specify the width and height of the scroll area. It is recommended to set a number for x, if you want to set it to true, you need to add style .ant-table td { white-space: nowrap; }. { x: number | true, y: number } -
showHeader Whether to show table header boolean true
size Size of table default | middle | small | large default
title Table title renderer Function(currentPageData)|slot-scope
customHeaderRow Set props on per header row Function(column, index) -
customRow Set props on per row Function(record, index) -

Events

Events Name Description Arguments
change Callback executed when pagination, filters or sorter is changed Function(pagination, filters, sorter, { currentDataSource })
expand Callback executed when the row expand icon is clicked Function(expanded, record)
expandedRowsChange Callback executed when the expanded rows change Function(expandedRows)

customRow usage

Same as customRow customHeaderRow customCell customHeaderCell. Follow Vue jsx syntax。

<Table
  customRow={(record) => {
    return {
      props: {
        xxx...
      },
      on: {
        click: (event) => {},       // click row
        dblclick: (event) => {}, // double click row
        contextmenu: (event) => {}  // right button click row
        mouseenter: (event) => {}   // mouse enter row
        mouseleave: (event) => {}   // mouse leave row
      },
    };
  )}
  customHeaderRow={(column) => {
    return {
      on: {
        click: () => {},        // click header row
      },
    };
  )}
/>

Column

One of the Table columns prop for describing the table's columns, Column has the same API.

Property Description Type Default
align specify how content is aligned 'left' | 'right' | 'center' 'left'
colSpan Span of this column's title number
dataIndex Display field of the data record, could be set like a.b.c string -
defaultSortOrder Default order of sorted values: 'ascend' 'descend' null string -
filterDropdown Customized filter overlay slot | slot-scope -
filterDropdownVisible Whether filterDropdown is visible boolean -
filtered Whether the dataSource is filtered boolean false
filteredValue Controlled filtered value, filter icon will highlight string[] -
filterIcon Customized filter icon slot | slot-scope | (filtered: boolean, column: Column) false
filterMultiple Whether multiple filters can be selected boolean true
filters Filter menu config object[] -
fixed Set column to be fixed: true(same as left) 'left' 'right' boolean|string false
key Unique key of this column, you can ignore this prop if you've set a unique dataIndex string -
customRender Renderer of the table cell. The return value should be a VNode, or an object for colSpan/rowSpan config Function(text, record, index) {}|slot-scope -
sorter Sort function for local sort, see Array.sort's compareFunction. If you need sort buttons only, set to true Function|boolean -
sortOrder Order of sorted values: 'ascend' 'descend' false boolean|string -
title Title of this column string|slot -
width Width of this column string|number -
customCell Set props on per cell Function(record, rowIndex) -
customHeaderCell Set props on per header cell Function(column) -
onFilter Callback executed when the confirm filter button is clicked, Use as a filter event when using template or jsx Function -
onFilterDropdownVisibleChange Callback executed when filterDropdownVisible is changed, Use as a filterDropdownVisible event when using template or jsx function(visible) {} -
slots When using columns, you can use this property to configure the properties that support the slot, such as slots: { filterIcon: 'XXX'} object -
scopedSlots When using columns, you can use this property to configure the properties that support the slot-scope, such as scopedSlots: { customRender: 'XXX'} object -

ColumnGroup

Property Description Type Default
title Title of the column group string|slot -
slots When using columns, you can use this property to configure the properties that support the slot, such as slots: { title: 'XXX'} object -

pagination

Properties for pagination.

Property Description Type Default
position specify the position of Pagination 'top' | 'bottom' | 'both' 'bottom'

More about pagination, please check Pagination.

rowSelection

Properties for row selection.

Property Description Type Default
columnWidth Set the width of the selection column string|number -
columnTitle Set the title of the selection column string|VNode -
fixed Fixed selection column on the left boolean -
getCheckboxProps Get Checkbox or Radio props Function(record) -
hideDefaultSelections Remove the default Select All and Select Invert selections boolean false
selectedRowKeys Controlled selected row keys string[] []
selections Custom selection config, only displays default selections when set to true object[]|boolean -
type checkbox or radio checkbox | radio checkbox
onChange Callback executed when selected rows change Function(selectedRowKeys, selectedRows) -
onSelect Callback executed when select/deselect one row Function(record, selected, selectedRows, nativeEvent) -
onSelectAll Callback executed when select/deselect all rows Function(selected, selectedRows, changeRows) -
onSelectInvert Callback executed when row selection is inverted Function(selectedRows) -

selection

Custom selection config

Property Description Type Default
key Unique key of this selection string -
text Display text of this selection string|VNode -
onSelect Callback executed when this selection is clicked Function(changeableRowKeys) -

Note

The values inside dataSource and columns should follow this in Table, and dataSource[i].key would be treated as key value default for dataSource.

If dataSource[i].key is not provided, then you should specify the primary key of dataSource value via rowKey. If not, warnings will show in browser console.

// primary key is uid
return <Table rowKey="uid" />;
// or
return <Table rowKey={record => record.uid} />;