mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-28 21:19:37 +08:00
Code Issues Actions 50 Packages Projects Releases Wiki Activity

Merge pull request #15895 from ant-design/table-align-right

Browse Source 
fix: Table align right not work on title
This commit is contained in:
偏右 2019-04-07 16:53:46 +08:00 committed by GitHub
commit 79aa04bf5a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 4429 additions and 3333 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11416,6 +11416,9 @@ exports[`ConfigProvider components Table configProvider 1`] = `
<tr>
<th
class="config-table-column-has-actions config-table-column-has-filters config-table-column-has-sorters"
>
<span
class="config-table-header-column"
>
<div
class="config-table-column-sorters"
@ -11471,6 +11474,7 @@ exports[`ConfigProvider components Table configProvider 1`] = `
</div>
</span>
</div>
</span>
<i
aria-label="icon: filter"
class="anticon anticon-filter config-table-filter-open config-dropdown-trigger config-dropdown-open"
@ -11627,6 +11631,9 @@ exports[`ConfigProvider components Table normal 1`] = `
<tr>
<th
class="ant-table-column-has-actions ant-table-column-has-filters ant-table-column-has-sorters"
>
<span
class="ant-table-header-column"
>
<div
class="ant-table-column-sorters"
@ -11682,6 +11689,7 @@ exports[`ConfigProvider components Table normal 1`] = `
</div>
</span>
</div>
</span>
<i
aria-label="icon: filter"
class="anticon anticon-filter ant-table-filter-open ant-dropdown-trigger ant-dropdown-open"
@ -11838,6 +11846,9 @@ exports[`ConfigProvider components Table prefixCls 1`] = `
<tr>
<th
class="prefix-Table-column-has-actions prefix-Table-column-has-filters prefix-Table-column-has-sorters"
>
<span
class="prefix-Table-header-column"
>
<div
class="prefix-Table-column-sorters"
@ -11893,6 +11904,7 @@ exports[`ConfigProvider components Table prefixCls 1`] = `
</div>
</span>
</div>
</span>
<i
aria-label="icon: filter"
class="anticon anticon-filter prefix-Table-filter-open ant-dropdown-trigger ant-dropdown-open"

8
components/empty/__tests__/__snapshots__/demo.test.js.snap
View File

@ -379,6 +379,9 @@ exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
<tr>
<th
class=""
>
<span
class="ant-table-header-column"
>
<div>
<span
@ -390,9 +393,13 @@ exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
class="ant-table-column-sorter"
/>
</div>
</span>
</th>
<th
class=""
>
<span
class="ant-table-header-column"
>
<div>
<span
@ -404,6 +411,7 @@ exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
class="ant-table-column-sorter"
/>
</div>
</span>
</th>
</tr>
</thead>

8
components/locale-provider/__tests__/__snapshots__/demo.test.js.snap
View File

@ -1755,6 +1755,9 @@ exports[`renders ./components/locale-provider/demo/all.md correctly 1`] = `
<tr>
<th
class="ant-table-column-has-actions ant-table-column-has-filters"
>
<span
class="ant-table-header-column"
>
<div>
<span
@ -1766,6 +1769,7 @@ exports[`renders ./components/locale-provider/demo/all.md correctly 1`] = `
class="ant-table-column-sorter"
/>
</div>
</span>
<i
aria-label="icon: filter"
class="anticon anticon-filter ant-dropdown-trigger"
@ -1789,6 +1793,9 @@ exports[`renders ./components/locale-provider/demo/all.md correctly 1`] = `
</th>
<th
class=""
>
<span
class="ant-table-header-column"
>
<div>
<span
@ -1800,6 +1807,7 @@ exports[`renders ./components/locale-provider/demo/all.md correctly 1`] = `
class="ant-table-column-sorter"
/>
</div>
</span>
</th>
</tr>
</thead>

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

File diff suppressed because it is too large Load Diff

6
components/table/Table.tsx
View File

@ -925,12 +925,14 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
[`${prefixCls}-column-sort`]: isSortColumn && sortOrder,
}),
title: [
<div key="title" className={sortButton ? `${prefixCls}-column-sorters` : undefined}>
<span key="title" className={`${prefixCls}-header-column`}>
<div className={sortButton ? `${prefixCls}-column-sorters` : undefined}>
<span className={`${prefixCls}-column-title`}>
{this.renderColumnTitle(column.title)}
</span>
<span className={`${prefixCls}-column-sorter`}>{sortButton}</span>
</div>,
</div>
</span>,
filterDropdown,
],
onHeaderCell,

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

@ -95,6 +95,9 @@ exports[`Table.filter renders filter correctly 1`] = `
<tr>
<th
class="ant-table-column-has-actions ant-table-column-has-filters"
>
<span
class="ant-table-header-column"
>
<div>
<span
@ -106,6 +109,7 @@ exports[`Table.filter renders filter correctly 1`] = `
class="ant-table-column-sorter"
/>
</div>
</span>
<i
aria-label="icon: filter"
class="anticon anticon-filter ant-dropdown-trigger"

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

@ -31,6 +31,9 @@ exports[`Table.pagination Accepts pagination as true 1`] = `
<tr>
<th
class=""
>
<span
class="ant-table-header-column"
>
<div>
<span
@ -42,6 +45,7 @@ exports[`Table.pagination Accepts pagination as true 1`] = `
class="ant-table-column-sorter"
/>
</div>
</span>
</th>
</tr>
</thead>
@ -215,6 +219,9 @@ exports[`Table.pagination renders pagination correctly 1`] = `
<tr>
<th
class=""
>
<span
class="ant-table-header-column"
>
<div>
<span
@ -226,6 +233,7 @@ exports[`Table.pagination renders pagination correctly 1`] = `
class="ant-table-column-sorter"
/>
</div>
</span>
</th>
</tr>
</thead>

12
components/table/__tests__/__snapshots__/Table.rowSelection.test.js.snap
View File

@ -37,6 +37,9 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
<tr>
<th
class="ant-table-fixed-columns-in-body ant-table-selection-column"
>
<span
class="ant-table-header-column"
>
<div>
<span
@ -66,9 +69,13 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
class="ant-table-column-sorter"
/>
</div>
</span>
</th>
<th
class=""
>
<span
class="ant-table-header-column"
>
<div>
<span
@ -80,6 +87,7 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
class="ant-table-column-sorter"
/>
</div>
</span>
</th>
</tr>
</thead>
@ -254,6 +262,9 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
<tr>
<th
class="ant-table-selection-column"
>
<span
class="ant-table-header-column"
>
<div>
<span
@ -283,6 +294,7 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
class="ant-table-column-sorter"
/>
</div>
</span>
</th>
</tr>
</thead>

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

@ -7,6 +7,9 @@ exports[`Table.sorter renders sorter icon correctly 1`] = `
<tr>
<th
class="ant-table-column-has-actions ant-table-column-has-sorters"
>
<span
class="ant-table-header-column"
>
<div
class="ant-table-column-sorters"
@ -62,6 +65,7 @@ exports[`Table.sorter renders sorter icon correctly 1`] = `
</div>
</span>
</div>
</span>
</th>
</tr>
</thead>

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

@ -34,6 +34,9 @@ exports[`Table renders JSX correctly 1`] = `
<th
class=""
colspan="2"
>
<span
class="ant-table-header-column"
>
<div>
<span
@ -45,10 +48,14 @@ exports[`Table renders JSX correctly 1`] = `
class="ant-table-column-sorter"
/>
</div>
</span>
</th>
<th
class=""
rowspan="2"
>
<span
class="ant-table-header-column"
>
<div>
<span
@ -60,11 +67,15 @@ exports[`Table renders JSX correctly 1`] = `
class="ant-table-column-sorter"
/>
</div>
</span>
</th>
</tr>
<tr>
<th
class=""
>
<span
class="ant-table-header-column"
>
<div>
<span
@ -76,9 +87,13 @@ exports[`Table renders JSX correctly 1`] = `
class="ant-table-column-sorter"
/>
</div>
</span>
</th>
<th
class=""
>
<span
class="ant-table-header-column"
>
<div>
<span
@ -90,6 +105,7 @@ exports[`Table renders JSX correctly 1`] = `
class="ant-table-column-sorter"
/>
</div>
</span>
</th>
</tr>
</thead>

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

File diff suppressed because it is too large Load Diff

152
components/table/__tests__/__snapshots__/empty.test.js.snap
View File

@ -38,6 +38,9 @@ exports[`Table renders empty table 1`] = `
<tr>
<th
class=""
>
<span
class="ant-table-header-column"
>
<div>
<span
@ -49,9 +52,13 @@ exports[`Table renders empty table 1`] = `
class="ant-table-column-sorter"
/>
</div>
</span>
</th>
<th
class=""
>
<span
class="ant-table-header-column"
>
<div>
<span
@ -63,9 +70,13 @@ exports[`Table renders empty table 1`] = `
class="ant-table-column-sorter"
/>
</div>
</span>
</th>
<th
class=""
>
<span
class="ant-table-header-column"
>
<div>
<span
@ -77,9 +88,13 @@ exports[`Table renders empty table 1`] = `
class="ant-table-column-sorter"
/>
</div>
</span>
</th>
<th
class=""
>
<span
class="ant-table-header-column"
>
<div>
<span
@ -91,9 +106,13 @@ exports[`Table renders empty table 1`] = `
class="ant-table-column-sorter"
/>
</div>
</span>
</th>
<th
class=""
>
<span
class="ant-table-header-column"
>
<div>
<span
@ -105,9 +124,13 @@ exports[`Table renders empty table 1`] = `
class="ant-table-column-sorter"
/>
</div>
</span>
</th>
<th
class=""
>
<span
class="ant-table-header-column"
>
<div>
<span
@ -119,9 +142,13 @@ exports[`Table renders empty table 1`] = `
class="ant-table-column-sorter"
/>
</div>
</span>
</th>
<th
class=""
>
<span
class="ant-table-header-column"
>
<div>
<span
@ -133,9 +160,13 @@ exports[`Table renders empty table 1`] = `
class="ant-table-column-sorter"
/>
</div>
</span>
</th>
<th
class=""
>
<span
class="ant-table-header-column"
>
<div>
<span
@ -147,6 +178,7 @@ exports[`Table renders empty table 1`] = `
class="ant-table-column-sorter"
/>
</div>
</span>
</th>
</tr>
</thead>
@ -221,6 +253,9 @@ exports[`Table renders empty table with custom emptyText 1`] = `
<tr>
<th
class=""
>
<span
class="ant-table-header-column"
>
<div>
<span
@ -232,9 +267,13 @@ exports[`Table renders empty table with custom emptyText 1`] = `
class="ant-table-column-sorter"
/>
</div>
</span>
</th>
<th
class=""
>
<span
class="ant-table-header-column"
>
<div>
<span
@ -246,9 +285,13 @@ exports[`Table renders empty table with custom emptyText 1`] = `
class="ant-table-column-sorter"
/>
</div>
</span>
</th>
<th
class=""
>
<span
class="ant-table-header-column"
>
<div>
<span
@ -260,9 +303,13 @@ exports[`Table renders empty table with custom emptyText 1`] = `
class="ant-table-column-sorter"
/>
</div>
</span>
</th>
<th
class=""
>
<span
class="ant-table-header-column"
>
<div>
<span
@ -274,9 +321,13 @@ exports[`Table renders empty table with custom emptyText 1`] = `
class="ant-table-column-sorter"
/>
</div>
</span>
</th>
<th
class=""
>
<span
class="ant-table-header-column"
>
<div>
<span
@ -288,9 +339,13 @@ exports[`Table renders empty table with custom emptyText 1`] = `
class="ant-table-column-sorter"
/>
</div>
</span>
</th>
<th
class=""
>
<span
class="ant-table-header-column"
>
<div>
<span
@ -302,9 +357,13 @@ exports[`Table renders empty table with custom emptyText 1`] = `
class="ant-table-column-sorter"
/>
</div>
</span>
</th>
<th
class=""
>
<span
class="ant-table-header-column"
>
<div>
<span
@ -316,9 +375,13 @@ exports[`Table renders empty table with custom emptyText 1`] = `
class="ant-table-column-sorter"
/>
</div>
</span>
</th>
<th
class=""
>
<span
class="ant-table-header-column"
>
<div>
<span
@ -330,6 +393,7 @@ exports[`Table renders empty table with custom emptyText 1`] = `
class="ant-table-column-sorter"
/>
</div>
</span>
</th>
</tr>
</thead>
@ -400,6 +464,9 @@ exports[`Table renders empty table with fixed columns 1`] = `
<tr>
<th
class="ant-table-fixed-columns-in-body"
>
<span
class="ant-table-header-column"
>
<div>
<span
@ -411,9 +478,13 @@ exports[`Table renders empty table with fixed columns 1`] = `
class="ant-table-column-sorter"
/>
</div>
</span>
</th>
<th
class="ant-table-fixed-columns-in-body"
>
<span
class="ant-table-header-column"
>
<div>
<span
@ -425,9 +496,13 @@ exports[`Table renders empty table with fixed columns 1`] = `
class="ant-table-column-sorter"
/>
</div>
</span>
</th>
<th
class=""
>
<span
class="ant-table-header-column"
>
<div>
<span
@ -439,9 +514,13 @@ exports[`Table renders empty table with fixed columns 1`] = `
class="ant-table-column-sorter"
/>
</div>
</span>
</th>
<th
class=""
>
<span
class="ant-table-header-column"
>
<div>
<span
@ -453,9 +532,13 @@ exports[`Table renders empty table with fixed columns 1`] = `
class="ant-table-column-sorter"
/>
</div>
</span>
</th>
<th
class=""
>
<span
class="ant-table-header-column"
>
<div>
<span
@ -467,9 +550,13 @@ exports[`Table renders empty table with fixed columns 1`] = `
class="ant-table-column-sorter"
/>
</div>
</span>
</th>
<th
class=""
>
<span
class="ant-table-header-column"
>
<div>
<span
@ -481,9 +568,13 @@ exports[`Table renders empty table with fixed columns 1`] = `
class="ant-table-column-sorter"
/>
</div>
</span>
</th>
<th
class=""
>
<span
class="ant-table-header-column"
>
<div>
<span
@ -495,9 +586,13 @@ exports[`Table renders empty table with fixed columns 1`] = `
class="ant-table-column-sorter"
/>
</div>
</span>
</th>
<th
class=""
>
<span
class="ant-table-header-column"
>
<div>
<span
@ -509,9 +604,13 @@ exports[`Table renders empty table with fixed columns 1`] = `
class="ant-table-column-sorter"
/>
</div>
</span>
</th>
<th
class=""
>
<span
class="ant-table-header-column"
>
<div>
<span
@ -523,9 +622,13 @@ exports[`Table renders empty table with fixed columns 1`] = `
class="ant-table-column-sorter"
/>
</div>
</span>
</th>
<th
class=""
>
<span
class="ant-table-header-column"
>
<div>
<span
@ -537,9 +640,13 @@ exports[`Table renders empty table with fixed columns 1`] = `
class="ant-table-column-sorter"
/>
</div>
</span>
</th>
<th
class="ant-table-fixed-columns-in-body"
>
<span
class="ant-table-header-column"
>
<div>
<span
@ -551,6 +658,7 @@ exports[`Table renders empty table with fixed columns 1`] = `
class="ant-table-column-sorter"
/>
</div>
</span>
</th>
</tr>
</thead>
@ -608,6 +716,9 @@ exports[`Table renders empty table with fixed columns 1`] = `
<tr>
<th
class=""
>
<span
class="ant-table-header-column"
>
<div>
<span
@ -619,9 +730,13 @@ exports[`Table renders empty table with fixed columns 1`] = `
class="ant-table-column-sorter"
/>
</div>
</span>
</th>
<th
class=""
>
<span
class="ant-table-header-column"
>
<div>
<span
@ -633,6 +748,7 @@ exports[`Table renders empty table with fixed columns 1`] = `
class="ant-table-column-sorter"
/>
</div>
</span>
</th>
</tr>
</thead>
@ -667,6 +783,9 @@ exports[`Table renders empty table with fixed columns 1`] = `
<tr>
<th
class=""
>
<span
class="ant-table-header-column"
>
<div>
<span
@ -678,6 +797,7 @@ exports[`Table renders empty table with fixed columns 1`] = `
class="ant-table-column-sorter"
/>
</div>
</span>
</th>
</tr>
</thead>
@ -755,6 +875,9 @@ exports[`Table renders empty table without emptyText when loading 1`] = `
<tr>
<th
class=""
>
<span
class="ant-table-header-column"
>
<div>
<span
@ -766,9 +889,13 @@ exports[`Table renders empty table without emptyText when loading 1`] = `
class="ant-table-column-sorter"
/>
</div>
</span>
</th>
<th
class=""
>
<span
class="ant-table-header-column"
>
<div>
<span
@ -780,9 +907,13 @@ exports[`Table renders empty table without emptyText when loading 1`] = `
class="ant-table-column-sorter"
/>
</div>
</span>
</th>
<th
class=""
>
<span
class="ant-table-header-column"
>
<div>
<span
@ -794,9 +925,13 @@ exports[`Table renders empty table without emptyText when loading 1`] = `
class="ant-table-column-sorter"
/>
</div>
</span>
</th>
<th
class=""
>
<span
class="ant-table-header-column"
>
<div>
<span
@ -808,9 +943,13 @@ exports[`Table renders empty table without emptyText when loading 1`] = `
class="ant-table-column-sorter"
/>
</div>
</span>
</th>
<th
class=""
>
<span
class="ant-table-header-column"
>
<div>
<span
@ -822,9 +961,13 @@ exports[`Table renders empty table without emptyText when loading 1`] = `
class="ant-table-column-sorter"
/>
</div>
</span>
</th>
<th
class=""
>
<span
class="ant-table-header-column"
>
<div>
<span
@ -836,9 +979,13 @@ exports[`Table renders empty table without emptyText when loading 1`] = `
class="ant-table-column-sorter"
/>
</div>
</span>
</th>
<th
class=""
>
<span
class="ant-table-header-column"
>
<div>
<span
@ -850,9 +997,13 @@ exports[`Table renders empty table without emptyText when loading 1`] = `
class="ant-table-column-sorter"
/>
</div>
</span>
</th>
<th
class=""
>
<span
class="ant-table-header-column"
>
<div>
<span
@ -864,6 +1015,7 @@ exports[`Table renders empty table without emptyText when loading 1`] = `
class="ant-table-column-sorter"
/>
</div>
</span>
</th>
</tr>
</thead>

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

@ -116,6 +116,9 @@
-webkit-background-clip: border-box; // For Chrome extra space: https://github.com/ant-design/ant-design/issues/14926
&.@{table-prefix-cls}-column-has-filters {
// https://github.com/ant-design/ant-design/issues/12650
padding-right: 30px !important;
.@{iconfont-css-prefix}-filter,
.@{table-prefix-cls}-filter-icon {
&.@{table-prefix-cls}-filter-open {
@ -154,17 +157,11 @@
}
}
}
// https://github.com/ant-design/ant-design/issues/12650
&.@{table-prefix-cls}-column-has-sorters,
&.@{table-prefix-cls}-column-has-filters {
padding-right: 30px !important;
}
&.@{table-prefix-cls}-column-has-sorters.@{table-prefix-cls}-column-has-filters {
padding-right: 54px !important;
}
}
.@{table-prefix-cls}-header-column {
display: inline-block;
vertical-align: top;
.@{table-prefix-cls}-column-sorters {
display: table;
@ -191,6 +188,7 @@
background: rgba(0, 0, 0, 0.04);
}
}
}
&.@{table-prefix-cls}-column-has-sorters {
user-select: none;