Table

The default matches Arco's borderless table; border matches cell-bordered tables. See the Element Plus docs for props.

Basics & Borders

Toggle borders, headers and fit; clicking a row shows the Element Plus current-row highlight with no Arco equivalent.

Border

Header

Fit

<script setup lang="ts">
import { ref } from 'vue'
const border = ref(false)
const header = ref(true)
const fit = ref(true)
const rows = [
  { id: 1, name: 'Alex', age: 32, city: 'London', amount: 120 },
  { id: 2, name: 'Sam', age: 28, city: 'Paris', amount: 80 },
  { id: 3, name: 'Taylor', age: 41, city: 'London', amount: 150 },
  { id: 4, name: 'Jordan', age: 35, city: 'Tokyo', amount: 100 },
]
</script>

<template>
  <div style="width: 100%">
    <div style="display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px">
      <el-switch v-model="border" active-text="Border" />
      <el-switch v-model="header" active-text="Header" />
      <el-switch v-model="fit" active-text="Fit" />
    </div>
    <el-table :data="rows" :border="border" :show-header="header" :fit="fit" highlight-current-row>
      <el-table-column prop="name" label="Name" width="160" />
      <el-table-column prop="age" label="Age" width="100" />
      <el-table-column prop="city" label="City" show-overflow-tooltip />
    </el-table>
  </div>
</template>

Stripes, Sizes & Summary

Change size to compare density; stripes and summaries match their Arco use cases.

SmallDefaultLarge

<script setup lang="ts">
import { ref } from 'vue'
const size = ref<'small' | 'default' | 'large'>('default')
const rows = [
  { id: 1, name: 'Alex', age: 32, city: 'London', amount: 120 },
  { id: 2, name: 'Sam', age: 28, city: 'Paris', amount: 80 },
  { id: 3, name: 'Taylor', age: 41, city: 'London', amount: 150 },
  { id: 4, name: 'Jordan', age: 35, city: 'Tokyo', amount: 100 },
]
</script>

<template>
  <div style="width: 100%">
    <el-radio-group v-model="size" style="margin-bottom: 16px">
      <el-radio-button value="small">Small</el-radio-button>
      <el-radio-button value="default">Default</el-radio-button>
      <el-radio-button value="large">Large</el-radio-button>
    </el-radio-group>
    <el-table :data="rows" :size="size" stripe show-summary sum-text="Total">
      <el-table-column prop="name" label="Name" />
      <el-table-column prop="amount" label="Amount" />
    </el-table>
  </div>
</template>

Sort, Filter & Select

Sort using headers, filter cities with the filter control and select rows with checkboxes.

<script setup lang="ts">
const rows = [
  { id: 1, name: 'Alex', age: 32, city: 'London', amount: 120 },
  { id: 2, name: 'Sam', age: 28, city: 'Paris', amount: 80 },
  { id: 3, name: 'Taylor', age: 41, city: 'London', amount: 150 },
  { id: 4, name: 'Jordan', age: 35, city: 'Tokyo', amount: 100 },
]
const filters = [{ text: 'London', value: 'London' }, { text: 'Paris', value: 'Paris' }]
// Keep only the rows whose city matches the selected filter.
function filterCity(value: string, row: (typeof rows)[number]) {
  return row.city === value
}
</script>

<template>
  <el-table :data="rows" :default-sort="{ prop: 'age', order: 'ascending' }" style="width: 100%">
    <el-table-column type="selection" width="40" />
    <el-table-column prop="name" label="Name" sortable />
    <el-table-column prop="age" label="Age" sortable width="100" />
    <el-table-column prop="city" label="City" :filters="filters" :filter-method="filterCity" />
  </el-table>
</template>

Fixed Columns & Grouped Headers

Scroll horizontally to see fixed columns; grouped headers retain Element Plus borders.

<script setup lang="ts">
const rows = [
  { id: 1, name: 'Alex', age: 32, city: 'London', amount: 120 },
  { id: 2, name: 'Sam', age: 28, city: 'Paris', amount: 80 },
  { id: 3, name: 'Taylor', age: 41, city: 'London', amount: 150 },
  { id: 4, name: 'Jordan', age: 35, city: 'Tokyo', amount: 100 },
]
</script>

<template>
  <el-table :data="rows" style="width: 100%">
    <el-table-column prop="name" label="Name" fixed width="160" />
    <el-table-column label="Details">
      <el-table-column prop="age" label="Age" width="180" />
      <el-table-column prop="city" label="City" width="220" />
      <el-table-column prop="amount" label="Amount" width="180" />
    </el-table-column>
    <el-table-column label="Actions" fixed="right" width="110"><template #default><el-button link type="primary">Edit</el-button></template></el-table-column>
  </el-table>
</template>

Differences from Arco

• Filter and expand icons use Element Plus icons; empty data shows text by default, and the empty slot can render ElEmpty.
• Selection and expand columns default to 48px; set width to 40 to match Arco.
• Grouped headers keep Element Plus borders; sorted-column tint supports flat headers without merged cells.
• Highlight-current-row, cell-style, row-class-name, show-header, fit and show-overflow-tooltip retain Element Plus behavior without exact Arco equivalents.
• The large size extends the theme using Element Plus size increments.