feat(comp:table): add TableColumn component (#702)

the column configuration is supported through `TableColumn` in template

fix #650

packages/components/index.ts

@@ -52,7 +52,7 @@ import { IxSpin } from '@idux/components/spin'
 import { IxStatistic } from '@idux/components/statistic'
 import { IxStepper, IxStepperItem } from '@idux/components/stepper'
 import { IxSwitch } from '@idux/components/switch'
-import { IxTable } from '@idux/components/table'
+import { IxTable, IxTableColumn } from '@idux/components/table'
 import { IxTab, IxTabs } from '@idux/components/tabs'
 import { IxTag } from '@idux/components/tag'
 import { IxTextarea } from '@idux/components/textarea'
@@ -137,6 +137,7 @@ const components = [
   IxStepperItem,
   IxSwitch,
   IxTable,
+  IxTableColumn,
   IxTab,
   IxTabs,
   IxTag,

packages/components/table/index.ts

@@ -8,10 +8,12 @@
 import type { TableComponent } from './src/types'
 
 import Table from './src/Table'
+import { TableColumn } from './src/tableColumn'
 
 const IxTable = Table as unknown as TableComponent
+const IxTableColumn = TableColumn
 
-export { IxTable }
+export { IxTable, IxTableColumn }
 
 export type {
   TableInstance,
@@ -39,3 +41,5 @@ export type {
   TableColumnFilter,
   TableColumnFilterable,
 } from './src/types'
+
+export type TableColumnComponent = typeof IxTableColumn

packages/components/table/src/Table.tsx

@@ -47,7 +47,7 @@ export default defineComponent({
     const getRowKey = useGetRowKey(props, config)
     const stickyContext = useSticky(props)
     const scrollContext = useScroll(props, stickyContext)
-    const columnsContext = useColumns(props, config, scrollContext.scrollBarSizeOnFixedHolder)
+    const columnsContext = useColumns(props, slots, config, scrollContext.scrollBarSizeOnFixedHolder)
     const sortableContext = useSortable(columnsContext.flattedColumns)
     const filterableContext = useFilterables(columnsContext.flattedColumns)
     const expandableContext = useExpandable(props, columnsContext.flattedColumns)

packages/components/table/src/composables/useColumns.ts

@@ -17,24 +17,52 @@ import type {
 } from '../types'
 import type { BreakpointKey } from '@idux/cdk/breakpoint'
 import type { TableColumnBaseConfig, TableColumnExpandableConfig, TableConfig } from '@idux/components/config'
-import type { ComputedRef } from 'vue'
+import type { ComputedRef, Slots, VNode } from 'vue'
 
 import { computed, reactive, ref, watchEffect } from 'vue'
 
 import { isNil } from 'lodash-es'
 
 import { useSharedBreakpoints } from '@idux/cdk/breakpoint'
-import { convertArray } from '@idux/cdk/utils'
+import { convertArray, flattenNode } from '@idux/cdk/utils'
+
+import { tableColumnKey } from '../tableColumn'
 
 export function useColumns(
   props: TableProps,
+  slots: Slots,
   config: TableConfig,
   scrollBarSizeOnFixedHolder: ComputedRef<number>,
 ): ColumnsContext {
   const breakpoints = useSharedBreakpoints()
-  const mergedColumns = computed(() =>
-    mergeColumns(props.columns, breakpoints, config.columnBase, config.columnExpandable),
-  )
+  const mergedColumns = computed(() => {
+    const { columns } = props
+    if (columns && columns.length > 0) {
+      return mergeColumns(props.columns, breakpoints, config.columnBase, config.columnExpandable)
+    } else {
+      return (
+        flattenNode(slots.default?.(), { key: tableColumnKey }).map((column, colIndex) => {
+          const { children, props: columnProps } = column as VNode & { children: Slots }
+          const { editable, ellipsis } = columnProps || {}
+          const _editable = editable || editable === ''
+          const _ellipsis = ellipsis || ellipsis === ''
+          const newColumn = {
+            ...columnProps,
+            editable: _editable,
+            ellipsis: _ellipsis,
+            slots: children,
+          } as TableColumn
+          return covertColumn(
+            newColumn,
+            breakpoints,
+            config.columnBase,
+            config.columnExpandable,
+            `IDUX_TABLE_KEY-${colIndex}`,
+          )
+        }) || []
+      )
+    }
+  })
   const { flattedColumns, scrollBarColumn, flattedColumnsWithScrollBar } = useFlattedColumns(
     mergedColumns,
     scrollBarSizeOnFixedHolder,

packages/components/table/src/main/body/BodyCell.tsx

@@ -91,9 +91,9 @@ export default defineComponent({
       if (type === 'selectable') {
         children = renderSelectableChildren(props, selectable, handleClick)
       } else {
-        const { ellipsis } = props.column
+        const { ellipsis, slots: columnSlots } = props.column
         const text = dataValue.value
-        children = text ? renderChildren(props, slots, text) : null
+        children = text ? renderChildren(props, (columnSlots as Slots) ?? slots, text) : null
         title = children ? getColTitle(ellipsis, children, text) : undefined
       }
 

packages/components/table/src/tableColumn.ts

@@ -0,0 +1,18 @@
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
+ */
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import type { TableColumn as TableColumnProps } from './types'
+import type { FunctionalComponent, HTMLAttributes } from 'vue'
+
+const tableColumnKey = '__IDUX_TABLE_COLUMN'
+const TableColumn = (() => {}) as FunctionalComponent<Omit<HTMLAttributes, keyof TableColumnProps> & TableColumnProps>
+TableColumn.displayName = 'IxTableColumn'
+;(TableColumn as any)[tableColumnKey] = true
+
+export { TableColumn, tableColumnKey }

packages/components/table/src/types.ts

@@ -15,7 +15,7 @@ import type { EmptyProps } from '@idux/components/empty'
 import type { HeaderProps } from '@idux/components/header'
 import type { PaginationProps } from '@idux/components/pagination'
 import type { SpinProps } from '@idux/components/spin'
-import type { DefineComponent, HTMLAttributes, VNodeTypes } from 'vue'
+import type { DefineComponent, HTMLAttributes, Slots, VNode, VNodeTypes } from 'vue'
 
 import { IxPropTypes } from '@idux/cdk/utils'
 
@@ -96,6 +96,7 @@ export interface TableColumnBase<T = unknown, V = any> extends TableColumnCommon
   children?: TableColumn<T>[]
   customRender?: string | TableColumnRenderFn<any, T>
   customTitle?: string | TableColumnTitleFn
+  slots?: Slots | Record<string, (...args: any[]) => VNode>
 }
 
 export interface TableColumnRenderOption<V = any, T = unknown> {

packages/components/types.d.ts

@@ -61,7 +61,7 @@ import type { SpinComponent } from '@idux/components/spin'
 import type { StatisticComponent } from '@idux/components/statistic'
 import type { StepperComponent, StepperItemComponent } from '@idux/components/stepper'
 import type { SwitchComponent } from '@idux/components/switch'
-import type { TableComponent } from '@idux/components/table'
+import type { TableColumnComponent, TableComponent } from '@idux/components/table'
 import type { TabComponent, TabsComponent } from '@idux/components/tabs'
 import type { TagComponent } from '@idux/components/tag'
 import type { TextareaComponent } from '@idux/components/textarea'
@@ -144,6 +144,7 @@ declare module 'vue' {
     IxSwitch: SwitchComponent
     IxTab: TabComponent
     IxTable: TableComponent
+    IxTableColumn: TableColumnComponent
     IxTabs: TabsComponent
     IxTag: TagComponent
     IxTextarea: TextareaComponent