el-table-v2

Virtualized Table (TableV2) Component

TableV2 provides a virtualized table for rendering massive data efficiently.

When to Use

• Large datasets (1000+ rows)
• Performance-critical tables
• Virtual scrolling needed
• Real-time data updates

Basic Usage

<template>
  <el-table-v2
    :columns="columns"
    :data="data"
    :width="700"
    :height="400"
  />
</template>

<script setup>
const columns = [
  { key: 'id', title: 'ID', width: 100 },
  { key: 'name', title: 'Name', width: 200 },
  { key: 'email', title: 'Email', width: 300 }
]

const data = Array.from({ length: 1000 }).map((_, idx) => ({
  id: idx,
  name: `User ${idx}`,
  email: `user${idx}@example.com`
}))
</script>

Auto Resizer

<template>
  <el-auto-resizer>
    <template #default="{ height, width }">
      <el-table-v2
        :columns="columns"
        :data="data"
        :width="width"
        :height="height"
      />
    </template>
  </el-auto-resizer>
</template>

Custom Cell Renderer

<template>
  <el-table-v2
    :columns="columns"
    :data="data"
    :width="700"
    :height="400"
  />
</template>

<script setup>
import { h } from 'vue'
import { ElButton } from 'element-plus'

const columns = [
  { key: 'id', title: 'ID', width: 100 },
  { 
    key: 'action', 
    title: 'Action', 
    width: 150,
    cellRenderer: ({ rowData }) => h(ElButton, { size: 'small' }, () => 'Edit')
  }
]

const data = Array.from({ length: 100 }).map((_, idx) => ({
  id: idx
}))
</script>

Fixed Columns

<template>
  <el-table-v2
    :columns="columns"
    :data="data"
    :width="700"
    :height="400"
  />
</template>

<script setup>
const columns = [
  { key: 'id', title: 'ID', width: 100, fixed: 'left' },
  { key: 'name', title: 'Name', width: 200 },
  { key: 'email', title: 'Email', width: 300 },
  { key: 'action', title: 'Action', width: 100, fixed: 'right' }
]

const data = Array.from({ length: 100 }).map((_, idx) => ({
  id: idx,
  name: `User ${idx}`,
  email: `user${idx}@example.com`
}))
</script>