Table

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

Use

Basic Use

When columns is bound to a reactive array, changes in the array will affect table changes (dynamic table). If you don’t need a dynamic table, it is recommended to bind an ordinary array.

<template>
  <pro-table
    :data="data"
    :columns="columns"
  />
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    const columns = [
      {
        label: 'Date',
        prop: 'date',
      },
      {
        label: 'Name',
        prop: 'name',
      },
      {
        label: 'Address',
        prop: 'address',
      },
    ]
    const data = [
      {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
    ]

    return {
      data,
      columns,
    }
  },
})
</script>

Intellisense

Use the defineTableColumns defineTableMenuColumns defineTableSelectionColumns defineTableIndexColumns defineTableExpandColumns to make it easier to define columns

<template>
  <pro-table
    :data="data"
    :columns="columns"
  />
</template>

<script>
import { defineComponent } from 'vue'
import { defineTableColumns } from 'element-pro-components'

export default defineComponent({
  setup() {
    const columns = defineTableColumns([
      {
        label: 'Date',
        prop: 'date',
      },
      {
        label: 'Name',
        prop: 'name',
      },
      {
        label: 'Address',
        prop: 'address',
      },
    ])
    const data = [
      {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
    ]

    return {
      data,
      columns,
    }
  },
})
</script>

Nested value

Support for get the objects or arrays with nested structures value, only need to configure the prop

<template>
  <pro-table
    :data="data"
    :columns="columns"
  />
</template>

<script>
import { defineComponent } from 'vue'
import { defineTableColumns } from 'element-pro-components'

export default defineComponent({
  setup() {
    const columns = defineTableColumns([
      {
        label: 'Break',
        prop: 'b.c',
      },
      {
        label: 'Object',
        prop: 'b.d',
      },
      {
        label: 'Array',
        prop: 'd[0].e',
      },
    ])
    const data = [
      {
        'b.c': 'break nested value',
        b: {
          c: 'nested value c in b',
          d: 'nested value d in b',
        },
        d: [{ e: 'nested value in array' }],
      },
    ]

    return {
      data,
      columns,
    }
  },
})
</script>

Index Columns

Set index attribute to display index columns

<template>
  <pro-table
    :data="data"
    :columns="columns"
    :index="index"
  />
</template>

<script>
import { defineComponent, ref } from 'vue'
import {
  defineTableColumns,
  defineTableIndexColumns,
} from 'element-pro-components'

export default defineComponent({
  setup() {
    const index = defineTableIndexColumns({
      label: '#',
    })
    const columns = defineTableColumns([
      {
        label: 'Date',
        prop: 'date',
      },
      {
        label: 'Name',
        prop: 'name',
      },
      {
        label: 'Address',
        prop: 'address',
      },
    ])
    const data = ref([
      {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
    ])

    return {
      index,
      data,
      columns,
    }
  },
})
</script>

Selection Columns

Set selection attribute to display selection columns

<template>
  <pro-table
    :data="data"
    :columns="columns"
    selection
  />
</template>

<script>
import { defineComponent, ref } from 'vue'
import { defineTableColumns } from 'element-pro-components'

export default defineComponent({
  setup() {
    const columns = defineTableColumns([
      {
        label: 'Date',
        prop: 'date',
      },
      {
        label: 'Name',
        prop: 'name',
      },
      {
        label: 'Address',
        prop: 'address',
      },
    ])
    const data = ref([
      {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
    ])

    return {
      data,
      columns,
    }
  },
})
</script>

Expand Columns

Use expand slot to define display content, and Set expand attribute to control expand columns

<template>
  <pro-table
    :data="data"
    :columns="columns"
  >
    <template #expand="{ row }">
      {{ row }}
    </template>
  </pro-table>
</template>

<script>
import { defineComponent, ref } from 'vue'
import { defineTableColumns } from 'element-pro-components'

export default defineComponent({
  setup() {
    const columns = defineTableColumns([
      {
        label: 'Date',
        prop: 'date',
      },
      {
        label: 'Name',
        prop: 'name',
      },
      {
        label: 'Address',
        prop: 'address',
      },
    ])
    const data = ref([
      {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
    ])

    return {
      data,
      columns,
    }
  },
})
</script>

Use menu slot to define display content, and Set menu attribute to control menu Columns

<template>
  <pro-table
    :data="data"
    :columns="columns"
    :menu="menu"
  >
    <template #menu="{ size }">
      <el-button
        :size="size"
        type="primary"
        link
      >
        Detail
      </el-button>
    </template>
  </pro-table>
</template>

<script>
import { defineComponent, ref } from 'vue'
import {
  defineTableColumns,
  defineTableMenuColumns,
} from 'element-pro-components'

export default defineComponent({
  setup() {
    const menu = defineTableMenuColumns({
      label: 'Operations',
      align: 'center',
    })
    const columns = defineTableColumns([
      {
        label: 'Date',
        prop: 'date',
      },
      {
        label: 'Name',
        prop: 'name',
      },
      {
        label: 'Address',
        prop: 'address',
      },
    ])
    const data = ref([
      {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
    ])

    return {
      menu,
      data,
      columns,
    }
  },
})
</script>

Slots

Tip

Starting from 1.2.0, the [prop] related slots need to be prefixed with table- to use

Use simple render-function by render in columns. or directly add some slot with table-[prop] in the template.

<template>
  <pro-table
    :data="data"
    :columns="columns"
  >
    <template #table-name-header="{ column }">
      <s>{{ column.label }}</s>
    </template>
    <template #table-name="{ row, size }">
      <el-tag :size="size">
        {{ row?.name }}
      </el-tag>
    </template>
  </pro-table>
</template>

<script>
import { defineComponent, h, ref } from 'vue'
import { defineTableColumns } from 'element-pro-components'

export default defineComponent({
  setup() {
    const columns = defineTableColumns([
      {
        label: 'Date',
        prop: 'date',
        render: '--',
      },
      {
        label: 'Name',
        prop: 'name',
      },
      {
        label: 'Address',
        prop: 'address',
        render: (row) => h('em', null, row.address),
      },
    ])
    const data = ref([
      {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
    ])

    return {
      data,
      columns,
    }
  },
})
</script>

Pagination

Set total attribute to display pagination, use v-model:current-page to bind current page, use v-model:page-size to bind current page size, use load events to listen the pagination changes

  • 1
  • 2
  • 3
  • 4
  • 5
Go to
Total 50
<template>
  <pro-table
    v-model:current-page="currentPage"
    v-model:page-size="pageSize"
    :data="data"
    :columns="columns"
    :total="total"
    @load="load"
  />
</template>

<script>
import { defineComponent, ref } from 'vue'
import { defineTableColumns } from 'element-pro-components'

export default defineComponent({
  setup() {
    const currentPage = ref(1)
    const pageSize = ref(10)
    const total = ref(50)
    const columns = defineTableColumns([
      {
        label: 'Date',
        prop: 'date',
      },
      {
        label: 'Name',
        prop: 'name',
      },
      {
        label: 'Address',
        prop: 'address',
      },
    ])
    const data = ref([
      {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
    ])

    function load() {
      data.value.sort(() => (Math.random() >= 0.5 ? 1 : -1))
    }

    return {
      currentPage,
      pageSize,
      total,
      data,
      columns,
      load,
    }
  },
})
</script>

Grouping table head

Set children in columns will automatic generate the grouping table head

<template>
  <pro-table
    :data="data"
    :columns="columns"
  />
</template>

<script>
import { defineComponent, ref } from 'vue'
import { defineTableColumns } from 'element-pro-components'

export default defineComponent({
  setup() {
    const columns = defineTableColumns([
      {
        label: 'Date',
        prop: 'date',
      },
      {
        label: 'User',
        children: [
          {
            label: 'Name',
            prop: 'name',
          },
          {
            label: 'Address',
            prop: 'address',
          },
        ],
      },
    ])
    const data = ref([
      {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
    ])

    return {
      data,
      columns,
    }
  },
})
</script>

Async Table

To implement Async Table, columns must be bound to a reactive array

No Data
<template>
  <div style="margin-bottom: 20px">
    <el-button
      type="primary"
      @click="createTable"
    >
      Load Table
    </el-button>
    <el-button
      type="info"
      @click="createDict"
    >
      Load Dict
    </el-button>
    <el-button
      type="danger"
      @click="destroyTable"
    >
      Destroy
    </el-button>
  </div>
  <pro-table
    :data="data"
    :columns="columns"
  />
</template>

<script>
import { defineComponent, ref } from 'vue'
import { defineTableColumns } from 'element-pro-components'

export default defineComponent({
  setup() {
    const data = ref([])
    const columns = ref(defineTableColumns([]))
    const createTable = () => {
      columns.value = defineTableColumns([
        {
          label: 'Date',
          prop: 'date',
        },
        {
          label: 'Name',
          prop: 'name',
        },
        {
          label: 'Address',
          prop: 'address',
        },
      ])
    }
    const createDict = () => {
      data.value = [
        {
          date: '2016-05-03',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-02',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-04',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-01',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
      ]
    }
    const destroyTable = () => {
      columns.value = []
      data.value = []
    }

    return {
      data,
      columns,
      createTable,
      createDict,
      destroyTable,
    }
  },
})
</script>

TypeScript

The function defineTableColumns supports passing in a Generics type to infer the value of prop

<template>
  <pro-table
    :data="data"
    :columns="columns"
    :menu="menu"
  />
</template>

<script setup lang="ts">
import {
  defineTableColumns,
  defineTableMenuColumns,
} from 'element-pro-components'

interface DataItem {
  date: string
  name: string
  address: string
}

const menu = defineTableMenuColumns({
  label: 'Operations',
  align: 'center',
})
const columns = defineTableColumns<DataItem>([
  {
    label: 'Date',
    prop: 'date',
  },
  {
    label: 'Name',
    prop: 'name',
  },
  {
    label: 'Address',
    prop: 'address',
  },
])
const data: DataItem[] = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
</script>

Props

NameDescriptionTypeOptionsDefault
dataTable dataarray--
columnsto generate table components, reference columnsarray--
selectionadd a column will display checkbox, reference columnsboolean / object-false
indexadd a column will display index, reference columnsboolean / object-false
expandadd a column will display expand icon, reference columnsboolean / object-false
menuconfig the menu content, reference columnsboolean / object-false
show-overflow-tooltipwhether to hide extra content and show them in a tooltip when hovering on the cellboolean-false
alignalignmentstringleft / center / rightleft
header-alignalignment of the table header. If omitted, the value of the above align attribute will be appliedstringleft / center / rightsame with align
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 stripedboolean-false
borderwhether Table has vertical borderboolean-false
sizesize of Tablestringlarge / default /small-
fitwhether width of column automatically fits its containerboolean-true
show-headerwhether Table header is visibleboolean-true
highlight-current-rowwhether current row is highlightedboolean-false
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 #emptyString-No Data
default-expand-allwhether expand all rows by default, works when the table has a column type=“expand” or contains tree structure dataBoolean-false
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 rowBoolean-false
sum-textdisplayed text for the first column of summary rowString-Sum
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.Boolean-true
indenthorizontal indentation of tree dataNumber-16
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-layoutsets the algorithm used to lay out table cells, rows, and columnsstringfixed / autofixed
scrollbar-always-onalways show scrollbarbooleanfalse
flexibleensure main axis minimum-size doesn’t follow the contentbooleanfalse
v-model:current-pagecurrent page numbernumber--
v-model:page-sizeitem count of each pagenumber--
totaltotal item countnumber--
page-counttotal page count. Set either total or page-count and pages will be displayed; if you need page-sizes, total is requirednumber--
smallwhether to use small paginationboolean-false
backgroundwhether the buttons have a background colorboolean-false
default-page-sizedefault initial value of page sizenumber--
pager-countnumber of pagers. Pagination collapses when the total page count exceeds this valuenumberodd number between 5 and 217
default-current-pagedefault initial value of current-pagenumber--
layoutlayout of Pagination, elements separated with a commastringsizes / prev / pager / next / jumper / -> / total / slot‘prev, pager, next, jumper, ->, total’
page-sizesoptions of item count per pagenumber[]-[10, 20, 30, 40, 50, 100]
popper-classcustom class name for the page size Select’s dropdownstring--
prev-texttext for the prev buttonstring--
next-texttext for the next buttonstring--
disabledwhether Pagination is disabledboolean-false
hide-on-single-pagewhether to hide when there’s only one pageboolean--

columns

NameDescriptionTypeOptionsDefault
propthe key of datastring--
labelcolumn labelstring--
renderrender function for table columnsfunction(row)--
hideWhether to hide in the tableboolean-false
childrengrouping table headarray--
columnKeycolumn’s key. If you need to use the filter-change event, you need this attribute to identify which column is being filteredstring--
widthcolumn widthstring--
minWidthcolumn minimum width. Columns with width has a fixed width, while columns with min-width has a width that is distributed in proportionstring--
fixedwhether column is fixed at left/right. Will be fixed at left if truestring / booleantrue / left / right-
renderHeaderrender function for table header of this columnFunction(h, { 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
sortMethodsorting method, works when sortable is true. Should return a number, just like Array.sortFunction(a, b)--
sortByspecify 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 equalstring / array / Function(row, index)--
sortOrdersthe 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 trueboolean-true
formatterfunction that formats cell contentFunction(row, column, cellValue, index)--
showOverflowTooltipwhether to hide extra content and show them in a tooltip when hovering on the cellBoolean-false
alignalignmentstringleft / center / rightleft
headerAlignalignment of the table header. If omitted, the value of the above align attribute will be appliedstringleft / center / rightsame with align
classNameclass name of cells in the columnstring--
labelClassNameclass name of the label of this columnstring--
filtersan array of data filtering options. For each element in this array, text and value are requiredArray[{ text, value }]--
filterPlacementplacement for the filter dropdownstringtop / top-start / top-end / bottom / bottom-start / bottom-end / left / left-start / left-end / right / right-start / right-end-
filterMultiplewhether data filtering supports multiple optionsboolean-true
filterMethoddata 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)--
filteredValuefilter value for selected data, might be useful when table header is rendered with render-headerarray--
indexcustomize indices for each row, works on columns with type=indexFunction(index) / number--
selectablefunction that determines if a certain row can be selected, works when type is ‘selection’Function(row, index)--
reserveSelectionwhether to reserve selection after data refreshing, works when type is ‘selection’. Note that row-key is required for this to workboolean-false

Events

NameDescriptionParameters
loadtriggers when pageSize and currentPage-
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
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)

Methods

NameDescriptionParameters
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

Slots

NameDescription
-anything inserted before the menu
menucontrol the menu display content, parameters { size, row, column, $index }
expandcontrol the expand display content, parameters { row, column, $index }
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-[prop]control the Item display content, parameters { size, row, column, $index }
table-[prop]-headercontrol the Item header display content, parameters { size, column, $index }

Tip

[prop] the prop of columns