improve(ui): ProTable expandable, empty and footer style follow Table

packages/design/src/table/__tests__/index.test.tsx

@@ -39,6 +39,11 @@ describe('Table', () => {
     expect(asFragment().firstChild).toMatchSnapshot();
   });
 
+  it('render empty', () => {
+    const { container } = render(<TableTest dataSource={[]} />);
+    expect(container.querySelector('.ant-table-empty-wrapper')).toBeTruthy();
+  });
+
   it('hideOnSinglePage should be false by default', () => {
     const { container, asFragment } = render(<TableTest dataSource={dataSource.slice(0, 10)} />);
     expect(container.querySelector('.ant-pagination')).toBeTruthy();

packages/design/src/table/index.md

@@ -51,7 +51,7 @@ nav:
 | pagination | 分页配置 | ReactNode | {} | - |
 | cancelText | 选择表格中 取消 按钮文案 | ReactNode | - | - |
 | collapseText | 选择表格中 收起 按钮文案 | ReactNode | - | - |
-| openText | 选择表格中 展开 按钮文案 | ReactNode | - | - |
+| openText | 选择表格中 `展开` 按钮文案 | ReactNode | - | - |
 | hiddenCancelBtn | 选择表格中是否隐藏取消按钮 | boolean | false | - |
 | locale | Table 默认文案设置，目前包括排序、过滤、空数据文案 | object | [默认值](https://github.com/ant-design/ant-design/blob/6dae4a7e18ad1ba193aedd5ab6867e1d823e2aa4/components/locale/zh_CN.tsx#L20-L37) | - |
 | toolOptionsRender | 渲染工具栏，支持返回一个 dom 数组，会自动增加 margin | (selectedRowKeys, selectedRows) => ReactNode[] | - | - |

packages/ui/src/ProTable/__tests__/index.test.tsx

@@ -51,6 +51,11 @@ describe('ProTable', () => {
     expect(asFragment().firstChild).toMatchSnapshot();
   });
 
+  it('render empty', () => {
+    const { container } = render(<ProTableTest dataSource={[]} />);
+    expect(container.querySelector('.ant-table-empty-wrapper')).toBeTruthy();
+  });
+
   it('default pagination should work', () => {
     const { container, asFragment } = render(<ProTableTest />);
     // pagination.showTotal

packages/ui/src/ProTable/demo/empty.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { ProTable } from '@oceanbase/ui';
+
+const App: React.FC = () => {
+  const columns = [
+    {
+      title: '姓名',
+      dataIndex: 'name',
+      key: 'name',
+    },
+    {
+      title: '年龄',
+      dataIndex: 'age',
+      key: 'age',
+    },
+    {
+      title: '住址',
+      dataIndex: 'address',
+      key: 'address',
+    },
+  ];
+
+  return <ProTable headerTitle="高级表格" cardBordered={true} columns={columns} dataSource={[]} />;
+};
+
+export default App;

packages/ui/src/ProTable/demo/expandable.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { ProTable } from '@oceanbase/ui';
+
+const App: React.FC = () => {
+  const columns = [
+    {
+      title: '姓名',
+      dataIndex: 'name',
+      key: 'name',
+    },
+    {
+      title: '年龄',
+      dataIndex: 'age',
+      key: 'age',
+    },
+    {
+      title: '住址',
+      dataIndex: 'address',
+      key: 'address',
+    },
+  ];
+
+  const dataSource = [];
+  for (let i = 1; i < 100; i++) {
+    dataSource.push({
+      key: i,
+      name: '胡彦斌' + i,
+      age: 32,
+      address: `西湖区湖底公园${i}号`,
+    });
+  }
+
+  return (
+    <ProTable
+      headerTitle="高级表格"
+      cardBordered={true}
+      columns={columns}
+      dataSource={dataSource}
+      expandable={{
+        expandedRowRender: record => <p>{record.address}</p>,
+      }}
+    />
+  );
+};
+
+export default App;

packages/ui/src/ProTable/index.md

@@ -15,6 +15,10 @@ nav:
 
 <code src="./demo/light-filter.tsx" title="轻量筛选"></code>
 
+<code src="./demo/expandable.tsx" title="可展开表格"></code>
+
+<code src="./demo/empty.tsx" title="空状态"></code>
+
 ## API
 
 | 参数        | 说明     | 类型                           | 默认值  | 版本 |

packages/ui/src/ProTable/index.tsx

@@ -1,17 +1,22 @@
 import React, { useContext } from 'react';
 import { ProTable as AntProTable } from '@ant-design/pro-components';
 import type { ProTableProps } from '@ant-design/pro-components';
+import { ConfigProvider, Empty, Table } from '@oceanbase/design';
 import classNames from 'classnames';
-import { ConfigProvider, Table } from '@oceanbase/design';
+import { isEmpty } from 'lodash';
 import useLightFilterStyle from '../LightFilter/style';
 import useStyle from './style';
 
 export { ProTableProps };
 
 const ProTable: typeof AntProTable = ({
-  pagination: customPagination,
   form,
+  expandable,
+  pagination: customPagination,
+  footer,
+  locale,
   prefixCls: customizePrefixCls,
+  tableClassName,
   className,
   ...restProps
 }) => {
@@ -21,6 +26,13 @@ const ProTable: typeof AntProTable = ({
   const tablePrefixCls = getPrefixCls('table', customizePrefixCls);
   const { wrapSSR: tableWrapSSR } = Table.useStyle(tablePrefixCls);
   const pagination = Table.useDefaultPagination(customPagination);
+  const tableCls = classNames(
+    {
+      [`${tablePrefixCls}-expandable`]: !isEmpty(expandable),
+      [`${tablePrefixCls}-has-footer`]: !!footer,
+    },
+    tableClassName
+  );
 
   // customize LightFilter style
   const lightFilterPrefixCls = getPrefixCls('pro-form-light-filter', customizePrefixCls);
@@ -30,19 +42,33 @@ const ProTable: typeof AntProTable = ({
   const { wrapSSR } = useStyle(prefixCls);
   const proTableCls = classNames(className);
 
+  const { emptyText = <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />, ...restLocale } =
+    locale || {};
+
   return tableWrapSSR(
     lightFilterWrapSSR(
       wrapSSR(
         <AntProTable
-          // default size change to `large`
+          // default size change to `large` as same as Table
           defaultSize="large"
-          pagination={pagination}
           form={{
             // query form should remove required mark
             requiredMark: false,
             ...form,
           }}
+          expandable={expandable}
+          pagination={pagination}
+          footer={footer}
+          locale={{
+            ...restLocale,
+            emptyText: (
+              <div className={`${tablePrefixCls}-empty-wrapper`}>
+                {typeof emptyText === 'function' ? emptyText() : emptyText}
+              </div>
+            ),
+          }}
           prefixCls={customizePrefixCls}
+          tableClassName={tableCls}
           className={proTableCls}
           {...restProps}
         />