From cbea5a5da9ad80428d9d347e08af6c9fe9b83e39 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?= =?UTF-8?q?=E5=8D=9C?= Date: Wed, 31 Jan 2024 10:25:18 +0800 Subject: [PATCH] feat: Table support stack fixed columns (#47245) * chore: update deps * feat: style of it * test: update test case * chore: adjust size limit --- .gitignore | 1 + .../__snapshots__/demo-extend.test.ts.snap | 341 ++++++++++++++++++ .../__tests__/__snapshots__/demo.test.ts.snap | 339 +++++++++++++++++ components/table/demo/fixed-gapped-columns.md | 7 + .../table/demo/fixed-gapped-columns.tsx | 64 ++++ components/table/index.en-US.md | 1 + components/table/index.zh-CN.md | 1 + components/table/style/fixed.ts | 12 + package.json | 4 +- 9 files changed, 768 insertions(+), 2 deletions(-) create mode 100644 components/table/demo/fixed-gapped-columns.md create mode 100644 components/table/demo/fixed-gapped-columns.tsx diff --git a/.gitignore b/.gitignore index 1cabd68356..cf1aab6040 100644 --- a/.gitignore +++ b/.gitignore @@ -70,3 +70,4 @@ __image_snapshots__/ .eslintcache .node-version +.node diff --git a/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap index fb884904cf..8617439bd4 100644 --- a/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -12939,6 +12939,347 @@ exports[`renders components/table/demo/fixed-columns-header.tsx extend context c exports[`renders components/table/demo/fixed-columns-header.tsx extend context correctly 2`] = `[]`; +exports[`renders components/table/demo/fixed-gapped-columns.tsx extend context correctly 1`] = ` +
+
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Full Name + + Age + + Column 1 + + Column 2 + + Column 3 + + Column 4 + + Column 5 + + Column 6 + + Column 7 + + Column 8 + + Action 1 + + Action 2 + + Action 3 +
+ John Brown + + 32 + + New York Park + + New York Park + + New York Park + + New York Park + + New York Park + + New York Park + + New York Park + + New York Park + + + action + + + + action + + + + action + +
+
+
+
+
+
+
+`; + +exports[`renders components/table/demo/fixed-gapped-columns.tsx extend context correctly 2`] = `[]`; + exports[`renders components/table/demo/fixed-header.tsx extend context correctly 1`] = `
`; +exports[`renders components/table/demo/fixed-gapped-columns.tsx correctly 1`] = ` +
+
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Full Name + + Age + + Column 1 + + Column 2 + + Column 3 + + Column 4 + + Column 5 + + Column 6 + + Column 7 + + Column 8 + + Action 1 + + Action 2 + + Action 3 +
+ John Brown + + 32 + + New York Park + + New York Park + + New York Park + + New York Park + + New York Park + + New York Park + + New York Park + + New York Park + + + action + + + + action + + + + action + +
+
+
+
+
+
+
+`; + exports[`renders components/table/demo/fixed-header.tsx correctly 1`] = `
= [ + { + title: 'Full Name', + width: 100, + dataIndex: 'name', + fixed: 'left', + }, + { + title: 'Age', + width: 100, + dataIndex: 'age', + }, + { title: 'Column 1', dataIndex: 'address', fixed: 'left' }, + { title: 'Column 2', dataIndex: 'address' }, + { title: 'Column 3', dataIndex: 'address' }, + { title: 'Column 4', dataIndex: 'address' }, + { title: 'Column 5', dataIndex: 'address' }, + { title: 'Column 6', dataIndex: 'address' }, + { title: 'Column 7', dataIndex: 'address' }, + { title: 'Column 8', dataIndex: 'address' }, + { + title: 'Action 1', + fixed: 'right', + width: 90, + render: () => action, + }, + { + title: 'Action 2', + width: 90, + render: () => action, + }, + { + title: 'Action 3', + fixed: 'right', + width: 90, + render: () => action, + }, +]; + +const data: DataType[] = [ + { + key: '1', + name: 'John Brown', + age: 32, + address: 'New York Park', + }, +]; + +const App: React.FC = () => ( + +); + +export default App; diff --git a/components/table/index.en-US.md b/components/table/index.en-US.md index 25a34d363c..ee429c52c2 100644 --- a/components/table/index.en-US.md +++ b/components/table/index.en-US.md @@ -86,6 +86,7 @@ const columns = [ Tree data ellipsis debug demoFixed HeaderFixed Columns +Stack Fixed ColumnsFixed Columns and HeaderHidden ColumnsGrouping table head diff --git a/components/table/index.zh-CN.md b/components/table/index.zh-CN.md index bb71aa5a85..dfa617f878 100644 --- a/components/table/index.zh-CN.md +++ b/components/table/index.zh-CN.md @@ -87,6 +87,7 @@ const columns = [ 树形数据省略情况测试固定表头固定列 +堆叠固定列固定头和列隐藏列表头分组 diff --git a/components/table/style/fixed.ts b/components/table/style/fixed.ts index 03d6d54451..4d4eee4ef8 100644 --- a/components/table/style/fixed.ts +++ b/components/table/style/fixed.ts @@ -121,6 +121,18 @@ const genFixedStyle: GenerateStyle = (token) => { boxShadow: `inset -10px 0 8px -8px ${shadowColor}`, }, }, + + // Gapped fixed Columns do not show the shadow + [`${componentCls}-fixed-column-gapped`]: { + [` + ${componentCls}-cell-fix-left-first::after, + ${componentCls}-cell-fix-left-last::after, + ${componentCls}-cell-fix-right-first::after, + ${componentCls}-cell-fix-right-last::after + `]: { + boxShadow: 'none', + }, + }, }, }; }; diff --git a/package.json b/package.json index 218e8bd415..6418087090 100644 --- a/package.json +++ b/package.json @@ -153,7 +153,7 @@ "rc-slider": "~10.5.0", "rc-steps": "~6.0.1", "rc-switch": "~4.1.0", - "rc-table": "~7.38.0", + "rc-table": "~7.39.0", "rc-tabs": "~14.0.0", "rc-textarea": "~1.6.3", "rc-tooltip": "~6.1.3", @@ -353,7 +353,7 @@ }, { "path": "./dist/antd-with-locales.min.js", - "limit": "379 KiB" + "limit": "380 KiB" } ], "title": "Ant Design",