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

fix: Table column align with sorter and filter (#30744)

Browse Source 
* fix: Table column align with sorter and filter

close #30741

* update snapshot
This commit is contained in:
afc163 2021-05-28 13:27:58 +08:00 committed by GitHub
parent 201c6cadf1
commit 7427f52a64
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 884 additions and 502 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -22847,59 +22847,65 @@ exports[`ConfigProvider components Table configProvider 1`] = `
<div <div
class="config-table-filter-column" class="config-table-filter-column"
> >
<div <span
class="config-table-column-sorters" class="config-table-column-title"
> >
<span> <div
Name class="config-table-column-sorters"
</span>
<span
class="config-table-column-sorter config-table-column-sorter-full"
> >
<span <span
class="config-table-column-sorter-inner" class="config-table-column-title"
>
Name
</span>
<span
class="config-table-column-sorter config-table-column-sorter-full"
> >
<span <span
aria-label="caret-up" class="config-table-column-sorter-inner"
class="anticon anticon-caret-up config-table-column-sorter-up"
role="img"
> >
<svg <span
aria-hidden="true" aria-label="caret-up"
data-icon="caret-up" class="anticon anticon-caret-up config-table-column-sorter-up"
fill="currentColor" role="img"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
> >
<path <svg
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" aria-hidden="true"
/> data-icon="caret-up"
</svg> fill="currentColor"
</span> focusable="false"
<span height="1em"
aria-label="caret-down" viewBox="0 0 1024 1024"
class="anticon anticon-caret-down config-table-column-sorter-down" width="1em"
role="img" >
> <path
<svg 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"
aria-hidden="true" />
data-icon="caret-down" </svg>
fill="currentColor" </span>
focusable="false" <span
height="1em" aria-label="caret-down"
viewBox="0 0 1024 1024" class="anticon anticon-caret-down config-table-column-sorter-down"
width="1em" role="img"
> >
<path <svg
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" aria-hidden="true"
/> data-icon="caret-down"
</svg> 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>
</span> </span>
</span> </div>
</div> </span>
<span <span
class="config-dropdown-trigger config-table-filter-trigger" class="config-dropdown-trigger config-table-filter-trigger"
role="button" role="button"
@ -23121,59 +23127,65 @@ exports[`ConfigProvider components Table configProvider componentSize large 1`]
<div <div
class="config-table-filter-column" class="config-table-filter-column"
> >
<div <span
class="config-table-column-sorters" class="config-table-column-title"
> >
<span> <div
Name class="config-table-column-sorters"
</span>
<span
class="config-table-column-sorter config-table-column-sorter-full"
> >
<span <span
class="config-table-column-sorter-inner" class="config-table-column-title"
>
Name
</span>
<span
class="config-table-column-sorter config-table-column-sorter-full"
> >
<span <span
aria-label="caret-up" class="config-table-column-sorter-inner"
class="anticon anticon-caret-up config-table-column-sorter-up"
role="img"
> >
<svg <span
aria-hidden="true" aria-label="caret-up"
data-icon="caret-up" class="anticon anticon-caret-up config-table-column-sorter-up"
fill="currentColor" role="img"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
> >
<path <svg
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" aria-hidden="true"
/> data-icon="caret-up"
</svg> fill="currentColor"
</span> focusable="false"
<span height="1em"
aria-label="caret-down" viewBox="0 0 1024 1024"
class="anticon anticon-caret-down config-table-column-sorter-down" width="1em"
role="img" >
> <path
<svg 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"
aria-hidden="true" />
data-icon="caret-down" </svg>
fill="currentColor" </span>
focusable="false" <span
height="1em" aria-label="caret-down"
viewBox="0 0 1024 1024" class="anticon anticon-caret-down config-table-column-sorter-down"
width="1em" role="img"
> >
<path <svg
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" aria-hidden="true"
/> data-icon="caret-down"
</svg> 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>
</span> </span>
</span> </div>
</div> </span>
<span <span
class="config-dropdown-trigger config-table-filter-trigger" class="config-dropdown-trigger config-table-filter-trigger"
role="button" role="button"
@ -23395,59 +23407,65 @@ exports[`ConfigProvider components Table configProvider componentSize middle 1`]
<div <div
class="config-table-filter-column" class="config-table-filter-column"
> >
<div <span
class="config-table-column-sorters" class="config-table-column-title"
> >
<span> <div
Name class="config-table-column-sorters"
</span>
<span
class="config-table-column-sorter config-table-column-sorter-full"
> >
<span <span
class="config-table-column-sorter-inner" class="config-table-column-title"
>
Name
</span>
<span
class="config-table-column-sorter config-table-column-sorter-full"
> >
<span <span
aria-label="caret-up" class="config-table-column-sorter-inner"
class="anticon anticon-caret-up config-table-column-sorter-up"
role="img"
> >
<svg <span
aria-hidden="true" aria-label="caret-up"
data-icon="caret-up" class="anticon anticon-caret-up config-table-column-sorter-up"
fill="currentColor" role="img"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
> >
<path <svg
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" aria-hidden="true"
/> data-icon="caret-up"
</svg> fill="currentColor"
</span> focusable="false"
<span height="1em"
aria-label="caret-down" viewBox="0 0 1024 1024"
class="anticon anticon-caret-down config-table-column-sorter-down" width="1em"
role="img" >
> <path
<svg 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"
aria-hidden="true" />
data-icon="caret-down" </svg>
fill="currentColor" </span>
focusable="false" <span
height="1em" aria-label="caret-down"
viewBox="0 0 1024 1024" class="anticon anticon-caret-down config-table-column-sorter-down"
width="1em" role="img"
> >
<path <svg
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" aria-hidden="true"
/> data-icon="caret-down"
</svg> 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>
</span> </span>
</span> </div>
</div> </span>
<span <span
class="config-dropdown-trigger config-table-filter-trigger" class="config-dropdown-trigger config-table-filter-trigger"
role="button" role="button"
@ -23669,59 +23687,65 @@ exports[`ConfigProvider components Table configProvider virtual and dropdownMatc
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
<div <span
class="ant-table-column-sorters" class="ant-table-column-title"
> >
<span> <div
Name class="ant-table-column-sorters"
</span>
<span
class="ant-table-column-sorter ant-table-column-sorter-full"
> >
<span <span
class="ant-table-column-sorter-inner" class="ant-table-column-title"
>
Name
</span>
<span
class="ant-table-column-sorter ant-table-column-sorter-full"
> >
<span <span
aria-label="caret-up" class="ant-table-column-sorter-inner"
class="anticon anticon-caret-up ant-table-column-sorter-up"
role="img"
> >
<svg <span
aria-hidden="true" aria-label="caret-up"
data-icon="caret-up" class="anticon anticon-caret-up ant-table-column-sorter-up"
fill="currentColor" role="img"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
> >
<path <svg
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" aria-hidden="true"
/> data-icon="caret-up"
</svg> fill="currentColor"
</span> focusable="false"
<span height="1em"
aria-label="caret-down" viewBox="0 0 1024 1024"
class="anticon anticon-caret-down ant-table-column-sorter-down" width="1em"
role="img" >
> <path
<svg 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"
aria-hidden="true" />
data-icon="caret-down" </svg>
fill="currentColor" </span>
focusable="false" <span
height="1em" aria-label="caret-down"
viewBox="0 0 1024 1024" class="anticon anticon-caret-down ant-table-column-sorter-down"
width="1em" role="img"
> >
<path <svg
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" aria-hidden="true"
/> data-icon="caret-down"
</svg> 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>
</span> </span>
</span> </div>
</div> </span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -23943,59 +23967,65 @@ exports[`ConfigProvider components Table normal 1`] = `
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
<div <span
class="ant-table-column-sorters" class="ant-table-column-title"
> >
<span> <div
Name class="ant-table-column-sorters"
</span>
<span
class="ant-table-column-sorter ant-table-column-sorter-full"
> >
<span <span
class="ant-table-column-sorter-inner" class="ant-table-column-title"
>
Name
</span>
<span
class="ant-table-column-sorter ant-table-column-sorter-full"
> >
<span <span
aria-label="caret-up" class="ant-table-column-sorter-inner"
class="anticon anticon-caret-up ant-table-column-sorter-up"
role="img"
> >
<svg <span
aria-hidden="true" aria-label="caret-up"
data-icon="caret-up" class="anticon anticon-caret-up ant-table-column-sorter-up"
fill="currentColor" role="img"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
> >
<path <svg
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" aria-hidden="true"
/> data-icon="caret-up"
</svg> fill="currentColor"
</span> focusable="false"
<span height="1em"
aria-label="caret-down" viewBox="0 0 1024 1024"
class="anticon anticon-caret-down ant-table-column-sorter-down" width="1em"
role="img" >
> <path
<svg 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"
aria-hidden="true" />
data-icon="caret-down" </svg>
fill="currentColor" </span>
focusable="false" <span
height="1em" aria-label="caret-down"
viewBox="0 0 1024 1024" class="anticon anticon-caret-down ant-table-column-sorter-down"
width="1em" role="img"
> >
<path <svg
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" aria-hidden="true"
/> data-icon="caret-down"
</svg> 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>
</span> </span>
</span> </div>
</div> </span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -24217,59 +24247,65 @@ exports[`ConfigProvider components Table prefixCls 1`] = `
<div <div
class="prefix-Table-filter-column" class="prefix-Table-filter-column"
> >
<div <span
class="prefix-Table-column-sorters" class="prefix-Table-column-title"
> >
<span> <div
Name class="prefix-Table-column-sorters"
</span>
<span
class="prefix-Table-column-sorter prefix-Table-column-sorter-full"
> >
<span <span
class="prefix-Table-column-sorter-inner" class="prefix-Table-column-title"
>
Name
</span>
<span
class="prefix-Table-column-sorter prefix-Table-column-sorter-full"
> >
<span <span
aria-label="caret-up" class="prefix-Table-column-sorter-inner"
class="anticon anticon-caret-up prefix-Table-column-sorter-up"
role="img"
> >
<svg <span
aria-hidden="true" aria-label="caret-up"
data-icon="caret-up" class="anticon anticon-caret-up prefix-Table-column-sorter-up"
fill="currentColor" role="img"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
> >
<path <svg
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" aria-hidden="true"
/> data-icon="caret-up"
</svg> fill="currentColor"
</span> focusable="false"
<span height="1em"
aria-label="caret-down" viewBox="0 0 1024 1024"
class="anticon anticon-caret-down prefix-Table-column-sorter-down" width="1em"
role="img" >
> <path
<svg 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"
aria-hidden="true" />
data-icon="caret-down" </svg>
fill="currentColor" </span>
focusable="false" <span
height="1em" aria-label="caret-down"
viewBox="0 0 1024 1024" class="anticon anticon-caret-down prefix-Table-column-sorter-down"
width="1em" role="img"
> >
<path <svg
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" aria-hidden="true"
/> data-icon="caret-down"
</svg> 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>
</span> </span>
</span> </div>
</div> </span>
<span <span
class="ant-dropdown-trigger prefix-Table-filter-trigger" class="ant-dropdown-trigger prefix-Table-filter-trigger"
role="button" role="button"

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

@ -6673,7 +6673,11 @@ exports[`Locale Provider should display the text as ar 1`] = `
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
Name <span
class="ant-table-column-title"
>
Name
</span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -11687,7 +11691,11 @@ exports[`Locale Provider should display the text as az 1`] = `
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
Name <span
class="ant-table-column-title"
>
Name
</span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -16701,7 +16709,11 @@ exports[`Locale Provider should display the text as bg 1`] = `
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
Name <span
class="ant-table-column-title"
>
Name
</span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -21715,7 +21727,11 @@ exports[`Locale Provider should display the text as by 1`] = `
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
Name <span
class="ant-table-column-title"
>
Name
</span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -26729,7 +26745,11 @@ exports[`Locale Provider should display the text as ca 1`] = `
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
Name <span
class="ant-table-column-title"
>
Name
</span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -31743,7 +31763,11 @@ exports[`Locale Provider should display the text as cs 1`] = `
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
Name <span
class="ant-table-column-title"
>
Name
</span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -36757,7 +36781,11 @@ exports[`Locale Provider should display the text as da 1`] = `
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
Name <span
class="ant-table-column-title"
>
Name
</span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -41771,7 +41799,11 @@ exports[`Locale Provider should display the text as de 1`] = `
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
Name <span
class="ant-table-column-title"
>
Name
</span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -46785,7 +46817,11 @@ exports[`Locale Provider should display the text as el 1`] = `
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
Name <span
class="ant-table-column-title"
>
Name
</span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -51799,7 +51835,11 @@ exports[`Locale Provider should display the text as en 1`] = `
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
Name <span
class="ant-table-column-title"
>
Name
</span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -56813,7 +56853,11 @@ exports[`Locale Provider should display the text as en-gb 1`] = `
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
Name <span
class="ant-table-column-title"
>
Name
</span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -61827,7 +61871,11 @@ exports[`Locale Provider should display the text as es 1`] = `
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
Name <span
class="ant-table-column-title"
>
Name
</span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -66841,7 +66889,11 @@ exports[`Locale Provider should display the text as et 1`] = `
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
Name <span
class="ant-table-column-title"
>
Name
</span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -71855,7 +71907,11 @@ exports[`Locale Provider should display the text as fa 1`] = `
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
Name <span
class="ant-table-column-title"
>
Name
</span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -76869,7 +76925,11 @@ exports[`Locale Provider should display the text as fi 1`] = `
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
Name <span
class="ant-table-column-title"
>
Name
</span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -81883,7 +81943,11 @@ exports[`Locale Provider should display the text as fr 1`] = `
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
Name <span
class="ant-table-column-title"
>
Name
</span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -86897,7 +86961,11 @@ exports[`Locale Provider should display the text as fr 2`] = `
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
Name <span
class="ant-table-column-title"
>
Name
</span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -91911,7 +91979,11 @@ exports[`Locale Provider should display the text as fr 3`] = `
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
Name <span
class="ant-table-column-title"
>
Name
</span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -96925,7 +96997,11 @@ exports[`Locale Provider should display the text as ga 1`] = `
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
Name <span
class="ant-table-column-title"
>
Name
</span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -101939,7 +102015,11 @@ exports[`Locale Provider should display the text as gl 1`] = `
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
Name <span
class="ant-table-column-title"
>
Name
</span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -106953,7 +107033,11 @@ exports[`Locale Provider should display the text as he 1`] = `
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
Name <span
class="ant-table-column-title"
>
Name
</span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -111967,7 +112051,11 @@ exports[`Locale Provider should display the text as hi 1`] = `
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
Name <span
class="ant-table-column-title"
>
Name
</span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -116981,7 +117069,11 @@ exports[`Locale Provider should display the text as hr 1`] = `
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
Name <span
class="ant-table-column-title"
>
Name
</span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -121995,7 +122087,11 @@ exports[`Locale Provider should display the text as hu 1`] = `
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
Name <span
class="ant-table-column-title"
>
Name
</span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -127009,7 +127105,11 @@ exports[`Locale Provider should display the text as hy-am 1`] = `
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
Name <span
class="ant-table-column-title"
>
Name
</span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -132023,7 +132123,11 @@ exports[`Locale Provider should display the text as id 1`] = `
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
Name <span
class="ant-table-column-title"
>
Name
</span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -137037,7 +137141,11 @@ exports[`Locale Provider should display the text as is 1`] = `
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
Name <span
class="ant-table-column-title"
>
Name
</span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -142051,7 +142159,11 @@ exports[`Locale Provider should display the text as it 1`] = `
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
Name <span
class="ant-table-column-title"
>
Name
</span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -147065,7 +147177,11 @@ exports[`Locale Provider should display the text as ja 1`] = `
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
Name <span
class="ant-table-column-title"
>
Name
</span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -152079,7 +152195,11 @@ exports[`Locale Provider should display the text as kk 1`] = `
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
Name <span
class="ant-table-column-title"
>
Name
</span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -157093,7 +157213,11 @@ exports[`Locale Provider should display the text as kn 1`] = `
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
Name <span
class="ant-table-column-title"
>
Name
</span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -162107,7 +162231,11 @@ exports[`Locale Provider should display the text as ko 1`] = `
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
Name <span
class="ant-table-column-title"
>
Name
</span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -167121,7 +167249,11 @@ exports[`Locale Provider should display the text as ku 1`] = `
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
Name <span
class="ant-table-column-title"
>
Name
</span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -172135,7 +172267,11 @@ exports[`Locale Provider should display the text as ku-iq 1`] = `
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
Name <span
class="ant-table-column-title"
>
Name
</span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -177149,7 +177285,11 @@ exports[`Locale Provider should display the text as lt 1`] = `
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
Name <span
class="ant-table-column-title"
>
Name
</span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -182163,7 +182303,11 @@ exports[`Locale Provider should display the text as lv 1`] = `
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
Name <span
class="ant-table-column-title"
>
Name
</span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -187177,7 +187321,11 @@ exports[`Locale Provider should display the text as mk 1`] = `
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
Name <span
class="ant-table-column-title"
>
Name
</span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -192191,7 +192339,11 @@ exports[`Locale Provider should display the text as mn-mn 1`] = `
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
Name <span
class="ant-table-column-title"
>
Name
</span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -197205,7 +197357,11 @@ exports[`Locale Provider should display the text as ms-my 1`] = `
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
Name <span
class="ant-table-column-title"
>
Name
</span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -202219,7 +202375,11 @@ exports[`Locale Provider should display the text as nb 1`] = `
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
Name <span
class="ant-table-column-title"
>
Name
</span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -207233,7 +207393,11 @@ exports[`Locale Provider should display the text as ne-np 1`] = `
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
Name <span
class="ant-table-column-title"
>
Name
</span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -212247,7 +212411,11 @@ exports[`Locale Provider should display the text as nl 1`] = `
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
Name <span
class="ant-table-column-title"
>
Name
</span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -217261,7 +217429,11 @@ exports[`Locale Provider should display the text as nl-be 1`] = `
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
Name <span
class="ant-table-column-title"
>
Name
</span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -222275,7 +222447,11 @@ exports[`Locale Provider should display the text as pl 1`] = `
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
Name <span
class="ant-table-column-title"
>
Name
</span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -227289,7 +227465,11 @@ exports[`Locale Provider should display the text as pt 1`] = `
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
Name <span
class="ant-table-column-title"
>
Name
</span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -232303,7 +232483,11 @@ exports[`Locale Provider should display the text as pt-br 1`] = `
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
Name <span
class="ant-table-column-title"
>
Name
</span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -237317,7 +237501,11 @@ exports[`Locale Provider should display the text as ro 1`] = `
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
Name <span
class="ant-table-column-title"
>
Name
</span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -242331,7 +242519,11 @@ exports[`Locale Provider should display the text as ru 1`] = `
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
Name <span
class="ant-table-column-title"
>
Name
</span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -247345,7 +247537,11 @@ exports[`Locale Provider should display the text as sk 1`] = `
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
Name <span
class="ant-table-column-title"
>
Name
</span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -252359,7 +252555,11 @@ exports[`Locale Provider should display the text as sl 1`] = `
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
Name <span
class="ant-table-column-title"
>
Name
</span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -257373,7 +257573,11 @@ exports[`Locale Provider should display the text as sr 1`] = `
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
Name <span
class="ant-table-column-title"
>
Name
</span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -262387,7 +262591,11 @@ exports[`Locale Provider should display the text as sv 1`] = `
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
Name <span
class="ant-table-column-title"
>
Name
</span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -267401,7 +267609,11 @@ exports[`Locale Provider should display the text as ta 1`] = `
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
Name <span
class="ant-table-column-title"
>
Name
</span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -272415,7 +272627,11 @@ exports[`Locale Provider should display the text as th 1`] = `
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
Name <span
class="ant-table-column-title"
>
Name
</span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -277429,7 +277645,11 @@ exports[`Locale Provider should display the text as tr 1`] = `
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
Name <span
class="ant-table-column-title"
>
Name
</span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -282443,7 +282663,11 @@ exports[`Locale Provider should display the text as uk 1`] = `
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
Name <span
class="ant-table-column-title"
>
Name
</span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -287457,7 +287681,11 @@ exports[`Locale Provider should display the text as vi 1`] = `
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
Name <span
class="ant-table-column-title"
>
Name
</span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -292471,7 +292699,11 @@ exports[`Locale Provider should display the text as zh-cn 1`] = `
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
Name <span
class="ant-table-column-title"
>
Name
</span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -297485,7 +297717,11 @@ exports[`Locale Provider should display the text as zh-hk 1`] = `
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
Name <span
class="ant-table-column-title"
>
Name
</span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -302499,7 +302735,11 @@ exports[`Locale Provider should display the text as zh-tw 1`] = `
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
Name <span
class="ant-table-column-title"
>
Name
</span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"

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

@ -67,7 +67,11 @@ exports[`Table.filter renders custom filter icon as ReactNode 1`] = `
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
Name <span
class="ant-table-column-title"
>
Name
</span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -167,7 +171,11 @@ exports[`Table.filter renders custom filter icon as string correctly 1`] = `
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
Name <span
class="ant-table-column-title"
>
Name
</span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -281,7 +289,11 @@ exports[`Table.filter renders custom filter icon with right Tooltip title 1`] =
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
Name <span
class="ant-table-column-title"
>
Name
</span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -407,7 +419,11 @@ exports[`Table.filter renders filter correctly 1`] = `
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
Name <span
class="ant-table-column-title"
>
Name
</span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -527,7 +543,11 @@ exports[`Table.filter should support getPopupContainer 1`] = `
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
Name <span
class="ant-table-column-title"
>
Name
</span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -775,7 +795,11 @@ exports[`Table.filter should support getPopupContainer from ConfigProvider 1`] =
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
Name <span
class="ant-table-column-title"
>
Name
</span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"

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

@ -11,7 +11,9 @@ exports[`Table.sorter renders sorter icon correctly 1`] = `
<div <div
class="ant-table-column-sorters" class="ant-table-column-sorters"
> >
<span> <span
class="ant-table-column-title"
>
Name Name
</span> </span>
<span <span
@ -99,7 +101,9 @@ exports[`Table.sorter should support defaultOrder in Column 1`] = `
<div <div
class="ant-table-column-sorters" class="ant-table-column-sorters"
> >
<span> <span
class="ant-table-column-title"
>
Age Age
</span> </span>
<span <span

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

@ -40,7 +40,9 @@ exports[`renders ./components/table/demo/ajax.md correctly 1`] = `
<div <div
class="ant-table-column-sorters" class="ant-table-column-sorters"
> >
<span> <span
class="ant-table-column-title"
>
Name Name
</span> </span>
<span <span
@ -97,7 +99,11 @@ exports[`renders ./components/table/demo/ajax.md correctly 1`] = `
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
Gender <span
class="ant-table-column-title"
>
Gender
</span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -1056,7 +1062,11 @@ exports[`renders ./components/table/demo/custom-filter-panel.md correctly 1`] =
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
Name <span
class="ant-table-column-title"
>
Name
</span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -1090,7 +1100,11 @@ exports[`renders ./components/table/demo/custom-filter-panel.md correctly 1`] =
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
Age <span
class="ant-table-column-title"
>
Age
</span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -1124,59 +1138,65 @@ exports[`renders ./components/table/demo/custom-filter-panel.md correctly 1`] =
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
<div <span
class="ant-table-column-sorters" class="ant-table-column-title"
> >
<span> <div
Address class="ant-table-column-sorters"
</span>
<span
class="ant-table-column-sorter ant-table-column-sorter-full"
> >
<span <span
class="ant-table-column-sorter-inner" class="ant-table-column-title"
>
Address
</span>
<span
class="ant-table-column-sorter ant-table-column-sorter-full"
> >
<span <span
aria-label="caret-up" class="ant-table-column-sorter-inner"
class="anticon anticon-caret-up ant-table-column-sorter-up"
role="img"
> >
<svg <span
aria-hidden="true" aria-label="caret-up"
data-icon="caret-up" class="anticon anticon-caret-up ant-table-column-sorter-up"
fill="currentColor" role="img"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
> >
<path <svg
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" aria-hidden="true"
/> data-icon="caret-up"
</svg> fill="currentColor"
</span> focusable="false"
<span height="1em"
aria-label="caret-down" viewBox="0 0 1024 1024"
class="anticon anticon-caret-down ant-table-column-sorter-down" width="1em"
role="img" >
> <path
<svg 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"
aria-hidden="true" />
data-icon="caret-down" </svg>
fill="currentColor" </span>
focusable="false" <span
height="1em" aria-label="caret-down"
viewBox="0 0 1024 1024" class="anticon anticon-caret-down ant-table-column-sorter-down"
width="1em" role="img"
> >
<path <svg
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" aria-hidden="true"
/> data-icon="caret-down"
</svg> 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>
</span> </span>
</span> </div>
</div> </span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -2698,7 +2718,9 @@ Array [
<div <div
class="ant-table-column-sorters" class="ant-table-column-sorters"
> >
<span> <span
class="ant-table-column-title"
>
Age Age
</span> </span>
<span <span
@ -2755,7 +2777,11 @@ Array [
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
Address <span
class="ant-table-column-title"
>
Address
</span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -2789,7 +2815,9 @@ Array [
<div <div
class="ant-table-column-sorters" class="ant-table-column-sorters"
> >
<span> <span
class="ant-table-column-title"
>
Action Action
</span> </span>
<span <span
@ -8423,7 +8451,11 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
Name <span
class="ant-table-column-title"
>
Name
</span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -8479,7 +8511,9 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
<div <div
class="ant-table-column-sorters" class="ant-table-column-sorters"
> >
<span> <span
class="ant-table-column-title"
>
Age Age
</span> </span>
<span <span
@ -9439,40 +9473,46 @@ exports[`renders ./components/table/demo/head.md correctly 1`] = `
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
<div <span
class="ant-table-column-sorters" class="ant-table-column-title"
> >
<span> <div
Name class="ant-table-column-sorters"
</span>
<span
class="ant-table-column-sorter"
> >
<span <span
class="ant-table-column-sorter-inner" class="ant-table-column-title"
>
Name
</span>
<span
class="ant-table-column-sorter"
> >
<span <span
aria-label="caret-down" class="ant-table-column-sorter-inner"
class="anticon anticon-caret-down ant-table-column-sorter-down"
role="img"
> >
<svg <span
aria-hidden="true" aria-label="caret-down"
data-icon="caret-down" class="anticon anticon-caret-down ant-table-column-sorter-down"
fill="currentColor" role="img"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
> >
<path <svg
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" aria-hidden="true"
/> data-icon="caret-down"
</svg> 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>
</span> </span>
</span> </div>
</div> </span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -9506,7 +9546,9 @@ exports[`renders ./components/table/demo/head.md correctly 1`] = `
<div <div
class="ant-table-column-sorters" class="ant-table-column-sorters"
> >
<span> <span
class="ant-table-column-title"
>
Age Age
</span> </span>
<span <span
@ -9563,7 +9605,11 @@ exports[`renders ./components/table/demo/head.md correctly 1`] = `
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
Address <span
class="ant-table-column-title"
>
Address
</span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -10149,7 +10195,9 @@ exports[`renders ./components/table/demo/multiple-sorter.md correctly 1`] = `
<div <div
class="ant-table-column-sorters" class="ant-table-column-sorters"
> >
<span> <span
class="ant-table-column-title"
>
Chinese Score Chinese Score
</span> </span>
<span <span
@ -10206,7 +10254,9 @@ exports[`renders ./components/table/demo/multiple-sorter.md correctly 1`] = `
<div <div
class="ant-table-column-sorters" class="ant-table-column-sorters"
> >
<span> <span
class="ant-table-column-title"
>
Math Score Math Score
</span> </span>
<span <span
@ -10263,7 +10313,9 @@ exports[`renders ./components/table/demo/multiple-sorter.md correctly 1`] = `
<div <div
class="ant-table-column-sorters" class="ant-table-column-sorters"
> >
<span> <span
class="ant-table-column-title"
>
English Score English Score
</span> </span>
<span <span
@ -12434,59 +12486,65 @@ Array [
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
<div <span
class="ant-table-column-sorters" class="ant-table-column-title"
> >
<span> <div
Name class="ant-table-column-sorters"
</span>
<span
class="ant-table-column-sorter ant-table-column-sorter-full"
> >
<span <span
class="ant-table-column-sorter-inner" class="ant-table-column-title"
>
Name
</span>
<span
class="ant-table-column-sorter ant-table-column-sorter-full"
> >
<span <span
aria-label="caret-up" class="ant-table-column-sorter-inner"
class="anticon anticon-caret-up ant-table-column-sorter-up"
role="img"
> >
<svg <span
aria-hidden="true" aria-label="caret-up"
data-icon="caret-up" class="anticon anticon-caret-up ant-table-column-sorter-up"
fill="currentColor" role="img"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
> >
<path <svg
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" aria-hidden="true"
/> data-icon="caret-up"
</svg> fill="currentColor"
</span> focusable="false"
<span height="1em"
aria-label="caret-down" viewBox="0 0 1024 1024"
class="anticon anticon-caret-down ant-table-column-sorter-down" width="1em"
role="img" >
> <path
<svg 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"
aria-hidden="true" />
data-icon="caret-down" </svg>
fill="currentColor" </span>
focusable="false" <span
height="1em" aria-label="caret-down"
viewBox="0 0 1024 1024" class="anticon anticon-caret-down ant-table-column-sorter-down"
width="1em" role="img"
> >
<path <svg
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" aria-hidden="true"
/> data-icon="caret-down"
</svg> 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>
</span> </span>
</span> </div>
</div> </span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -12520,7 +12578,9 @@ Array [
<div <div
class="ant-table-column-sorters" class="ant-table-column-sorters"
> >
<span> <span
class="ant-table-column-title"
>
Age Age
</span> </span>
<span <span
@ -12577,59 +12637,65 @@ Array [
<div <div
class="ant-table-filter-column" class="ant-table-filter-column"
> >
<div <span
class="ant-table-column-sorters" class="ant-table-column-title"
> >
<span> <div
Address class="ant-table-column-sorters"
</span>
<span
class="ant-table-column-sorter ant-table-column-sorter-full"
> >
<span <span
class="ant-table-column-sorter-inner" class="ant-table-column-title"
>
Address
</span>
<span
class="ant-table-column-sorter ant-table-column-sorter-full"
> >
<span <span
aria-label="caret-up" class="ant-table-column-sorter-inner"
class="anticon anticon-caret-up ant-table-column-sorter-up"
role="img"
> >
<svg <span
aria-hidden="true" aria-label="caret-up"
data-icon="caret-up" class="anticon anticon-caret-up ant-table-column-sorter-up"
fill="currentColor" role="img"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
> >
<path <svg
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" aria-hidden="true"
/> data-icon="caret-up"
</svg> fill="currentColor"
</span> focusable="false"
<span height="1em"
aria-label="caret-down" viewBox="0 0 1024 1024"
class="anticon anticon-caret-down ant-table-column-sorter-down" width="1em"
role="img" >
> <path
<svg 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"
aria-hidden="true" />
data-icon="caret-down" </svg>
fill="currentColor" </span>
focusable="false" <span
height="1em" aria-label="caret-down"
viewBox="0 0 1024 1024" class="anticon anticon-caret-down ant-table-column-sorter-down"
width="1em" role="img"
> >
<path <svg
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" aria-hidden="true"
/> data-icon="caret-down"
</svg> 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>
</span> </span>
</span> </div>
</div> </span>
<span <span
class="ant-dropdown-trigger ant-table-filter-trigger" class="ant-dropdown-trigger ant-table-filter-trigger"
role="button" role="button"
@ -12899,7 +12965,9 @@ exports[`renders ./components/table/demo/resizable-column.md correctly 1`] = `
<div <div
class="ant-table-column-sorters" class="ant-table-column-sorters"
> >
<span> <span
class="ant-table-column-title"
>
Amount Amount
</span> </span>
<span <span

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

@ -87,6 +87,7 @@ function renderFilterItems({
} }
export interface FilterDropdownProps<RecordType> { export interface FilterDropdownProps<RecordType> {
tablePrefixCls: string;
prefixCls: string; prefixCls: string;
dropdownPrefixCls: string; dropdownPrefixCls: string;
column: ColumnType<RecordType>; column: ColumnType<RecordType>;
@ -101,6 +102,7 @@ export interface FilterDropdownProps<RecordType> {
function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) { function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
const { const {
tablePrefixCls,
prefixCls, prefixCls,
column, column,
dropdownPrefixCls, dropdownPrefixCls,
@ -281,8 +283,8 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
const { direction } = React.useContext(ConfigContext); const { direction } = React.useContext(ConfigContext);
return ( return (
<div className={classNames(`${prefixCls}-column`)}> <div className={`${prefixCls}-column`}>
{children} <span className={`${tablePrefixCls}-column-title`}>{children}</span>
<Dropdown <Dropdown
overlay={menu} overlay={menu}
trigger={['click']} trigger={['click']}

8
components/table/hooks/useFilter/index.tsx
View File

@ -87,6 +87,7 @@ function injectFilter<RecordType>(
...newColumn, ...newColumn,
title: (renderProps: ColumnTitleProps<RecordType>) => ( title: (renderProps: ColumnTitleProps<RecordType>) => (
<FilterDropdown <FilterDropdown
tablePrefixCls={prefixCls}
prefixCls={`${prefixCls}-filter`} prefixCls={`${prefixCls}-filter`}
dropdownPrefixCls={dropdownPrefixCls} dropdownPrefixCls={dropdownPrefixCls}
column={newColumn} column={newColumn}
@ -214,9 +215,10 @@ function useFilter<RecordType>({
return collectedStates; return collectedStates;
}, [mergedColumns, filterStates]); }, [mergedColumns, filterStates]);
const getFilters = React.useCallback(() => generateFilterInfo(mergedFilterStates), [ const getFilters = React.useCallback(
mergedFilterStates, () => generateFilterInfo(mergedFilterStates),
]); [mergedFilterStates],
);
const triggerFilter = (filterState: FilterState<RecordType>) => { const triggerFilter = (filterState: FilterState<RecordType>) => {
const newFilterStates = mergedFilterStates.filter(({ key }) => key !== filterState.key); const newFilterStates = mergedFilterStates.filter(({ key }) => key !== filterState.key);

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

@ -154,7 +154,9 @@ function injectSorter<RecordType>(
title: (renderProps: ColumnTitleProps<RecordType>) => { title: (renderProps: ColumnTitleProps<RecordType>) => {
const renderSortTitle = ( const renderSortTitle = (
<div className={`${prefixCls}-column-sorters`}> <div className={`${prefixCls}-column-sorters`}>
<span>{renderColumnTitle(column.title, renderProps)}</span> <span className={`${prefixCls}-column-title`}>
{renderColumnTitle(column.title, renderProps)}
</span>
<span <span
className={classNames(`${prefixCls}-column-sorter`, { className={classNames(`${prefixCls}-column-sorter`, {
[`${prefixCls}-column-sorter-full`]: !!(upNode && downNode), [`${prefixCls}-column-sorter-full`]: !!(upNode && downNode),

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

@ -231,6 +231,10 @@
background: @table-body-sort-bg; background: @table-body-sort-bg;
} }
&-column-title {
flex: 1;
}
&-column-sorters { &-column-sorters {
display: flex; display: flex;
flex: auto; flex: auto;