docs(components): [virtual-table] documentations (#7386)

* docs(components): [virtual-table] documentations

- Add examples for `sticky-rows`.
- Add examples for `fixed-columns`.

* Remove style language marking

docs/en-US/component/table-v2.md

@@ -46,3 +46,27 @@ Use `row-class-name` to customize how the row looks. In this case, every 10th ro
 table-v2/row-class
 
 :::
+
+## Table with sticky rows
+
+You can make some rows stick to the top of the table, and that can be very easily achieved by using `fixed-data` attribute.
+
+You can add dynamically set the sticky row with scroll events like this example did.
+
+:::demo
+
+table-v2/sticky-rows
+
+:::
+
+## Table with fixed columns
+
+For some reason, you want to make the columns stick on the left and right, you can do that by adding special attributes for table.
+
+You can set the column's attribute `fixed` to `true` (representing `FixedDir.LEFT`) or `FixedDir.LEFT` or `FixedDir.RIGHT`
+
+:::demo
+
+table-v2/fixed-columns
+
+:::

docs/examples/table-v2/fixed-columns.vue

@@ -0,0 +1,64 @@
+<template>
+  <table-v2
+    :columns="columns"
+    :data="data"
+    :sort-by="sortBy"
+    :width="700"
+    :height="400"
+    fixed
+    @column-sort="onSort"
+  />
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { FixedDir, SortOrder, TableV2 } from '@element-plus/components/table-v2'
+
+import type { SortBy } from '@element-plus/components/table-v2'
+
+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].fixed = true
+columns[1].fixed = FixedDir.LEFT
+columns[9].fixed = FixedDir.RIGHT
+
+for (let i = 0; i < 3; i++) columns[i].sortable = true
+
+const sortBy = ref<SortBy>({
+  key: 'column-0',
+  order: SortOrder.ASC,
+})
+
+const onSort = (_sortBy: SortBy) => {
+  data = data.reverse()
+  sortBy.value = _sortBy
+}
+</script>

docs/examples/table-v2/sticky-rows.vue

@@ -0,0 +1,46 @@
+<template>
+  <table-v2
+    :columns="columns"
+    :data="tableData"
+    :fixed-data="fixedData"
+    :width="700"
+    :height="400"
+    :row-class="rowClass"
+    fixed
+    @scroll="onScroll"
+  />
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+import { TableV2 } from '@element-plus/components/table-v2'
+import { generateColumns, generateData } from './utils'
+
+const columns = generateColumns(10)
+const data = generateData(columns, 200)
+
+const rowClass = ({ rowIndex }) => {
+  if (rowIndex < 0 || (rowIndex + 1) % 5 === 0) return 'sticky-row'
+}
+
+const stickyIndex = ref(0)
+
+const fixedData = computed(() =>
+  data.slice(stickyIndex.value, stickyIndex.value + 1)
+)
+
+const tableData = computed(() => {
+  return data.slice(1)
+})
+
+const onScroll = ({ scrollTop }) => {
+  stickyIndex.value = Math.floor(scrollTop / 250) * 5
+}
+</script>
+
+<style>
+.el-table-v2__fixed-header-row {
+  background-color: var(--el-color-primary-light-5);
+  font-weight: bold;
+}
+</style>