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.

After setting attribute data of el-table with an object array, you can use prop (corresponding to a key of the object in data array) in el-table-column to insert data to table columns, and set the attribute label to define the column name. You can also use the attribute width to define the width of columns.

Striped Table

Striped table makes it easier to distinguish different rows.

Attribute stripe accepts a Boolean. If true, table will be striped.

Table with border

By default, Table has no vertical border. If you need it, you can set attribute border to true.

Table with status

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

Use row-class-name in el-table to add custom classes to a certain row. Then you can style it with custom classes.

When the content is too long, it will break into multiple lines, you can use show-overflow-tooltip to keep it in one line.

Attribute show-overflow-tooltip, which accepts a Boolean value. When set true, the extra content will show in tooltip when hover on the cell.

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

By setting the attribute height of el-table, you can fix the table header without any other codes.

Table with fixed column

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

Attribute fixed is used in el-table-column, it accepts a Boolean. If true, the column will be fixed at left. It also accepts two string literals: 'left' and 'right', both indicating that the column will be fixed at corresponding direction.

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.

Fix columns and header at the same time by combining the above two examples.

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.

By setting the attribute max-height of el-table, you can fix the table header. The table body scrolls only if the height of the rows exceeds the max height value.

Grouping table head

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

Only need to place el-table-column inside a el-table-column, you can achieve group header.

Table with fixed group header

fixed group head is supported

The attribute fixed of the group header is determined by the outermost el-table-column

Single select

Single row selection is supported.

Table supports single row selection. You can activate it by adding the highlight-current-row attribute. An event called current-change will be triggered when row selection changes, and its parameters are the rows after and before this change: currentRow and oldCurrentRow. If you need to display row index, you can add a new el-table-column with its type attribute assigned to index, and you will see the index starting from 1.

Multiple select

You can also select multiple rows.

After 2.8.3, toggleRowSelection supports the third parameter ignoreSelectable to determine whether to ignore the selectable attribute.

Activating multiple selection is easy: simply add an el-table-column with its type set to selection.

vue

<template>
  <el-table
    ref="multipleTableRef"
    :data="tableData"
    row-key="id"
    style="width: 100%"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" :selectable="selectable" width="55" />
    <el-table-column label="Date" width="120">
      <template #default="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column property="name" label="Name" width="120" />
    <el-table-column property="address" label="Address" />
  </el-table>
  <div style="margin-top: 20px">
    <el-button @click="toggleSelection([tableData[1], tableData[2]])">
      Toggle selection status of second and third rows
    </el-button>
    <el-button @click="toggleSelection([tableData[1], tableData[2]], false)">
      Toggle selection status based on selectable
    </el-button>
    <el-button @click="toggleSelection()">Clear selection</el-button>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

import type { TableInstance } from 'element-plus'

interface User {
  id: number
  date: string
  name: string
  address: string
}

const multipleTableRef = ref<TableInstance>()
const multipleSelection = ref<User[]>([])

const selectable = (row: User) => ![1, 2].includes(row.id)
const toggleSelection = (rows?: User[], ignoreSelectable?: boolean) => {
  if (rows) {
    rows.forEach((row) => {
      multipleTableRef.value!.toggleRowSelection(
        row,
        undefined,
        ignoreSelectable
      )
    })
  } else {
    multipleTableRef.value!.clearSelection()
  }
}
const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val
}

const tableData: User[] = [
  {
    id: 1,
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 2,
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 3,
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 4,
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 5,
    date: '2016-05-08',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 6,
    date: '2016-05-06',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 7,
    date: '2016-05-07',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
</script>

Sorting

Sort the data to find or compare data quickly.

Set attribute sortable in a certain column to sort the data based on this column. It accepts Boolean with a default value false. Set table attribute default-sort to determine default sort column and order. To apply your own sorting rules, use sort-method or sort-by. If you need remote sorting from backend, set sortable to custom, and listen to the sort-change event on Table. In the event handler, you have access to the sorting column and sorting order so that you can fetch sorted table data from API. In this example we use another attribute named formatter to format the value of certain columns. It accepts a function which has two parameters: row and column. You can handle it according to your own needs.

Filter

Filter the table to find desired data.

Set attribute filters and filter-method in el-table-column makes this column filterable. filters is an array, and filter-method is a function deciding which rows are displayed. It has three parameters: value, row and column.

vue

<template>
  <el-button @click="resetDateFilter">reset date filter</el-button>
  <el-button @click="clearFilter">reset all filters</el-button>
  <el-table ref="tableRef" row-key="date" :data="tableData" style="width: 100%">
    <el-table-column
      prop="date"
      label="Date"
      sortable
      width="180"
      column-key="date"
      :filters="[
        { text: '2016-05-01', value: '2016-05-01' },
        { text: '2016-05-02', value: '2016-05-02' },
        { text: '2016-05-03', value: '2016-05-03' },
        { text: '2016-05-04', value: '2016-05-04' },
      ]"
      :filter-method="filterHandler"
    />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" :formatter="formatter" />

    <el-table-column
      prop="tag"
      label="Tag"
      width="100"
      :filters="[
        { text: 'Home', value: 'Home' },
        { text: 'Office', value: 'Office' },
      ]"
      :filter-method="filterTag"
      filter-placement="bottom-end"
    >
      <template #default="scope">
        <el-tag
          :type="scope.row.tag === 'Home' ? 'primary' : 'success'"
          disable-transitions
          >{{ scope.row.tag }}</el-tag
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

import type { TableColumnCtx, TableInstance } from 'element-plus'

interface User {
  date: string
  name: string
  address: string
  tag: string
}

const tableRef = ref<TableInstance>()

const resetDateFilter = () => {
  tableRef.value!.clearFilter(['date'])
}
const clearFilter = () => {
  tableRef.value!.clearFilter()
}
const formatter = (row: User, column: TableColumnCtx<User>) => {
  return row.address
}
const filterTag = (value: string, row: User) => {
  return row.tag === value
}
const filterHandler = (
  value: string,
  row: User,
  column: TableColumnCtx<User>
) => {
  const property = column['property']
  return row[property] === value
}

const tableData: User[] = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    tag: 'Home',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    tag: 'Office',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    tag: 'Home',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    tag: 'Office',
  },
]
</script>

Custom column template

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

You have access to the following data: row, column, $index and store (state management of Table) by slot.

vue

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column label="Date" width="180">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon><timer /></el-icon>
          <span style="margin-left: 10px">{{ scope.row.date }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="Name" width="180">
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="top" width="auto">
          <template #default>
            <div>name: {{ scope.row.name }}</div>
            <div>address: {{ scope.row.address }}</div>
          </template>
          <template #reference>
            <el-tag>{{ scope.row.name }}</el-tag>
          </template>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="Operations">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
          Edit
        </el-button>
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
        >
          Delete
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
import { Timer } from '@element-plus/icons-vue'

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

const handleEdit = (index: number, row: User) => {
  console.log(index, row)
}
const handleDelete = (index: number, row: User) => {
  console.log(index, row)
}

const tableData: User[] = [
  {
    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>

Table with custom header

Customize table header so it can be even more customized.

You can customize how the header looks by header slots.

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.

After 2.9.7, preserve-expanded-content is added to control whether to preserve expanded row content in DOM when collapsed.

Activate expandable row by adding type="expand" and slot. The template for el-table-column will be rendered as the contents of the expanded row, and you can access the same attributes as when you are using slot in custom column templates.

switch parent border:

switch child border:

preserve expanded:

vue

<template>
  switch parent border: <el-switch v-model="parentBorder" /> switch child
  border: <el-switch v-model="childBorder" /> preserve expanded:
  <el-switch v-model="preserveExpanded" />
  <el-table
    :data="tableData"
    :border="parentBorder"
    :preserve-expanded-content="preserveExpanded"
    style="width: 100%"
  >
    <el-table-column type="expand">
      <template #default="props">
        <div m="4">
          <p m="t-0 b-2">State: {{ props.row.state }}</p>
          <p m="t-0 b-2">City: {{ props.row.city }}</p>
          <p m="t-0 b-2">Address: {{ props.row.address }}</p>
          <p m="t-0 b-2">Zip: {{ props.row.zip }}</p>
          <h3>Family</h3>
          <el-table :data="props.row.family" :border="childBorder">
            <el-table-column label="Name" prop="name" />
            <el-table-column label="State" prop="state" />
            <el-table-column label="City" prop="city" />
            <el-table-column label="Address" prop="address" />
            <el-table-column label="Zip" prop="zip" />
          </el-table>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="Date" prop="date" />
    <el-table-column label="Name" prop="name" />
  </el-table>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const parentBorder = ref(false)
const childBorder = ref(false)
const preserveExpanded = ref(false)
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    state: 'California',
    city: 'San Francisco',
    address: '3650 21st St, San Francisco',
    zip: 'CA 94114',
    family: [
      {
        name: 'Jerry',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
      {
        name: 'Spike',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
      {
        name: 'Tyke',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
    ],
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    state: 'California',
    city: 'San Francisco',
    address: '3650 21st St, San Francisco',
    zip: 'CA 94114',
    family: [
      {
        name: 'Jerry',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
      {
        name: 'Spike',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
      {
        name: 'Tyke',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
    ],
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    state: 'California',
    city: 'San Francisco',
    address: '3650 21st St, San Francisco',
    zip: 'CA 94114',
    family: [
      {
        name: 'Jerry',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
      {
        name: 'Spike',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
      {
        name: 'Tyke',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
    ],
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    state: 'California',
    city: 'San Francisco',
    address: '3650 21st St, San Francisco',
    zip: 'CA 94114',
    family: [
      {
        name: 'Jerry',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
      {
        name: 'Spike',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
      {
        name: 'Tyke',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
    ],
  },
  {
    date: '2016-05-08',
    name: 'Tom',
    state: 'California',
    city: 'San Francisco',
    address: '3650 21st St, San Francisco',
    zip: 'CA 94114',
    family: [
      {
        name: 'Jerry',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
      {
        name: 'Spike',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
      {
        name: 'Tyke',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
    ],
  },
  {
    date: '2016-05-06',
    name: 'Tom',
    state: 'California',
    city: 'San Francisco',
    address: '3650 21st St, San Francisco',
    zip: 'CA 94114',
    family: [
      {
        name: 'Jerry',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
      {
        name: 'Spike',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
      {
        name: 'Tyke',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
    ],
  },
  {
    date: '2016-05-07',
    name: 'Tom',
    state: 'California',
    city: 'San Francisco',
    address: '3650 21st St, San Francisco',
    zip: 'CA 94114',
    family: [
      {
        name: 'Jerry',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
      {
        name: 'Spike',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
      {
        name: 'Tyke',
        state: 'California',
        city: 'San Francisco',
        address: '3650 21st St, San Francisco',
        zip: 'CA 94114',
      },
    ],
  },
]
</script>

Tree data and lazy mode

You can display tree structure data. When row contains the children field, it is treated as nested data. For rendering nested data, the prop row-key is required. Also, child row data can be loaded asynchronously. Set lazy property of Table to true and the function load. Specify hasChildren attribute in row to determine which row contains children. Both children and hasChildren can be configured via tree-props.

vue

<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
      default-expand-all
    >
      <el-table-column prop="date" label="Date" sortable />
      <el-table-column prop="name" label="Name" sortable />
      <el-table-column prop="address" label="Address" sortable />
    </el-table>

    <el-table
      :data="tableData1"
      style="width: 100%"
      row-key="id"
      border
      lazy
      :load="load"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="date" label="Date" />
      <el-table-column prop="name" label="Name" />
      <el-table-column prop="address" label="Address" />
    </el-table>
  </div>
</template>

<script lang="ts" setup>
interface User {
  id: number
  date: string
  name: string
  address: string
  hasChildren?: boolean
  children?: User[]
}

const load = (
  row: User,
  treeNode: unknown,
  resolve: (data: User[]) => void
) => {
  setTimeout(() => {
    resolve([
      {
        id: 31,
        date: '2016-05-01',
        name: 'wangxiaohu',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        id: 32,
        date: '2016-05-01',
        name: 'wangxiaohu',
        address: 'No. 189, Grove St, Los Angeles',
      },
    ])
  }, 1000)
}

const tableData: User[] = [
  {
    id: 1,
    date: '2016-05-02',
    name: 'wangxiaohu',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 2,
    date: '2016-05-04',
    name: 'wangxiaohu',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 3,
    date: '2016-05-01',
    name: 'wangxiaohu',
    address: 'No. 189, Grove St, Los Angeles',
    children: [
      {
        id: 31,
        date: '2016-05-01',
        name: 'wangxiaohu',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        id: 32,
        date: '2016-05-01',
        name: 'wangxiaohu',
        address: 'No. 189, Grove St, Los Angeles',
      },
    ],
  },
  {
    id: 4,
    date: '2016-05-03',
    name: 'wangxiaohu',
    address: 'No. 189, Grove St, Los Angeles',
  },
]

const tableData1: User[] = [
  {
    id: 1,
    date: '2016-05-02',
    name: 'wangxiaohu',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 2,
    date: '2016-05-04',
    name: 'wangxiaohu',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 3,
    date: '2016-05-01',
    name: 'wangxiaohu',
    hasChildren: true,
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    id: 4,
    date: '2016-05-03',
    name: 'wangxiaohu',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
</script>

Selectable tree 2.8.0

When treeProps.checkStrictly is true, the selection state of parent and child nodes is no longer associated, that is, when the parent node is selected, its child nodes will not be selected; when treeProps.checkStrictly is false, the selection state of parent and child nodes will be associated with the selection state of child nodes, that is, when the parent node is selected, all its child nodes will be selected.

truefalse

Summary row

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

You can add the summary row by setting show-summary to true. By default, for the summary row, the first column does not sum anything up but always displays 'Sum' (you can configure the displayed text using sum-text), while other columns sum every number in that column up and display them. You can of course define your own sum behaviour. To do so, pass a method to summary-method, which returns an array, and each element of the returned array will be displayed in the columns of the summary row, It can be a VNode or string. The second table of this example is a detailed demo.

vue

<template>
  <el-table :data="tableData" border show-summary style="width: 100%">
    <el-table-column prop="id" label="ID" width="180" />
    <el-table-column prop="name" label="Name" />
    <el-table-column prop="amount1" sortable label="Amount 1" />
    <el-table-column prop="amount2" sortable label="Amount 2" />
    <el-table-column prop="amount3" sortable label="Amount 3" />
  </el-table>

  <el-table
    :data="tableData"
    border
    height="200"
    :summary-method="getSummaries"
    show-summary
    style="width: 100%; margin-top: 20px"
  >
    <el-table-column prop="id" label="ID" width="180" />
    <el-table-column prop="name" label="Name" />
    <el-table-column prop="amount1" label="Cost 1 ($)" />
    <el-table-column prop="amount2" label="Cost 2 ($)" />
    <el-table-column prop="amount3" label="Cost 3 ($)" />
  </el-table>
</template>

<script lang="ts" setup>
import { h } from 'vue'

import type { VNode } from 'vue'
import type { TableColumnCtx } from 'element-plus'

interface Product {
  id: string
  name: string
  amount1: string
  amount2: string
  amount3: number
}

interface SummaryMethodProps<T = Product> {
  columns: TableColumnCtx<T>[]
  data: T[]
}

const getSummaries = (param: SummaryMethodProps) => {
  const { columns, data } = param
  const sums: (string | VNode)[] = []
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = h('div', { style: { textDecoration: 'underline' } }, [
        'Total Cost',
      ])
      return
    }
    const values = data.map((item) => Number(item[column.property]))
    if (!values.every((value) => Number.isNaN(value))) {
      sums[index] = `$ ${values.reduce((prev, curr) => {
        const value = Number(curr)
        if (!Number.isNaN(value)) {
          return prev + curr
        } else {
          return prev
        }
      }, 0)}`
    } else {
      sums[index] = 'N/A'
    }
  })

  return sums
}

const tableData: Product[] = [
  {
    id: '12987122',
    name: 'Tom',
    amount1: '234',
    amount2: '3.2',
    amount3: 10,
  },
  {
    id: '12987123',
    name: 'Tom',
    amount1: '165',
    amount2: '4.43',
    amount3: 12,
  },
  {
    id: '12987124',
    name: 'Tom',
    amount1: '324',
    amount2: '1.9',
    amount3: 9,
  },
  {
    id: '12987125',
    name: 'Tom',
    amount1: '621',
    amount2: '2.2',
    amount3: 17,
  },
  {
    id: '12987126',
    name: 'Tom',
    amount1: '539',
    amount2: '4.1',
    amount3: 15,
  },
]
</script>

Rowspan and colspan

Configuring rowspan and colspan allows you to merge cells

Use the span-method attribute to configure rowspan and colspan. It accepts a method, and passes an object to that method including current row row, current column column, current row index rowIndex and current column index columnIndex. The method should return an array of two numbers, the first number being rowspan and second colspan. It can also return an object with rowspan and colspan props.

vue

<template>
  <div>
    <el-table
      :data="tableData"
      :span-method="arraySpanMethod"
      border
      style="width: 100%"
    >
      <el-table-column prop="id" label="ID" width="180" />
      <el-table-column prop="name" label="Name" />
      <el-table-column prop="amount1" sortable label="Amount 1" />
      <el-table-column prop="amount2" sortable label="Amount 2" />
      <el-table-column prop="amount3" sortable label="Amount 3" />
    </el-table>

    <el-table
      :data="tableData"
      :span-method="objectSpanMethod"
      border
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column prop="id" label="ID" width="180" />
      <el-table-column prop="name" label="Name" />
      <el-table-column prop="amount1" label="Amount 1" />
      <el-table-column prop="amount2" label="Amount 2" />
      <el-table-column prop="amount3" label="Amount 3" />
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import type { TableColumnCtx } from 'element-plus'

interface User {
  id: string
  name: string
  amount1: string
  amount2: string
  amount3: number
}

interface SpanMethodProps {
  row: User
  column: TableColumnCtx<User>
  rowIndex: number
  columnIndex: number
}

const arraySpanMethod = ({
  row,
  column,
  rowIndex,
  columnIndex,
}: SpanMethodProps) => {
  if (rowIndex % 2 === 0) {
    if (columnIndex === 0) {
      return [1, 2]
    } else if (columnIndex === 1) {
      return [0, 0]
    }
  }
}

const objectSpanMethod = ({
  row,
  column,
  rowIndex,
  columnIndex,
}: SpanMethodProps) => {
  if (columnIndex === 0) {
    if (rowIndex % 2 === 0) {
      return {
        rowspan: 2,
        colspan: 1,
      }
    } else {
      return {
        rowspan: 0,
        colspan: 0,
      }
    }
  }
}

const tableData: User[] = [
  {
    id: '12987122',
    name: 'Tom',
    amount1: '234',
    amount2: '3.2',
    amount3: 10,
  },
  {
    id: '12987123',
    name: 'Tom',
    amount1: '165',
    amount2: '4.43',
    amount3: 12,
  },
  {
    id: '12987124',
    name: 'Tom',
    amount1: '324',
    amount2: '1.9',
    amount3: 9,
  },
  {
    id: '12987125',
    name: 'Tom',
    amount1: '621',
    amount2: '2.2',
    amount3: 17,
  },
  {
    id: '12987126',
    name: 'Tom',
    amount1: '539',
    amount2: '4.1',
    amount3: 15,
  },
]
</script>

Custom index

You can customize row index in type=index columns.

To customize row indices, use index attribute on el-table-column with type=index. If it is assigned to a number, all indices will have an offset of that number. It also accepts a method with each index (starting from 0) as parameter, and the returned value will be displayed as index.

Table Layout

The table-layout property sets the algorithm used to lay out table cells, rows, and columns.

fixedauto

You can use tooltip-formatter to customize the tooltip content.

vue

<template>
  <el-table
    :data="tableData"
    show-overflow-tooltip
    :tooltip-formatter="tableRowFormatter"
    style="width: 100%"
  >
    <el-table-column
      prop="address"
      label="extends table formatter"
      width="240"
    />
    <el-table-column
      prop="tags"
      label="formatter object"
      width="240"
      :tooltip-formatter="({ row }) => row.tags.join(', ')"
    >
      <template #default="{ row }">
        <el-tag
          v-for="tag in row.tags"
          :key="tag"
          class="tag-item"
          type="primary"
        >
          {{ tag }}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column
      prop="url"
      label="with vnode"
      width="240"
      :tooltip-formatter="withVNode"
    />
  </el-table>
</template>

<script lang="ts" setup>
import { h } from 'vue'
import { ElLink, type TableTooltipData } from 'element-plus'

type TableData = {
  address: string
  tags: string[]
  url: string
}

const tableData: TableData[] = [
  {
    address: 'Lohrbergstr. 86c, Süd Lilli, Saarland',
    tags: ['Office', 'Home', 'Park', 'Garden'],
    url: 'https://github.com/element-plus/element-plus/issues',
  },
  {
    address: '760 A Street, South Frankfield, Illinois',
    tags: ['error', 'warning', 'success', 'info'],
    url: 'https://github.com/element-plus/element-plus/pulls',
  },
  {
    address: 'Arnold-Ohletz-Str. 41a, Alt Malinascheid, Thüringen',
    tags: ['one', 'two', 'three', 'four', 'five'],
    url: 'https://github.com/element-plus/element-plus/discussions',
  },
  {
    address: '23618 Windsor Drive, West Ricardoview, Idaho',
    tags: ['blue', 'white', 'dark', 'gray', 'red', 'bright'],
    url: 'https://github.com/element-plus/element-plus/actions',
  },
]

const tableRowFormatter = (data: TableTooltipData<TableData>) => {
  return `${data.cellValue}: table formatter`
}

const withVNode = (data: TableTooltipData<TableData>) => {
  return h(ElLink, { type: 'primary', href: data.cellValue }, () =>
    h('span', null, data.cellValue)
  )
}
</script>

<style scoped>
p {
  margin: 10px;
  padding: 0;
}
.tag-item + .tag-item {
  margin-left: 5px;
}
</style>

Table API

Table Attributes

Name	Description	Type	Default
data	table data	`array`	[]
height	table'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 styles	`string` / `number`	—
max-height	table's max-height. The legal value is a number or the height in px	`string` / `number`	—
stripe	whether Table is striped	`boolean`	false
border	whether Table has vertical border	`boolean`	false
size	size of Table	`enum`	—
fit	whether width of column automatically fits its container	`boolean`	true
show-header	whether Table header is visible	`boolean`	true
highlight-current-row	whether current row is highlighted	`boolean`	false
current-row-key	key of current row, a set only prop	`string` / `number`	—
row-class-name	function that returns custom class names for a row, or a string assigning class names for every row	`Function` / `string`	—
row-style	function that returns custom style for a row, or an object assigning custom style for every row	`Function` / `object`	—
cell-class-name	function that returns custom class names for a cell, or a string assigning class names for every cell	`Function` / `string`	—
cell-style	function that returns custom style for a cell, or an object assigning custom style for every cell	`Function` / `object`	—
header-row-class-name	function that returns custom class names for a row in table header, or a string assigning class names for every row in table header	`Function` / `string`	—
header-row-style	function that returns custom style for a row in table header, or an object assigning custom style for every row in table header	`Function` / `object`	—
header-cell-class-name	function that returns custom class names for a cell in table header, or a string assigning class names for every cell in table header	`Function` / `string`	—
header-cell-style	function that returns custom style for a cell in table header, or an object assigning custom style for every cell in table header	`Function` / `object`	—
row-key	key 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` / `string`	—
empty-text	displayed text when data is empty. You can customize this area with `#empty`	`string`	No Data
default-expand-all	whether expand all rows by default, works when the table has a column type="expand" or contains tree structure data	`boolean`	false
expand-row-keys	set expanded rows by this prop, prop's value is the keys of expand rows, you should set row-key before using this prop.	`object`	—
default-sort	set the default sort column and order. property `prop` is used to set default sort column, property `order` is used to set default sort order	`object`	if `prop` is set, and `order` is not set, then `order` is default to ascending
tooltip-effect	the `effect` of the overflow tooltip	`enum`	dark
tooltip-options 2.2.28	the options for the overflow tooltip, see the following tooltip component	`object`	`object`
append-filter-panel-to 2.8.4	which element the filter panels appends to	`string`	—
show-summary	whether to display a summary row	`boolean`	false
sum-text	displayed text for the first column of summary row	`string`	Sum
summary-method	custom summary method	`Function`	—
span-method	method that returns rowspan and colspan	`Function`	—
select-on-indeterminate	controls 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
indent	horizontal indentation of tree data	`number`	16
lazy	whether to lazy loading data	`boolean`	false
load	method for loading child row data, only works when `lazy` is true	`Function`	—
tree-props	configuration for rendering nested data	`object`	`object`
table-layout	sets the algorithm used to lay out table cells, rows, and columns	`enum`	fixed
scrollbar-always-on	always show scrollbar	`boolean`	false
show-overflow-tooltip	whether to hide extra content and show them in a tooltip when hovering on the cell.It will affect all the table columns, refer to table tooltip-options	`boolean` / `object` 2.3.7	—
flexible 2.2.1	ensure main axis minimum-size doesn't follow the content	`boolean`	false
scrollbar-tabindex 2.8.3	body scrollbar's wrap container tabindex	`string` / `number`	—
allow-drag-last-column 2.9.2	whether to allow drag the last column	`boolean`	true
tooltip-formatter 2.9.4	customize tooltip content when using `show-overflow-tooltip`	`Function`	—
preserve-expanded-content 2.9.7	whether to preserve expanded row content in DOM when collapsed	`boolean`	false
native-scrollbar 2.10.5	whether to use native scrollbars	`boolean`	false

Table Events

Name	Description	Type
select	triggers when user clicks the checkbox in a row	`Function`
select-all	triggers when user clicks the checkbox in table header	`Function`
selection-change	triggers when selection changes	`Function`
cell-mouse-enter	triggers when hovering into a cell	`Function`
cell-mouse-leave	triggers when hovering out of a cell	`Function`
cell-click	triggers when clicking a cell	`Function`
cell-dblclick	triggers when double clicking a cell	`Function`
cell-contextmenu	triggers when user right clicks on a cell	`Function`
row-click	triggers when clicking a row	`Function`
row-contextmenu	triggers when user right clicks on a row	`Function`
row-dblclick	triggers when double clicking a row	`Function`
header-click	triggers when clicking a column header	`Function`
header-contextmenu	triggers when user right clicks on a column header	`Function`
sort-change	triggers when Table's sorting changes	`Function`
filter-change	triggers when the table's filter changes	`Function`
current-change	triggers when current row changes	`Function`
header-dragend	triggers after changing a column's width by dragging the column header's border	`Function`
expand-change	triggers when user expands or collapses a row (for expandable table, second param is expandedRows; for tree Table, second param is expanded)	`Function`
scroll 2.9.0	Invoked after scrolled	`Function`

Table Slots

Name	Description	Subtags
default	customize default content	Table-column
append	Contents 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.	—
empty	you can customize content when data is empty.	—

Table Exposes

Method	Description	Type
clearSelection	used in multiple selection Table, clear user selection	`Function`
getSelectionRows	returns the currently selected rows	`Function`
toggleRowSelection	used in multiple selection Table, toggle if a certain row is selected. With the second parameter, you can directly set if this row is selected	`Function`
toggleAllSelection	used in multiple selection Table, toggle select all and deselect all	`Function`
toggleRowExpansion	used 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 collapsed	`Function`
setCurrentRow	used in single selection Table, set a certain row selected. If called without any parameter, it will clear selection	`Function`
clearSort	clear sorting, restore data to the original order	`Function`
clearFilter	clear filters of the columns whose `columnKey` are passed in. If no params, clear all filters	`Function`
doLayout	refresh the layout of Table. When the visibility of Table changes, you may need to call this method to get a correct layout	`Function`
sort	sort Table manually. Property `prop` is used to set sort column, property `order` is used to set sort order	`Function`
scrollTo	scrolls to a particular set of coordinates	`Function`
setScrollTop	set vertical scroll position	`Function`
setScrollLeft	set horizontal scroll position	`Function`
columns 2.7.6	Get table columns context.	`array`
updateKeyChildren 2.8.4	used in lazy Table, must set `rowKey`, update key children	`Function`

Table-column API

Table-column Attributes

Name	Description	Type	Default
type	type 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	`enum`	default
index	customize indices for each row, works on columns with `type=index`	`number` / `Function`	—
label	column label	`string`	—
column-key	column's key. If you need to use the filter-change event, you need this attribute to identify which column is being filtered	`string`	—
prop	field name. You can also use its alias: `property`	`string`	—
width	column width	`string` / `number`	''
min-width	column minimum width. Columns with `width` has a fixed width, while columns with `min-width` has a width that is distributed in proportion	`string` / `number`	''
fixed	whether column is fixed at left / right. Will be fixed at left if `true`	`enum` / `boolean`	false
render-header	render function for table header of this column	`Function`	—
sortable	whether column can be sorted. Remote sorting can be done by setting this attribute to 'custom' and listening to the `sort-change` event of Table	`boolean` / `string`	false
sort-method	sorting method, works when `sortable` is `true`. Should return a number, just like Array.sort	`Function`	—
sort-by	specify 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 equal	`Function` / `string` / `object`	—
sort-orders	the 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 array	`object`	['ascending', 'descending', null]
resizable	whether column width can be resized, works when `border` of `el-table` is `true`	`boolean`	true
formatter	function that formats cell content	`function`	—
show-overflow-tooltip	whether to hide extra content and show them in a tooltip when hovering on the cell	`boolean` / `object` 2.2.28	undefined
align	alignment	`enum`	left
header-align	alignment of the table header. If omitted, the value of the above `align` attribute will be applied	`enum`	left
class-name	class name of cells in the column	`string`	—
label-class-name	class name of the label of this column	`string`	—
selectable	function that determines if a certain row can be selected, works when `type` is 'selection'	`Function`	—
reserve-selection	whether to reserve selection after data refreshing, works when `type` is 'selection'. Note that `row-key` is required for this to work	`boolean`	false
filters	an array of data filtering options. For each element in this array, `text` and `value` are required	`array`	—
filter-placement	placement for the filter dropdown	`enum`	—
filter-class-name 2.5.0	className for the filter dropdown	`string`	—
filter-multiple	whether data filtering supports multiple options	`boolean`	true
filter-method	data 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 `true`	`function`	—
filtered-value	filter value for selected data, might be useful when table header is rendered with `render-header`	`object`	—
tooltip-formatter 2.9.4	customize tooltip content when using `show-overflow-tooltip`	`Function`	—

Table-column Slots

Name	Description	Type
default	Custom content for table columns	`object`
header	Custom content for table header	`object`
filter-icon 2.7.8	Custom content for filter icon	`object`
expand 2.10.0	Custom content for expand columns	`object`

Type Declarations

Show declarations

interface Sort {
  prop: string
  order: 'ascending' | 'descending'
  init?: any
  silent?: any
}

interface TreeNode {
  expanded?: boolean
  loading?: boolean
  noLazyChildren?: boolean
  indent?: number
  level?: number
  display?: boolean
}

type DefaultRow = Record<PropertyKey, any>

type TableColumnCtx<T extends DefaultRow = DefaultRow> = {
  id: string
  realWidth: number | null
  type: string
  label: string
  className: string
  labelClassName: string
  property: string
  prop: string
  width?: string | number
  minWidth: string | number
  renderHeader: (data: CI<T>) => VNode
  sortable: boolean | string
  sortMethod: (a: T, b: T) => number
  sortBy: string | ((row: T, index: number, array?: T[]) => string) | string[]
  resizable: boolean
  columnKey: string
  rawColumnKey: string
  align: string
  headerAlign: string
  showOverflowTooltip?: boolean | TableOverflowTooltipOptions
  tooltipFormatter?: TableOverflowTooltipFormatter<T>
  fixed: boolean | string
  formatter: (
    row: T,
    column: TableColumnCtx<T>,
    cellValue: any,
    index: number
  ) => VNode | string
  selectable: (row: T, index: number) => boolean
  reserveSelection: boolean
  filterMethod: FilterMethods<T>
  filteredValue: string[]
  filters: Filters
  filterPlacement: string
  filterMultiple: boolean
  filterClassName: string
  index: number | ((index: number) => number)
  sortOrders: (TableSortOrder | null)[]
  renderCell: (data: any) => VNode | VNode[]
  colSpan: number
  rowSpan: number
  children?: TableColumnCtx<T>[]
  level: number
  filterable: boolean | FilterMethods<T> | Filters
  order: TableSortOrder | null
  isColumnGroup: boolean
  isSubColumn: boolean
  columns: TableColumnCtx<T>[]
  getColumnIndex: () => number
  no: number
  filterOpened?: boolean
  renderFilterIcon?: (scope: any) => VNode
  renderExpand?: (scope: any) => VNode
}

FAQ

How to use image preview in the table?

vue

<template>
  <el-table-column width="180">
    <template #default="scope">
      <el-image preview-teleported :preview-src-list="srcList" />
    </template>
  </el-table-column>
</template>

Why column is not rendered when use DOM templates?

Typical issue: #5046 #5862 #6919

This is because the HTML spec only allows a few specific elements to omit closing tags, the most common being <input> and <img>. For all other elements, if you omit the closing tag, the native HTML parser will think you never terminated the opening tag

For more details please refer to vue docs