mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 02:59:58 +08:00
feat: Table support stack fixed columns (#47245)
* chore: update deps * feat: style of it * test: update test case * chore: adjust size limit
This commit is contained in:
二货爱吃白萝卜
GitHub
parent
651914c46d
commit
cbea5a5da9
1
.gitignore
vendored
1
.gitignore
vendored
@ -70,3 +70,4 @@ __image_snapshots__/
|
||||
|
||||
.eslintcache
|
||||
.node-version
|
||||
.node
|
||||
|
||||
@ -12939,6 +12939,347 @@ exports[`renders components/table/demo/fixed-columns-header.tsx extend context c
|
||||
|
||||
exports[`renders components/table/demo/fixed-columns-header.tsx extend context correctly 2`] = `[]`;
|
||||
|
||||
exports[`renders components/table/demo/fixed-gapped-columns.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-table-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-spin-nested-loading"
|
||||
>
|
||||
<div
|
||||
class="ant-spin-container"
|
||||
>
|
||||
<div
|
||||
class="ant-table ant-table-bordered ant-table-fixed-column ant-table-fixed-column-gapped ant-table-scroll-horizontal ant-table-has-fix-left ant-table-has-fix-right"
|
||||
>
|
||||
<div
|
||||
class="ant-table-container"
|
||||
>
|
||||
<div
|
||||
class="ant-table-content"
|
||||
style="overflow-x: auto; overflow-y: hidden;"
|
||||
>
|
||||
<table
|
||||
style="width: 1300px; min-width: 100%; table-layout: fixed;"
|
||||
>
|
||||
<colgroup>
|
||||
<col
|
||||
style="width: 100px;"
|
||||
/>
|
||||
<col
|
||||
style="width: 100px;"
|
||||
/>
|
||||
<col />
|
||||
<col />
|
||||
<col />
|
||||
<col />
|
||||
<col />
|
||||
<col />
|
||||
<col />
|
||||
<col />
|
||||
<col
|
||||
style="width: 90px;"
|
||||
/>
|
||||
<col
|
||||
style="width: 90px;"
|
||||
/>
|
||||
<col
|
||||
style="width: 90px;"
|
||||
/>
|
||||
</colgroup>
|
||||
<thead
|
||||
class="ant-table-thead"
|
||||
>
|
||||
<tr>
|
||||
<th
|
||||
class="ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last"
|
||||
scope="col"
|
||||
style="position: sticky; left: 0px;"
|
||||
>
|
||||
Full Name
|
||||
</th>
|
||||
<th
|
||||
class="ant-table-cell"
|
||||
scope="col"
|
||||
>
|
||||
Age
|
||||
</th>
|
||||
<th
|
||||
class="ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last"
|
||||
scope="col"
|
||||
style="position: sticky; left: 0px;"
|
||||
>
|
||||
Column 1
|
||||
</th>
|
||||
<th
|
||||
class="ant-table-cell"
|
||||
scope="col"
|
||||
>
|
||||
Column 2
|
||||
</th>
|
||||
<th
|
||||
class="ant-table-cell"
|
||||
scope="col"
|
||||
>
|
||||
Column 3
|
||||
</th>
|
||||
<th
|
||||
class="ant-table-cell"
|
||||
scope="col"
|
||||
>
|
||||
Column 4
|
||||
</th>
|
||||
<th
|
||||
class="ant-table-cell"
|
||||
scope="col"
|
||||
>
|
||||
Column 5
|
||||
</th>
|
||||
<th
|
||||
class="ant-table-cell"
|
||||
scope="col"
|
||||
>
|
||||
Column 6
|
||||
</th>
|
||||
<th
|
||||
class="ant-table-cell"
|
||||
scope="col"
|
||||
>
|
||||
Column 7
|
||||
</th>
|
||||
<th
|
||||
class="ant-table-cell"
|
||||
scope="col"
|
||||
>
|
||||
Column 8
|
||||
</th>
|
||||
<th
|
||||
class="ant-table-cell ant-table-cell-fix-right ant-table-cell-fix-right-first"
|
||||
scope="col"
|
||||
style="position: sticky; right: 0px;"
|
||||
>
|
||||
Action 1
|
||||
</th>
|
||||
<th
|
||||
class="ant-table-cell"
|
||||
scope="col"
|
||||
>
|
||||
Action 2
|
||||
</th>
|
||||
<th
|
||||
class="ant-table-cell ant-table-cell-fix-right ant-table-cell-fix-right-first"
|
||||
scope="col"
|
||||
style="position: sticky; right: 0px;"
|
||||
>
|
||||
Action 3
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody
|
||||
class="ant-table-tbody"
|
||||
>
|
||||
<tr
|
||||
aria-hidden="true"
|
||||
class="ant-table-measure-row"
|
||||
style="height: 0px; font-size: 0px;"
|
||||
>
|
||||
<td
|
||||
style="padding: 0px; border: 0px; height: 0px;"
|
||||
>
|
||||
<div
|
||||
style="height: 0px; overflow: hidden;"
|
||||
>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
style="padding: 0px; border: 0px; height: 0px;"
|
||||
>
|
||||
<div
|
||||
style="height: 0px; overflow: hidden;"
|
||||
>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
style="padding: 0px; border: 0px; height: 0px;"
|
||||
>
|
||||
<div
|
||||
style="height: 0px; overflow: hidden;"
|
||||
>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
style="padding: 0px; border: 0px; height: 0px;"
|
||||
>
|
||||
<div
|
||||
style="height: 0px; overflow: hidden;"
|
||||
>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
style="padding: 0px; border: 0px; height: 0px;"
|
||||
>
|
||||
<div
|
||||
style="height: 0px; overflow: hidden;"
|
||||
>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
style="padding: 0px; border: 0px; height: 0px;"
|
||||
>
|
||||
<div
|
||||
style="height: 0px; overflow: hidden;"
|
||||
>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
style="padding: 0px; border: 0px; height: 0px;"
|
||||
>
|
||||
<div
|
||||
style="height: 0px; overflow: hidden;"
|
||||
>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
style="padding: 0px; border: 0px; height: 0px;"
|
||||
>
|
||||
<div
|
||||
style="height: 0px; overflow: hidden;"
|
||||
>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
style="padding: 0px; border: 0px; height: 0px;"
|
||||
>
|
||||
<div
|
||||
style="height: 0px; overflow: hidden;"
|
||||
>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
style="padding: 0px; border: 0px; height: 0px;"
|
||||
>
|
||||
<div
|
||||
style="height: 0px; overflow: hidden;"
|
||||
>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
style="padding: 0px; border: 0px; height: 0px;"
|
||||
>
|
||||
<div
|
||||
style="height: 0px; overflow: hidden;"
|
||||
>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
style="padding: 0px; border: 0px; height: 0px;"
|
||||
>
|
||||
<div
|
||||
style="height: 0px; overflow: hidden;"
|
||||
>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
style="padding: 0px; border: 0px; height: 0px;"
|
||||
>
|
||||
<div
|
||||
style="height: 0px; overflow: hidden;"
|
||||
>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="1"
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last"
|
||||
style="position: sticky; left: 0px;"
|
||||
>
|
||||
John Brown
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
32
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last"
|
||||
style="position: sticky; left: 0px;"
|
||||
>
|
||||
New York Park
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
New York Park
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
New York Park
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
New York Park
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
New York Park
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
New York Park
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
New York Park
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
New York Park
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell ant-table-cell-fix-right ant-table-cell-fix-right-first"
|
||||
style="position: sticky; right: 0px;"
|
||||
>
|
||||
<a>
|
||||
action
|
||||
</a>
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
<a>
|
||||
action
|
||||
</a>
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell ant-table-cell-fix-right ant-table-cell-fix-right-first"
|
||||
style="position: sticky; right: 0px;"
|
||||
>
|
||||
<a>
|
||||
action
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/table/demo/fixed-gapped-columns.tsx extend context correctly 2`] = `[]`;
|
||||
|
||||
exports[`renders components/table/demo/fixed-header.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-table-wrapper"
|
||||
|
||||
@ -10464,6 +10464,345 @@ exports[`renders components/table/demo/fixed-columns-header.tsx correctly 1`] =
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/table/demo/fixed-gapped-columns.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-table-wrapper"
|
||||
>
|
||||
<div
|
||||
class="ant-spin-nested-loading"
|
||||
>
|
||||
<div
|
||||
class="ant-spin-container"
|
||||
>
|
||||
<div
|
||||
class="ant-table ant-table-bordered ant-table-fixed-column ant-table-fixed-column-gapped ant-table-scroll-horizontal ant-table-has-fix-left ant-table-has-fix-right"
|
||||
>
|
||||
<div
|
||||
class="ant-table-container"
|
||||
>
|
||||
<div
|
||||
class="ant-table-content"
|
||||
style="overflow-x:auto;overflow-y:hidden"
|
||||
>
|
||||
<table
|
||||
style="width:1300px;min-width:100%;table-layout:fixed"
|
||||
>
|
||||
<colgroup>
|
||||
<col
|
||||
style="width:100px"
|
||||
/>
|
||||
<col
|
||||
style="width:100px"
|
||||
/>
|
||||
<col />
|
||||
<col />
|
||||
<col />
|
||||
<col />
|
||||
<col />
|
||||
<col />
|
||||
<col />
|
||||
<col />
|
||||
<col
|
||||
style="width:90px"
|
||||
/>
|
||||
<col
|
||||
style="width:90px"
|
||||
/>
|
||||
<col
|
||||
style="width:90px"
|
||||
/>
|
||||
</colgroup>
|
||||
<thead
|
||||
class="ant-table-thead"
|
||||
>
|
||||
<tr>
|
||||
<th
|
||||
class="ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last"
|
||||
scope="col"
|
||||
style="position:sticky;left:0"
|
||||
>
|
||||
Full Name
|
||||
</th>
|
||||
<th
|
||||
class="ant-table-cell"
|
||||
scope="col"
|
||||
>
|
||||
Age
|
||||
</th>
|
||||
<th
|
||||
class="ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last"
|
||||
scope="col"
|
||||
style="position:sticky;left:0"
|
||||
>
|
||||
Column 1
|
||||
</th>
|
||||
<th
|
||||
class="ant-table-cell"
|
||||
scope="col"
|
||||
>
|
||||
Column 2
|
||||
</th>
|
||||
<th
|
||||
class="ant-table-cell"
|
||||
scope="col"
|
||||
>
|
||||
Column 3
|
||||
</th>
|
||||
<th
|
||||
class="ant-table-cell"
|
||||
scope="col"
|
||||
>
|
||||
Column 4
|
||||
</th>
|
||||
<th
|
||||
class="ant-table-cell"
|
||||
scope="col"
|
||||
>
|
||||
Column 5
|
||||
</th>
|
||||
<th
|
||||
class="ant-table-cell"
|
||||
scope="col"
|
||||
>
|
||||
Column 6
|
||||
</th>
|
||||
<th
|
||||
class="ant-table-cell"
|
||||
scope="col"
|
||||
>
|
||||
Column 7
|
||||
</th>
|
||||
<th
|
||||
class="ant-table-cell"
|
||||
scope="col"
|
||||
>
|
||||
Column 8
|
||||
</th>
|
||||
<th
|
||||
class="ant-table-cell ant-table-cell-fix-right ant-table-cell-fix-right-first"
|
||||
scope="col"
|
||||
style="position:sticky;right:0"
|
||||
>
|
||||
Action 1
|
||||
</th>
|
||||
<th
|
||||
class="ant-table-cell"
|
||||
scope="col"
|
||||
>
|
||||
Action 2
|
||||
</th>
|
||||
<th
|
||||
class="ant-table-cell ant-table-cell-fix-right ant-table-cell-fix-right-first"
|
||||
scope="col"
|
||||
style="position:sticky;right:0"
|
||||
>
|
||||
Action 3
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody
|
||||
class="ant-table-tbody"
|
||||
>
|
||||
<tr
|
||||
aria-hidden="true"
|
||||
class="ant-table-measure-row"
|
||||
style="height:0;font-size:0"
|
||||
>
|
||||
<td
|
||||
style="padding:0;border:0;height:0"
|
||||
>
|
||||
<div
|
||||
style="height:0;overflow:hidden"
|
||||
>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
style="padding:0;border:0;height:0"
|
||||
>
|
||||
<div
|
||||
style="height:0;overflow:hidden"
|
||||
>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
style="padding:0;border:0;height:0"
|
||||
>
|
||||
<div
|
||||
style="height:0;overflow:hidden"
|
||||
>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
style="padding:0;border:0;height:0"
|
||||
>
|
||||
<div
|
||||
style="height:0;overflow:hidden"
|
||||
>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
style="padding:0;border:0;height:0"
|
||||
>
|
||||
<div
|
||||
style="height:0;overflow:hidden"
|
||||
>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
style="padding:0;border:0;height:0"
|
||||
>
|
||||
<div
|
||||
style="height:0;overflow:hidden"
|
||||
>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
style="padding:0;border:0;height:0"
|
||||
>
|
||||
<div
|
||||
style="height:0;overflow:hidden"
|
||||
>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
style="padding:0;border:0;height:0"
|
||||
>
|
||||
<div
|
||||
style="height:0;overflow:hidden"
|
||||
>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
style="padding:0;border:0;height:0"
|
||||
>
|
||||
<div
|
||||
style="height:0;overflow:hidden"
|
||||
>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
style="padding:0;border:0;height:0"
|
||||
>
|
||||
<div
|
||||
style="height:0;overflow:hidden"
|
||||
>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
style="padding:0;border:0;height:0"
|
||||
>
|
||||
<div
|
||||
style="height:0;overflow:hidden"
|
||||
>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
style="padding:0;border:0;height:0"
|
||||
>
|
||||
<div
|
||||
style="height:0;overflow:hidden"
|
||||
>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
style="padding:0;border:0;height:0"
|
||||
>
|
||||
<div
|
||||
style="height:0;overflow:hidden"
|
||||
>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="ant-table-row ant-table-row-level-0"
|
||||
data-row-key="1"
|
||||
>
|
||||
<td
|
||||
class="ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last"
|
||||
style="position:sticky;left:0"
|
||||
>
|
||||
John Brown
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
32
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell ant-table-cell-fix-left ant-table-cell-fix-left-last"
|
||||
style="position:sticky;left:0"
|
||||
>
|
||||
New York Park
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
New York Park
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
New York Park
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
New York Park
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
New York Park
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
New York Park
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
New York Park
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
New York Park
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell ant-table-cell-fix-right ant-table-cell-fix-right-first"
|
||||
style="position:sticky;right:0"
|
||||
>
|
||||
<a>
|
||||
action
|
||||
</a>
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell"
|
||||
>
|
||||
<a>
|
||||
action
|
||||
</a>
|
||||
</td>
|
||||
<td
|
||||
class="ant-table-cell ant-table-cell-fix-right ant-table-cell-fix-right-first"
|
||||
style="position:sticky;right:0"
|
||||
>
|
||||
<a>
|
||||
action
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/table/demo/fixed-header.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-table-wrapper"
|
||||
|
||||
7
components/table/demo/fixed-gapped-columns.md
Normal file
7
components/table/demo/fixed-gapped-columns.md
Normal file
@ -0,0 +1,7 @@
|
||||
## zh-CN
|
||||
|
||||
混合固定列，滚动到一定距离进行堆叠，推荐配合 `bordered` 使用。
|
||||
|
||||
## en-US
|
||||
|
||||
Fixed column only when scroll some distance, and scroll to stack other columns. Recommend use with `bordered`.
|
||||
64
components/table/demo/fixed-gapped-columns.tsx
Normal file
64
components/table/demo/fixed-gapped-columns.tsx
Normal file
@ -0,0 +1,64 @@
|
||||
import React from 'react';
|
||||
import { Table } from 'antd';
|
||||
import type { TableColumnsType } from 'antd';
|
||||
|
||||
interface DataType {
|
||||
key: React.Key;
|
||||
name: string;
|
||||
age: number;
|
||||
address: string;
|
||||
}
|
||||
|
||||
const columns: TableColumnsType<DataType> = [
|
||||
{
|
||||
title: 'Full Name',
|
||||
width: 100,
|
||||
dataIndex: 'name',
|
||||
fixed: 'left',
|
||||
},
|
||||
{
|
||||
title: 'Age',
|
||||
width: 100,
|
||||
dataIndex: 'age',
|
||||
},
|
||||
{ title: 'Column 1', dataIndex: 'address', fixed: 'left' },
|
||||
{ title: 'Column 2', dataIndex: 'address' },
|
||||
{ title: 'Column 3', dataIndex: 'address' },
|
||||
{ title: 'Column 4', dataIndex: 'address' },
|
||||
{ title: 'Column 5', dataIndex: 'address' },
|
||||
{ title: 'Column 6', dataIndex: 'address' },
|
||||
{ title: 'Column 7', dataIndex: 'address' },
|
||||
{ title: 'Column 8', dataIndex: 'address' },
|
||||
{
|
||||
title: 'Action 1',
|
||||
fixed: 'right',
|
||||
width: 90,
|
||||
render: () => <a>action</a>,
|
||||
},
|
||||
{
|
||||
title: 'Action 2',
|
||||
width: 90,
|
||||
render: () => <a>action</a>,
|
||||
},
|
||||
{
|
||||
title: 'Action 3',
|
||||
fixed: 'right',
|
||||
width: 90,
|
||||
render: () => <a>action</a>,
|
||||
},
|
||||
];
|
||||
|
||||
const data: DataType[] = [
|
||||
{
|
||||
key: '1',
|
||||
name: 'John Brown',
|
||||
age: 32,
|
||||
address: 'New York Park',
|
||||
},
|
||||
];
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Table columns={columns} dataSource={data} scroll={{ x: 1300 }} pagination={false} bordered />
|
||||
);
|
||||
|
||||
export default App;
|
||||
@ -86,6 +86,7 @@ const columns = [
|
||||
<code src="./demo/tree-table-ellipsis.tsx" debug>Tree data ellipsis debug demo</code>
|
||||
<code src="./demo/fixed-header.tsx">Fixed Header</code>
|
||||
<code src="./demo/fixed-columns.tsx">Fixed Columns</code>
|
||||
<code src="./demo/fixed-gapped-columns.tsx" version="5.14.0">Stack Fixed Columns</code>
|
||||
<code src="./demo/fixed-columns-header.tsx">Fixed Columns and Header</code>
|
||||
<code src="./demo/hidden-columns.tsx">Hidden Columns</code>
|
||||
<code src="./demo/grouping-columns.tsx">Grouping table head</code>
|
||||
|
||||
@ -87,6 +87,7 @@ const columns = [
|
||||
<code src="./demo/tree-table-ellipsis.tsx" debug>树形数据省略情况测试</code>
|
||||
<code src="./demo/fixed-header.tsx">固定表头</code>
|
||||
<code src="./demo/fixed-columns.tsx">固定列</code>
|
||||
<code src="./demo/fixed-gapped-columns.tsx" version="5.14.0">堆叠固定列</code>
|
||||
<code src="./demo/fixed-columns-header.tsx">固定头和列</code>
|
||||
<code src="./demo/hidden-columns.tsx">隐藏列</code>
|
||||
<code src="./demo/grouping-columns.tsx">表头分组</code>
|
||||
|
||||
@ -121,6 +121,18 @@ const genFixedStyle: GenerateStyle<TableToken, CSSObject> = (token) => {
|
||||
boxShadow: `inset -10px 0 8px -8px ${shadowColor}`,
|
||||
},
|
||||
},
|
||||
|
||||
// Gapped fixed Columns do not show the shadow
|
||||
[`${componentCls}-fixed-column-gapped`]: {
|
||||
[`
|
||||
${componentCls}-cell-fix-left-first::after,
|
||||
${componentCls}-cell-fix-left-last::after,
|
||||
${componentCls}-cell-fix-right-first::after,
|
||||
${componentCls}-cell-fix-right-last::after
|
||||
`]: {
|
||||
boxShadow: 'none',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
@ -153,7 +153,7 @@
|
||||
"rc-slider": "~10.5.0",
|
||||
"rc-steps": "~6.0.1",
|
||||
"rc-switch": "~4.1.0",
|
||||
"rc-table": "~7.38.0",
|
||||
"rc-table": "~7.39.0",
|
||||
"rc-tabs": "~14.0.0",
|
||||
"rc-textarea": "~1.6.3",
|
||||
"rc-tooltip": "~6.1.3",
|
||||
@ -353,7 +353,7 @@
|
||||
},
|
||||
{
|
||||
"path": "./dist/antd-with-locales.min.js",
|
||||
"limit": "379 KiB"
|
||||
"limit": "380 KiB"
|
||||
}
|
||||
],
|
||||
"title": "Ant Design",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user