GitHub
/
ant-design
6
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

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
pull/22880/head
二货机器人 5 years ago
committed by GitHub
parent
3b77e610fe
commit
1e5c527146
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 251 additions and 43 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 242
      components/table/__tests__/__snapshots__/demo.test.js.snap
  2. 19
      components/table/demo/dynamic-settings.md
  3. 11
      components/table/style/index.less
  4. 22
      components/table/style/size.less

242
components/table/__tests__/__snapshots__/demo.test.js.snap
View File

@ -2311,19 +2311,211 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
Name
</th>
<th
class="ant-table-cell"
class="ant-table-cell ant-table-column-has-sorters"
>
Age
<div
class="ant-table-column-sorters-with-tooltip"
>
<div
class="ant-table-column-sorters"
>
<span>
Age
</span>
<span
class="ant-table-column-sorter ant-table-column-sorter-full"
>
<span
class="ant-table-column-sorter-inner"
>
<span
aria-label="caret-up"
class="anticon anticon-caret-up ant-table-column-sorter-up"
role="img"
>
<svg
aria-hidden="true"
class=""
data-icon="caret-up"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"
/>
</svg>
</span>
<span
aria-label="caret-down"
class="anticon anticon-caret-down ant-table-column-sorter-down"
role="img"
>
<svg
aria-hidden="true"
class=""
data-icon="caret-down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
/>
</svg>
</span>
</span>
</span>
</div>
</div>
</th>
<th
class="ant-table-cell"
>
Address
<div
class="ant-table-filter-column"
>
<span
class="ant-table-filter-column-title"
>
Address
</span>
<span
class="ant-table-filter-trigger-container"
>
<span
class="ant-table-filter-trigger ant-dropdown-trigger"
role="button"
tabindex="-1"
>
<span
aria-label="filter"
class="anticon anticon-filter"
role="img"
>
<svg
aria-hidden="true"
class=""
data-icon="filter"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M349 838c0 17.7 14.2 32 31.8 32h262.4c17.6 0 31.8-14.3 31.8-32V642H349v196zm531.1-684H143.9c-24.5 0-39.8 26.7-27.5 48l221.3 376h348.8l221.3-376c12.1-21.3-3.2-48-27.7-48z"
/>
</svg>
</span>
</span>
</span>
</div>
</th>
<th
class="ant-table-cell"
class="ant-table-cell ant-table-column-has-sorters"
>
Action
<div
class="ant-table-filter-column"
>
<span
class="ant-table-filter-column-title"
>
<div
class="ant-table-column-sorters-with-tooltip"
>
<div
class="ant-table-column-sorters"
>
<span>
Action
</span>
<span
class="ant-table-column-sorter ant-table-column-sorter-full"
>
<span
class="ant-table-column-sorter-inner"
>
<span
aria-label="caret-up"
class="anticon anticon-caret-up ant-table-column-sorter-up"
role="img"
>
<svg
aria-hidden="true"
class=""
data-icon="caret-up"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"
/>
</svg>
</span>
<span
aria-label="caret-down"
class="anticon anticon-caret-down ant-table-column-sorter-down"
role="img"
>
<svg
aria-hidden="true"
class=""
data-icon="caret-down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
/>
</svg>
</span>
</span>
</span>
</div>
</div>
</span>
<span
class="ant-table-filter-trigger-container"
>
<span
class="ant-table-filter-trigger ant-dropdown-trigger"
role="button"
tabindex="-1"
>
<span
aria-label="filter"
class="anticon anticon-filter"
role="img"
>
<svg
aria-hidden="true"
class=""
data-icon="filter"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M349 838c0 17.7 14.2 32 31.8 32h262.4c17.6 0 31.8-14.3 31.8-32V642H349v196zm531.1-684H143.9c-24.5 0-39.8 26.7-27.5 48l221.3 376h348.8l221.3-376c12.1-21.3-3.2-48-27.7-48z"
/>
</svg>
</span>
</span>
</span>
</div>
</th>
</tr>
</thead>
@ -2365,9 +2557,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
<td
class="ant-table-cell"
>
<a>
John Brown
</a>
John Brown
</td>
<td
class="ant-table-cell"
@ -2451,9 +2641,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
<td
class="ant-table-cell"
>
<a>
John Brown
</a>
John Brown
</td>
<td
class="ant-table-cell"
@ -2537,9 +2725,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
<td
class="ant-table-cell"
>
<a>
John Brown
</a>
John Brown
</td>
<td
class="ant-table-cell"
@ -2623,9 +2809,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
<td
class="ant-table-cell"
>
<a>
John Brown
</a>
John Brown
</td>
<td
class="ant-table-cell"
@ -2709,9 +2893,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
<td
class="ant-table-cell"
>
<a>
John Brown
</a>
John Brown
</td>
<td
class="ant-table-cell"
@ -2795,9 +2977,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
<td
class="ant-table-cell"
>
<a>
John Brown
</a>
John Brown
</td>
<td
class="ant-table-cell"
@ -2881,9 +3061,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
<td
class="ant-table-cell"
>
<a>
John Brown
</a>
John Brown
</td>
<td
class="ant-table-cell"
@ -2967,9 +3145,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
<td
class="ant-table-cell"
>
<a>
John Brown
</a>
John Brown
</td>
<td
class="ant-table-cell"
@ -3053,9 +3229,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
<td
class="ant-table-cell"
>
<a>
John Brown
</a>
John Brown
</td>
<td
class="ant-table-cell"
@ -3139,9 +3313,7 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
<td
class="ant-table-cell"
>
<a>
John Brown
</a>
John Brown
</td>
<td
class="ant-table-cell"

19
components/table/demo/dynamic-settings.md
View File

@ -21,22 +21,33 @@ const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
render: text => <a>{text}</a>,
},
{
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: () => (
<span>
<a style={{ marginRight: 16 }}>Delete</a>

11
components/table/style/index.less
View File

@ -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;

22
components/table/style/size.less
View File

@ -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;
}

Write Preview
Loading…
Cancel
Save