feat(components): [virtual-table] TableHeaderCell (#7075)

- Add TableHeaderCell props definition
- Implement TableHeaderCell
- Extract some common props
- Fix components' name

packages/components/table-v2/src/common.ts

@@ -2,9 +2,17 @@ import { definePropType } from '@element-plus/utils'
 
 import type { Column } from './types'
 
-export const expandColumnKey = String
+type AnyColumn = Column<any>
+
+export const classType = String
 
 export const columns = {
-  type: definePropType<Column<any>[]>(Array),
+  type: definePropType<AnyColumn[]>(Array),
   required: true,
 } as const
+
+export const column = {
+  type: definePropType<AnyColumn>(Object),
+}
+
+export const expandColumnKey = String

packages/components/table-v2/src/header-cell.ts

@@ -0,0 +1,12 @@
+import { buildProps } from '@element-plus/utils'
+import { classType, column } from './common'
+
+import type { ExtractPropTypes } from 'vue'
+
+export const tableV2HeaderCell = buildProps({
+  class: classType,
+  columnIndex: Number,
+  column,
+})
+
+export type TableV2HeaderCell = ExtractPropTypes<typeof tableV2HeaderCell>

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

@@ -12,6 +12,6 @@ const TableV2Cell = defineComponent((props: TableV2CellProps, { slots }) => {
   )
 })
 
-TableV2Cell.name = 'TableV2Cell'
+TableV2Cell.name = 'ElTableV2Cell'
 
 export default TableV2Cell

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

@@ -0,0 +1,15 @@
+import { defineComponent } from 'vue'
+
+import type { TableV2HeaderCell } from './header-cell'
+
+const HeaderCell = defineComponent((props: TableV2HeaderCell, { slots }) =>
+  slots.default ? (
+    slots.default(props)
+  ) : (
+    <div class={props.class}>{props.column?.title}</div>
+  )
+)
+
+HeaderCell.name = 'ElTableV2HeaderCell'
+
+export default HeaderCell

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

@@ -5,7 +5,7 @@ import { tableV2HeaderProps } from './header'
 
 import type { CSSProperties } from 'vue'
 
-const COMPONENT_NAME = 'TableV2Header'
+const COMPONENT_NAME = 'ElTableV2Header'
 const TableV2Header = defineComponent({
   name: COMPONENT_NAME,
   props: tableV2HeaderProps,

packages/components/table-v2/src/table-row.tsx

@@ -124,8 +124,10 @@ const useTableRow = (props: TableV2RowProps) => {
   return { isScrolling, measurable, measured, rowRef, eventHandlers, onExpand }
 }
 
+const COMPONENT_NAME = 'ElTableV2TableRow'
+
 const TableV2Row = defineComponent({
-  name: '',
+  name: COMPONENT_NAME,
   props: tableV2RowProps,
   setup(props, { expose, slots }) {
     const {