mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 11:10:01 +08:00
Code Issues Actions 25 Packages Projects Releases Wiki Activity

style(Table): Add the rowScope style (#40304)

Browse Source 
* Add the rowScope style

* doc(table): add demo about rowScope

* update snapshot

---------

Co-authored-by: Yuiai01 <dujiaqi@kezaihui.com>
Co-authored-by: muxinFeng <434980373@qq.com>
This commit is contained in:
JiaQi 2023-03-02 20:51:40 +08:00 committed by GitHub
parent ec34bc1874
commit a268fdde8f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 109 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
components/table/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -575,6 +575,12 @@ exports[`renders ./components/table/demo/colspan-rowspan.tsx extend context corr
class="ant-table-thead"
>
<tr>
<th
class="ant-table-cell"
scope="col"
>
RowHead
</th>
<th
class="ant-table-cell"
scope="col"
@ -609,6 +615,12 @@ exports[`renders ./components/table/demo/colspan-rowspan.tsx extend context corr
class="ant-table-row ant-table-row-level-0"
data-row-key="1"
>
<th
class="ant-table-cell"
scope="row"
>
1
</th>
<td
class="ant-table-cell"
>
@ -641,6 +653,12 @@ exports[`renders ./components/table/demo/colspan-rowspan.tsx extend context corr
class="ant-table-row ant-table-row-level-0"
data-row-key="2"
>
<th
class="ant-table-cell"
scope="row"
>
2
</th>
<td
class="ant-table-cell"
colspan="5"
@ -654,6 +672,12 @@ exports[`renders ./components/table/demo/colspan-rowspan.tsx extend context corr
class="ant-table-row ant-table-row-level-0"
data-row-key="3"
>
<th
class="ant-table-cell"
scope="row"
>
3
</th>
<td
class="ant-table-cell"
>
@ -686,6 +710,12 @@ exports[`renders ./components/table/demo/colspan-rowspan.tsx extend context corr
class="ant-table-row ant-table-row-level-0"
data-row-key="4"
>
<th
class="ant-table-cell"
scope="row"
>
4
</th>
<td
class="ant-table-cell"
>
@ -719,6 +749,12 @@ exports[`renders ./components/table/demo/colspan-rowspan.tsx extend context corr
class="ant-table-row ant-table-row-level-0"
data-row-key="5"
>
<th
class="ant-table-cell"
scope="row"
>
5
</th>
<td
class="ant-table-cell"
>

36
components/table/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -575,6 +575,12 @@ exports[`renders ./components/table/demo/colspan-rowspan.tsx correctly 1`] = `
class="ant-table-thead"
>
<tr>
<th
class="ant-table-cell"
scope="col"
>
RowHead
</th>
<th
class="ant-table-cell"
scope="col"
@ -609,6 +615,12 @@ exports[`renders ./components/table/demo/colspan-rowspan.tsx correctly 1`] = `
class="ant-table-row ant-table-row-level-0"
data-row-key="1"
>
<th
class="ant-table-cell"
scope="row"
>
1
</th>
<td
class="ant-table-cell"
>
@ -641,6 +653,12 @@ exports[`renders ./components/table/demo/colspan-rowspan.tsx correctly 1`] = `
class="ant-table-row ant-table-row-level-0"
data-row-key="2"
>
<th
class="ant-table-cell"
scope="row"
>
2
</th>
<td
class="ant-table-cell"
colspan="5"
@ -654,6 +672,12 @@ exports[`renders ./components/table/demo/colspan-rowspan.tsx correctly 1`] = `
class="ant-table-row ant-table-row-level-0"
data-row-key="3"
>
<th
class="ant-table-cell"
scope="row"
>
3
</th>
<td
class="ant-table-cell"
>
@ -686,6 +710,12 @@ exports[`renders ./components/table/demo/colspan-rowspan.tsx correctly 1`] = `
class="ant-table-row ant-table-row-level-0"
data-row-key="4"
>
<th
class="ant-table-cell"
scope="row"
>
4
</th>
<td
class="ant-table-cell"
>
@ -719,6 +749,12 @@ exports[`renders ./components/table/demo/colspan-rowspan.tsx correctly 1`] = `
class="ant-table-row ant-table-row-level-0"
data-row-key="5"
>
<th
class="ant-table-cell"
scope="row"
>
5
</th>
<td
class="ant-table-cell"
>

5
components/table/demo/colspan-rowspan.tsx
View File

@ -22,6 +22,11 @@ const sharedOnCell = (_: DataType, index: number) => {
};
const columns: ColumnsType<DataType> = [
{
title: 'RowHead',
dataIndex: 'key',
rowScope: 'row',
},
{
title: 'Name',
dataIndex: 'name',

13
components/table/style/bordered.ts
View File

@ -14,7 +14,10 @@ const genBorderedStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
[`&${componentCls}-${size}`]: {
[`> ${componentCls}-container`]: {
[`> ${componentCls}-content, > ${componentCls}-body`]: {
'> table > tbody > tr > td': {
[`
> table > tbody > tr > th,
> table > tbody > tr > td
`]: {
[`> ${componentCls}-expanded-row-fixed`]: {
margin: `-${paddingVertical}px -${paddingHorizontal + token.lineWidth}px`,
},
@ -47,6 +50,7 @@ const genBorderedStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
// ============================= Cell =============================
[`
> thead > tr > th,
> tbody > tr > th,
> tbody > tr > td,
> tfoot > tr > th,
> tfoot > tr > td
@ -77,7 +81,10 @@ const genBorderedStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
},
// ========================== Expandable ==========================
'> tbody > tr > td': {
[`
> tbody > tr > th,
> tbody > tr > td
`]: {
[`> ${componentCls}-expanded-row-fixed`]: {
margin: `-${token.tablePaddingVertical}px -${
token.tablePaddingHorizontal + token.lineWidth
@ -114,7 +121,7 @@ const genBorderedStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
> tr${componentCls}-expanded-row,
> tr${componentCls}-placeholder
`]: {
'> td': {
[`> th, > td`]: {
borderInlineEnd: 0,
},
},

5
components/table/style/empty.ts
View File

@ -11,7 +11,10 @@ const genEmptyStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
textAlign: 'center',
color: token.colorTextDisabled,
'&:hover > td': {
[`
&:hover > th,
&:hover > td,
`]: {
background: token.colorBgContainer,
},
},

2
components/table/style/expand.ts
View File

@ -123,7 +123,7 @@ const genExpandStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
[`tr${componentCls}-expanded-row`]: {
'&, &:hover': {
'> td': {
[`> th, > td`]: {
background: tableExpandedRowBg,
},
},

19
components/table/style/index.ts
View File

@ -117,6 +117,7 @@ const genTableStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
// ============================= Cell =============================
[`
${componentCls}-thead > tr > th,
${componentCls}-tbody > tr > th,
${componentCls}-tbody > tr > td,
tfoot > tr > th,
tfoot > tr > td
@ -171,7 +172,7 @@ const genTableStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
// ============================ Body ============================
[`${componentCls}-tbody`]: {
'> tr': {
'> td': {
[`> th, > td`]: {
transition: `background ${motionDurationMid}, border-color ${motionDurationMid}`,
borderBottom: tableBorder,
@ -195,19 +196,31 @@ const genTableStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
},
},
'> th': {
position: 'relative',
color: tableHeaderTextColor,
fontWeight: fontWeightStrong,
textAlign: 'start',
background: tableHeaderBg,
borderBottom: tableBorder,
transition: `background ${motionDurationMid} ease`,
},
[`
&${componentCls}-row:hover > th,
&${componentCls}-row:hover > td,
> th${componentCls}-cell-row-hover
> td${componentCls}-cell-row-hover
`]: {
background: tableRowHoverBg,
},
[`&${componentCls}-row-selected`]: {
'> td': {
[`> th, > td`]: {
background: tableSelectedRowBg,
},
'&:hover > td': {
[`&:hover > th, &:hover > td`]: {
background: tableSelectedRowHoverBg,
},
},

1
components/table/style/size.ts
View File

@ -16,6 +16,7 @@ const genSizeStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
${componentCls}-title,
${componentCls}-footer,
${componentCls}-thead > tr > th,
${componentCls}-tbody > tr > th,
${componentCls}-tbody > tr > td,
tfoot > tr > th,
tfoot > tr > td