docs(components): [virtualized-table] finishing leftovers (#7496)

- Finishing the documentation examples - Add APIs to the documentation - Fix some issue while updating the documentations
2026-03-13 07:51:17 +08:00 · 2022-05-05 00:54:49 +08:00
parent 49d48b8f3b
commit 14cfb0500f
37 changed files with 1101 additions and 132 deletions
--- a/docs/examples/table-v2/basic.vue
+++ b/docs/examples/table-v2/basic.vue
@@ -1,11 +1,41 @@
 <template>
-  <table-v2 :columns="columns" :data="data" :width="700" :height="400" fixed />
+  <el-table-v2
+    :columns="columns"
+    :data="data"
+    :width="700"
+    :height="400"
+    fixed
+  />
 </template>

 <script lang="ts" setup>
-import TableV2 from '@element-plus/components/table-v2/src/table-v2'
-import { generateColumns, generateData } from './utils'
+const generateColumns = (length = 10, prefix = 'column-', props?: any) =>
+  Array.from({ length }).map((_, columnIndex) => ({
+    ...props,
+    key: `${prefix}${columnIndex}`,
+    dataKey: `${prefix}${columnIndex}`,
+    title: `Column ${columnIndex}`,
+    width: 150,
+  }))
+
+const generateData = (
+  columns: ReturnType<typeof generateColumns>,
+  length = 200,
+  prefix = 'row-'
+) =>
+  Array.from({ length }).map((_, rowIndex) => {
+    return columns.reduce(
+      (rowData, column, columnIndex) => {
+        rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`
+        return rowData
+      },
+      {
+        id: `${prefix}${rowIndex}`,
+        parentId: null,
+      }
+    )
+  })

 const columns = generateColumns(10)
-const data = generateData(columns, 1000)
+const data = generateData(columns, 200)
 </script>
--- a/docs/examples/table-v2/cell-templating.vue
+++ b/docs/examples/table-v2/cell-templating.vue
@@ -1,15 +1,26 @@
 <template>
-  <table-v2 :columns="columns" :data="data" :width="700" :height="400" fixed />
+  <el-table-v2
+    :columns="columns"
+    :data="data"
+    :width="700"
+    :height="400"
+    fixed
+  />
 </template>

 <script lang="tsx" setup>
 import { ref } from 'vue'
 import dayjs from 'dayjs'
+import {
+  ElButton,
+  ElIcon,
+  ElTag,
+  ElTooltip,
+  TableV2FixedDir,
+} from 'element-plus'
 import { Timer } from '@element-plus/icons-vue'
-import { ElButton, ElIcon, ElTag, ElTooltip } from '@element-plus/components'
-import { FixedDir, TableV2 } from '@element-plus/components/table-v2'

-import type { Column } from '@element-plus/components/table-v2'
+import type { Column } from 'element-plus'

 let id = 0

@@ -25,7 +36,7 @@ const columns: Column<any>[] = [
    title: 'Date',
    dataKey: 'date',
    width: 150,
-    fixed: FixedDir.LEFT,
+    fixed: TableV2FixedDir.LEFT,
    cellRenderer: ({ cellData: date }) => (
      <ElTooltip content={dayjs(date).format('YYYY/MM/DD')}>
        {
@@ -63,5 +74,5 @@ const columns: Column<any>[] = [
  },
 ]

-const data = ref(Array.from({ length: 5000 }).map(dataGenerator))
+const data = ref(Array.from({ length: 200 }).map(dataGenerator))
 </script>
--- a/docs/examples/table-v2/colspan.vue
+++ b/docs/examples/table-v2/colspan.vue
@@ -1,14 +1,13 @@
 <template>
-  <table-v2 fixed :columns="columns" :data="data" :width="700" :height="400">
+  <el-table-v2 fixed :columns="columns" :data="data" :width="700" :height="400">
    <template #row="props">
      <Row v-bind="props" />
    </template>
-  </table-v2>
+  </el-table-v2>
 </template>

 <script lang="ts" setup>
 import { cloneVNode } from 'vue'
-import TableV2 from '@element-plus/components/table-v2/src/table-v2'

 const generateColumns = (length = 10, prefix = 'column-', props?: any) =>
  Array.from({ length }).map((_, columnIndex) => ({
--- a/docs/examples/table-v2/controlled-sort.vue
+++ b/docs/examples/table-v2/controlled-sort.vue
@@ -0,0 +1,60 @@
+<template>
+  <el-table-v2
+    v-model:sort-state="sortState"
+    :columns="columns"
+    :data="data"
+    :width="700"
+    :height="400"
+    fixed
+    @column-sort="onSort"
+  />
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { TableV2SortOrder } from 'element-plus'
+import type { SortBy, SortState } from 'element-plus'
+
+const generateColumns = (length = 10, prefix = 'column-', props?: any) =>
+  Array.from({ length }).map((_, columnIndex) => ({
+    ...props,
+    key: `${prefix}${columnIndex}`,
+    dataKey: `${prefix}${columnIndex}`,
+    title: `Column ${columnIndex}`,
+    width: 150,
+  }))
+
+const generateData = (
+  columns: ReturnType<typeof generateColumns>,
+  length = 200,
+  prefix = 'row-'
+) =>
+  Array.from({ length }).map((_, rowIndex) => {
+    return columns.reduce(
+      (rowData, column, columnIndex) => {
+        rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`
+        return rowData
+      },
+      {
+        id: `${prefix}${rowIndex}`,
+        parentId: null,
+      }
+    )
+  })
+
+const columns = generateColumns(10)
+const data = ref(generateData(columns, 200))
+
+columns[0].sortable = true
+columns[1].sortable = true
+
+const sortState = ref<SortState>({
+  'column-0': TableV2SortOrder.DESC,
+  'column-1': TableV2SortOrder.ASC,
+})
+
+const onSort = ({ key, order }: SortBy) => {
+  sortState.value[key] = order
+  data.value = data.value.reverse()
+}
+</script>
--- a/docs/examples/table-v2/detailed-view.vue
+++ b/docs/examples/table-v2/detailed-view.vue
@@ -0,0 +1,88 @@
+<template>
+  <el-table-v2
+    :columns="columns"
+    :data="data"
+    :estimated-row-height="50"
+    :expand-column-key="columns[0].key"
+    :width="700"
+    :height="400"
+  >
+    <template #row="props">
+      <Row v-bind="props" />
+    </template>
+  </el-table-v2>
+</template>
+
+<script lang="tsx" setup>
+import { ref } from 'vue'
+
+const detailedText = `Velit sed aspernatur tempora. Natus consequatur officiis dicta vel assumenda.
+Itaque est temporibus minus quis. Ipsum commodiab porro vel voluptas illum.
+Qui quam nulla et dolore autem itaque est.
+Id consequatur ipsum ea fuga et odit eligendi impedit.
+Maiores officiis occaecati et magnam et sapiente est velit sunt.
+Non et tempore temporibus. Excepturi et quos. Minus distinctio aut.
+Voluptatem ea excepturi omnis vel. Non aperiam sit sed laboriosam eaque omnis deleniti.
+Est molestiae omnis non et nulla repudiandae fuga sit.`
+
+const generateColumns = (length = 10, prefix = 'column-', props?: any) =>
+  Array.from({ length }).map((_, columnIndex) => ({
+    ...props,
+    key: `${prefix}${columnIndex}`,
+    dataKey: `${prefix}${columnIndex}`,
+    title: `Column ${columnIndex}`,
+    width: 150,
+  }))
+
+const generateData = (
+  columns: ReturnType<typeof generateColumns>,
+  length = 200,
+  prefix = 'row-'
+) =>
+  Array.from({ length }).map((_, rowIndex) => {
+    return columns.reduce(
+      (rowData, column, columnIndex) => {
+        rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`
+        return rowData
+      },
+      {
+        id: `${prefix}${rowIndex}`,
+        parentId: null,
+      }
+    )
+  })
+
+const columns = generateColumns(10)
+const data = ref(
+  generateData(columns, 200).map((data) => {
+    data.children = [
+      {
+        id: `${data.id}-detail-content`,
+        detail: detailedText,
+      },
+    ]
+    return data
+  })
+)
+
+const Row = ({ cells, rowData }) => {
+  if (rowData.detail) return <div class="p-6">{rowData.detail}</div>
+  return cells
+}
+
+Row.inheritAttrs = false
+
+console.log(data)
+</script>
+
+<style>
+.el-table-v2__row-depth-0 {
+  height: 50px;
+}
+
+.el-table-v2__cell-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>
--- a/docs/examples/table-v2/dynamic-height.vue
+++ b/docs/examples/table-v2/dynamic-height.vue
@@ -0,0 +1,99 @@
+<template>
+  <el-table-v2
+    :columns="columns"
+    :data="data"
+    :sort-by="sort"
+    :estimated-row-height="40"
+    :width="700"
+    :height="400"
+    fixed
+    @column-sort="onColumnSort"
+  />
+</template>
+
+<script lang="tsx" setup>
+import { ref } from 'vue'
+import {
+  ElButton,
+  ElTag,
+  TableV2FixedDir,
+  TableV2SortOrder,
+} from 'element-plus'
+
+import type { Column, SortBy } from '@element-plus/components/table-v2'
+
+const longText =
+  'Quaerat ipsam necessitatibus eum quibusdam est id voluptatem cumque mollitia.'
+const midText = 'Corrupti doloremque a quos vero delectus consequatur.'
+const shortText = 'Eius optio fugiat.'
+
+const textList = [shortText, midText, longText]
+
+// generate random number in range 0 to 2
+
+let id = 0
+
+const dataGenerator = () => ({
+  id: `random:${++id}`,
+  name: 'Tom',
+  date: '2016-05-03',
+  description: textList[Math.floor(Math.random() * 3)],
+})
+
+const columns: Column<any>[] = [
+  {
+    key: 'id',
+    title: 'Id',
+    dataKey: 'id',
+    width: 150,
+    sortable: true,
+    fixed: TableV2FixedDir.LEFT,
+  },
+  {
+    key: 'name',
+    title: 'Name',
+    dataKey: 'name',
+    width: 150,
+    align: 'center',
+    cellRenderer: ({ cellData: name }) => <ElTag>{name}</ElTag>,
+  },
+  {
+    key: 'description',
+    title: 'Description',
+    dataKey: 'description',
+    width: 150,
+    cellRenderer: ({ cellData: description }) => (
+      <div style="padding: 10px 0;">{description}</div>
+    ),
+  },
+  {
+    key: 'operations',
+    title: 'Operations',
+    cellRenderer: () => (
+      <>
+        <ElButton size="small">Edit</ElButton>
+        <ElButton size="small" type="danger">
+          Delete
+        </ElButton>
+      </>
+    ),
+    width: 150,
+    align: 'center',
+  },
+]
+const data = ref(
+  Array.from({ length: 200 })
+    .map(dataGenerator)
+    .sort((a, b) => (a.name > b.name ? 1 : -1))
+)
+
+const sort = ref<SortBy>({ key: 'name', order: TableV2SortOrder.ASC })
+
+const onColumnSort = (sortBy: SortBy) => {
+  const order = sortBy.order === 'asc' ? 1 : -1
+  const dataClone = [...data.value]
+  dataClone.sort((a, b) => (a[sortBy.key] > b[sortBy.key] ? order : -order))
+  sort.value = sortBy
+  data.value = dataClone
+}
+</script>
--- a/docs/examples/table-v2/empty.vue
+++ b/docs/examples/table-v2/empty.vue
@@ -0,0 +1,29 @@
+<template>
+  <el-table-v2
+    :columns="columns"
+    :data="[]"
+    :row-height="40"
+    :width="700"
+    :height="400"
+    :footer-height="50"
+  >
+    <template #empty>
+      <div class="flex items-center justify-center h-100%">
+        <el-empty />
+      </div>
+    </template>
+  </el-table-v2>
+</template>
+
+<script lang="tsx" setup>
+const generateColumns = (length = 10, prefix = 'column-', props?: any) =>
+  Array.from({ length }).map((_, columnIndex) => ({
+    ...props,
+    key: `${prefix}${columnIndex}`,
+    dataKey: `${prefix}${columnIndex}`,
+    title: `Column ${columnIndex}`,
+    width: 150,
+  }))
+
+const columns = generateColumns(10)
+</script>
--- a/docs/examples/table-v2/filter.vue
+++ b/docs/examples/table-v2/filter.vue
@@ -1,5 +1,5 @@
 <template>
-  <table-v2
+  <el-table-v2
    fixed
    :columns="fixedColumns"
    :data="data"
@@ -9,11 +9,16 @@
 </template>
 <script lang="tsx" setup>
 import { ref } from 'vue'
-import { ElButton, ElCheckbox, ElIcon, ElPopover } from 'element-plus'
-import { FixedDir, TableV2 } from '@element-plus/components/table-v2'
+import {
+  ElButton,
+  ElCheckbox,
+  ElIcon,
+  ElPopover,
+  TableV2FixedDir,
+} from 'element-plus'
 import { Filter } from '@element-plus/icons-vue'

-import type { HeaderCellSlotProps } from '@element-plus/components/table-v2'
+import type { HeaderCellSlotProps } from 'element-plus'

 const generateColumns = (length = 10, prefix = 'column-', props?: any) =>
  Array.from({ length }).map((_, columnIndex) => ({
@@ -58,7 +63,7 @@ const onFilter = () => {

 const onReset = () => {
  shouldFilter.value = false
-  popoverRef.value.hide()
+  onFilter()
 }

 columns[0].headerCellRenderer = (props: HeaderCellSlotProps) => {
@@ -74,7 +79,7 @@ columns[0].headerCellRenderer = (props: HeaderCellSlotProps) => {
                  Filter Text
                </ElCheckbox>
              </div>
-              <div class="table-v2__demo-filter">
+              <div class="el-table-v2__demo-filter">
                <ElButton type="text" onClick={onFilter}>
                  Confirm
                </ElButton>
@@ -96,15 +101,15 @@ columns[0].headerCellRenderer = (props: HeaderCellSlotProps) => {
 }

 const fixedColumns = columns.map((column, columnIndex) => {
-  let fixed: FixedDir | undefined = undefined
-  if (columnIndex < 2) fixed = FixedDir.LEFT
-  if (columnIndex > 9) fixed = FixedDir.RIGHT
+  let fixed: TableV2FixedDir | undefined = undefined
+  if (columnIndex < 2) fixed = TableV2FixedDir.LEFT
+  if (columnIndex > 9) fixed = TableV2FixedDir.RIGHT
  return { ...column, fixed, width: 100 }
 })
 </script>

 <style>
-.table-v2__demo-filter {
+.el-table-v2__demo-filter {
  border-top: var(--el-border);
  margin: 12px -12px -12px;
  padding: 0 12px;
--- a/docs/examples/table-v2/fixed-columns.vue
+++ b/docs/examples/table-v2/fixed-columns.vue
@@ -1,5 +1,5 @@
 <template>
-  <table-v2
+  <el-table-v2
    :columns="columns"
    :data="data"
    :sort-by="sortBy"
@@ -12,9 +12,9 @@

 <script lang="ts" setup>
 import { ref } from 'vue'
-import { FixedDir, SortOrder, TableV2 } from '@element-plus/components/table-v2'
+import { TableV2FixedDir, TableV2SortOrder } from 'element-plus'

-import type { SortBy } from '@element-plus/components/table-v2'
+import type { SortBy } from 'element-plus'

 const generateColumns = (length = 10, prefix = 'column-', props?: any) =>
  Array.from({ length }).map((_, columnIndex) => ({
@@ -47,14 +47,14 @@ const columns = generateColumns(10)
 let data = generateData(columns, 200)

 columns[0].fixed = true
-columns[1].fixed = FixedDir.LEFT
-columns[9].fixed = FixedDir.RIGHT
+columns[1].fixed = TableV2FixedDir.LEFT
+columns[9].fixed = TableV2FixedDir.RIGHT

 for (let i = 0; i < 3; i++) columns[i].sortable = true

 const sortBy = ref<SortBy>({
  key: 'column-0',
-  order: SortOrder.ASC,
+  order: TableV2SortOrder.ASC,
 })

 const onSort = (_sortBy: SortBy) => {
--- a/docs/examples/table-v2/footer.vue
+++ b/docs/examples/table-v2/footer.vue
@@ -0,0 +1,56 @@
+<template>
+  <el-table-v2
+    :columns="columns"
+    :data="data"
+    :row-height="40"
+    :width="700"
+    :height="400"
+    :footer-height="50"
+    fixed
+  >
+    <template #footer
+      ><div
+        class="flex items-center"
+        style="
+          justify-content: center;
+          height: 100%;
+          background-color: var(--el-color-primary-light-7);
+        "
+      >
+        Display a message in the footer
+      </div>
+    </template>
+  </el-table-v2>
+</template>
+
+<script lang="ts" setup>
+const generateColumns = (length = 10, prefix = 'column-', props?: any) =>
+  Array.from({ length }).map((_, columnIndex) => ({
+    ...props,
+    key: `${prefix}${columnIndex}`,
+    dataKey: `${prefix}${columnIndex}`,
+    title: `Column ${columnIndex}`,
+    width: 150,
+  }))
+
+const generateData = (
+  columns: ReturnType<typeof generateColumns>,
+  length = 200,
+  prefix = 'row-'
+) =>
+  Array.from({ length }).map((_, rowIndex) => {
+    return columns.reduce(
+      (rowData, column, columnIndex) => {
+        rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`
+        return rowData
+      },
+      {
+        id: `${prefix}${rowIndex}`,
+        parentId: null,
+      }
+    )
+  })
+
+const columns = generateColumns(10)
+const data = generateData(columns, 200)
+</script>
--- a/docs/examples/table-v2/grouping-header.vue
+++ b/docs/examples/table-v2/grouping-header.vue
@@ -1,5 +1,5 @@
 <template>
-  <table-v2
+  <el-table-v2
    fixed
    :columns="fixedColumns"
    :data="data"
@@ -11,20 +11,16 @@
    <template #header="props">
      <customized-header v-bind="props" />
    </template>
-  </table-v2>
+  </el-table-v2>
 </template>
 <script lang="tsx" setup>
-import {
-  FixedDir,
-  TableV2,
-  TableV2Placeholder,
-} from '@element-plus/components/table-v2'
+import { TableV2FixedDir, TableV2Placeholder } from 'element-plus'

 import type { FunctionalComponent } from 'vue'
 import type {
  HeaderClassNameGetter,
  TableV2CustomizedHeaderSlotParam,
-} from '@element-plus/components/table-v2'
+} from 'element-plus'

 const generateColumns = (length = 10, prefix = 'column-', props?: any) =>
  Array.from({ length }).map((_, columnIndex) => ({
@@ -56,9 +52,9 @@ const columns = generateColumns(15)
 const data = generateData(columns, 200)

 const fixedColumns = columns.map((column, columnIndex) => {
-  let fixed: FixedDir | undefined = undefined
-  if (columnIndex < 3) fixed = FixedDir.LEFT
-  if (columnIndex > 12) fixed = FixedDir.RIGHT
+  let fixed: TableV2FixedDir | undefined = undefined
+  if (columnIndex < 3) fixed = TableV2FixedDir.LEFT
+  if (columnIndex > 12) fixed = TableV2FixedDir.RIGHT
  return { ...column, fixed, width: 100 }
 })

@@ -112,11 +108,11 @@ const headerClass = ({
 </script>

 <style>
-.el-table-v2__header-row .custom-header-cell {
+.el-el-table-v2__header-row .custom-header-cell {
  border-right: 1px solid var(--el-border-color);
 }

-.el-table-v2__header-row .custom-header-cell:last-child {
+.el-el-table-v2__header-row .custom-header-cell:last-child {
  border-right: none;
 }

--- a/docs/examples/table-v2/overlay.vue
+++ b/docs/examples/table-v2/overlay.vue
@@ -0,0 +1,54 @@
+<template>
+  <el-table-v2
+    :columns="columns"
+    :data="data"
+    :row-height="40"
+    :width="700"
+    :height="400"
+  >
+    <template #overlay>
+      <div
+        class="el-loading-mask"
+        style="display: flex; align-items: center; justify-content: center"
+      >
+        <el-icon class="is-loading" color="var(--el-color-primary)" :size="26">
+          <loading-icon />
+        </el-icon>
+      </div>
+    </template>
+  </el-table-v2>
+</template>
+
+<script lang="ts" setup>
+import { Loading as LoadingIcon } from '@element-plus/icons-vue'
+
+const generateColumns = (length = 10, prefix = 'column-', props?: any) =>
+  Array.from({ length }).map((_, columnIndex) => ({
+    ...props,
+    key: `${prefix}${columnIndex}`,
+    dataKey: `${prefix}${columnIndex}`,
+    title: `Column ${columnIndex}`,
+    width: 150,
+  }))
+
+const generateData = (
+  columns: ReturnType<typeof generateColumns>,
+  length = 200,
+  prefix = 'row-'
+) =>
+  Array.from({ length }).map((_, rowIndex) => {
+    return columns.reduce(
+      (rowData, column, columnIndex) => {
+        rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`
+        return rowData
+      },
+      {
+        id: `${prefix}${rowIndex}`,
+        parentId: null,
+      }
+    )
+  })
+
+const columns = generateColumns(10)
+const data = generateData(columns, 200)
+</script>
--- a/docs/examples/table-v2/row-class.vue
+++ b/docs/examples/table-v2/row-class.vue
@@ -1,5 +1,5 @@
 <template>
-  <table-v2
+  <el-table-v2
    :columns="columns"
    :data="data"
    :row-class="rowClass"
@@ -12,14 +12,16 @@
 <script lang="tsx" setup>
 import { ref } from 'vue'
 import dayjs from 'dayjs'
+import {
+  ElButton,
+  ElIcon,
+  ElTag,
+  ElTooltip,
+  TableV2FixedDir,
+} from 'element-plus'
 import { Timer } from '@element-plus/icons-vue'
-import { ElButton, ElIcon, ElTag, ElTooltip } from '@element-plus/components'
-import { FixedDir, TableV2 } from '@element-plus/components/table-v2'

-import type {
-  Column,
-  RowClassNameGetter,
-} from '@element-plus/components/table-v2'
+import type { Column, RowClassNameGetter } from 'element-plus'

 let id = 0

@@ -35,7 +37,7 @@ const columns: Column<any>[] = [
    title: 'Date',
    dataKey: 'date',
    width: 150,
-    fixed: FixedDir.LEFT,
+    fixed: TableV2FixedDir.LEFT,
    cellRenderer: ({ cellData: date }) => (
      <ElTooltip content={dayjs(date).format('YYYY/MM/DD')}>
        {
@@ -73,7 +75,7 @@ const columns: Column<any>[] = [
  },
 ]

-const data = ref(Array.from({ length: 5000 }).map(dataGenerator))
+const data = ref(Array.from({ length: 200 }).map(dataGenerator))

 const rowClass = ({ rowIndex }: Parameters<RowClassNameGetter<any>>[0]) => {
  if (rowIndex % 10 === 5) {
--- a/docs/examples/table-v2/rowspan.vue
+++ b/docs/examples/table-v2/rowspan.vue
@@ -1,14 +1,13 @@
 <template>
-  <table-v2 fixed :columns="columns" :data="data" :width="700" :height="400">
+  <el-table-v2 fixed :columns="columns" :data="data" :width="700" :height="400">
    <template #row="props">
      <Row v-bind="props" />
    </template>
-  </table-v2>
+  </el-table-v2>
 </template>

 <script lang="ts" setup>
 import { cloneVNode } from 'vue'
-import TableV2 from '@element-plus/components/table-v2/src/table-v2'

 const generateColumns = (length = 10, prefix = 'column-', props?: any) =>
  Array.from({ length }).map((_, columnIndex) => ({
--- a/docs/examples/table-v2/sort.vue
+++ b/docs/examples/table-v2/sort.vue
@@ -0,0 +1,60 @@
+<template>
+  <el-table-v2
+    :columns="columns"
+    :data="data"
+    :sort-by="sortState"
+    :width="700"
+    :height="400"
+    fixed
+    @column-sort="onSort"
+  />
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { TableV2SortOrder } from 'element-plus'
+import type { SortBy } from 'element-plus'
+
+const generateColumns = (length = 10, prefix = 'column-', props?: any) =>
+  Array.from({ length }).map((_, columnIndex) => ({
+    ...props,
+    key: `${prefix}${columnIndex}`,
+    dataKey: `${prefix}${columnIndex}`,
+    title: `Column ${columnIndex}`,
+    width: 150,
+  }))
+
+const generateData = (
+  columns: ReturnType<typeof generateColumns>,
+  length = 200,
+  prefix = 'row-'
+) =>
+  Array.from({ length }).map((_, rowIndex) => {
+    return columns.reduce(
+      (rowData, column, columnIndex) => {
+        rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`
+        return rowData
+      },
+      {
+        id: `${prefix}${rowIndex}`,
+        parentId: null,
+      }
+    )
+  })
+
+const columns = generateColumns(10)
+let data = generateData(columns, 200)
+
+columns[0].sortable = true
+
+const sortState = ref<SortBy>({
+  key: 'column-0',
+  order: TableV2SortOrder.ASC,
+})
+
+const onSort = (sortBy: SortBy) => {
+  console.log(sortBy)
+  data = data.reverse()
+  sortState.value = sortBy
+}
+</script>
--- a/docs/examples/table-v2/spans.vue
+++ b/docs/examples/table-v2/spans.vue
@@ -1,14 +1,13 @@
 <template>
-  <table-v2 fixed :columns="columns" :data="data" :width="700" :height="400">
+  <el-table-v2 fixed :columns="columns" :data="data" :width="700" :height="400">
    <template #row="props">
      <Row v-bind="props" />
    </template>
-  </table-v2>
+  </el-table-v2>
 </template>

 <script lang="tsx" setup>
 import { cloneVNode } from 'vue'
-import { TableV2 } from '@element-plus/components/table-v2'

 const generateColumns = (length = 10, prefix = 'column-', props?: any) =>
  Array.from({ length }).map((_, columnIndex) => ({
--- a/docs/examples/table-v2/sticky-rows.vue
+++ b/docs/examples/table-v2/sticky-rows.vue
@@ -1,5 +1,5 @@
 <template>
-  <table-v2
+  <el-table-v2
    :columns="columns"
    :data="tableData"
    :fixed-data="fixedData"
@@ -13,8 +13,33 @@

 <script lang="ts" setup>
 import { computed, ref } from 'vue'
-import { TableV2 } from '@element-plus/components/table-v2'
-import { generateColumns, generateData } from './utils'
+
+const generateColumns = (length = 10, prefix = 'column-', props?: any) =>
+  Array.from({ length }).map((_, columnIndex) => ({
+    ...props,
+    key: `${prefix}${columnIndex}`,
+    dataKey: `${prefix}${columnIndex}`,
+    title: `Column ${columnIndex}`,
+    width: 150,
+  }))
+
+const generateData = (
+  columns: ReturnType<typeof generateColumns>,
+  length = 200,
+  prefix = 'row-'
+) =>
+  Array.from({ length }).map((_, rowIndex) => {
+    return columns.reduce(
+      (rowData, column, columnIndex) => {
+        rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`
+        return rowData
+      },
+      {
+        id: `${prefix}${rowIndex}`,
+        parentId: null,
+      }
+    )
+  })

 const columns = generateColumns(10)
 const data = generateData(columns, 200)
@@ -39,7 +64,7 @@ const onScroll = ({ scrollTop }) => {
 </script>

 <style>
-.el-table-v2__fixed-header-row {
+.el-el-table-v2__fixed-header-row {
  background-color: var(--el-color-primary-light-5);
  font-weight: bold;
 }
--- a/docs/examples/table-v2/tree-data.vue
+++ b/docs/examples/table-v2/tree-data.vue
@@ -0,0 +1,128 @@
+<template>
+  <el-table-v2
+    v-model:expanded-row-keys="expandedRowKeys"
+    :columns="columns"
+    :data="treeData"
+    :width="700"
+    :expand-column-key="expandColumnKey"
+    :height="400"
+    fixed
+    @row-expand="onRowExpanded"
+    @expanded-rows-change="onExpandedRowsChange"
+  />
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+import { TableV2FixedDir } from 'element-plus'
+
+import type { ExpandedRowsChangeHandler, RowExpandHandler } from 'element-plus'
+
+const generateColumns = (length = 10, prefix = 'column-', props?: any) =>
+  Array.from({ length }).map((_, columnIndex) => ({
+    ...props,
+    key: `${prefix}${columnIndex}`,
+    dataKey: `${prefix}${columnIndex}`,
+    title: `Column ${columnIndex}`,
+    width: 150,
+  }))
+
+const generateData = (
+  columns: ReturnType<typeof generateColumns>,
+  length = 200,
+  prefix = 'row-'
+) =>
+  Array.from({ length }).map((_, rowIndex) => {
+    return columns.reduce(
+      (rowData, column, columnIndex) => {
+        rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`
+        return rowData
+      },
+      {
+        id: `${prefix}${rowIndex}`,
+        parentId: null,
+      }
+    )
+  })
+
+const columns = generateColumns(10).map((column, columnIndex) => {
+  let fixed!: TableV2FixedDir
+  if (columnIndex < 2) fixed = TableV2FixedDir.LEFT
+  if (columnIndex > 8) fixed = TableV2FixedDir.RIGHT
+  return { ...column, fixed }
+})
+
+const data = generateData(columns, 200)
+
+const expandColumnKey = 'column-0'
+
+// add some sub items
+for (let i = 0; i < 50; i++) {
+  data.push(
+    {
+      ...data[0],
+      id: `${data[0].id}-sub-${i}`,
+      parentId: data[0].id,
+      [expandColumnKey]: `Sub ${i}`,
+    },
+    {
+      ...data[2],
+      id: `${data[2].id}-sub-${i}`,
+      parentId: data[2].id,
+      [expandColumnKey]: `Sub ${i}`,
+    },
+    {
+      ...data[2],
+      id: `${data[2].id}-sub-sub-${i}`,
+      parentId: `${data[2].id}-sub-${i}`,
+      [expandColumnKey]: `Sub-Sub ${i}`,
+    }
+  )
+}
+
+function unflatten(
+  data: ReturnType<typeof generateData>,
+  rootId = null,
+  dataKey = 'id',
+  parentKey = 'parentId'
+) {
+  const tree: any[] = []
+  const childrenMap = {}
+
+  for (const datum of data) {
+    const item = { ...datum }
+    const id = item[dataKey]
+    const parentId = item[parentKey]
+
+    if (Array.isArray(item.children)) {
+      childrenMap[id] = item.children.concat(childrenMap[id] || [])
+    } else if (!childrenMap[id]) {
+      childrenMap[id] = []
+    }
+    item.children = childrenMap[id]
+
+    if (parentId !== undefined && parentId !== rootId) {
+      if (!childrenMap[parentId]) childrenMap[parentId] = []
+      childrenMap[parentId].push(item)
+    } else {
+      tree.push(item)
+    }
+  }
+
+  return tree
+}
+
+const treeData = computed(() => unflatten(data))
+
+const expandedRowKeys = ref<string[]>([])
+
+const onRowExpanded = ({ expanded }: Parameters<RowExpandHandler<any>>[0]) => {
+  console.log('Expanded:', expanded)
+}
+
+const onExpandedRowsChange = (
+  expandedKeys: Parameters<ExpandedRowsChangeHandler>[0]
+) => {
+  console.log(expandedKeys)
+}
+</script>
--- a/docs/examples/table-v2/utils.ts
+++ b/docs/examples/table-v2/utils.ts
@@ -1,26 +0,0 @@
-export const generateColumns = (length = 10, prefix = 'column-', props?: any) =>
-  Array.from({ length }).map((_, columnIndex) => ({
-    ...props,
-    key: `${prefix}${columnIndex}`,
-    dataKey: `${prefix}${columnIndex}`,
-    title: `Column ${columnIndex}`,
-    width: 150,
-  }))
-
-export const generateData = (
-  columns: ReturnType<typeof generateColumns>,
-  length = 200,
-  prefix = 'row-'
-) =>
-  Array.from({ length }).map((_, rowIndex) => {
-    return columns.reduce(
-      (rowData, column, columnIndex) => {
-        rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`
-        return rowData
-      },
-      {
-        id: `${prefix}${rowIndex}`,
-        parentId: null,
-      }
-    )
-  })