feat(comp:table): support for rendering empty cells

.eslintrc.js

@@ -184,6 +184,7 @@ module.exports = {
   },
   ignorePatterns: [
     'dist',
+    'packages/site/components.ts',
     'packages/site/src/router.ts',
     'packages/site/src/sideNav.ts',
     'packages/site/src/components/global/themeConfig.ts',

packages/components/_private/overlay/__tests__/overlay.spec.ts

@@ -12,7 +12,7 @@ describe('Overlay', () => {
   const OverlayMount = (options?: MountingOptions<Partial<OverlayProps>>) => {
     const { props, ...rest } = options || {}
     return mount(Overlay, {
-      props: { container: 'ix-overlay-container', ...props },
+      props: { container: '.ix-overlay-container', ...props },
       ...rest,
     } as MountingOptions<OverlayProps>)
   }
@@ -26,7 +26,7 @@ describe('Overlay', () => {
     document.querySelector('.ix-overlay-container')!.innerHTML = ''
   })
 
-  renderWork<OverlayProps>(Overlay, { props: { container: 'ix-overlay-container', visible: true }, slots })
+  renderWork<OverlayProps>(Overlay, { props: { container: '.ix-overlay-container', visible: true }, slots })
 
   test('visible work', async () => {
     const onUpdateVisible = vi.fn()
@@ -81,7 +81,7 @@ describe('Overlay', () => {
 
   test('container work', async () => {
     const wrapper = OverlayMount({
-      props: { container: 'ix-test-container', visible: true },
+      props: { container: '.ix-test-container', visible: true },
       slots,
     })
 
@@ -99,7 +99,7 @@ describe('Overlay', () => {
   test('zIndex work', async () => {
     let zIndex = 1001
     const wrapper = OverlayMount({
-      props: { container: 'ix-test-container', visible: true, zIndex },
+      props: { container: '.ix-test-container', visible: true, zIndex },
       slots,
     })
 

packages/components/config/src/defaultConfig.ts

@@ -285,9 +285,6 @@ export const defaultConfig: GlobalConfig = {
     childrenKey: 'children',
     getKey: 'key',
     size: 'md',
-    extra: {
-      icon: 'ellipsis',
-    },
     pagination: {
       position: 'bottomEnd',
     },

packages/components/config/src/types.ts

@@ -32,12 +32,18 @@ import type { SelectData } from '@idux/components/select'
 import type { SpaceSize } from '@idux/components/space'
 import type { SpinSize, SpinTipAlignType } from '@idux/components/spin'
 import type { StepperLabelPlacement, StepperSize } from '@idux/components/stepper'
-import type { TableColumnAlign, TableColumnSortOrder, TablePaginationPosition, TableSize } from '@idux/components/table'
+import type {
+  TableColumnAlign,
+  TableColumnSortOrder,
+  TableEmptyCellOptions,
+  TablePaginationPosition,
+  TableSize,
+} from '@idux/components/table'
 import type { TagShape } from '@idux/components/tag'
 import type { TextareaAutoRows, TextareaResize } from '@idux/components/textarea'
 import type { TreeNode } from '@idux/components/tree'
 import type { UploadFilesType, UploadIconType, UploadRequestMethod, UploadRequestOption } from '@idux/components/upload'
-import type { VNode } from 'vue'
+import type { VNode, VNodeChild } from 'vue'
 
 export interface GlobalConfig {
   common: CommonConfig
@@ -478,7 +484,8 @@ export interface TableConfig {
   rowKey?: string
   size: TableSize
 
-  extra: { icon: string }
+  emptyCell?: string | ((options: TableEmptyCellOptions) => VNodeChild)
+
   pagination: { position: TablePaginationPosition } & Partial<PaginationConfig>
 
   columnBase: TableColumnBaseConfig

packages/components/table/__tests__/__snapshots__/table.spec.ts.snap

@@ -39,7 +39,7 @@ exports[`Table > basic work > render work 1`] = `
         <tbody class=\\"ix-table-tbody\\">
           <!---->
           <tr class=\\"ix-table-row\\">
-            <td class=\\"ix-table-cell\\"><button class=\\"ix-table-expandable-trigger\\" type=\\"button\\"><i class=\\"ix-icon ix-icon-right\\" style=\\"transform: rotate(0deg);\\" role=\\"img\\" aria-label=\\"right\\"></i></button><a></a></td>
+            <td class=\\"ix-table-cell\\"><button class=\\"ix-table-expandable-trigger\\" type=\\"button\\"><i class=\\"ix-icon ix-icon-right\\" style=\\"transform: rotate(0deg);\\" role=\\"img\\" aria-label=\\"right\\"></i></button><a>expandable</a></td>
             <td class=\\"ix-table-cell\\">
               <!----><label class=\\"ix-checkbox ix-checkbox-disabled\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"true\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" disabled=\\"\\"><span class=\\"ix-checkbox-input-box\\"></span></span>
                 <!---->
@@ -61,13 +61,13 @@ exports[`Table > basic work > render work 1`] = `
               <!----></span>
             </td>
             <td class=\\"ix-table-cell\\">
-              <!----><a style=\\"margin-right: 8px;\\"></a><a></a>
+              <!----><a style=\\"margin-right: 8px;\\">Invite Edrward 0</a><a>Delete</a>
             </td>
           </tr>
           <tr class=\\"ix-table-row\\">
             <td class=\\"ix-table-cell\\"><button class=\\"ix-table-expandable-trigger\\" type=\\"button\\">
                 <!---->
-              </button><a></a></td>
+              </button><a>expandable</a></td>
             <td class=\\"ix-table-cell\\">
               <!----><label class=\\"ix-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\"><span class=\\"ix-checkbox-input-box\\"></span></span>
                 <!---->
@@ -89,13 +89,13 @@ exports[`Table > basic work > render work 1`] = `
               <!----></span>
             </td>
             <td class=\\"ix-table-cell\\">
-              <!----><a style=\\"margin-right: 8px;\\"></a><a></a>
+              <!----><a style=\\"margin-right: 8px;\\">Invite Edrward 1</a><a>Delete</a>
             </td>
           </tr>
           <tr class=\\"ix-table-row\\">
             <td class=\\"ix-table-cell\\"><button class=\\"ix-table-expandable-trigger\\" type=\\"button\\">
                 <!---->
-              </button><a></a></td>
+              </button><a>expandable</a></td>
             <td class=\\"ix-table-cell\\">
               <!----><label class=\\"ix-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\"><span class=\\"ix-checkbox-input-box\\"></span></span>
                 <!---->
@@ -117,11 +117,11 @@ exports[`Table > basic work > render work 1`] = `
               <!----></span>
             </td>
             <td class=\\"ix-table-cell\\">
-              <!----><a style=\\"margin-right: 8px;\\"></a><a></a>
+              <!----><a style=\\"margin-right: 8px;\\">Invite Edrward 2</a><a>Delete</a>
             </td>
           </tr>
           <tr class=\\"ix-table-row\\">
-            <td class=\\"ix-table-cell\\"><button class=\\"ix-table-expandable-trigger\\" type=\\"button\\"><i class=\\"ix-icon ix-icon-right\\" style=\\"transform: rotate(0deg);\\" role=\\"img\\" aria-label=\\"right\\"></i></button><a></a></td>
+            <td class=\\"ix-table-cell\\"><button class=\\"ix-table-expandable-trigger\\" type=\\"button\\"><i class=\\"ix-icon ix-icon-right\\" style=\\"transform: rotate(0deg);\\" role=\\"img\\" aria-label=\\"right\\"></i></button><a>expandable</a></td>
             <td class=\\"ix-table-cell\\">
               <!----><label class=\\"ix-checkbox ix-checkbox-disabled\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"true\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" disabled=\\"\\"><span class=\\"ix-checkbox-input-box\\"></span></span>
                 <!---->
@@ -143,13 +143,13 @@ exports[`Table > basic work > render work 1`] = `
               <!----></span>
             </td>
             <td class=\\"ix-table-cell\\">
-              <!----><a style=\\"margin-right: 8px;\\"></a><a></a>
+              <!----><a style=\\"margin-right: 8px;\\">Invite Edrward 3</a><a>Delete</a>
             </td>
           </tr>
           <tr class=\\"ix-table-row\\">
             <td class=\\"ix-table-cell\\"><button class=\\"ix-table-expandable-trigger\\" type=\\"button\\">
                 <!---->
-              </button><a></a></td>
+              </button><a>expandable</a></td>
             <td class=\\"ix-table-cell\\">
               <!----><label class=\\"ix-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\"><span class=\\"ix-checkbox-input-box\\"></span></span>
                 <!---->
@@ -171,13 +171,13 @@ exports[`Table > basic work > render work 1`] = `
               <!----></span>
             </td>
             <td class=\\"ix-table-cell\\">
-              <!----><a style=\\"margin-right: 8px;\\"></a><a></a>
+              <!----><a style=\\"margin-right: 8px;\\">Invite Edrward 4</a><a>Delete</a>
             </td>
           </tr>
           <tr class=\\"ix-table-row\\">
             <td class=\\"ix-table-cell\\"><button class=\\"ix-table-expandable-trigger\\" type=\\"button\\">
                 <!---->
-              </button><a></a></td>
+              </button><a>expandable</a></td>
             <td class=\\"ix-table-cell\\">
               <!----><label class=\\"ix-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\"><span class=\\"ix-checkbox-input-box\\"></span></span>
                 <!---->
@@ -199,11 +199,11 @@ exports[`Table > basic work > render work 1`] = `
               <!----></span>
             </td>
             <td class=\\"ix-table-cell\\">
-              <!----><a style=\\"margin-right: 8px;\\"></a><a></a>
+              <!----><a style=\\"margin-right: 8px;\\">Invite Edrward 5</a><a>Delete</a>
             </td>
           </tr>
           <tr class=\\"ix-table-row\\">
-            <td class=\\"ix-table-cell\\"><button class=\\"ix-table-expandable-trigger\\" type=\\"button\\"><i class=\\"ix-icon ix-icon-right\\" style=\\"transform: rotate(0deg);\\" role=\\"img\\" aria-label=\\"right\\"></i></button><a></a></td>
+            <td class=\\"ix-table-cell\\"><button class=\\"ix-table-expandable-trigger\\" type=\\"button\\"><i class=\\"ix-icon ix-icon-right\\" style=\\"transform: rotate(0deg);\\" role=\\"img\\" aria-label=\\"right\\"></i></button><a>expandable</a></td>
             <td class=\\"ix-table-cell\\">
               <!----><label class=\\"ix-checkbox ix-checkbox-disabled\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"true\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" disabled=\\"\\"><span class=\\"ix-checkbox-input-box\\"></span></span>
                 <!---->
@@ -225,13 +225,13 @@ exports[`Table > basic work > render work 1`] = `
               <!----></span>
             </td>
             <td class=\\"ix-table-cell\\">
-              <!----><a style=\\"margin-right: 8px;\\"></a><a></a>
+              <!----><a style=\\"margin-right: 8px;\\">Invite Edrward 6</a><a>Delete</a>
             </td>
           </tr>
           <tr class=\\"ix-table-row\\">
             <td class=\\"ix-table-cell\\"><button class=\\"ix-table-expandable-trigger\\" type=\\"button\\">
                 <!---->
-              </button><a></a></td>
+              </button><a>expandable</a></td>
             <td class=\\"ix-table-cell\\">
               <!----><label class=\\"ix-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\"><span class=\\"ix-checkbox-input-box\\"></span></span>
                 <!---->
@@ -253,13 +253,13 @@ exports[`Table > basic work > render work 1`] = `
               <!----></span>
             </td>
             <td class=\\"ix-table-cell\\">
-              <!----><a style=\\"margin-right: 8px;\\"></a><a></a>
+              <!----><a style=\\"margin-right: 8px;\\">Invite Edrward 7</a><a>Delete</a>
             </td>
           </tr>
           <tr class=\\"ix-table-row\\">
             <td class=\\"ix-table-cell\\"><button class=\\"ix-table-expandable-trigger\\" type=\\"button\\">
                 <!---->
-              </button><a></a></td>
+              </button><a>expandable</a></td>
             <td class=\\"ix-table-cell\\">
               <!----><label class=\\"ix-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\"><span class=\\"ix-checkbox-input-box\\"></span></span>
                 <!---->
@@ -281,11 +281,11 @@ exports[`Table > basic work > render work 1`] = `
               <!----></span>
             </td>
             <td class=\\"ix-table-cell\\">
-              <!----><a style=\\"margin-right: 8px;\\"></a><a></a>
+              <!----><a style=\\"margin-right: 8px;\\">Invite Edrward 8</a><a>Delete</a>
             </td>
           </tr>
           <tr class=\\"ix-table-row\\">
-            <td class=\\"ix-table-cell\\"><button class=\\"ix-table-expandable-trigger\\" type=\\"button\\"><i class=\\"ix-icon ix-icon-right\\" style=\\"transform: rotate(0deg);\\" role=\\"img\\" aria-label=\\"right\\"></i></button><a></a></td>
+            <td class=\\"ix-table-cell\\"><button class=\\"ix-table-expandable-trigger\\" type=\\"button\\"><i class=\\"ix-icon ix-icon-right\\" style=\\"transform: rotate(0deg);\\" role=\\"img\\" aria-label=\\"right\\"></i></button><a>expandable</a></td>
             <td class=\\"ix-table-cell\\">
               <!----><label class=\\"ix-checkbox ix-checkbox-disabled\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"true\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" disabled=\\"\\"><span class=\\"ix-checkbox-input-box\\"></span></span>
                 <!---->
@@ -307,7 +307,7 @@ exports[`Table > basic work > render work 1`] = `
               <!----></span>
             </td>
             <td class=\\"ix-table-cell\\">
-              <!----><a style=\\"margin-right: 8px;\\"></a><a></a>
+              <!----><a style=\\"margin-right: 8px;\\">Invite Edrward 9</a><a>Delete</a>
             </td>
           </tr>
         </tbody>

packages/components/table/__tests__/table.spec.ts

@@ -1,5 +1,5 @@
 import { MountingOptions, mount } from '@vue/test-utils'
-import { h } from 'vue'
+import { VNodeChild, h } from 'vue'
 
 import { renderWork } from '@tests'
 
@@ -8,7 +8,7 @@ import { HeaderProps, IxHeader } from '@idux/components/header'
 import { IxTag } from '@idux/components/tag'
 
 import Table from '../src/Table'
-import { TableColumn, TableProps } from '../src/types'
+import { TableColumn, TableEmptyCellOptions, TableProps } from '../src/types'
 
 interface Data {
   key: number
@@ -24,7 +24,7 @@ const columns: TableColumn<Data>[] = [
     type: 'expandable',
     disabled: record => !record.description,
     customExpand: 'expand',
-    customCell: 'name',
+    customCell: 'expandable',
   },
   {
     type: 'selectable',
@@ -84,12 +84,12 @@ interface CellOption {
 }
 
 const defaultSlots = {
-  name: ({ value }: CellOption) => h('a', null, () => value),
+  expandable: () => h('a', null, 'expandable'),
   action: ({ record }: CellOption) => [
-    h('a', { style: 'margin-right: 8px' }, () => `Invite ${record.name}`),
-    h('a', null, () => 'Delete'),
+    h('a', { style: 'margin-right: 8px' }, `Invite ${record.name}`),
+    h('a', null, 'Delete'),
   ],
-  expand: ({ record }: CellOption) => h('span', null, () => record.description),
+  expand: ({ record }: CellOption) => h('span', null, record.description),
 }
 
 describe('Table', () => {
@@ -260,6 +260,45 @@ describe('Table', () => {
       expect(wrapper.find('tbody').find('.ix-empty-description').text()).toBe('empty slot')
     })
 
+    test('emptyCell work', async () => {
+      let emptyCell: string | ((option: TableEmptyCellOptions) => VNodeChild) = '-'
+      const wrapper = TableMount({
+        props: {
+          emptyCell,
+          columns: [{ dataKey: 'unknown' }, { type: 'testType', dataKey: 'unknown' }, ...columns] as TableColumn[],
+        },
+      })
+
+      const tds = wrapper.find('tbody').find('tr').findAll('td')
+
+      expect(tds[0].text()).toBe(emptyCell)
+      expect(tds[1].text()).toBe('')
+
+      emptyCell = ({ rowIndex }) => rowIndex
+      await wrapper.setProps({ emptyCell })
+
+      expect(tds[0].text()).toBe('0')
+      expect(tds[1].text()).toBe('')
+    })
+
+    test('emptyCell slot work', async () => {
+      const emptyCell = '-'
+      const wrapper = TableMount({
+        props: {
+          emptyCell,
+          columns: [{ dataKey: 'unknown' }, { type: 'testType', dataKey: 'unknown' }, ...columns] as TableColumn[],
+        },
+        slots: {
+          emptyCell: ({ rowIndex }: TableEmptyCellOptions) => rowIndex,
+        },
+      })
+
+      const tds = wrapper.find('tbody').find('tr').findAll('td')
+
+      expect(tds[0].text()).toBe('0')
+      expect(tds[1].text()).toBe('')
+    })
+
     test('header work', async () => {
       let header: string | HeaderProps = 'This is header'
       const wrapper = TableMount({ props: { header } })

packages/components/table/docs/Api.zh.md

@@ -15,7 +15,8 @@
 | `customAdditional` | 自定义表格行和单元格的额外属性 | `TableCustomAdditional` | - | - | 参见[TableCustomAdditional](#TableCustomAdditional) |
 | `dataSource` | 表格数据数组 | `object[]` | - | - | - |
 | `ellipsis` | 超过宽度将自动省略 | `boolean \| { title: boolean }` | `false` | - | `title` 为 `false` 时, 不显示原生的 `title` |
-| `empty` | 空数据时的内容 | `string \| EmptyProps \| #empty` | - | - | - |
+| `empty` | `dataSource` 为空时默认渲染的内容 | `string \| EmptyProps \| #empty` | - | - | - |
+| `emptyCell` | 单元格数据为空时默认渲染的内容 | `string \| ((options: TableEmptyCellOptions) => VNodeChild) \| #emptyCell='TableEmptyCellOptions'` | - | ✅ | 仅支持普通列 |
 | `getKey` | 获取数据的唯一标识 | `string \| (record: any) => VKey` | `key` | ✅ | - |
 | `headless` | 是否隐藏表头 | `boolean` | `false` | - |- |
 | `pagination` | 配置分页器, 参见[TablePagination](#TablePagination) | `boolean \| TablePagination` | - | ✅ | 设置 `false` 时表示不显示分页 |

packages/components/table/index.ts

@@ -36,6 +36,7 @@ export type {
   TableColumnFilterable,
   TableColumnSortable,
   TableColumnSortOrder,
+  TableEmptyCellOptions,
   TableSticky,
 } from './src/types'
 

packages/components/table/src/Table.tsx

@@ -44,6 +44,7 @@ export default defineComponent({
     const mergedAutoHeight = computed(() => props.autoHeight ?? config.autoHeight)
     const mergedChildrenKey = computed(() => props.childrenKey ?? config.childrenKey)
     const mergedGetKey = useGetRowKey(props, config)
+    const mergedEmptyCell = computed(() => props.emptyCell ?? config.emptyCell)
     const mergedSize = computed(() => props.size ?? config.size)
     const stickyContext = useSticky(props)
     const scrollContext = useScroll(props, mergedAutoHeight, stickyContext)
@@ -71,6 +72,7 @@ export default defineComponent({
       config,
       locale,
       mergedPrefixCls,
+      mergedEmptyCell,
       mergedSize,
       ...columnsContext,
       ...scrollContext,