diff --git a/.umirc.js b/.umirc.js index a6df1bd4..c6eb7870 100644 --- a/.umirc.js +++ b/.umirc.js @@ -20,5 +20,7 @@ export default { }, ], hash: true, - dynamicImport: {}, + dynamicImport: { + loading: '@ant-design/pro-skeleton', + }, }; diff --git a/docs/example.md b/docs/example.md index b2dca49b..94b107f6 100644 --- a/docs/example.md +++ b/docs/example.md @@ -36,3 +36,7 @@ nav: ## 轮询 + +## 嵌套表格 + + diff --git a/docs/example/nested-table.tsx b/docs/example/nested-table.tsx new file mode 100644 index 00000000..1a3d1545 --- /dev/null +++ b/docs/example/nested-table.tsx @@ -0,0 +1,128 @@ +import React, { useState, useEffect } from 'react'; +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 < 1; 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[] = [ + { + 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', + }, +]; + +const expandedRowRender = () => { + const data = []; + for (let i = 0; i < 3; i += 1) { + data.push({ + key: i, + date: '2014-12-24 23:12:00', + name: 'This is production name', + upgradeNum: 'Upgraded: 56', + }); + } + return ( + [Pause, Stop], + }, + ]} + headerTitle={false} + search={false} + options={false} + dataSource={data} + pagination={false} + /> + ); +}; + +export default () => { + const [dataSource, setDataSource] = useState([]); + useEffect(() => { + setDataSource(tableListDataSource); + }, []); + return ( + + columns={columns} + rowKey="key" + pagination={{ + showSizeChanger: true, + }} + dataSource={dataSource} + expandable={{ expandedRowRender }} + dateFormatter="string" + headerTitle="嵌套表格" + /> + ); +}; diff --git a/package.json b/package.json index 8a14cac3..4ada20d9 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,7 @@ "/dist" ], "scripts": { - "build": "father build && webpack", + "build": "father-build && webpack", "lint": "npm run lint-eslint && npm run lint:style && tsc --noEmit", "lint-eslint": "eslint --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src", "lint:fix": "eslint --fix --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./**/src ./tests && npm run lint:style", @@ -23,7 +23,7 @@ "site": "dumi build && gh-pages -d ./dist", "start": "dumi dev", "test:coverage": "umi-test --coverage", - "test": "npm run lint && father test" + "test": "npm run lint && umi-test" }, "husky": { "hooks": { @@ -53,6 +53,7 @@ "use-merge-value": "^1.0.1" }, "devDependencies": { + "@ant-design/pro-skeleton": "^1.0.0-beta.2", "@babel/core": "^7.8.3", "@babel/plugin-proposal-object-rest-spread": "^7.8.3", "@babel/preset-env": "^7.8.3", @@ -73,8 +74,8 @@ "dumi": "^1.0.20", "enzyme": "^3.10.0", "enzyme-to-json": "^3.4.3", - "eslint": "7.3.1", - "father": "^2.29.3", + "eslint": "^7.3.1", + "father-build": "^1.18.1", "husky": "^4.2.5", "jsdom-global": "^3.0.2", "less-loader": "^6.0.0", @@ -88,6 +89,7 @@ "umi": "^3.1.2", "umi-plugin-githubpages": "^2.0.1", "umi-request": "^1.2.15", + "umi-test": "^1.9.6", "webpack": "^4.43.0", "webpack-bundle-analyzer": "^3.7.0", "webpack-cli": "^3.3.12" diff --git a/src/Table.tsx b/src/Table.tsx index 752805c8..c008f422 100644 --- a/src/Table.tsx +++ b/src/Table.tsx @@ -571,7 +571,7 @@ const ProTable = ( pagination: propsPagination, actionRef, columns: propsColumns = [], - toolBarRender = () => [], + toolBarRender, onLoad, onRequestError, style, diff --git a/src/component/toolBar/index.tsx b/src/component/toolBar/index.tsx index 71d0dab1..0804c4ed 100644 --- a/src/component/toolBar/index.tsx +++ b/src/component/toolBar/index.tsx @@ -170,7 +170,7 @@ const ToolBar = ({ }; return (
-
{headerTitle}
+ {headerTitle &&
{headerTitle}
}
{options && options.search && ( diff --git a/src/index.less b/src/index.less index 892f7ef4..dfffa550 100644 --- a/src/index.less +++ b/src/index.less @@ -33,4 +33,15 @@ font-size: 14px; } } + + .@{ant-prefix}-table + .@{ant-prefix}-table-tbody + .@{ant-prefix}-table-wrapper:only-child + .@{ant-prefix}-table { + margin: 0; + } + + .@{ant-prefix}-table.@{ant-prefix}-table-middle .@{pro-table-prefix-cls} { + margin: -12px -8px; + } }