docs(components): [virtual-table] custom cell & row class (#7370)

- Add example for customizing cell
- Add example for customize row class

docs/.vitepress/crowdin/en-US/pages/component.json

@@ -194,11 +194,6 @@
         "link": "/table",
         "text": "Table"
       },
-      {
-        "link": "/table-v2",
-        "text": "Virtualized Table",
-        "promotion": "2.2.0"
-      },
       {
         "link": "/tag",
         "text": "Tag"

docs/.vitepress/vitepress/composables/feature-flag.ts

@@ -1,14 +1,16 @@
 import { computed, unref } from 'vue'
 import { useData } from 'vitepress'
-import { useBrowserLocation } from '@vueuse/core'
+import { isClient, useBrowserLocation } from '@vueuse/core'
 import type { MaybeRef } from '@vueuse/core'
 
 const location = useBrowserLocation()
 
 export const useFeatureFlag = (flag: MaybeRef<string>) => {
   const { theme } = useData()
-
   return computed(() => {
+    // On server rendering there will was no `location`
+    if (!isClient) return false
+
     const _flag = unref(flag)
     const params = new URLSearchParams(location.value.search)
     return params.get(`feature:${_flag}`) || (theme.value.features || {})[_flag]

docs/components.d.ts

@@ -1,6 +1,7 @@
 // generated by unplugin-vue-components
 // We suggest you to commit this file into source control
 // Read more: https://github.com/vuejs/vue-next/pull/3399
+import '@vue/runtime-core'
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
@@ -15,4 +16,4 @@ declare module '@vue/runtime-core' {
   }
 }
 
-export { }
+export {}

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

@@ -24,3 +24,25 @@ Let's render a basic case of Virtualized Table with 10 columns by 1000 rows, to
 table-v2/basic
 
 :::
+
+## Customize Cell Renderer
+
+Of course, you can render the table cell per your needs, here is a simple example of how to customize your cell.
+
+:::demo
+
+table-v2/cell-templating
+
+:::
+
+## Table with status
+
+You can highlight your table content to distinguish between "success, information, warning, danger" and other states.
+
+Use `row-class-name` to customize how the row looks. In this case, every 10th row will be highlighted with `bg-blue-200` class, every 5th row will be highlighted with `bg-red-100` class.
+
+:::demo
+
+table-v2/row-class
+
+:::

docs/examples/table-v2/cell-templating.vue

@@ -0,0 +1,67 @@
+<template>
+  <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 { 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'
+
+let id = 0
+
+const dataGenerator = () => ({
+  id: `random-id-${++id}`,
+  name: 'Tom',
+  date: '2020-10-1',
+})
+
+const columns: Column<any>[] = [
+  {
+    key: 'date',
+    title: 'Date',
+    dataKey: 'date',
+    width: 150,
+    fixed: FixedDir.LEFT,
+    cellRenderer: ({ cellData: date }) => (
+      <ElTooltip content={dayjs(date).format('YYYY/MM/DD')}>
+        {
+          <span class="flex items-center">
+            <ElIcon class="mr-3">
+              <Timer />
+            </ElIcon>
+            {dayjs(date).format('YYYY/MM/DD')}
+          </span>
+        }
+      </ElTooltip>
+    ),
+  },
+  {
+    key: 'name',
+    title: 'Name',
+    dataKey: 'name',
+    width: 150,
+    align: 'center',
+    cellRenderer: ({ cellData: name }) => <ElTag>{name}</ElTag>,
+  },
+  {
+    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: 5000 }).map(dataGenerator))
+</script>

docs/examples/table-v2/row-class.vue

@@ -0,0 +1,86 @@
+<template>
+  <table-v2
+    :columns="columns"
+    :data="data"
+    :row-class="rowClass"
+    :width="700"
+    :height="400"
+    fixed
+  />
+</template>
+
+<script lang="tsx" setup>
+import { ref } from 'vue'
+import dayjs from 'dayjs'
+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'
+
+let id = 0
+
+const dataGenerator = () => ({
+  id: `random-id-${++id}`,
+  name: 'Tom',
+  date: '2020-10-1',
+})
+
+const columns: Column<any>[] = [
+  {
+    key: 'date',
+    title: 'Date',
+    dataKey: 'date',
+    width: 150,
+    fixed: FixedDir.LEFT,
+    cellRenderer: ({ cellData: date }) => (
+      <ElTooltip content={dayjs(date).format('YYYY/MM/DD')}>
+        {
+          <span class="flex items-center">
+            <ElIcon class="mr-3">
+              <Timer />
+            </ElIcon>
+            {dayjs(date).format('YYYY/MM/DD')}
+          </span>
+        }
+      </ElTooltip>
+    ),
+  },
+  {
+    key: 'name',
+    title: 'Name',
+    dataKey: 'name',
+    width: 150,
+    align: 'center',
+    cellRenderer: ({ cellData: name }) => <ElTag>{name}</ElTag>,
+  },
+  {
+    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: 5000 }).map(dataGenerator))
+
+const rowClass = ({ rowIndex }: Parameters<RowClassNameGetter<any>>[0]) => {
+  if (rowIndex % 10 === 5) {
+    return 'bg-red-100'
+  } else if (rowIndex % 10 === 0) {
+    return 'bg-blue-200'
+  }
+  return ''
+}
+</script>

packages/components/table-v2/index.ts

@@ -1,3 +1,5 @@
 export { Alignment, FixedDir, SortOrder } from './src/constants'
+export { default as TableV2 } from './src/table-v2'
 
 export type { Column, Columns, SortBy } from './src/types'
+export * from './src/table'