mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-07 09:26:06 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

style: redesign Table header action (#30651)

Browse Source 
* feat: improve Table filter and sorter position

* fix: edge cases of th border

* fix lint

* style: apply new design

* fix css detail

* fix stylelint

* fix css error

* style: sorter icon hover color

* fix test cases

* update snapshot

* fix th padding

* fix calc

* style: fix dark theme
This commit is contained in:
afc163 2021-05-24 22:16:06 +08:00 committed by GitHub
parent aa5990fb21
commit 082f626a3e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 3209 additions and 3981 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
components/config-provider/__tests__/__snapshots__/components.test.js.snap
View File

@ -22768,12 +22768,6 @@ exports[`ConfigProvider components Table configProvider 1`] = `
>
<div
class="config-table-filter-column"
>
<span
class="config-table-filter-column-title"
>
<div
class="config-table-column-sorters-with-tooltip"
>
<div
class="config-table-column-sorters"
@ -22828,11 +22822,6 @@ exports[`ConfigProvider components Table configProvider 1`] = `
</span>
</span>
</div>
</div>
</span>
<span
class="config-table-filter-trigger-container config-table-filter-trigger-container-open"
>
<span
class="config-dropdown-trigger config-table-filter-trigger"
role="button"
@ -22939,7 +22928,6 @@ exports[`ConfigProvider components Table configProvider 1`] = `
</div>
</div>
</div>
</span>
</div>
</th>
</tr>
@ -23043,12 +23031,6 @@ exports[`ConfigProvider components Table configProvider componentSize large 1`]
>
<div
class="config-table-filter-column"
>
<span
class="config-table-filter-column-title"
>
<div
class="config-table-column-sorters-with-tooltip"
>
<div
class="config-table-column-sorters"
@ -23103,11 +23085,6 @@ exports[`ConfigProvider components Table configProvider componentSize large 1`]
</span>
</span>
</div>
</div>
</span>
<span
class="config-table-filter-trigger-container config-table-filter-trigger-container-open"
>
<span
class="config-dropdown-trigger config-table-filter-trigger"
role="button"
@ -23214,7 +23191,6 @@ exports[`ConfigProvider components Table configProvider componentSize large 1`]
</div>
</div>
</div>
</span>
</div>
</th>
</tr>
@ -23318,12 +23294,6 @@ exports[`ConfigProvider components Table configProvider componentSize middle 1`]
>
<div
class="config-table-filter-column"
>
<span
class="config-table-filter-column-title"
>
<div
class="config-table-column-sorters-with-tooltip"
>
<div
class="config-table-column-sorters"
@ -23378,11 +23348,6 @@ exports[`ConfigProvider components Table configProvider componentSize middle 1`]
</span>
</span>
</div>
</div>
</span>
<span
class="config-table-filter-trigger-container config-table-filter-trigger-container-open"
>
<span
class="config-dropdown-trigger config-table-filter-trigger"
role="button"
@ -23489,7 +23454,6 @@ exports[`ConfigProvider components Table configProvider componentSize middle 1`]
</div>
</div>
</div>
</span>
</div>
</th>
</tr>
@ -23593,12 +23557,6 @@ exports[`ConfigProvider components Table configProvider virtual and dropdownMatc
>
<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"
@ -23653,11 +23611,6 @@ exports[`ConfigProvider components Table configProvider virtual and dropdownMatc
</span>
</span>
</div>
</div>
</span>
<span
class="ant-table-filter-trigger-container ant-table-filter-trigger-container-open"
>
<span
class="ant-dropdown-trigger ant-table-filter-trigger"
role="button"
@ -23764,7 +23717,6 @@ exports[`ConfigProvider components Table configProvider virtual and dropdownMatc
</div>
</div>
</div>
</span>
</div>
</th>
</tr>
@ -23868,12 +23820,6 @@ exports[`ConfigProvider components Table normal 1`] = `
>
<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"
@ -23928,11 +23874,6 @@ exports[`ConfigProvider components Table normal 1`] = `
</span>
</span>
</div>
</div>
</span>
<span
class="ant-table-filter-trigger-container ant-table-filter-trigger-container-open"
>
<span
class="ant-dropdown-trigger ant-table-filter-trigger"
role="button"
@ -24039,7 +23980,6 @@ exports[`ConfigProvider components Table normal 1`] = `
</div>
</div>
</div>
</span>
</div>
</th>
</tr>
@ -24143,12 +24083,6 @@ exports[`ConfigProvider components Table prefixCls 1`] = `
>
<div
class="prefix-Table-filter-column"
>
<span
class="prefix-Table-filter-column-title"
>
<div
class="prefix-Table-column-sorters-with-tooltip"
>
<div
class="prefix-Table-column-sorters"
@ -24203,11 +24137,6 @@ exports[`ConfigProvider components Table prefixCls 1`] = `
</span>
</span>
</div>
</div>
</span>
<span
class="prefix-Table-filter-trigger-container prefix-Table-filter-trigger-container-open"
>
<span
class="ant-dropdown-trigger prefix-Table-filter-trigger"
role="button"
@ -24314,7 +24243,6 @@ exports[`ConfigProvider components Table prefixCls 1`] = `
</div>
</div>
</div>
</span>
</div>
</th>
</tr>

480
components/locale-provider/__tests__/__snapshots__/index.test.js.snap
View File

File diff suppressed because it is too large Load Diff

1
components/style/themes/dark.less
View File

@ -310,6 +310,7 @@
@table-header-bg: #1d1d1d;
@table-body-sort-bg: fade(@white, 1%);
@table-row-hover-bg: #262626;
@table-header-cell-split-color: fade(@white, 8%);
@table-header-sort-bg: #262626;
@table-header-filter-active-bg: #434343;
@table-header-sort-active-bg: #303030;

5
components/style/themes/default.less
View File

@ -609,11 +609,12 @@
@table-font-size: @font-size-base;
@table-font-size-md: @table-font-size;
@table-font-size-sm: @table-font-size;
@table-header-cell-split-color: rgba(0, 0, 0, 0.06);
// Sorter
// Legacy: `table-header-sort-active-bg` is used for hover not real active
@table-header-sort-active-bg: darken(@table-header-bg, 3%);
@table-header-sort-active-bg: rgba(0, 0, 0, 0.04);
// Filter
@table-header-filter-active-bg: darken(@table-header-sort-active-bg, 5%);
@table-header-filter-active-bg: rgba(0, 0, 0, 0.04);
@table-filter-btns-bg: inherit;
@table-filter-dropdown-bg: @component-background;
@table-expand-icon-bg: @component-background;

20
components/table/__tests__/Table.sorter.test.js
View File

@ -182,15 +182,14 @@ describe('Table.sorter', () => {
jest.useFakeTimers();
const wrapper = mount(createTable({}));
// default show sorter tooltip
wrapper.find('.ant-table-column-sorters-with-tooltip').simulate('mouseenter');
wrapper.find('.ant-table-column-sorters').simulate('mouseenter');
jest.runAllTimers();
wrapper.update();
expect(wrapper.find('.ant-tooltip-open').length).toBeTruthy();
wrapper.find('.ant-table-column-sorters-with-tooltip').simulate('mouseout');
wrapper.find('.ant-table-column-sorters').simulate('mouseout');
// set table props showSorterTooltip is false
wrapper.setProps({ showSorterTooltip: false });
expect(wrapper.find('.ant-table-column-sorters-with-tooltip')).toHaveLength(0);
jest.runAllTimers();
wrapper.update();
expect(wrapper.find('.ant-tooltip-open')).toHaveLength(0);
@ -199,17 +198,16 @@ describe('Table.sorter', () => {
showSorterTooltip: false,
columns: [{ ...column, showSorterTooltip: true }],
});
wrapper.find('.ant-table-column-sorters-with-tooltip').simulate('mouseenter');
wrapper.find('.ant-table-column-sorters').simulate('mouseenter');
jest.runAllTimers();
wrapper.update();
expect(wrapper.find('.ant-tooltip-open').length).toBeTruthy();
wrapper.find('.ant-table-column-sorters-with-tooltip').simulate('mouseout');
wrapper.find('.ant-table-column-sorters').simulate('mouseout');
// set table props showSorterTooltip is true, column showSorterTooltip is false
wrapper.setProps({
showSorterTooltip: true,
columns: [{ ...column, showSorterTooltip: false }],
});
expect(wrapper.find('.ant-table-column-sorters-with-tooltip')).toHaveLength(0);
jest.runAllTimers();
wrapper.update();
expect(wrapper.find('.ant-tooltip-open')).toHaveLength(0);
@ -221,14 +219,13 @@ describe('Table.sorter', () => {
const wrapper = mount(
createTable({ showSorterTooltip: { placement: 'bottom', title: 'static title' } }),
);
wrapper.find('.ant-table-column-sorters-with-tooltip').simulate('mouseenter');
wrapper.find('.ant-table-column-sorters').simulate('mouseenter');
jest.runAllTimers();
wrapper.update();
expect(wrapper.find('.ant-tooltip-open').length).toBeTruthy();
wrapper.find('.ant-table-column-sorters-with-tooltip').simulate('mouseout');
wrapper.find('.ant-table-column-sorters').simulate('mouseout');
wrapper.setProps({ showSorterTooltip: false });
expect(wrapper.find('.ant-table-column-sorters-with-tooltip')).toHaveLength(0);
jest.runAllTimers();
wrapper.update();
expect(wrapper.find('.ant-tooltip-open')).toHaveLength(0);
@ -236,16 +233,15 @@ describe('Table.sorter', () => {
showSorterTooltip: false,
columns: [{ ...column, showSorterTooltip: true }],
});
wrapper.find('.ant-table-column-sorters-with-tooltip').simulate('mouseenter');
wrapper.find('.ant-table-column-sorters').simulate('mouseenter');
jest.runAllTimers();
wrapper.update();
expect(wrapper.find('.ant-tooltip-open').length).toBeTruthy();
wrapper.find('.ant-table-column-sorters-with-tooltip').simulate('mouseout');
wrapper.find('.ant-table-column-sorters').simulate('mouseout');
wrapper.setProps({
showSorterTooltip: true,
columns: [{ ...column, showSorterTooltip: false }],
});
expect(wrapper.find('.ant-table-column-sorters-with-tooltip')).toHaveLength(0);
jest.runAllTimers();
wrapper.update();
expect(wrapper.find('.ant-tooltip-open')).toHaveLength(0);

48
components/table/__tests__/__snapshots__/Table.filter.test.js.snap
View File

@ -66,15 +66,8 @@ exports[`Table.filter renders custom filter icon as ReactNode 1`] = `
>
<div
class="ant-table-filter-column"
>
<span
class="ant-table-filter-column-title"
>
Name
</span>
<span
class="ant-table-filter-trigger-container"
>
<span
class="ant-dropdown-trigger ant-table-filter-trigger"
role="button"
@ -84,7 +77,6 @@ exports[`Table.filter renders custom filter icon as ReactNode 1`] = `
class="customize-icon"
/>
</span>
</span>
</div>
</th>
</tr>
@ -174,15 +166,8 @@ exports[`Table.filter renders custom filter icon as string correctly 1`] = `
>
<div
class="ant-table-filter-column"
>
<span
class="ant-table-filter-column-title"
>
Name
</span>
<span
class="ant-table-filter-trigger-container"
>
<span
class="ant-dropdown-trigger ant-table-filter-trigger"
role="button"
@ -190,7 +175,6 @@ exports[`Table.filter renders custom filter icon as string correctly 1`] = `
>
string
</span>
</span>
</div>
</th>
</tr>
@ -296,15 +280,8 @@ exports[`Table.filter renders custom filter icon with right Tooltip title 1`] =
>
<div
class="ant-table-filter-column"
>
<span
class="ant-table-filter-column-title"
>
Name
</span>
<span
class="ant-table-filter-trigger-container"
>
<span
class="ant-dropdown-trigger ant-table-filter-trigger"
role="button"
@ -340,7 +317,6 @@ exports[`Table.filter renders custom filter icon with right Tooltip title 1`] =
</div>
</div>
</span>
</span>
</div>
</th>
</tr>
@ -430,15 +406,8 @@ exports[`Table.filter renders filter correctly 1`] = `
>
<div
class="ant-table-filter-column"
>
<span
class="ant-table-filter-column-title"
>
Name
</span>
<span
class="ant-table-filter-trigger-container"
>
<span
class="ant-dropdown-trigger ant-table-filter-trigger"
role="button"
@ -464,7 +433,6 @@ exports[`Table.filter renders filter correctly 1`] = `
</svg>
</span>
</span>
</span>
</div>
</th>
</tr>
@ -558,15 +526,8 @@ exports[`Table.filter should support getPopupContainer 1`] = `
>
<div
class="ant-table-filter-column"
>
<span
class="ant-table-filter-column-title"
>
Name
</span>
<span
class="ant-table-filter-trigger-container ant-table-filter-trigger-container-open"
>
<span
class="ant-dropdown-trigger ant-table-filter-trigger"
role="button"
@ -709,7 +670,6 @@ exports[`Table.filter should support getPopupContainer 1`] = `
<div
style="position: absolute; top: 0px; left: 0px; width: 100%;"
/>
</span>
</div>
</th>
</tr>
@ -799,15 +759,8 @@ exports[`Table.filter should support getPopupContainer from ConfigProvider 1`] =
>
<div
class="ant-table-filter-column"
>
<span
class="ant-table-filter-column-title"
>
Name
</span>
<span
class="ant-table-filter-trigger-container ant-table-filter-trigger-container-open"
>
<span
class="ant-dropdown-trigger ant-table-filter-trigger"
role="button"
@ -950,7 +903,6 @@ exports[`Table.filter should support getPopupContainer from ConfigProvider 1`] =
<div
style="position: absolute; top: 0px; left: 0px; width: 100%;"
/>
</span>
</div>
</th>
</tr>

8
components/table/__tests__/__snapshots__/Table.sorter.test.js.snap
View File

@ -7,9 +7,6 @@ exports[`Table.sorter renders sorter icon correctly 1`] = `
<tr>
<th
class="ant-table-cell ant-table-column-has-sorters"
>
<div
class="ant-table-column-sorters-with-tooltip"
>
<div
class="ant-table-column-sorters"
@ -64,7 +61,6 @@ exports[`Table.sorter renders sorter icon correctly 1`] = `
</span>
</span>
</div>
</div>
</th>
</tr>
</thead>
@ -99,9 +95,6 @@ exports[`Table.sorter should support defaultOrder in Column 1`] = `
<tr>
<th
class="ant-table-cell ant-table-column-sort ant-table-column-has-sorters"
>
<div
class="ant-table-column-sorters-with-tooltip"
>
<div
class="ant-table-column-sorters"
@ -156,7 +149,6 @@ exports[`Table.sorter should support defaultOrder in Column 1`] = `
</span>
</span>
</div>
</div>
</th>
</tr>
</thead>

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

@ -36,9 +36,6 @@ exports[`renders ./components/table/demo/ajax.md correctly 1`] = `
<tr>
<th
class="ant-table-cell ant-table-column-has-sorters"
>
<div
class="ant-table-column-sorters-with-tooltip"
>
<div
class="ant-table-column-sorters"
@ -93,22 +90,14 @@ exports[`renders ./components/table/demo/ajax.md correctly 1`] = `
</span>
</span>
</div>
</div>
</th>
<th
class="ant-table-cell"
>
<div
class="ant-table-filter-column"
>
<span
class="ant-table-filter-column-title"
>
Gender
</span>
<span
class="ant-table-filter-trigger-container"
>
<span
class="ant-dropdown-trigger ant-table-filter-trigger"
role="button"
@ -134,7 +123,6 @@ exports[`renders ./components/table/demo/ajax.md correctly 1`] = `
</svg>
</span>
</span>
</span>
</div>
</th>
<th
@ -1067,15 +1055,8 @@ exports[`renders ./components/table/demo/custom-filter-panel.md correctly 1`] =
>
<div
class="ant-table-filter-column"
>
<span
class="ant-table-filter-column-title"
>
Name
</span>
<span
class="ant-table-filter-trigger-container"
>
<span
class="ant-dropdown-trigger ant-table-filter-trigger"
role="button"
@ -1101,7 +1082,6 @@ exports[`renders ./components/table/demo/custom-filter-panel.md correctly 1`] =
</svg>
</span>
</span>
</span>
</div>
</th>
<th
@ -1109,15 +1089,8 @@ exports[`renders ./components/table/demo/custom-filter-panel.md correctly 1`] =
>
<div
class="ant-table-filter-column"
>
<span
class="ant-table-filter-column-title"
>
Age
</span>
<span
class="ant-table-filter-trigger-container"
>
<span
class="ant-dropdown-trigger ant-table-filter-trigger"
role="button"
@ -1143,23 +1116,67 @@ exports[`renders ./components/table/demo/custom-filter-panel.md correctly 1`] =
</svg>
</span>
</span>
</span>
</div>
</th>
<th
class="ant-table-cell"
class="ant-table-cell ant-table-column-has-sorters"
>
<div
class="ant-table-filter-column"
>
<span
class="ant-table-filter-column-title"
<div
class="ant-table-column-sorters"
>
<span>
Address
</span>
<span
class="ant-table-filter-trigger-container"
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"
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"
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>
<span
class="ant-dropdown-trigger ant-table-filter-trigger"
role="button"
@ -1185,7 +1202,6 @@ exports[`renders ./components/table/demo/custom-filter-panel.md correctly 1`] =
</svg>
</span>
</span>
</span>
</div>
</th>
</tr>
@ -2678,9 +2694,6 @@ Array [
</th>
<th
class="ant-table-cell ant-table-column-has-sorters"
>
<div
class="ant-table-column-sorters-with-tooltip"
>
<div
class="ant-table-column-sorters"
@ -2735,22 +2748,14 @@ Array [
</span>
</span>
</div>
</div>
</th>
<th
class="ant-table-cell"
>
<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-dropdown-trigger ant-table-filter-trigger"
role="button"
@ -2776,14 +2781,10 @@ Array [
</svg>
</span>
</span>
</span>
</div>
</th>
<th
class="ant-table-cell ant-table-column-has-sorters"
>
<div
class="ant-table-column-sorters-with-tooltip"
>
<div
class="ant-table-column-sorters"
@ -2838,7 +2839,6 @@ Array [
</span>
</span>
</div>
</div>
</th>
</tr>
</thead>
@ -8422,15 +8422,8 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
>
<div
class="ant-table-filter-column"
>
<span
class="ant-table-filter-column-title"
>
Name
</span>
<span
class="ant-table-filter-trigger-container"
>
<span
class="ant-dropdown-trigger ant-table-filter-trigger"
role="button"
@ -8456,7 +8449,6 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
</svg>
</span>
</span>
</span>
</div>
</th>
<th
@ -8483,9 +8475,6 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
<th
class="ant-table-cell ant-table-column-has-sorters"
rowspan="3"
>
<div
class="ant-table-column-sorters-with-tooltip"
>
<div
class="ant-table-column-sorters"
@ -8540,7 +8529,6 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
</span>
</span>
</div>
</div>
</th>
<th
class="ant-table-cell"
@ -9450,12 +9438,6 @@ exports[`renders ./components/table/demo/head.md correctly 1`] = `
>
<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"
@ -9491,11 +9473,6 @@ exports[`renders ./components/table/demo/head.md correctly 1`] = `
</span>
</span>
</div>
</div>
</span>
<span
class="ant-table-filter-trigger-container"
>
<span
class="ant-dropdown-trigger ant-table-filter-trigger"
role="button"
@ -9521,14 +9498,10 @@ exports[`renders ./components/table/demo/head.md correctly 1`] = `
</svg>
</span>
</span>
</span>
</div>
</th>
<th
class="ant-table-cell ant-table-column-sort ant-table-column-has-sorters"
>
<div
class="ant-table-column-sorters-with-tooltip"
>
<div
class="ant-table-column-sorters"
@ -9583,78 +9556,14 @@ exports[`renders ./components/table/demo/head.md correctly 1`] = `
</span>
</span>
</div>
</div>
</th>
<th
class="ant-table-cell ant-table-column-has-sorters"
class="ant-table-cell"
>
<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>
Address
</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"
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"
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-dropdown-trigger ant-table-filter-trigger"
role="button"
@ -9680,7 +9589,6 @@ exports[`renders ./components/table/demo/head.md correctly 1`] = `
</svg>
</span>
</span>
</span>
</div>
</th>
</tr>
@ -10237,9 +10145,6 @@ exports[`renders ./components/table/demo/multiple-sorter.md correctly 1`] = `
</th>
<th
class="ant-table-cell ant-table-column-has-sorters"
>
<div
class="ant-table-column-sorters-with-tooltip"
>
<div
class="ant-table-column-sorters"
@ -10294,13 +10199,9 @@ exports[`renders ./components/table/demo/multiple-sorter.md correctly 1`] = `
</span>
</span>
</div>
</div>
</th>
<th
class="ant-table-cell ant-table-column-has-sorters"
>
<div
class="ant-table-column-sorters-with-tooltip"
>
<div
class="ant-table-column-sorters"
@ -10355,13 +10256,9 @@ exports[`renders ./components/table/demo/multiple-sorter.md correctly 1`] = `
</span>
</span>
</div>
</div>
</th>
<th
class="ant-table-cell ant-table-column-has-sorters"
>
<div
class="ant-table-column-sorters-with-tooltip"
>
<div
class="ant-table-column-sorters"
@ -10416,7 +10313,6 @@ exports[`renders ./components/table/demo/multiple-sorter.md correctly 1`] = `
</span>
</span>
</div>
</div>
</th>
</tr>
</thead>
@ -12537,12 +12433,6 @@ Array [
>
<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"
@ -12597,11 +12487,6 @@ Array [
</span>
</span>
</div>
</div>
</span>
<span
class="ant-table-filter-trigger-container"
>
<span
class="ant-dropdown-trigger ant-table-filter-trigger"
role="button"
@ -12627,14 +12512,10 @@ Array [
</svg>
</span>
</span>
</span>
</div>
</th>
<th
class="ant-table-cell ant-table-cell-ellipsis ant-table-column-has-sorters"
>
<div
class="ant-table-column-sorters-with-tooltip"
>
<div
class="ant-table-column-sorters"
@ -12689,19 +12570,12 @@ Array [
</span>
</span>
</div>
</div>
</th>
<th
class="ant-table-cell ant-table-cell-ellipsis ant-table-column-has-sorters"
>
<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"
@ -12756,11 +12630,6 @@ Array [
</span>
</span>
</div>
</div>
</span>
<span
class="ant-table-filter-trigger-container"
>
<span
class="ant-dropdown-trigger ant-table-filter-trigger"
role="button"
@ -12786,7 +12655,6 @@ Array [
</svg>
</span>
</span>
</span>
</div>
</th>
</tr>
@ -13027,9 +12895,6 @@ exports[`renders ./components/table/demo/resizable-column.md correctly 1`] = `
</th>
<th
class="ant-table-cell ant-table-column-has-sorters react-resizable"
>
<div
class="ant-table-column-sorters-with-tooltip"
>
<div
class="ant-table-column-sorters"
@ -13084,7 +12949,6 @@ exports[`renders ./components/table/demo/resizable-column.md correctly 1`] = `
</span>
</span>
</div>
</div>
<span
class="react-resizable-handle"
/>

2
components/table/demo/custom-filter-panel.md
View File

@ -152,6 +152,8 @@ class App extends React.Component {
dataIndex: 'address',
key: 'address',
...this.getColumnSearchProps('address'),
sorter: (a, b) => a.address.length - b.address.length,
sortDirections: ['descend', 'ascend'],
},
];
return <Table columns={columns} dataSource={data} />;

3
components/table/demo/head.md
View File

@ -85,10 +85,7 @@ const columns = [
value: 'New York',
},
],
filterMultiple: false,
onFilter: (value, record) => record.address.indexOf(value) === 0,
sorter: (a, b) => a.address.length - b.address.length,
sortDirections: ['descend', 'ascend'],
},
];

15
components/table/hooks/useFilter/FilterDropdown.tsx
View File

@ -282,16 +282,7 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
return (
<div className={classNames(`${prefixCls}-column`)}>
<span className={`${prefixCls}-column-title`}>{children}</span>
<span
className={classNames(`${prefixCls}-trigger-container`, {
[`${prefixCls}-trigger-container-open`]: mergedVisible,
})}
onClick={e => {
e.stopPropagation();
}}
>
{children}
<Dropdown
overlay={menu}
trigger={['click']}
@ -306,11 +297,13 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
className={classNames(`${prefixCls}-trigger`, {
active: filtered,
})}
onClick={e => {
e.stopPropagation();
}}
>
{filterIcon}
</span>
</Dropdown>
</span>
</div>
);
}

4
components/table/hooks/useSorter.tsx
View File

@ -168,9 +168,7 @@ function injectSorter<RecordType>(
</div>
);
return showSorterTooltip ? (
<Tooltip {...tooltipProps}>
<div className={`${prefixCls}-column-sorters-with-tooltip`}>{renderSortTitle}</div>
</Tooltip>
<Tooltip {...tooltipProps}>{renderSortTitle}</Tooltip>
) : (
renderSortTitle
);

6
components/table/style/bordered.less
View File

@ -32,6 +32,12 @@
> tr:not(:last-child) > th {
border-bottom: @border-width-base @border-style-base @table-border-color;
}
> tr > th {
&::before {
background-color: transparent !important;
}
}
}
// Fixed right should provides additional border

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

@ -8,7 +8,6 @@
@descriptions-prefix-cls: ~'@{ant-prefix}-descriptions';
@table-header-icon-color: #bfbfbf;
@table-header-icon-color-hover: darken(@table-header-icon-color, 10%);
@table-header-sort-active-filter-bg: lighten(@table-header-sort-active-bg, 2%);
@table-sticky-zindex: (@zindex-table-fixed + 1);
@table-sticky-scroll-bar-active-bg: fade(@table-sticky-scroll-bar-bg, 80%);
@ -79,6 +78,7 @@
&-thead {
> tr {
> th {
position: relative;
color: @table-header-color;
font-weight: 500;
text-align: left;
@ -89,6 +89,18 @@
&[colspan]:not([colspan='1']) {
text-align: center;
}
&:not(:last-child):not(.@{table-prefix-cls}-selection-column):not(.@{table-prefix-cls}-row-expand-icon-cell):not([colspan])::before {
position: absolute;
top: 50%;
right: 0;
width: 1px;
height: 1.6em;
background-color: @table-header-cell-split-color;
transform: translateY(-50%);
transition: background-color 0.3s;
content: '';
}
}
}
@ -195,47 +207,52 @@
// ============================ Sorter ============================
&-thead th.@{table-prefix-cls}-column-has-sorters {
padding: 0;
cursor: pointer;
transition: all 0.3s;
&:hover {
background: @table-header-sort-active-bg;
.@{table-prefix-cls}-filter-trigger-container {
background: @table-header-sort-active-filter-bg;
&::before {
background-color: transparent !important;
}
}
}
&-thead th.@{table-prefix-cls}-column-sort {
background: @table-header-sort-bg;
&::before {
background-color: transparent !important;
}
}
td&-column-sort {
background: @table-body-sort-bg;
}
&-column-sorters-with-tooltip {
display: inline-block;
width: 100%;
}
&-column-sorters {
display: inline-flex;
display: flex;
flex: auto;
align-items: center;
padding: @table-padding-vertical @table-padding-horizontal;
justify-content: space-between;
&::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
content: '';
}
}
&-column-sorter {
margin-top: 0.15em;
margin-bottom: -0.15em;
margin-left: @padding-xs;
color: @table-header-icon-color;
&-full {
margin-top: -0.2em;
margin-bottom: 0;
}
font-size: 0;
transition: color 0.3s;
&-inner {
display: inline-flex;
@ -257,65 +274,31 @@
}
}
&-column-sorters:hover &-column-sorter {
color: darken(@table-header-icon-color, 10%);
}
// ============================ Filter ============================
&-filter-column {
display: flex;
align-items: center;
margin: -@table-padding-vertical -@table-padding-horizontal;
}
&-filter-column-title {
flex: auto;
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;
right: 0;
bottom: 0;
display: flex;
flex: none;
align-items: stretch;
align-self: stretch;
cursor: pointer;
transition: background-color 0.3s;
&-open,
&:hover,
.@{table-prefix-cls}-thead th.@{table-prefix-cls}-column-has-sorters:hover &:hover {
background: @table-header-filter-active-bg;
}
justify-content: space-between;
}
&-filter-trigger {
display: block;
width: 2.3em;
position: relative;
display: flex;
align-items: center;
margin: -4px (-@table-padding-horizontal / 2) -4px 4px;
padding: 0 4px;
color: @table-header-icon-color;
font-size: @font-size-sm;
transition: color 0.3s;
border-radius: @border-radius-base;
cursor: pointer;
transition: all 0.3s;
.@{iconfont-css-prefix} {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.@{table-prefix-cls}-filter-trigger-container-open &,
&:hover {
color: @text-color-secondary;
background: @table-header-filter-active-bg;
}
&.active {
@ -388,6 +371,10 @@
}
}
table tr th&-selection-column::after {
background-color: transparent !important;
}
&-selection {
position: relative;
display: inline-flex;
@ -564,6 +551,7 @@
content: '';
pointer-events: none;
}
&-cell-fix-right-first::after,
&-cell-fix-right-last::after {
position: absolute;
@ -611,6 +599,10 @@
.@{table-prefix-cls}-cell-fix-left-last::after {
box-shadow: inset 10px 0 8px -8px darken(@shadow-color, 5%);
}
.@{table-prefix-cls}-cell-fix-left-last::before {
background-color: transparent !important;
}
}
&-ping-right {

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

@ -13,22 +13,8 @@
padding: @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}-filter-trigger {
margin-right: -(@padding-horizontal / 2);
}
.@{table-prefix-cls}-expanded-row-fixed {