feat(components): [virtual-table] columns (#7027)

- Define column props and types
- Rearranged types

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

@@ -0,0 +1,59 @@
+import { buildProps, definePropType } from '@element-plus/utils'
+
+import type { ExtractPropTypes, StyleValue } from 'vue'
+import type {
+  Alignment,
+  CellRenderer,
+  DataGetter,
+  FixedDirection,
+  HeaderRenderer,
+} from './types'
+
+const widthType = {
+  type: Number,
+  default: undefined,
+} as const
+
+export const tableV2ColumnProps = buildProps({
+  /**
+   * Attributes
+   */
+  align: {
+    type: definePropType<Alignment>(String),
+    default: 'left',
+  },
+  class: String,
+  dataKey: String,
+  fixed: {
+    type: definePropType<boolean | FixedDirection>([String, Boolean]),
+    default: false,
+  },
+  headerClass: String,
+  hidden: Boolean,
+  resizable: Boolean,
+  style: {
+    type: definePropType<StyleValue>(Object),
+  },
+  sortable: Boolean,
+  title: String,
+
+  maxWidth: widthType,
+  minWidth: widthType,
+  width: {
+    type: Number,
+    required: true,
+  },
+
+  // getters & renderers
+  cellRenderer: {
+    type: definePropType<CellRenderer<any>>(Function),
+  },
+  dataGetter: {
+    type: definePropType<DataGetter<any>>(Function),
+  },
+  headerRenderer: {
+    type: definePropType<HeaderRenderer<any>>(Function),
+  },
+} as const)
+
+export type TableV2ColumnProps = ExtractPropTypes<typeof tableV2ColumnProps>

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

@@ -0,0 +1 @@
+export const sortOrders = ['asc', 'desc'] as const

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

@@ -1,49 +1,22 @@
 import { buildProps, definePropType } from '@element-plus/utils'
 
-import type { ExtractPropTypes, StyleValue, VNode } from 'vue'
-
-const sortOrders = ['asc', 'desc'] as const
-
-export type Alignment = 'left' | 'center' | 'right'
-export type FixedDirection = 'left' | 'right'
-export type KeyType = string | number | symbol
-export type SortOrder = typeof sortOrders
+import type { ExtractPropTypes, StyleValue } from 'vue'
+import type {
+  Column,
+  ColumnCommonParams,
+  RowCommonParams,
+  SortOrder,
+} from './types'
 
 /**
  * Param types
  */
-export type ColumnCommonParams<T> = {
-  columns: Column<T>[]
-  column: Column<T>
-  columnIndex: number
-}
-
-export type RowCommonParams<T> = {
-  rowData: T[]
-  rowIndex: number
-}
-
-export type CellRendererParams<T> = {
-  cellData: T
-} & RowCommonParams<T> &
-  ColumnCommonParams<T>
-
-export type HeaderRendererParams<T> = {
-  headerIndex: number
-} & ColumnCommonParams<T>
-
 export type ColumnSortParams<T> = {
   column: Column<T>
   key: KeyType
   order: SortOrder
 }
 
-export type DataGetterParams<T> = {
-  columns: Column<T>[]
-  column: Column<T>
-  columnIndex: number
-} & RowCommonParams<T>
-
 export type RowExpandParams<T> = {
   expanded: boolean
   rowKey: KeyType
@@ -54,16 +27,9 @@ export type RowEventHandlerParams<T> = {
   event: Event
 } & RowCommonParams<T>
 
-export type ClassNameGetterParams<T> = CellRendererParams<T>
-
 /**
  * Renderer/Getter types
  */
-export type CellRenderer<T> = (params: CellRendererParams<T>) => VNode
-
-export type HeaderRenderer<T> = (params: HeaderRendererParams<T>) => VNode
-
-export type ClassNameGetter<T> = (params: ClassNameGetterParams<T>) => string
 
 export type ExtraCellPropGetter<T> = (
   params: ColumnCommonParams<T> & RowCommonParams<T>
@@ -95,7 +61,6 @@ export type RowClassNameGetter<T> = (
  * Handler types
  */
 export type ColumnSortHandler<T> = (params: ColumnSortParams<T>) => void
-export type DataGetter<T> = (params: DataGetterParams<T>) => T
 export type RowExpandHandler<T> = (params: RowExpandParams<T>) => void
 export type RowEventHandler<T> = (params: RowEventHandlerParams<T>) => void
 
@@ -107,38 +72,6 @@ export type RowEventHandlers<T> = {
   mouseleave?: RowEventHandler<T>
 }
 
-export type Column<T = any> = {
-  key: KeyType
-  /**
-   * Data part
-   */
-  dataKey?: string
-  dataGetter?: DataGetter<T>
-  /**
-   * Attributes
-   */
-  align?: Alignment
-  className?: any | ClassNameGetter<T>
-  fixed?: true | FixedDirection
-  title?: string
-  hidden?: boolean
-  maxWidth?: number
-  minWidth?: number
-  resizable?: boolean
-  style?: StyleValue
-  sortable?: boolean
-  width: number
-  /**
-   * Renderers
-   */
-  cellRenderer?: CellRenderer<T>
-  headerRenderer?: HeaderRenderer<T>
-  /**
-   * Extendable sections
-   */
-  [key: string]: any
-}
-
 export const tableV2Props = buildProps({
   /**
    * Unique items

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

@@ -0,0 +1,83 @@
+import type { StyleValue, VNode } from 'vue'
+import type { sortOrders } from './constants'
+
+export type Alignment = 'left' | 'center' | 'right'
+export type FixedDirection = 'left' | 'right'
+export type KeyType = string | number | symbol
+export type SortOrder = typeof sortOrders
+
+/**
+ * Param types
+ */
+export type CellRendererParams<T> = {
+  cellData: T
+} & RowCommonParams<T> &
+  ColumnCommonParams<T>
+
+export type ColumnCommonParams<T> = {
+  columns: Column<T>[]
+  column: Column<T>
+  columnIndex: number
+}
+
+export type HeaderRendererParams<T> = {
+  headerIndex: number
+} & ColumnCommonParams<T>
+
+export type RowCommonParams<T> = {
+  rowData: T[]
+  rowIndex: number
+}
+
+export type ClassNameGetterParams<T> = {
+  cellData: T
+} & RowCommonParams<T> &
+  ColumnCommonParams<T>
+
+export type DataGetterParams<T> = {
+  columns: Column<T>[]
+  column: Column<T>
+  columnIndex: number
+} & RowCommonParams<T>
+
+export type DataGetter<T> = (params: DataGetterParams<T>) => T
+export type ClassNameGetter<T> = (params: ClassNameGetterParams<T>) => string
+
+/**
+ * Renderer/Getter types
+ */
+export type CellRenderer<T> = (params: CellRendererParams<T>) => VNode
+
+export type HeaderRenderer<T> = (params: HeaderRendererParams<T>) => VNode
+
+export type Column<T = any> = {
+  key: KeyType
+  /**
+   * Data part
+   */
+  dataKey?: string
+  dataGetter?: DataGetter<T>
+  /**
+   * Attributes
+   */
+  align?: Alignment
+  className?: any | ClassNameGetter<T>
+  fixed?: true | FixedDirection
+  title?: string
+  hidden?: boolean
+  maxWidth?: number
+  minWidth?: number
+  resizable?: boolean
+  style?: StyleValue
+  sortable?: boolean
+  width: number
+  /**
+   * Renderers
+   */
+  cellRenderer?: CellRenderer<T>
+  headerRenderer?: HeaderRenderer<T>
+  /**
+   * Extendable sections
+   */
+  [key: string]: any
+}