From 6dd8ba39316ec4a1bb2b06b1e29c60785c06f258 Mon Sep 17 00:00:00 2001
From: dengfuping <fuping.dfp@antgroup.com>
Date: Sun, 10 Nov 2024 22:27:37 +0800
Subject: [PATCH] improve(design): Table empty min-height set to 360px

---
 packages/design/src/table/demo/empty.tsx | 40 ++++++++++++++++++++++++
 packages/design/src/table/index.md       |  2 ++
 packages/design/src/table/index.tsx      | 16 ++++++++--
 packages/design/src/table/style/index.ts | 11 +++++++
 4 files changed, 67 insertions(+), 2 deletions(-)
 create mode 100644 packages/design/src/table/demo/empty.tsx

diff --git a/packages/design/src/table/demo/empty.tsx b/packages/design/src/table/demo/empty.tsx
new file mode 100644
index 000000000..34308ef93
--- /dev/null
+++ b/packages/design/src/table/demo/empty.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { Divider, Table } from '@oceanbase/design';
+
+const App: React.FC = () => {
+  const columns = [
+    {
+      title: '姓名',
+      dataIndex: 'name',
+      key: 'name',
+    },
+    {
+      title: '年龄',
+      dataIndex: 'age',
+      key: 'age',
+    },
+    {
+      title: '住址',
+      dataIndex: 'address',
+      key: 'address',
+    },
+  ];
+
+  return (
+    <>
+      <Divider>Empty Table</Divider>
+      <Table columns={columns} dataSource={[]} />
+      <Divider>Nested Empty Table</Divider>
+      <Table
+        columns={columns}
+        expandable={{
+          expandedRowRender: () => <Table columns={columns} dataSource={[]} />,
+          defaultExpandedRowKeys: ['0'],
+        }}
+        dataSource={[{ key: '0', name: '胡彦斌', age: 32, address: `西湖区湖底公园` }]}
+      />
+    </>
+  );
+};
+
+export default App;
diff --git a/packages/design/src/table/index.md b/packages/design/src/table/index.md
index 88846780f..e39bd6fa6 100644
--- a/packages/design/src/table/index.md
+++ b/packages/design/src/table/index.md
@@ -42,6 +42,8 @@ nav:
 
 <code src="./demo/card-table.tsx" title="和 Card 组合使用"></code>
 
+<code src="./demo/empty.tsx" title="空状态"></code>
+
 ## API
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
diff --git a/packages/design/src/table/index.tsx b/packages/design/src/table/index.tsx
index cd3ffb64a..d347f86e6 100644
--- a/packages/design/src/table/index.tsx
+++ b/packages/design/src/table/index.tsx
@@ -10,6 +10,7 @@ import type { ReactElement, ReactNode } from 'react';
 import React, { useContext, useEffect, useState } from 'react';
 import ConfigProvider from '../config-provider';
 import Typography from '../typography';
+import Empty from '../empty';
 import useStyle from './style';
 import type { AnyObject } from '../_util/type';
 import useDefaultPagination from './hooks/useDefaultPagination';
@@ -61,7 +62,11 @@ function Table<T extends Record<string, any>>(props: TableProps<T>, ref: React.R
   const pagination = useDefaultPagination(customPagination);
 
   const { getPrefixCls, locale, table } = useContext(ConfigProvider.ConfigContext);
-  const { batchOperationBar, ...restLocale } = {
+  const {
+    batchOperationBar,
+    emptyText = <Empty />,
+    ...restLocale
+  } = {
     ...customLocale,
     batchOperationBar: {
       ...enUS.Table?.batchOperationBar,
@@ -206,7 +211,14 @@ function Table<T extends Record<string, any>>(props: TableProps<T>, ref: React.R
       ref={ref}
       prefixCls={customizePrefixCls}
       className={tableCls}
-      locale={restLocale}
+      locale={{
+        ...restLocale,
+        emptyText: (
+          <div className={`${prefixCls}-empty-wrapper`}>
+            {typeof emptyText === 'function' ? emptyText() : emptyText}
+          </div>
+        ),
+      }}
       columns={newColumns}
       rowSelection={
         rowSelection
diff --git a/packages/design/src/table/style/index.ts b/packages/design/src/table/style/index.ts
index 134b083ca..1b9156c9b 100644
--- a/packages/design/src/table/style/index.ts
+++ b/packages/design/src/table/style/index.ts
@@ -82,6 +82,13 @@ export const genTableStyle: GenerateStyle<TableToken> = (token: TableToken): CSS
             borderRadius: borderRadiusLG,
           },
         },
+        // empty wrapper style
+        [`${componentCls}-empty-wrapper`]: {
+          minHeight: 360,
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+        },
         // 嵌套子表格样式
         [`tr > td > ${componentCls}-wrapper:only-child ${componentCls}`]: {
           // 调整嵌套子表格的间距
@@ -100,6 +107,10 @@ export const genTableStyle: GenerateStyle<TableToken> = (token: TableToken): CSS
               borderRadius: borderRadiusLG,
             },
           },
+          // empty wrapper style
+          [`${componentCls}-empty-wrapper`]: {
+            minHeight: 'auto',
+          },
         },
       },
     },