From 915e1ffe2650e36ef48890dec9ca3f596d9816f7 Mon Sep 17 00:00:00 2001
From: JeremyWuuuuu <15975785+JeremyWuuuuu@users.noreply.github.com>
Date: Mon, 25 Apr 2022 17:53:49 +0800
Subject: [PATCH] docs(components): [virtual-table] custom cell & row class
 (#7370)

- Add example for customizing cell
- Add example for customize row class
---
 .../crowdin/en-US/pages/component.json        |  5 --
 .../vitepress/composables/feature-flag.ts     |  6 +-
 docs/components.d.ts                          |  3 +-
 docs/en-US/component/table-v2.md              | 22 +++++
 docs/examples/table-v2/cell-templating.vue    | 67 +++++++++++++++
 docs/examples/table-v2/row-class.vue          | 86 +++++++++++++++++++
 packages/components/table-v2/index.ts         |  2 +
 7 files changed, 183 insertions(+), 8 deletions(-)
 create mode 100644 docs/examples/table-v2/cell-templating.vue
 create mode 100644 docs/examples/table-v2/row-class.vue

diff --git a/docs/.vitepress/crowdin/en-US/pages/component.json b/docs/.vitepress/crowdin/en-US/pages/component.json
index 4f76aa0e85..79d31e70ff 100644
--- a/docs/.vitepress/crowdin/en-US/pages/component.json
+++ b/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"
diff --git a/docs/.vitepress/vitepress/composables/feature-flag.ts b/docs/.vitepress/vitepress/composables/feature-flag.ts
index 7a4ba279c0..e97195f69a 100644
--- a/docs/.vitepress/vitepress/composables/feature-flag.ts
+++ b/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]
diff --git a/docs/components.d.ts b/docs/components.d.ts
index 2424c0dc1f..bfff667d44 100644
--- a/docs/components.d.ts
+++ b/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 {}
diff --git a/docs/en-US/component/table-v2.md b/docs/en-US/component/table-v2.md
index c8f373c335..3310c65df1 100644
--- a/docs/en-US/component/table-v2.md
+++ b/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
+
+:::
diff --git a/docs/examples/table-v2/cell-templating.vue b/docs/examples/table-v2/cell-templating.vue
new file mode 100644
index 0000000000..d0a1059885
--- /dev/null
+++ b/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>
diff --git a/docs/examples/table-v2/row-class.vue b/docs/examples/table-v2/row-class.vue
new file mode 100644
index 0000000000..a18f007d30
--- /dev/null
+++ b/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>
diff --git a/packages/components/table-v2/index.ts b/packages/components/table-v2/index.ts
index b66090c116..03ac01a969 100644
--- a/packages/components/table-v2/index.ts
+++ b/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'