support more renderAPI (#641)

docs/example.md

@@ -27,7 +27,7 @@ nav:
 
 <code src="./example/dataSource.tsx" />
 
-## 受控模式
+## 受控的列显示隐藏
 
 可以默认隐藏某些栏，但是在操作栏中可以选择
 
@@ -40,3 +40,7 @@ nav:
 ## 嵌套表格
 
 <code src="./example/nested-table.tsx" />
+
+## 自定义表格的主体
+
+<code src="./example/renderTable.tsx" />

docs/example/renderTable.tsx

@@ -0,0 +1,149 @@
+import React, { useState, useEffect } from 'react';
+import { PlusOutlined } from '@ant-design/icons';
+import { Button, Result, Card, Descriptions } from 'antd';
+import ProTable, { ProColumns } from '@ant-design/pro-table';
+
+const valueEnum = {
+  0: 'close',
+  1: 'running',
+  2: 'online',
+  3: 'error',
+};
+
+export interface TableListItem {
+  key: number;
+  name: string;
+  status: string;
+  updatedAt: number;
+  createdAt: number;
+  progress: number;
+  money: number;
+}
+const tableListDataSource: TableListItem[] = [];
+
+for (let i = 0; i < 20; i += 1) {
+  tableListDataSource.push({
+    key: i,
+    name: `TradeCode ${i}`,
+    status: valueEnum[Math.floor(Math.random() * 10) % 4],
+    updatedAt: Date.now() - Math.floor(Math.random() * 1000),
+    createdAt: Date.now() - Math.floor(Math.random() * 2000),
+    money: Math.floor(Math.random() * 2000) * i,
+    progress: Math.ceil(Math.random() * 100) + 1,
+  });
+}
+
+const columns: ProColumns<TableListItem>[] = [
+  {
+    title: '序号',
+    dataIndex: 'index',
+    valueType: 'index',
+    width: 80,
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    initialValue: 'all',
+    width: 100,
+    filters: true,
+    valueEnum: {
+      all: { text: '全部', status: 'Default' },
+      close: { text: '关闭', status: 'Default' },
+      running: { text: '运行中', status: 'Processing' },
+      online: { text: '已上线', status: 'Success' },
+      error: { text: '异常', status: 'Error' },
+    },
+  },
+  {
+    title: '进度',
+    key: 'progress',
+    dataIndex: 'progress',
+    valueType: (item) => ({
+      type: 'progress',
+      status: item.status !== 'error' ? 'active' : 'exception',
+    }),
+    width: 200,
+  },
+  {
+    title: '更新时间',
+    key: 'since2',
+    width: 120,
+    dataIndex: 'createdAt',
+    valueType: 'date',
+  },
+];
+
+export default () => {
+  const [loading, setLoading] = useState(true);
+  const [dataSource, setDataSource] = useState<TableListItem[]>([]);
+  useEffect(() => {
+    setTimeout(() => {
+      setLoading(false);
+      setDataSource(tableListDataSource);
+    }, 5000);
+  }, []);
+
+  return (
+    <ProTable<TableListItem>
+      columns={columns}
+      rowKey="key"
+      pagination={{
+        showSizeChanger: true,
+      }}
+      tableRender={(_, dom) => (
+        <div
+          style={{
+            display: 'flex',
+            width: '100%',
+          }}
+        >
+          <Result status="404" title="404" subTitle="404" />
+          <div
+            style={{
+              flex: 1,
+            }}
+          >
+            {dom}
+          </div>
+        </div>
+      )}
+      tableExtraRender={(_, data) => (
+        <Card>
+          <Descriptions size="small" column={3}>
+            <Descriptions.Item label="Row">{data.length}</Descriptions.Item>
+            <Descriptions.Item label="Created">Lili Qu</Descriptions.Item>
+            <Descriptions.Item label="Association">
+              <a>421421</a>
+            </Descriptions.Item>
+            <Descriptions.Item label="Creation Time">2017-01-10</Descriptions.Item>
+            <Descriptions.Item label="Effective Time">2017-10-10</Descriptions.Item>
+            <Descriptions.Item label="Remarks">
+              Gonghu Road, Xihu District, Hangzhou, Zhejiang, China
+            </Descriptions.Item>
+          </Descriptions>
+        </Card>
+      )}
+      loading={loading}
+      dataSource={dataSource}
+      options={{
+        density: true,
+        reload: () => {
+          setLoading(true);
+          setTimeout(() => {
+            setLoading(false);
+          }, 1000);
+        },
+        fullScreen: true,
+        setting: true,
+      }}
+      dateFormatter="string"
+      headerTitle="dataSource 和 loading"
+      toolBarRender={() => [
+        <Button key="3" type="primary">
+          <PlusOutlined />
+          新建
+        </Button>,
+      ]}
+    />
+  );
+};