fix(pro:table): the empty is not rendered in the layout tool (#1562)

packages/components/table/demo/NestedTable.md

@@ -0,0 +1,14 @@
+---
+title:
+  zh: 嵌套子表格
+  en: Nested Table
+order: 22
+---
+
+## zh
+
+展示每行数据更详细的信息。
+
+## en
+
+The simplest usage.

packages/components/table/demo/NestedTable.vue

@@ -0,0 +1,156 @@
+<template>
+  <IxTable v-model:expandedRowKeys="expandedRowKeys" :columns="columns" :dataSource="data" :pagination="false">
+    <template #name="{ value }">
+      <IxButton mode="link">{{ value }}</IxButton>
+    </template>
+    <template #action>
+      <IxButtonGroup :gap="8" mode="link" separator="|">
+        <IxButton>OK</IxButton>
+        <IxButton>Canel</IxButton>
+      </IxButtonGroup>
+    </template>
+    <template #expand="{ record }">
+      <IxTable :columns="nestedColumns" :dataSource="record.children" :pagination="false">
+        <template #action>
+          <IxButtonGroup :gap="8" mode="link" separator="|">
+            <IxButton>OK</IxButton>
+            <IxButton>Canel</IxButton>
+          </IxButtonGroup>
+        </template>
+      </IxTable>
+    </template>
+  </IxTable>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+import { TableColumn } from '@idux/components/table'
+
+interface Data {
+  key: number
+  name: string
+  age: number
+  address: string
+  children: Array<{
+    name: string
+    date: string
+    status: string
+    grade: number
+  }>
+}
+
+const expandedRowKeys = ref([1])
+
+const columns: TableColumn<Data>[] = [
+  {
+    type: 'expandable',
+    customExpand: 'expand',
+  },
+  {
+    title: 'Name',
+    dataKey: 'name',
+    customCell: 'name',
+  },
+  {
+    title: 'Age',
+    dataKey: 'age',
+  },
+  {
+    title: 'Address',
+    dataKey: 'address',
+  },
+  {
+    title: 'Action',
+    key: 'action',
+    customCell: 'action',
+  },
+]
+
+const nestedColumns: TableColumn<{
+  name: string
+  date: string
+  status: string
+  grade: number
+}>[] = [
+  {
+    title: 'Name',
+    dataKey: 'name',
+  },
+  {
+    title: 'Date',
+    dataKey: 'date',
+  },
+  {
+    title: 'Status',
+    dataKey: 'status',
+  },
+  {
+    title: 'Grade',
+    dataKey: 'grade',
+  },
+  {
+    title: 'Action',
+    key: 'action',
+    customCell: 'action',
+  },
+]
+
+const nestedData = [
+  {
+    name: 'This is name',
+    date: '2023-01-01',
+    status: 'Waiting',
+    grade: 0,
+  },
+  {
+    name: 'This is name',
+    date: '2023-02-01',
+    status: 'Progress',
+    grade: 20,
+  },
+  {
+    name: 'This is name',
+    date: '2023-03-01',
+    status: 'Progress',
+    grade: 80,
+  },
+  {
+    name: 'This is name',
+    date: '2023-04-01',
+    status: 'Finished',
+    grade: 100,
+  },
+]
+
+const data: Data[] = [
+  {
+    key: 1,
+    name: 'John Brown',
+    age: 32,
+    address: 'New York No. 1 Lake Park',
+    children: nestedData,
+  },
+  {
+    key: 2,
+    name: 'Jim Green',
+    age: 42,
+    address: 'London No. 1 Lake Park',
+    children: nestedData,
+  },
+  {
+    key: 3,
+    name: 'Joe Black',
+    age: 32,
+    address: 'Sidney No. 1 Lake Park',
+    children: nestedData,
+  },
+  {
+    key: 4,
+    name: 'Disabled User',
+    age: 99,
+    address: 'Sidney No. 1 Lake Park',
+    children: nestedData,
+  },
+]
+</script>

packages/components/table/style/index.less

@@ -179,6 +179,10 @@
   & tr&-expanded-row {
     & > td {
       background-color: @table-expandable-background-color;
+
+      > .@{table-prefix} {
+        margin: -4px 28px;
+      }
     }
     &:hover > td {
       background-color: @table-expandable-background-color-hover;

packages/components/table/style/size.less

@@ -53,6 +53,10 @@
   .@{table-prefix}-col-selectable&-col-with-dropdown {
     width: 56px;
   }
+
+  .@{table-prefix}-pagination {
+    padding: 8px 0;
+  }
 }
 
 .@{table-prefix}-md {

packages/components/table/style/themes/default.variable.less

@@ -29,5 +29,6 @@
 @table-body-row-background-color-selected: var(--ix-color-primary-l50);
 
 @table-expandable-icon-color: var(--ix-text-color-secondary);
-@table-expandable-background-color: var(--ix-background-color-light);
-@table-expandable-background-color-hover: var(--ix-background-color-medium);
+// TODO: REMOVE
+@table-expandable-background-color: @table-body-row-background-color-hover;
+@table-expandable-background-color-hover: @table-body-row-background-color-hover;

packages/pro/table/src/contents/LayoutToolTree.tsx

@@ -72,7 +72,13 @@ export default defineComponent({
     }
 
     return () => {
-      const { columns, searchValue, title } = props
+      const dataSource = props.columns.filter(column => column.layoutable !== false)
+      // 不要显示空状态
+      if (dataSource.length === 0) {
+        return
+      }
+
+      const { searchValue, title } = props
       const { startPin, endPin, noPin } = locale.table.layout
 
       const treeProps: TreeProps = {
@@ -81,7 +87,7 @@ export default defineComponent({
         checkable: true,
         checkedKeys: checkedKeys.value,
         draggable: true,
-        dataSource: columns.filter(column => column.layoutable !== false),
+        dataSource,
         disabled: disableColumn,
         empty: '',
         childrenKey: 'children',