mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-28 05:05:48 +08:00
Table style update. Move sort button after title (#15758)
* update style of sort icon * update snapshot * micro adjust * little offset of arrow
This commit is contained in:
zombieJ
GitHub
parent
c91d7d1a1e
commit
aebb781000
@ -11420,48 +11420,56 @@ exports[`ConfigProvider components Table configProvider 1`] = `
|
||||
<div
|
||||
class="config-table-column-sorters"
|
||||
>
|
||||
Name
|
||||
<div
|
||||
class="config-table-column-sorter"
|
||||
title="Sort"
|
||||
<span
|
||||
class="config-table-column-title"
|
||||
>
|
||||
<i
|
||||
aria-label="icon: caret-up"
|
||||
class="anticon anticon-caret-up config-table-column-sorter-up off"
|
||||
Name
|
||||
</span>
|
||||
<span
|
||||
class="config-table-column-sorter"
|
||||
>
|
||||
<div
|
||||
class="config-table-column-sorter-inner config-table-column-sorter-inner-full"
|
||||
title="Sort"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="caret-up"
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
<i
|
||||
aria-label="icon: caret-up"
|
||||
class="anticon anticon-caret-up config-table-column-sorter-up off"
|
||||
>
|
||||
<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>
|
||||
</i>
|
||||
<i
|
||||
aria-label="icon: caret-down"
|
||||
class="anticon anticon-caret-down config-table-column-sorter-down off"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="caret-down"
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="caret-up"
|
||||
fill="currentColor"
|
||||
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>
|
||||
</i>
|
||||
<i
|
||||
aria-label="icon: caret-down"
|
||||
class="anticon anticon-caret-down config-table-column-sorter-down off"
|
||||
>
|
||||
<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>
|
||||
</i>
|
||||
</div>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="caret-down"
|
||||
fill="currentColor"
|
||||
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>
|
||||
</i>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<i
|
||||
aria-label="icon: filter"
|
||||
@ -11623,48 +11631,56 @@ exports[`ConfigProvider components Table normal 1`] = `
|
||||
<div
|
||||
class="ant-table-column-sorters"
|
||||
>
|
||||
Name
|
||||
<div
|
||||
class="ant-table-column-sorter"
|
||||
title="Sort"
|
||||
<span
|
||||
class="ant-table-column-title"
|
||||
>
|
||||
<i
|
||||
aria-label="icon: caret-up"
|
||||
class="anticon anticon-caret-up ant-table-column-sorter-up off"
|
||||
Name
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-column-sorter"
|
||||
>
|
||||
<div
|
||||
class="ant-table-column-sorter-inner ant-table-column-sorter-inner-full"
|
||||
title="Sort"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="caret-up"
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
<i
|
||||
aria-label="icon: caret-up"
|
||||
class="anticon anticon-caret-up ant-table-column-sorter-up off"
|
||||
>
|
||||
<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>
|
||||
</i>
|
||||
<i
|
||||
aria-label="icon: caret-down"
|
||||
class="anticon anticon-caret-down ant-table-column-sorter-down off"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="caret-down"
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="caret-up"
|
||||
fill="currentColor"
|
||||
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>
|
||||
</i>
|
||||
<i
|
||||
aria-label="icon: caret-down"
|
||||
class="anticon anticon-caret-down ant-table-column-sorter-down off"
|
||||
>
|
||||
<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>
|
||||
</i>
|
||||
</div>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="caret-down"
|
||||
fill="currentColor"
|
||||
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>
|
||||
</i>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<i
|
||||
aria-label="icon: filter"
|
||||
@ -11826,48 +11842,56 @@ exports[`ConfigProvider components Table prefixCls 1`] = `
|
||||
<div
|
||||
class="prefix-Table-column-sorters"
|
||||
>
|
||||
Name
|
||||
<div
|
||||
class="prefix-Table-column-sorter"
|
||||
title="Sort"
|
||||
<span
|
||||
class="prefix-Table-column-title"
|
||||
>
|
||||
<i
|
||||
aria-label="icon: caret-up"
|
||||
class="anticon anticon-caret-up prefix-Table-column-sorter-up off"
|
||||
Name
|
||||
</span>
|
||||
<span
|
||||
class="prefix-Table-column-sorter"
|
||||
>
|
||||
<div
|
||||
class="prefix-Table-column-sorter-inner prefix-Table-column-sorter-inner-full"
|
||||
title="Sort"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="caret-up"
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
<i
|
||||
aria-label="icon: caret-up"
|
||||
class="anticon anticon-caret-up prefix-Table-column-sorter-up off"
|
||||
>
|
||||
<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>
|
||||
</i>
|
||||
<i
|
||||
aria-label="icon: caret-down"
|
||||
class="anticon anticon-caret-down prefix-Table-column-sorter-down off"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="caret-down"
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="caret-up"
|
||||
fill="currentColor"
|
||||
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>
|
||||
</i>
|
||||
<i
|
||||
aria-label="icon: caret-down"
|
||||
class="anticon anticon-caret-down prefix-Table-column-sorter-down off"
|
||||
>
|
||||
<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>
|
||||
</i>
|
||||
</div>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="caret-down"
|
||||
fill="currentColor"
|
||||
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>
|
||||
</i>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<i
|
||||
aria-label="icon: filter"
|
||||
|
||||
@ -381,14 +381,28 @@ exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
|
||||
class=""
|
||||
>
|
||||
<div>
|
||||
Name
|
||||
<span
|
||||
class="ant-table-column-title"
|
||||
>
|
||||
Name
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-column-sorter"
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
class=""
|
||||
>
|
||||
<div>
|
||||
Age
|
||||
<span
|
||||
class="ant-table-column-title"
|
||||
>
|
||||
Age
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-column-sorter"
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
|
||||
@ -1757,7 +1757,14 @@ exports[`renders ./components/locale-provider/demo/all.md correctly 1`] = `
|
||||
class="ant-table-column-has-actions ant-table-column-has-filters"
|
||||
>
|
||||
<div>
|
||||
Name
|
||||
<span
|
||||
class="ant-table-column-title"
|
||||
>
|
||||
Name
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-column-sorter"
|
||||
/>
|
||||
</div>
|
||||
<i
|
||||
aria-label="icon: filter"
|
||||
@ -1784,7 +1791,14 @@ exports[`renders ./components/locale-provider/demo/all.md correctly 1`] = `
|
||||
class=""
|
||||
>
|
||||
<div>
|
||||
Age
|
||||
<span
|
||||
class="ant-table-column-title"
|
||||
>
|
||||
Age
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-column-sorter"
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -884,7 +884,14 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
|
||||
);
|
||||
|
||||
sortButton = (
|
||||
<div title={locale.sortTitle} className={`${prefixCls}-column-sorter`} key="sorter">
|
||||
<div
|
||||
title={locale.sortTitle}
|
||||
className={classNames(
|
||||
`${prefixCls}-column-sorter-inner`,
|
||||
ascend && descend && `${prefixCls}-column-sorter-inner-full`,
|
||||
)}
|
||||
key="sorter"
|
||||
>
|
||||
{ascend}
|
||||
{descend}
|
||||
</div>
|
||||
@ -919,8 +926,10 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
|
||||
}),
|
||||
title: [
|
||||
<div key="title" className={sortButton ? `${prefixCls}-column-sorters` : undefined}>
|
||||
{this.renderColumnTitle(column.title)}
|
||||
{sortButton}
|
||||
<span className={`${prefixCls}-column-title`}>
|
||||
{this.renderColumnTitle(column.title)}
|
||||
</span>
|
||||
<span className={`${prefixCls}-column-sorter`}>{sortButton}</span>
|
||||
</div>,
|
||||
filterDropdown,
|
||||
],
|
||||
|
||||
@ -97,7 +97,14 @@ exports[`Table.filter renders filter correctly 1`] = `
|
||||
class="ant-table-column-has-actions ant-table-column-has-filters"
|
||||
>
|
||||
<div>
|
||||
Name
|
||||
<span
|
||||
class="ant-table-column-title"
|
||||
>
|
||||
Name
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-column-sorter"
|
||||
/>
|
||||
</div>
|
||||
<i
|
||||
aria-label="icon: filter"
|
||||
|
||||
@ -33,7 +33,14 @@ exports[`Table.pagination Accepts pagination as true 1`] = `
|
||||
class=""
|
||||
>
|
||||
<div>
|
||||
Name
|
||||
<span
|
||||
class="ant-table-column-title"
|
||||
>
|
||||
Name
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-column-sorter"
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
@ -210,7 +217,14 @@ exports[`Table.pagination renders pagination correctly 1`] = `
|
||||
class=""
|
||||
>
|
||||
<div>
|
||||
Name
|
||||
<span
|
||||
class="ant-table-column-title"
|
||||
>
|
||||
Name
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-column-sorter"
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
|
||||
@ -39,32 +39,46 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
|
||||
class="ant-table-fixed-columns-in-body ant-table-selection-column"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="ant-table-selection"
|
||||
<span
|
||||
class="ant-table-column-title"
|
||||
>
|
||||
<label
|
||||
class="ant-checkbox-wrapper"
|
||||
<div
|
||||
class="ant-table-selection"
|
||||
>
|
||||
<span
|
||||
class="ant-checkbox"
|
||||
<label
|
||||
class="ant-checkbox-wrapper"
|
||||
>
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
class="ant-checkbox"
|
||||
>
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-column-sorter"
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
class=""
|
||||
>
|
||||
<div>
|
||||
Name
|
||||
<span
|
||||
class="ant-table-column-title"
|
||||
>
|
||||
Name
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-column-sorter"
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
@ -242,25 +256,32 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
|
||||
class="ant-table-selection-column"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="ant-table-selection"
|
||||
<span
|
||||
class="ant-table-column-title"
|
||||
>
|
||||
<label
|
||||
class="ant-checkbox-wrapper"
|
||||
<div
|
||||
class="ant-table-selection"
|
||||
>
|
||||
<span
|
||||
class="ant-checkbox"
|
||||
<label
|
||||
class="ant-checkbox-wrapper"
|
||||
>
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
class="ant-checkbox"
|
||||
>
|
||||
<input
|
||||
class="ant-checkbox-input"
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
class="ant-checkbox-inner"
|
||||
/>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-column-sorter"
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
|
||||
@ -11,48 +11,56 @@ exports[`Table.sorter renders sorter icon correctly 1`] = `
|
||||
<div
|
||||
class="ant-table-column-sorters"
|
||||
>
|
||||
Name
|
||||
<div
|
||||
class="ant-table-column-sorter"
|
||||
title="Sort"
|
||||
<span
|
||||
class="ant-table-column-title"
|
||||
>
|
||||
<i
|
||||
aria-label="icon: caret-up"
|
||||
class="anticon anticon-caret-up ant-table-column-sorter-up off"
|
||||
Name
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-column-sorter"
|
||||
>
|
||||
<div
|
||||
class="ant-table-column-sorter-inner ant-table-column-sorter-inner-full"
|
||||
title="Sort"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="caret-up"
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
<i
|
||||
aria-label="icon: caret-up"
|
||||
class="anticon anticon-caret-up ant-table-column-sorter-up off"
|
||||
>
|
||||
<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>
|
||||
</i>
|
||||
<i
|
||||
aria-label="icon: caret-down"
|
||||
class="anticon anticon-caret-down ant-table-column-sorter-down off"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="caret-down"
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 1024 1024"
|
||||
width="1em"
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="caret-up"
|
||||
fill="currentColor"
|
||||
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>
|
||||
</i>
|
||||
<i
|
||||
aria-label="icon: caret-down"
|
||||
class="anticon anticon-caret-down ant-table-column-sorter-down off"
|
||||
>
|
||||
<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>
|
||||
</i>
|
||||
</div>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="caret-down"
|
||||
fill="currentColor"
|
||||
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>
|
||||
</i>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
|
||||
@ -36,7 +36,14 @@ exports[`Table renders JSX correctly 1`] = `
|
||||
colspan="2"
|
||||
>
|
||||
<div>
|
||||
Name
|
||||
<span
|
||||
class="ant-table-column-title"
|
||||
>
|
||||
Name
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-column-sorter"
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
@ -44,7 +51,14 @@ exports[`Table renders JSX correctly 1`] = `
|
||||
rowspan="2"
|
||||
>
|
||||
<div>
|
||||
Age
|
||||
<span
|
||||
class="ant-table-column-title"
|
||||
>
|
||||
Age
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-column-sorter"
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
@ -53,14 +67,28 @@ exports[`Table renders JSX correctly 1`] = `
|
||||
class=""
|
||||
>
|
||||
<div>
|
||||
First Name
|
||||
<span
|
||||
class="ant-table-column-title"
|
||||
>
|
||||
First Name
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-column-sorter"
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
class=""
|
||||
>
|
||||
<div>
|
||||
Last Name
|
||||
<span
|
||||
class="ant-table-column-title"
|
||||
>
|
||||
Last Name
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-column-sorter"
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -40,56 +40,112 @@ exports[`Table renders empty table 1`] = `
|
||||
class=""
|
||||
>
|
||||
<div>
|
||||
Column 1
|
||||
<span
|
||||
class="ant-table-column-title"
|
||||
>
|
||||
Column 1
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-column-sorter"
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
class=""
|
||||
>
|
||||
<div>
|
||||
Column 2
|
||||
<span
|
||||
class="ant-table-column-title"
|
||||
>
|
||||
Column 2
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-column-sorter"
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
class=""
|
||||
>
|
||||
<div>
|
||||
Column 3
|
||||
<span
|
||||
class="ant-table-column-title"
|
||||
>
|
||||
Column 3
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-column-sorter"
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
class=""
|
||||
>
|
||||
<div>
|
||||
Column 4
|
||||
<span
|
||||
class="ant-table-column-title"
|
||||
>
|
||||
Column 4
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-column-sorter"
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
class=""
|
||||
>
|
||||
<div>
|
||||
Column 5
|
||||
<span
|
||||
class="ant-table-column-title"
|
||||
>
|
||||
Column 5
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-column-sorter"
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
class=""
|
||||
>
|
||||
<div>
|
||||
Column 6
|
||||
<span
|
||||
class="ant-table-column-title"
|
||||
>
|
||||
Column 6
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-column-sorter"
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
class=""
|
||||
>
|
||||
<div>
|
||||
Column 7
|
||||
<span
|
||||
class="ant-table-column-title"
|
||||
>
|
||||
Column 7
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-column-sorter"
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
class=""
|
||||
>
|
||||
<div>
|
||||
Column 8
|
||||
<span
|
||||
class="ant-table-column-title"
|
||||
>
|
||||
Column 8
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-column-sorter"
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
@ -167,56 +223,112 @@ exports[`Table renders empty table with custom emptyText 1`] = `
|
||||
class=""
|
||||
>
|
||||
<div>
|
||||
Column 1
|
||||
<span
|
||||
class="ant-table-column-title"
|
||||
>
|
||||
Column 1
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-column-sorter"
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
class=""
|
||||
>
|
||||
<div>
|
||||
Column 2
|
||||
<span
|
||||
class="ant-table-column-title"
|
||||
>
|
||||
Column 2
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-column-sorter"
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
class=""
|
||||
>
|
||||
<div>
|
||||
Column 3
|
||||
<span
|
||||
class="ant-table-column-title"
|
||||
>
|
||||
Column 3
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-column-sorter"
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
class=""
|
||||
>
|
||||
<div>
|
||||
Column 4
|
||||
<span
|
||||
class="ant-table-column-title"
|
||||
>
|
||||
Column 4
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-column-sorter"
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
class=""
|
||||
>
|
||||
<div>
|
||||
Column 5
|
||||
<span
|
||||
class="ant-table-column-title"
|
||||
>
|
||||
Column 5
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-column-sorter"
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
class=""
|
||||
>
|
||||
<div>
|
||||
Column 6
|
||||
<span
|
||||
class="ant-table-column-title"
|
||||
>
|
||||
Column 6
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-column-sorter"
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
class=""
|
||||
>
|
||||
<div>
|
||||
Column 7
|
||||
<span
|
||||
class="ant-table-column-title"
|
||||
>
|
||||
Column 7
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-column-sorter"
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
class=""
|
||||
>
|
||||
<div>
|
||||
Column 8
|
||||
<span
|
||||
class="ant-table-column-title"
|
||||
>
|
||||
Column 8
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-column-sorter"
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
@ -290,77 +402,154 @@ exports[`Table renders empty table with fixed columns 1`] = `
|
||||
class="ant-table-fixed-columns-in-body"
|
||||
>
|
||||
<div>
|
||||
Full Name
|
||||
<span
|
||||
class="ant-table-column-title"
|
||||
>
|
||||
Full Name
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-column-sorter"
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
class="ant-table-fixed-columns-in-body"
|
||||
>
|
||||
<div>
|
||||
Age
|
||||
<span
|
||||
class="ant-table-column-title"
|
||||
>
|
||||
Age
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-column-sorter"
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
class=""
|
||||
>
|
||||
<div>
|
||||
Column 1
|
||||
<span
|
||||
class="ant-table-column-title"
|
||||
>
|
||||
Column 1
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-column-sorter"
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
class=""
|
||||
>
|
||||
<div>
|
||||
Column 2
|
||||
<span
|
||||
class="ant-table-column-title"
|
||||
>
|
||||
Column 2
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-column-sorter"
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
class=""
|
||||
>
|
||||
<div>
|
||||
Column 3
|
||||
<span
|
||||
class="ant-table-column-title"
|
||||
>
|
||||
Column 3
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-column-sorter"
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
class=""
|
||||
>
|
||||
<div>
|
||||
Column 4
|
||||
<span
|
||||
class="ant-table-column-title"
|
||||
>
|
||||
Column 4
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-column-sorter"
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
class=""
|
||||
>
|
||||
<div>
|
||||
Column 5
|
||||
<span
|
||||
class="ant-table-column-title"
|
||||
>
|
||||
Column 5
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-column-sorter"
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
class=""
|
||||
>
|
||||
<div>
|
||||
Column 6
|
||||
<span
|
||||
class="ant-table-column-title"
|
||||
>
|
||||
Column 6
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-column-sorter"
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
class=""
|
||||
>
|
||||
<div>
|
||||
Column 7
|
||||
<span
|
||||
class="ant-table-column-title"
|
||||
>
|
||||
Column 7
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-column-sorter"
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
class=""
|
||||
>
|
||||
<div>
|
||||
Column 8
|
||||
<span
|
||||
class="ant-table-column-title"
|
||||
>
|
||||
Column 8
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-column-sorter"
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
class="ant-table-fixed-columns-in-body"
|
||||
>
|
||||
<div>
|
||||
Action
|
||||
<span
|
||||
class="ant-table-column-title"
|
||||
>
|
||||
Action
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-column-sorter"
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
@ -421,14 +610,28 @@ exports[`Table renders empty table with fixed columns 1`] = `
|
||||
class=""
|
||||
>
|
||||
<div>
|
||||
Full Name
|
||||
<span
|
||||
class="ant-table-column-title"
|
||||
>
|
||||
Full Name
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-column-sorter"
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
class=""
|
||||
>
|
||||
<div>
|
||||
Age
|
||||
<span
|
||||
class="ant-table-column-title"
|
||||
>
|
||||
Age
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-column-sorter"
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
@ -466,7 +669,14 @@ exports[`Table renders empty table with fixed columns 1`] = `
|
||||
class=""
|
||||
>
|
||||
<div>
|
||||
Action
|
||||
<span
|
||||
class="ant-table-column-title"
|
||||
>
|
||||
Action
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-column-sorter"
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
@ -547,56 +757,112 @@ exports[`Table renders empty table without emptyText when loading 1`] = `
|
||||
class=""
|
||||
>
|
||||
<div>
|
||||
Column 1
|
||||
<span
|
||||
class="ant-table-column-title"
|
||||
>
|
||||
Column 1
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-column-sorter"
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
class=""
|
||||
>
|
||||
<div>
|
||||
Column 2
|
||||
<span
|
||||
class="ant-table-column-title"
|
||||
>
|
||||
Column 2
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-column-sorter"
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
class=""
|
||||
>
|
||||
<div>
|
||||
Column 3
|
||||
<span
|
||||
class="ant-table-column-title"
|
||||
>
|
||||
Column 3
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-column-sorter"
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
class=""
|
||||
>
|
||||
<div>
|
||||
Column 4
|
||||
<span
|
||||
class="ant-table-column-title"
|
||||
>
|
||||
Column 4
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-column-sorter"
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
class=""
|
||||
>
|
||||
<div>
|
||||
Column 5
|
||||
<span
|
||||
class="ant-table-column-title"
|
||||
>
|
||||
Column 5
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-column-sorter"
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
class=""
|
||||
>
|
||||
<div>
|
||||
Column 6
|
||||
<span
|
||||
class="ant-table-column-title"
|
||||
>
|
||||
Column 6
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-column-sorter"
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
class=""
|
||||
>
|
||||
<div>
|
||||
Column 7
|
||||
<span
|
||||
class="ant-table-column-title"
|
||||
>
|
||||
Column 7
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-column-sorter"
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
class=""
|
||||
>
|
||||
<div>
|
||||
Column 8
|
||||
<span
|
||||
class="ant-table-column-title"
|
||||
>
|
||||
Column 8
|
||||
</span>
|
||||
<span
|
||||
class="ant-table-column-sorter"
|
||||
/>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
|
||||
@ -69,30 +69,43 @@
|
||||
}
|
||||
|
||||
.@{table-prefix-cls}-column-sorter {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 6px;
|
||||
width: 14px;
|
||||
height: @font-size-lg + 1px;
|
||||
margin-top: -(@font-size-lg + 1px) / 2;
|
||||
color: @table-header-icon-color;
|
||||
text-align: center;
|
||||
transition: all 0.3s;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
|
||||
&-up,
|
||||
&-down {
|
||||
.iconfont-size-under-12px(11px);
|
||||
display: block;
|
||||
height: 4px;
|
||||
line-height: 4px;
|
||||
.@{table-prefix-cls}-column-sorter-inner {
|
||||
height: 1em;
|
||||
margin-top: 0.35em;
|
||||
margin-left: 0.57142857em;
|
||||
color: @table-header-icon-color;
|
||||
line-height: 1em;
|
||||
text-align: center;
|
||||
transition: all 0.3s;
|
||||
&.on {
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-down {
|
||||
margin-top: 4px;
|
||||
.@{table-prefix-cls}-column-sorter-up,
|
||||
.@{table-prefix-cls}-column-sorter-down {
|
||||
.iconfont-size-under-12px(11px);
|
||||
display: block;
|
||||
height: 1em;
|
||||
line-height: 1em;
|
||||
transition: all 0.3s;
|
||||
&.on {
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
&-full {
|
||||
margin-top: -0.15em;
|
||||
|
||||
.@{table-prefix-cls}-column-sorter-up,
|
||||
.@{table-prefix-cls}-column-sorter-down {
|
||||
height: 0.5em;
|
||||
line-height: 0.5em;
|
||||
}
|
||||
|
||||
.@{table-prefix-cls}-column-sorter-down {
|
||||
margin-top: 0.125em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -110,7 +123,7 @@
|
||||
background: @table-header-filter-active-bg;
|
||||
}
|
||||
}
|
||||
// Very complicated styles logic but neccessary
|
||||
// Very complicated styles logic but necessary
|
||||
&:hover {
|
||||
.@{iconfont-css-prefix}-filter,
|
||||
.@{table-prefix-cls}-filter-icon {
|
||||
@ -154,6 +167,13 @@
|
||||
}
|
||||
|
||||
.@{table-prefix-cls}-column-sorters {
|
||||
display: table;
|
||||
|
||||
> .@{table-prefix-cls}-column-title {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
> *:not(.@{table-prefix-cls}-column-sorter) {
|
||||
position: relative;
|
||||
}
|
||||
@ -172,10 +192,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
&.@{table-prefix-cls}-column-has-filters .@{table-prefix-cls}-column-sorter {
|
||||
right: 28px + 6px;
|
||||
}
|
||||
|
||||
&.@{table-prefix-cls}-column-has-sorters {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user