Table

Display multiple data with similar format. You can sort, filter, compare your data in a table.

Basic table

Basic table is just for data display.

Striped Table

Striped table makes it easier to distinguish different rows.

Table with border

Table with status

You can highlight your table content to distinguish between "success, information, warning, danger" and other states.

Table with fixed header

When there are too many rows, you can use a fixed header.

Table with fixed column

When there are too many columns, you can fix some of them.

Table with fixed columns and header

When you have huge chunks of data to put in a table, you can fix the header and columns at the same time.

Fluid-height Table with fixed header (and columns)

When the the data is dynamically changed, you might want the table to have a maximum height rather than a fixed height and to show the scroll bar if needed.

Grouping table head

When the data structure is complex, you can use group header to show the data hierarchy.

Single select

Single row selection is supported.

Multiple select

You can also select multiple rows.

Sorting

Sort the data to find or compare data quickly.

Filter

Filter the table to find desired data.

Custom column template

Customize table column so it can be integrated with other components.

Table with custom header

Customize table header so it can be even more customized.

Expandable row

When the row content is too long and you do not want to display the horizontal scroll bar, you can use the expandable row feature.

Tree data and lazy mode

Summary row

For table of numbers, you can add an extra row at the table footer displaying each column's sum.

Rowspan and colspan

Configuring rowspan and colspan allows you to merge cells

Custom index

You can customize row index in type=index columns.

Table Attributes

AttributeDescriptionTypeAccepted ValuesDefault
dataTable dataarray
heightTable's height. By default it has an auto height. If its value is a number, the height is measured in pixels; if its value is a string, the value will be assigned to element's style.height, the height is affected by external stylesstring / number
max-heightTable's max-height. The legal value is a number or the height in px.string / number
stripewhether Table is stripedbooleanfalse
borderwhether Table has vertical borderbooleanfalse
sizesize of Tablestringmedium / small / mini
fitwhether width of column automatically fits its containerbooleantrue
show-headerwhether Table header is visiblebooleantrue
highlight-current-rowwhether current row is highlightedbooleanfalse
current-row-keykey of current row, a set only propstring / number
row-class-namefunction that returns custom class names for a row, or a string assigning class names for every rowfunction({ row, rowIndex }) / string
row-stylefunction that returns custom style for a row, or an object assigning custom style for every rowfunction({ row, rowIndex }) / object
cell-class-namefunction that returns custom class names for a cell, or a string assigning class names for every cellfunction({ row, column, rowIndex, columnIndex }) / string
cell-stylefunction that returns custom style for a cell, or an object assigning custom style for every cellfunction({ row, column, rowIndex, columnIndex }) / object
header-row-class-namefunction that returns custom class names for a row in table header, or a string assigning class names for every row in table headerfunction({ row, rowIndex }) / string
header-row-stylefunction that returns custom style for a row in table header, or an object assigning custom style for every row in table headerfunction({ row, rowIndex }) / object
header-cell-class-namefunction that returns custom class names for a cell in table header, or a string assigning class names for every cell in table headerfunction({ row, column, rowIndex, columnIndex }) / string
header-cell-stylefunction that returns custom style for a cell in table header, or an object assigning custom style for every cell in table headerfunction({ row, column, rowIndex, columnIndex }) / object
row-keykey of row data, used for optimizing rendering. Required if reserve-selection is on or display tree data. When its type is String, multi-level access is supported, e.g. user.info.id, but user.info[0].id is not supported, in which case Function should be used.function(row) / string
empty-textDisplayed text when data is empty. You can customize this area with #emptystringNo Data
default-expand-allwhether expand all rows by default, works when the table has a column type="expand" or contains tree structure databooleanfalse
expand-row-keysset expanded rows by this prop, prop's value is the keys of expand rows, you should set row-key before using this proparray
default-sortset the default sort column and order. property prop is used to set default sort column, property order is used to set default sort orderobjectorder: ascending / descendingif prop is set, and order is not set, then order is default to ascending
tooltip-effecttooltip effect propertystringdark / lightdark
show-summarywhether to display a summary rowbooleanfalse
sum-textdisplayed text for the first column of summary rowstringSum
summary-methodcustom summary methodfunction({ columns, data })
span-methodmethod that returns rowspan and colspanfunction({ row, column, rowIndex, columnIndex })
select-on-indeterminatecontrols the behavior of master checkbox in multi-select tables when only some rows are selected (but not all). If true, all rows will be selected, else deselected.booleantrue
indenthorizontal indentation of tree datanumber16
lazywhether to lazy loading databoolean
loadmethod for loading child row data, only works when lazy is truefunction(row, treeNode, resolve)
tree-propsconfiguration for rendering nested dataobject{ hasChildren: 'hasChildren', children: 'children' }

Table Events

Event NameDescriptionParameters
selecttriggers when user clicks the checkbox in a rowselection, row
select-alltriggers when user clicks the checkbox in table headerselection
selection-changetriggers when selection changesselection
cell-mouse-entertriggers when hovering into a cellrow, column, cell, event
cell-mouse-leavetriggers when hovering out of a cellrow, column, cell, event
cell-clicktriggers when clicking a cellrow, column, cell, event
cell-dblclicktriggers when double clicking a cellrow, column, cell, event
cell-contextmenutriggers when user right clicks on a cellrow, column, cell, event
row-clicktriggers when clicking a rowrow, column, event
row-contextmenutriggers when user right clicks on a rowrow, column, event
row-dblclicktriggers when double clicking a rowrow, column, event
header-clicktriggers when clicking a column headercolumn, event
header-contextmenutriggers when user right clicks on a column headercolumn, event
sort-changetriggers when Table's sorting changes{ column, prop, order }
filter-changecolumn's key. If you need to use the filter-change event, this attribute is mandatory to identify which column is being filteredfilters
current-changetriggers when current row changescurrentRow, oldCurrentRow
header-dragendtriggers after changing a column's width by dragging the column header's bordernewWidth, oldWidth, column, event
expand-changetriggers when user expands or collapses a row (for expandable table, second param is expandedRows; for tree Table, second param is expanded)row, (expandedRows | expanded)

Table Methods

MethodDescriptionParameters
clearSelectionused in multiple selection Table, clear user selection
toggleRowSelectionused in multiple selection Table, toggle if a certain row is selected. With the second parameter, you can directly set if this row is selectedrow, selected
toggleAllSelectionused in multiple selection Table, toggle select all and deselect all
toggleRowExpansionused in expandable Table or tree Table, toggle if a certain row is expanded. With the second parameter, you can directly set if this row is expanded or collapsedrow, expanded
setCurrentRowused in single selection Table, set a certain row selected. If called without any parameter, it will clear selection.row
clearSortclear sorting, restore data to the original order
clearFilterclear filters of the columns whose columnKey are passed in. If no params, clear all filterscolumnKeys
doLayoutrefresh the layout of Table. When the visibility of Table changes, you may need to call this method to get a correct layout
sortsort Table manually. Property prop is used to set sort column, property order is used to set sort orderprop: string, order: string

Table Slots

NameDescriptionSubtags
-customize default contentTable-column
appendContents to be inserted after the last row. You may need this slot if you want to implement infinite scroll for the table. This slot will be displayed above the summary row if there is one.

Table-column Attributes

AttributeDescriptionTypeAccepted ValuesDefault
typetype of the column. If set to selection, the column will display checkbox. If set to index, the column will display index of the row (staring from 1). If set to expand, the column will display expand icon.stringselection / index / expand
indexcustomize indices for each row, works on columns with type=indexnumber / function(index)
labelcolumn labelstring
column-keycolumn's key. If you need to use the filter-change event, you need this attribute to identify which column is being filteredstring
propfield name. You can also use its alias: propertystring
widthcolumn widthstring / number
min-widthcolumn minimum width. Columns with width has a fixed width, while columns with min-width has a width that is distributed in proportionstring / number
fixedwhether column is fixed at left / right. Will be fixed at left if truestring / booleantrue / 'left' / 'right'
render-headerrender function for table header of this columnfunction({ column, $index })
sortablewhether column can be sorted. Remote sorting can be done by setting this attribute to 'custom' and listening to the sort-change event of Tableboolean / stringtrue / false / 'custom'false
sort-methodsorting method, works when sortable is true. Should return a number, just like Array.sortfunction(a, b)
sort-byspecify which property to sort by, works when sortable is true and sort-method is undefined. If set to an Array, the column will sequentially sort by the next property if the previous one is equalfunction(row, index) / string / array
sort-ordersthe order of the sorting strategies used when sorting the data, works when sortable is true. Accepts an array, as the user clicks on the header, the column is sorted in order of the elements in the arrayarraythe elements in the array need to be one of the following: ascending, descending and null (restores to the original order)['ascending', 'descending', null]
resizablewhether column width can be resized, works when border of el-table is truebooleanfalse
formatterfunction that formats cell contentfunction(row, column, cellValue, index)
show-overflow-tooltipwhether to hide extra content and show them in a tooltip when hovering on the cellbooleanfalse
alignalignmentstringleft / center / rightleft
header-alignalignment of the table header. If omitted, the value of the above align attribute will be appliedstringleft / center / right
class-nameclass name of cells in the columnstring
label-class-nameclass name of the label of this columnstring
selectablefunction that determines if a certain row can be selected, works when type is 'selection'function(row, index)
reserve-selectionwhether to reserve selection after data refreshing, works when type is 'selection'. Note that row-key is required for this to workbooleanfalse
filtersan array of data filtering options. For each element in this array, text and value are requiredarray[{ text, value }]
filter-placementplacement for the filter dropdownstringtop / top-start / top-end / bottom / bottom-start / bottom-end / left / left-start / left-end / right / right-start / right-end
filter-multiplewhether data filtering supports multiple optionsbooleantrue
filter-methoddata filtering method. If filter-multiple is on, this method will be called multiple times for each row, and a row will display if one of the calls returns truefunction(value, row, column)
filtered-valuefilter value for selected data, might be useful when table header is rendered with render-headerarray

Table-column Slots

NameDescription
Custom content for table columns. The scope parameter is { row, column, $index }
headerCustom content for table header. The scope parameter is { column, $index }