docs(components): [virtual-table] filtering (#7401)

- Add example for adding filter.
- Export header cell slot renderer interface.

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

@@ -88,3 +88,13 @@ It is recommended that you write your table component in JSX, since it contains
 table-v2/grouping-header
 
 :::
+
+## Filter
+
+Virtualized Table providers customizing header renderers for rendering customized header, then we can use that to render filters
+
+:::demo
+
+table-v2/filter
+
+:::

docs/examples/table-v2/filter.vue

@@ -0,0 +1,114 @@
+<template>
+  <table-v2
+    fixed
+    :columns="fixedColumns"
+    :data="data"
+    :width="700"
+    :height="400"
+  />
+</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 { Filter } from '@element-plus/icons-vue'
+
+import type { HeaderCellSlotProps } 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)
+const data = ref(generateData(columns, 200))
+
+const shouldFilter = ref(false)
+const popoverRef = ref()
+
+const onFilter = () => {
+  popoverRef.value.hide()
+  if (shouldFilter.value) {
+    data.value = generateData(columns, 100, 'filtered-')
+  } else {
+    data.value = generateData(columns, 200)
+  }
+}
+
+const onReset = () => {
+  shouldFilter.value = false
+  popoverRef.value.hide()
+}
+
+columns[0].headerCellRenderer = (props: HeaderCellSlotProps) => {
+  return (
+    <div class="flex items-center justify-center">
+      <span class="mr-2 text-xs">{props.column.title}</span>
+      <ElPopover ref={popoverRef} trigger="click">
+        {{
+          default: () => (
+            <div class="filter-wrapper">
+              <div class="filter-group">
+                <ElCheckbox v-model={shouldFilter.value}>
+                  Filter Text
+                </ElCheckbox>
+              </div>
+              <div class="table-v2__demo-filter">
+                <ElButton type="text" onClick={onFilter}>
+                  Confirm
+                </ElButton>
+                <ElButton type="text" onClick={onReset}>
+                  Reset
+                </ElButton>
+              </div>
+            </div>
+          ),
+          reference: () => (
+            <ElIcon class="cursor-pointer">
+              <Filter />
+            </ElIcon>
+          ),
+        }}
+      </ElPopover>
+    </div>
+  )
+}
+
+const fixedColumns = columns.map((column, columnIndex) => {
+  let fixed: FixedDir | undefined = undefined
+  if (columnIndex < 2) fixed = FixedDir.LEFT
+  if (columnIndex > 9) fixed = FixedDir.RIGHT
+  return { ...column, fixed, width: 100 }
+})
+</script>
+
+<style>
+.table-v2__demo-filter {
+  border-top: var(--el-border);
+  margin: 12px -12px -12px;
+  padding: 0 12px;
+  display: flex;
+  justify-content: space-between;
+}
+</style>

packages/components/table-v2/index.ts

@@ -9,3 +9,5 @@ export type {
   TableV2CustomizedHeaderSlotParam,
 } from './src/types'
 export * from './src/table'
+
+export type { HeaderCellSlotProps } from './src/renderers/header-cell'

packages/components/table-v2/src/renderers/header-cell.tsx

@@ -11,7 +11,7 @@ import type { UseTableReturn } from '../use-table'
 import type { TableV2Props } from '../table'
 import type { TableV2HeaderCell } from '../header-cell'
 
-type HeaderCellRendererProps = TableV2HeaderRowCellRendererParams &
+export type HeaderCellRendererProps = TableV2HeaderRowCellRendererParams &
   UnwrapNestedRefs<Pick<UseTableReturn, 'columnsStyles' | 'onColumnSorted'>> &
   Pick<TableV2Props, 'sortBy' | 'sortState' | 'headerCellProps'> & {
     ns: UseNamespaceReturn
@@ -94,3 +94,4 @@ const HeaderCellRenderer: FunctionalComponent<HeaderCellRendererProps> = (
 }
 
 export default HeaderCellRenderer
+export type HeaderCellSlotProps = HeaderCellRendererProps & { class: string }