From 2b779f1ec363e83650985436dcd6c9c25428c5db Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Thu, 22 Dec 2022 14:06:57 +0800
Subject: [PATCH 1/5] fix: table border issue
---
.../__snapshots__/demo-extend.test.ts.snap | 13 ------
.../__tests__/__snapshots__/demo.test.ts.snap | 13 ------
components/table/demo/colspan-rowspan.tsx | 16 +++----
components/table/style/index.tsx | 44 ++++++++++++++-----
4 files changed, 40 insertions(+), 46 deletions(-)
diff --git a/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap
index 7e6c55a3d8ff..f572293fe865 100644
--- a/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1148,19 +1148,6 @@ exports[`renders ./components/table/demo/colspan-rowspan.tsx extend context corr
London No. 2 Lake Park
-
-
-
- Jake White
-
- |
-
diff --git a/components/table/__tests__/__snapshots__/demo.test.ts.snap b/components/table/__tests__/__snapshots__/demo.test.ts.snap
index 8ea6de6a3e59..4911b6e461df 100644
--- a/components/table/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/table/__tests__/__snapshots__/demo.test.ts.snap
@@ -936,19 +936,6 @@ exports[`renders ./components/table/demo/colspan-rowspan.tsx correctly 1`] = `
London No. 2 Lake Park
-
-
-
- Jake White
-
- |
-
diff --git a/components/table/demo/colspan-rowspan.tsx b/components/table/demo/colspan-rowspan.tsx
index f879b6b4c187..efb80b6c4bb7 100644
--- a/components/table/demo/colspan-rowspan.tsx
+++ b/components/table/demo/colspan-rowspan.tsx
@@ -100,14 +100,14 @@ const data: DataType[] = [
phone: 18900010002,
address: 'London No. 2 Lake Park',
},
- {
- key: '5',
- name: 'Jake White',
- age: 18,
- tel: '0575-22098909',
- phone: 18900010002,
- address: 'Dublin No. 2 Lake Park',
- },
+ // {
+ // key: '5',
+ // name: 'Jake White',
+ // age: 18,
+ // tel: '0575-22098909',
+ // phone: 18900010002,
+ // address: 'Dublin No. 2 Lake Park',
+ // },
];
const App: React.FC = () => ;
diff --git a/components/table/style/index.tsx b/components/table/style/index.tsx
index 1e8ac7f581f5..33b152592360 100644
--- a/components/table/style/index.tsx
+++ b/components/table/style/index.tsx
@@ -170,10 +170,38 @@ const genTableStyle: GenerateStyle = (token) => {
},
// ============================ Body ============================
+ [`${componentCls}:not(${componentCls}-bordered)`]: {
+ [`${componentCls}-tbody`]: {
+ '> tr': {
+ '> td': {
+ borderTop: tableBorder,
+ },
+
+ '&:last-child > td': {
+ borderBottom: tableBorder,
+ },
+
+ [`&:first-child > td,
+ &${componentCls}-measure-row + tr > td`]: {
+ borderTop: 'none',
+ },
+ },
+ },
+ },
+
+ [`${componentCls}${componentCls}-bordered`]: {
+ [`${componentCls}-tbody`]: {
+ '> tr': {
+ '> td': {
+ borderBottom: tableBorder,
+ },
+ },
+ },
+ },
+
[`${componentCls}-tbody`]: {
'> tr': {
'> td': {
- borderTop: tableBorder,
transition: `background ${motionDurationSlow}`,
// ========================= Nest Table ===========================
@@ -196,15 +224,6 @@ const genTableStyle: GenerateStyle = (token) => {
},
},
- '&:last-child > td': {
- borderBottom: tableBorder,
- },
-
- [`&:first-child > td,
- &${componentCls}-measure-row + tr > td`]: {
- borderTop: 'none',
- },
-
[`
&${componentCls}-row:hover > td,
> td${componentCls}-cell-row-hover
@@ -275,6 +294,7 @@ export default genComponentStyleHook('Table', (token) => {
colorTextPlaceholder,
colorTextHeading,
colorSplit,
+ colorBorderSecondary,
fontSize,
padding,
paddingXS,
@@ -312,12 +332,12 @@ export default genComponentStyleHook('Table', (token) => {
tablePaddingHorizontalMiddle: paddingXS,
tablePaddingVerticalSmall: paddingXS,
tablePaddingHorizontalSmall: paddingXS,
- tableBorderColor: colorSplit,
+ tableBorderColor: colorBorderSecondary,
tableHeaderTextColor: colorTextHeading,
tableHeaderBg: colorFillAlterSolid,
tableFooterTextColor: colorTextHeading,
tableFooterBg: colorFillAlterSolid,
- tableHeaderCellSplitColor: colorSplit,
+ tableHeaderCellSplitColor: colorBorderSecondary,
tableHeaderSortBg: colorFillSecondary,
tableHeaderSortHoverBg: colorFillContent,
tableHeaderIconColor: baseColorAction
From bef2f9aff0b1f02089e8ebd4727c9144a192a66d Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Thu, 22 Dec 2022 14:17:14 +0800
Subject: [PATCH 2/5] chore: code clean
---
components/table/demo/colspan-rowspan.tsx | 8 --------
1 file changed, 8 deletions(-)
diff --git a/components/table/demo/colspan-rowspan.tsx b/components/table/demo/colspan-rowspan.tsx
index efb80b6c4bb7..0c94b1951c38 100644
--- a/components/table/demo/colspan-rowspan.tsx
+++ b/components/table/demo/colspan-rowspan.tsx
@@ -100,14 +100,6 @@ const data: DataType[] = [
phone: 18900010002,
address: 'London No. 2 Lake Park',
},
- // {
- // key: '5',
- // name: 'Jake White',
- // age: 18,
- // tel: '0575-22098909',
- // phone: 18900010002,
- // address: 'Dublin No. 2 Lake Park',
- // },
];
const App: React.FC = () => ;
From 204a0ba20ba9a8016bbb3231b66b6400fd83ac67 Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Thu, 22 Dec 2022 14:28:52 +0800
Subject: [PATCH 3/5] docs: update demo
---
.../__snapshots__/demo-extend.test.ts.snap | 35 +++++++++++++------
.../__tests__/__snapshots__/demo.test.ts.snap | 35 +++++++++++++------
components/table/demo/colspan-rowspan.tsx | 18 +++++++---
3 files changed, 61 insertions(+), 27 deletions(-)
diff --git a/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap
index f572293fe865..f7e4d854b8de 100644
--- a/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1062,47 +1062,60 @@ exports[`renders ./components/table/demo/colspan-rowspan.tsx extend context corr
>
Jim Green
|
+
+
- 42
+
+ Joe Black
+
|
- 0571-22098333
+ 32
|
- 18889898888
+ 0575-22098909
|
- London No. 1 Lake Park
+ 18900010002
+ |
+
+ Sidney No. 1 Lake Park
|
- Joe Black
+ Jim Red
|
- 32
+ 18
|
- Sidney No. 1 Lake Park
+ London No. 2 Lake Park
|
- Jim Red
+ Jake White
|
- London No. 2 Lake Park
+ Dublin No. 2 Lake Park
|
diff --git a/components/table/__tests__/__snapshots__/demo.test.ts.snap b/components/table/__tests__/__snapshots__/demo.test.ts.snap
index 4911b6e461df..033cc5b546a0 100644
--- a/components/table/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/table/__tests__/__snapshots__/demo.test.ts.snap
@@ -850,47 +850,60 @@ exports[`renders ./components/table/demo/colspan-rowspan.tsx correctly 1`] = `
>
Jim Green
|
+
+
- 42
+
+ Joe Black
+
|
- 0571-22098333
+ 32
|
- 18889898888
+ 0575-22098909
|
- London No. 1 Lake Park
+ 18900010002
+ |
+
+ Sidney No. 1 Lake Park
|
- Joe Black
+ Jim Red
|
- 32
+ 18
|
- Sidney No. 1 Lake Park
+ London No. 2 Lake Park
|
- Jim Red
+ Jake White
|
- London No. 2 Lake Park
+ Dublin No. 2 Lake Park
|
diff --git a/components/table/demo/colspan-rowspan.tsx b/components/table/demo/colspan-rowspan.tsx
index 0c94b1951c38..78cb0f504d79 100644
--- a/components/table/demo/colspan-rowspan.tsx
+++ b/components/table/demo/colspan-rowspan.tsx
@@ -14,7 +14,7 @@ interface DataType {
// In the fifth row, other columns are merged into first column
// by setting it's colSpan to be 0
const sharedOnCell = (_: DataType, index: number) => {
- if (index === 4) {
+ if (index === 1) {
return { colSpan: 0 };
}
@@ -27,7 +27,7 @@ const columns: ColumnsType = [
dataIndex: 'name',
render: (text) => {text},
onCell: (_, index) => ({
- colSpan: (index as number) < 4 ? 1 : 5,
+ colSpan: index === 1 ? 5 : 1,
}),
},
{
@@ -40,14 +40,14 @@ const columns: ColumnsType = [
colSpan: 2,
dataIndex: 'tel',
onCell: (_, index) => {
- if (index === 2) {
+ if (index === 3) {
return { rowSpan: 2 };
}
// These two are merged into above cell
- if (index === 3) {
+ if (index === 4) {
return { rowSpan: 0 };
}
- if (index === 4) {
+ if (index === 1) {
return { colSpan: 0 };
}
@@ -100,6 +100,14 @@ const data: DataType[] = [
phone: 18900010002,
address: 'London No. 2 Lake Park',
},
+ {
+ key: '5',
+ name: 'Jake White',
+ age: 18,
+ tel: '0575-22098909',
+ phone: 18900010002,
+ address: 'Dublin No. 2 Lake Park',
+ },
];
const App: React.FC = () => ;
From 0382a6b469f9bd8d99d6ac2a50cbf2d9b1b41c50 Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Thu, 22 Dec 2022 15:00:20 +0800
Subject: [PATCH 4/5] fix: table borderRadius
---
components/table/style/index.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/components/table/style/index.tsx b/components/table/style/index.tsx
index 3b42dfdb33ab..d948be219ac3 100644
--- a/components/table/style/index.tsx
+++ b/components/table/style/index.tsx
@@ -104,7 +104,7 @@ const genTableStyle: GenerateStyle = (token) => {
...resetComponent(token),
fontSize: tableFontSize,
background: tableBg,
- borderRadius: tableRadius,
+ borderRadius: `${tableRadius}px ${tableRadius}px 0 0`,
},
// https://github.com/ant-design/ant-design/issues/17611
table: {
From 89fa240da600cd4fb9c3ea016792895258b8fa35 Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Thu, 22 Dec 2022 15:56:22 +0800
Subject: [PATCH 5/5] chore: add comment
---
components/table/style/index.tsx | 3 +++
1 file changed, 3 insertions(+)
diff --git a/components/table/style/index.tsx b/components/table/style/index.tsx
index d948be219ac3..d259a3863ca7 100644
--- a/components/table/style/index.tsx
+++ b/components/table/style/index.tsx
@@ -170,6 +170,7 @@ const genTableStyle: GenerateStyle = (token) => {
},
// ============================ Body ============================
+ // Borderless Table has unique hover style, which would be implemented with `borderTop`.
[`${componentCls}:not(${componentCls}-bordered)`]: {
[`${componentCls}-tbody`]: {
'> tr': {
@@ -189,6 +190,8 @@ const genTableStyle: GenerateStyle = (token) => {
},
},
+ // Bordered Table remains simple `borderBottom`.
+ // Ref issue: https://github.com/ant-design/ant-design/issues/38724
[`${componentCls}${componentCls}-bordered`]: {
[`${componentCls}-tbody`]: {
'> tr': {