Table

A table displays rows of data.

When To Use

• To display a collection of structured data.
• To sort, search, paginate, filter data.

Examples

Basic Usage

<template>
  <a-table :columns="columns" :data-source="data">
    <template #headerCell="{ column }">
      <template v-if="column.key === 'name'">
        <span>
          <smile-outlined />
          Name
        </span>
      </template>
    </template>

    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'name'">
        <a>
          {{ record.name }}
        </a>
      </template>
      <template v-else-if="column.key === 'tags'">
        <span>
          <a-tag
            v-for="tag in record.tags"
            :key="tag"
            :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
          >
            {{ tag.toUpperCase() }}
          </a-tag>
        </span>
      </template>
      <template v-else-if="column.key === 'action'">
        <span>
          <a>Invite 一 {{ record.name }}</a>
          <a-divider type="vertical" />
          <a>Delete</a>
        </span>
      </template>
    </template>
  </a-table>
</template>

<script setup>
import { SmileOutlined } from '@ant-design/icons-vue'

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: 'Tags',
    key: 'tags',
    dataIndex: 'tags',
  },
  {
    title: 'Action',
    key: 'action',
  },
]

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    tags: ['loser'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
]
</script>

Selection

<template>
  <div>
    <div style="margin-bottom: 16px">
      <a-button type="primary" :disabled="!hasSelected" :loading="loading" @click="start">
        Reload
      </a-button>
      <span style="margin-left: 8px">
        <template v-if="hasSelected">
          {{ `Selected ${selectedRowKeys.length} items` }}
        </template>
      </span>
    </div>
    <a-table :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :columns="columns" :data-source="data" />
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
  },
]

const data = []
for (let i = 0; i < 46; i++) {
  data.push({
    key: i,
    name: `Edward King ${i}`,
    age: 32,
    address: `London, Park Lane no. ${i}`,
  })
}

const selectedRowKeys = ref([])
const loading = ref(false)

const hasSelected = computed(() => selectedRowKeys.value.length > 0)

const start = () => {
  loading.value = true
  setTimeout(() => {
    selectedRowKeys.value = []
    loading.value = false
  }, 1000)
}

const onSelectChange = (changableRowKeys) => {
  console.log('selectedRowKeys changed: ', changableRowKeys)
  selectedRowKeys.value = changableRowKeys
}
</script>

Sorting and Filtering

<template>
  <a-table :columns="columns" :data-source="data" @change="handleChange" />
</template>

<script setup>
const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    filters: [
      {
        text: 'Joe',
        value: 'Joe',
      },
      {
        text: 'Jim',
        value: 'Jim',
      },
      {
        text: 'Submenu',
        value: 'Submenu',
        children: [
          {
            text: 'Green',
            value: 'Green',
          },
          {
            text: 'Black',
            value: 'Black',
          },
        ],
      },
    ],
    onFilter: (value, record) => record.name.indexOf(value) === 0,
    sorter: (a, b) => a.name.length - b.name.length,
    sortDirections: ['descend'],
  },
  {
    title: 'Age',
    dataIndex: 'age',
    defaultSortOrder: 'descend',
    sorter: (a, b) => a.age - b.age,
  },
  {
    title: 'Address',
    dataIndex: 'address',
    filters: [
      {
        text: 'London',
        value: 'London',
      },
      {
        text: 'New York',
        value: 'New York',
      },
    ],
    onFilter: (value, record) => record.address.indexOf(value) === 0,
  },
]

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
  },
  {
    key: '4',
    name: 'Jim Red',
    age: 32,
    address: 'London No. 2 Lake Park',
  },
]

const handleChange = (pagination, filters, sorter) => {
  console.log('Various parameters', pagination, filters, sorter)
}
</script>

API

Table

Property	Description	Type	Default	Version
bordered	Whether to show all table borders	boolean	false
columns	Columns of table	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 | v-slot:expandedRowRender="{record, index, indent, expanded}"	-
expandIcon	Customize row expand Icon.	Function(props):VNode | v-slot:expandIcon="props"	-
expandRowByClick	Whether to expand row by clicking anywhere in the whole row	boolean	false
footer	Table footer renderer	Function(currentPageData) | v-slot:footer="currentPageData"	-
indentSize	Indent size in pixels of tree data	number	15
loading	Loading status of table	boolean | object (more)	false
locale	The i18n text including filter, sort, empty text, etc	object	filterConfirm: 'Ok' filterReset: 'Reset' emptyText: 'No Data' Default
pagination	Config of pagination. You can ref table pagination config or full pagination document, hide it by setting it to false	object | false	-
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):string	'key'
rowSelection	Row selection config	object	-
scroll	Whether table can be scrolled in x/y direction, x or y can be a number that indicates the width and height of table body	object	-
showHeader	Whether to show table header	boolean	true
showSorterTooltip	The header show next sorter direction tooltip. It will be set as the property of Tooltip if its type is object	boolean | Tooltip props	true
size	Size of table	default | middle | small	default
sortDirections	Supported sort way, could be ascend, descend	Array	[ascend, descend]
sticky	Set sticky header and scroll bar	boolean | {offsetHeader?: number, offsetScroll?: number, getContainer?: () => HTMLElement}	-
summary	Summary content	v-slot:summary	-
tableLayout	table-layout attribute of table element	- | 'auto' | 'fixed'	- fixed when header/columns are fixed, or using column.ellipsis
title	Table title renderer	Function(currentPageData) | v-slot:title="currentPageData"	-
transformCellText	Data can be changed again before rendering. The default configuration of general user empty data.	Function({ text, column, record, index }) => any | v-slot:transformCellText="{text, column, record, index}"	-

Table Events

Events Name	Description	Arguments	Version
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)
resizeColumn	Callback executed when a column is resized	Function(width, column)

Column

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

Property	Description	Type	Default	Version
align	The specify which way that column is aligned	left | right | center	left
colSpan	Span of this column's title	number	-
dataIndex	Display field of the data record, support nest path by string array	string | string[]	-
defaultFilteredValue	Default filtered values	string[]	-
defaultSortOrder	Default order of sorted values	ascend | descend	-
ellipsis	The ellipsis cell content, not working with sorter and filters for now. tableLayout would be fixed when ellipsis is true.	boolean |	false
filterDropdown	Customized filter overlay	VNode | slot	-
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	VNode | ({filtered: boolean, column: Column}) => vNode | v-slot:filterIcon="{filtered, column}"	false
filterMultiple	Whether multiple filters can be selected	boolean	true
filters	Filter menu config	object[]	-
fixed	(IE not supported) 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	-
responsive	The list of breakpoints at which to display this column. Always visible if not set.	Breakpoint[]	-
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	-
sortDirections	Supported sort way, override sortDirections in Table, could be ascend, descend	Array	[ascend, descend]
title	Title of this column	string | VNode | v-slot:title	-
width	Width of this column (width not working?)	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	function(visible) {}	-
slots	When using columns, you can use this property to configure the properties that support slot, such as slots: { title: 'XXX'}	object	-

rowSelection

Properties for row selection.

Property	Description	Type	Default	Version
checkStrictly	Check table row precisely; parent row and children rows are not associated	boolean	true
columnWidth	Set the width of the selection column	string | number	32px
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)	-
hideSelectAll	Hide the selectAll checkbox and custom selection	boolean	false
preserveSelectedRowKeys	Keep selection key even when it removed from dataSource	boolean	-
selectedRowKeys	Controlled selected row keys	string[] | number[]	[]
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(selectedRowKeys)	-
onSelectNone	Callback executed when row selection is cleared	function()	-

scroll

Property	Description	Type	Default	Version
scrollToFirstRowOnChange	Whether to scroll to the top of the table when paging, sorting, filtering changes	boolean	-
x	Set horizontal scrolling, can also be used to specify the width of the scroll area, could be number, percent value, true and 'max-content'	string | number | true	-
y	Set vertical scrolling, can also be used to specify the height of the scroll area, could be string or number	string | number	-

selection

Custom selection config

Property	Description	Type	Default	Version
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)	-