From 1e5c5271463d1f56a113d731ad92183b1d01b14d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 3 Apr 2020 13:42:57 +0800 Subject: [PATCH] fix: Table header columns size with filter or sorter (#22872) * fix size columns * update snapshot * more test code * patch * force ci * fix hover small style * adjust less --- .../__tests__/__snapshots__/demo.test.js.snap | 242 +++++++++++++++--- components/table/demo/dynamic-settings.md | 19 +- components/table/style/index.less | 11 + components/table/style/size.less | 22 +- 4 files changed, 251 insertions(+), 43 deletions(-) diff --git a/components/table/__tests__/__snapshots__/demo.test.js.snap b/components/table/__tests__/__snapshots__/demo.test.js.snap index a0ad4d0c57..9de2e34ed4 100644 --- a/components/table/__tests__/__snapshots__/demo.test.js.snap +++ b/components/table/__tests__/__snapshots__/demo.test.js.snap @@ -2311,19 +2311,211 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = ` Name - Age +
+
+ + Age + + + + + + + + + + + +
+
- Address +
+ + Address + + + + + + + + +
- Action +
+ +
+
+ + Action + + + + + + + + + + + +
+
+ + + + + + + + +
@@ -2365,9 +2557,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = ` - - John Brown - + John Brown - - John Brown - + John Brown - - John Brown - + John Brown - - John Brown - + John Brown - - John Brown - + John Brown - - John Brown - + John Brown - - John Brown - + John Brown - - John Brown - + John Brown - - John Brown - + John Brown - - John Brown - + John Brown {text}, }, { title: 'Age', dataIndex: 'age', - key: 'age', + sorter: (a, b) => a.age - b.age, }, { title: 'Address', dataIndex: 'address', - key: 'address', + filters: [ + { + text: 'London', + value: 'London', + }, + { + text: 'New York', + value: 'New York', + }, + ], + onFilter: (value, record) => record.address.indexOf(value) === 0, }, { title: 'Action', key: 'action', + sorter: true, + filters: [], + onFilter: () => {}, render: () => ( Delete diff --git a/components/table/style/index.less b/components/table/style/index.less index 71fff4d5e5..07d396ccab 100644 --- a/components/table/style/index.less +++ b/components/table/style/index.less @@ -255,6 +255,17 @@ padding: @table-padding-vertical 2.3em @table-padding-vertical @table-padding-horizontal; } + // Remove padding when sorter also provided + &-thead tr th.@{table-prefix-cls}-column-has-sorters { + .@{table-prefix-cls}-filter-column { + margin: 0; + } + + .@{table-prefix-cls}-filter-column-title { + padding: 0 2.3em 0 0; + } + } + &-filter-trigger-container { position: absolute; top: 0; diff --git a/components/table/style/size.less b/components/table/style/size.less index 1eb911a3a6..b32d24c0e3 100644 --- a/components/table/style/size.less +++ b/components/table/style/size.less @@ -1,7 +1,7 @@ @import './index'; .table-size(@size, @padding-vertical, @padding-horizontal) { - .@{table-prefix-cls}.@{table-prefix-cls}-@{size} { + .@{table-prefix-cls}-@{size} { .@{table-prefix-cls}-title, .@{table-prefix-cls}-footer, .@{table-prefix-cls}-thead > tr > th, @@ -9,8 +9,22 @@ padding: @padding-vertical @padding-horizontal; } - .@{table-prefix-cls}-filter-column { - margin: -@padding-vertical -@padding-horizontal; + .@{table-prefix-cls}-thead { + th.@{table-prefix-cls}-column-has-sorters { + padding: 0; + } + + .@{table-prefix-cls}-filter-column { + margin: -@padding-vertical -@padding-horizontal; + } + + .@{table-prefix-cls}-filter-column-title { + padding: @padding-vertical 2.3em @padding-vertical @padding-horizontal; + } + + .@{table-prefix-cls}-column-sorters { + padding: @padding-vertical @padding-horizontal; + } } .@{table-prefix-cls}-expanded-row-fixed { @@ -29,7 +43,7 @@ // ================================================================ .table-size(~'small', @table-padding-vertical-sm, @table-padding-horizontal-sm); -.@{table-prefix-cls}.@{table-prefix-cls}-small { +.@{table-prefix-cls}-small { .@{table-prefix-cls}-thead > tr > th { background-color: @table-header-bg-sm; }