mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-07 01:13:58 +08:00
feat: Table new sticky prop (#25939)
* feat: Table new sticky prop * add example * update snapshots * fix typo * fix example and improve less * rename to @zindex-table-fixed-column * fix compile error * fix header z-index * upgrade rc-table and add active style * improve less var * upgrade rc-table and remove hover style Co-authored-by: 二货机器人 <smith3816@gmail.com>
This commit is contained in:
骗你是小猫咪
GitHub
parent
7121760f52
commit
bd02b83da4
@ -329,7 +329,7 @@
|
||||
|
||||
// z-index list, order by `z-index`
|
||||
@zindex-badge: auto;
|
||||
@zindex-table-fixed: auto;
|
||||
@zindex-table-fixed: 2;
|
||||
@zindex-affix: 10;
|
||||
@zindex-back-top: 10;
|
||||
@zindex-picker-panel: 10;
|
||||
@ -610,6 +610,9 @@
|
||||
@table-expand-icon-bg: @component-background;
|
||||
@table-selection-column-width: 60px;
|
||||
@table-selection-extra-right: 0;
|
||||
// Sticky
|
||||
@table-sticky-scroll-bar-bg: fade(#000, 35%);
|
||||
@table-sticky-scroll-bar-radius: 4px;
|
||||
|
||||
// Tag
|
||||
// --
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
100
components/table/demo/sticky.md
Normal file
100
components/table/demo/sticky.md
Normal file
@ -0,0 +1,100 @@
|
||||
---
|
||||
order: 99
|
||||
title:
|
||||
en-US: Fixed header and scroll bar with the page
|
||||
zh-CN: 随页面滚动的固定表头和滚动条
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
对于长表格，需要滚动才能查看表头和滚动条，那么现在可以设置跟随页面固定表头和滚动条。
|
||||
|
||||
## en-US
|
||||
|
||||
For long table，need to scroll to view the header and scroll bar，then you can now set the fixed header and scroll bar to follow the page.
|
||||
|
||||
```jsx
|
||||
import { Table } from 'antd';
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: 'Full Name',
|
||||
width: 100,
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
fixed: 'left',
|
||||
},
|
||||
{
|
||||
title: 'Age',
|
||||
width: 100,
|
||||
dataIndex: 'age',
|
||||
key: 'age',
|
||||
fixed: 'left',
|
||||
},
|
||||
{
|
||||
title: 'Column 1',
|
||||
dataIndex: 'address',
|
||||
key: '1',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: 'Column 2',
|
||||
dataIndex: 'address',
|
||||
key: '2',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: 'Column 3',
|
||||
dataIndex: 'address',
|
||||
key: '3',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: 'Column 4',
|
||||
dataIndex: 'address',
|
||||
key: '4',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: 'Column 5',
|
||||
dataIndex: 'address',
|
||||
key: '5',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: 'Column 6',
|
||||
dataIndex: 'address',
|
||||
key: '6',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: 'Column 7',
|
||||
dataIndex: 'address',
|
||||
key: '7',
|
||||
width: 150,
|
||||
},
|
||||
{ title: 'Column 8', dataIndex: 'address', key: '8' },
|
||||
{
|
||||
title: 'Action',
|
||||
key: 'operation',
|
||||
fixed: 'right',
|
||||
width: 100,
|
||||
render: () => <a>action</a>,
|
||||
},
|
||||
];
|
||||
|
||||
const data = [];
|
||||
for (let i = 0; i < 100; i++) {
|
||||
data.push({
|
||||
key: i,
|
||||
name: `Edrward ${i}`,
|
||||
age: 32,
|
||||
address: `London Park no. ${i}`,
|
||||
});
|
||||
}
|
||||
|
||||
ReactDOM.render(
|
||||
<Table columns={columns} dataSource={data} scroll={{ x: 1500 }} sticky />,
|
||||
mountNode,
|
||||
);
|
||||
```
|
||||
@ -58,32 +58,33 @@ const columns = [
|
||||
|
||||
### Table
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| tableLayout | The [table-layout](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout) attribute of table element | - \| `auto` \| `fixed` | -<hr />`fixed` when header/columns are fixed, or using `column.ellipsis` |
|
||||
| bordered | Whether to show all table borders | boolean | false |
|
||||
| columns | Columns of table | [ColumnsType](#Column)\[] | - |
|
||||
| components | Override default table elements | [TableComponents](https://git.io/fANxz) | - |
|
||||
| dataSource | Data record array to be displayed | object\[] | - |
|
||||
| expandable | Config expandable content | [expandable](#expandable) | - |
|
||||
| footer | Table footer renderer | function(currentPageData) | - |
|
||||
| loading | Loading status of table | boolean \| [object](/components/spin/#API) ([more](https://github.com/ant-design/ant-design/issues/4544#issuecomment-271533135)) | false |
|
||||
| locale | The i18n text including filter, sort, empty text, etc | object | filterConfirm: `Ok` <br> filterReset: `Reset` <br> emptyText: `No Data` <br> [Default](https://github.com/ant-design/ant-design/blob/4ad1ccac277782d7ed14f7e5d02d6346aae0db67/components/locale/default.tsx#L19) |
|
||||
| pagination | Config of pagination. You can ref table pagination [config](#pagination) or full [`pagination`](/components/pagination/) document, hide it by setting it to `false` | object | - |
|
||||
| rowClassName | Row's className | function(record, index): string | - |
|
||||
| rowKey | Row's unique key, could be a string or function that returns a string | string \| function(record): string | `key` |
|
||||
| rowSelection | Row selection [config](#rowSelection) | object | - |
|
||||
| scroll | Whether the table can be scrollable, [config](#scroll) | object | - |
|
||||
| showHeader | Whether to show table header | boolean | true |
|
||||
| size | Size of table | `default` \| `middle` \| `small` | `default` |
|
||||
| summary | Summary content | (currentData) => ReactNode | - |
|
||||
| title | Table title renderer | function(currentPageData) | - |
|
||||
| onChange | Callback executed when pagination, filters or sorter is changed | function(pagination, filters, sorter, extra: { currentDataSource: [], action: `paginate` \| `sort` \| `filter` }) | - |
|
||||
| onHeaderRow | Set props on per header row | function(column, index) | - |
|
||||
| onRow | Set props on per row | function(record, index) | - |
|
||||
| getPopupContainer | The render container of dropdowns in table | (triggerNode) => HTMLElement | () => TableHtmlElement |
|
||||
| sortDirections | Supported sort way, could be `ascend`, `descend` | Array | \[`ascend`, `descend`] |
|
||||
| showSorterTooltip | The header show next sorter direction tooltip | boolean | true |
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| tableLayout | The [table-layout](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout) attribute of table element | - \| `auto` \| `fixed` | -<hr />`fixed` when header/columns are fixed, or using `column.ellipsis` | |
|
||||
| bordered | Whether to show all table borders | boolean | false | |
|
||||
| columns | Columns of table | [ColumnsType](#Column)\[] | - | |
|
||||
| components | Override default table elements | [TableComponents](https://git.io/fANxz) | - | |
|
||||
| dataSource | Data record array to be displayed | object\[] | - | |
|
||||
| expandable | Config expandable content | [expandable](#expandable) | - | |
|
||||
| footer | Table footer renderer | function(currentPageData) | - | |
|
||||
| loading | Loading status of table | boolean \| [object](/components/spin/#API) ([more](https://github.com/ant-design/ant-design/issues/4544#issuecomment-271533135)) | false | |
|
||||
| locale | The i18n text including filter, sort, empty text, etc | object | filterConfirm: `Ok` <br> filterReset: `Reset` <br> emptyText: `No Data` <br> [Default](https://github.com/ant-design/ant-design/blob/4ad1ccac277782d7ed14f7e5d02d6346aae0db67/components/locale/default.tsx#L19) | |
|
||||
| pagination | Config of pagination. You can ref table pagination [config](#pagination) or full [`pagination`](/components/pagination/) document, hide it by setting it to `false` | object | - | |
|
||||
| rowClassName | Row's className | function(record, index): string | - | |
|
||||
| rowKey | Row's unique key, could be a string or function that returns a string | string \| function(record): string | `key` | |
|
||||
| rowSelection | Row selection [config](#rowSelection) | object | - | |
|
||||
| scroll | Whether the table can be scrollable, [config](#scroll) | object | - | |
|
||||
| showHeader | Whether to show table header | boolean | true | |
|
||||
| size | Size of table | `default` \| `middle` \| `small` | `default` | |
|
||||
| summary | Summary content | (currentData) => ReactNode | - | |
|
||||
| title | Table title renderer | function(currentPageData) | - | |
|
||||
| onChange | Callback executed when pagination, filters or sorter is changed | function(pagination, filters, sorter, extra: { currentDataSource: [], action: `paginate` \| `sort` \| `filter` }) | - | |
|
||||
| onHeaderRow | Set props on per header row | function(column, index) | - | |
|
||||
| onRow | Set props on per row | function(record, index) | - | |
|
||||
| getPopupContainer | The render container of dropdowns in table | (triggerNode) => HTMLElement | () => TableHtmlElement | |
|
||||
| sortDirections | Supported sort way, could be `ascend`, `descend` | Array | \[`ascend`, `descend`] | |
|
||||
| showSorterTooltip | The header show next sorter direction tooltip | boolean | true | |
|
||||
| sticky | Set sticky header and scroll bar | boolean \| `{offsetHeader?: number, offsetScroll?: number}` | - | 4.6.0 |
|
||||
|
||||
#### onRow usage
|
||||
|
||||
|
||||
@ -65,32 +65,33 @@ const columns = [
|
||||
|
||||
### Table
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| tableLayout | 表格元素的 [table-layout](https://developer.mozilla.org/zh-CN/docs/Web/CSS/table-layout) 属性，设为 `fixed` 表示内容不会影响列的布局 | - \| `auto` \| `fixed` | 无<hr />固定表头/列或使用了 `column.ellipsis` 时，默认值为 `fixed` |
|
||||
| bordered | 是否展示外边框和列边框 | boolean | false |
|
||||
| columns | 表格列的配置描述，具体项见下表 | [ColumnsType](#Column)\[] | - |
|
||||
| components | 覆盖默认的 table 元素 | [TableComponents](https://git.io/fANxz) | - |
|
||||
| dataSource | 数据数组 | object\[] | - |
|
||||
| expandable | 配置展开属性 | [expandable](#expandable) | - |
|
||||
| footer | 表格尾部 | function(currentPageData) | - |
|
||||
| loading | 页面是否加载中 | boolean \| [object](/components/spin/#API) ([更多](https://github.com/ant-design/ant-design/issues/4544#issuecomment-271533135)) | false |
|
||||
| locale | 默认文案设置，目前包括排序、过滤、空数据文案 | object | filterConfirm: `确定` <br> filterReset: `重置` <br> emptyText: `暂无数据` <br> [默认值](https://github.com/ant-design/ant-design/blob/4ad1ccac277782d7ed14f7e5d02d6346aae0db67/components/locale/default.tsx#L19) |
|
||||
| pagination | 分页器，参考[配置项](#pagination)或 [pagination](/components/pagination/) 文档，设为 false 时不展示和进行分页 | object | - |
|
||||
| rowClassName | 表格行的类名 | function(record, index): string | - |
|
||||
| rowKey | 表格行 key 的取值，可以是字符串或一个函数 | string \| function(record): string | `key` |
|
||||
| rowSelection | 表格行是否可选择，[配置项](#rowSelection) | object | - |
|
||||
| scroll | 表格是否可滚动，也可以指定滚动区域的宽、高，[配置项](#scroll) | object | - |
|
||||
| showHeader | 是否显示表头 | boolean | true |
|
||||
| size | 表格大小 | `default` \| `middle` \| `small` | default |
|
||||
| summary | 总结栏 | (currentData) => ReactNode | - |
|
||||
| title | 表格标题 | function(currentPageData) | - |
|
||||
| onChange | 分页、排序、筛选变化时触发 | function(pagination, filters, sorter, extra: { currentDataSource: [], action: `paginate` \| `sort` \| `filter` }) | - |
|
||||
| onHeaderRow | 设置头部行属性 | function(column, index) | - |
|
||||
| onRow | 设置行属性 | function(record, index) | - |
|
||||
| getPopupContainer | 设置表格内各类浮层的渲染节点，如筛选菜单 | (triggerNode) => HTMLElement | () => TableHtmlElement |
|
||||
| sortDirections | 支持的排序方式，取值为 `ascend` `descend` | Array | \[`ascend`, `descend`] |
|
||||
| showSorterTooltip | 表头是否显示下一次排序的 tooltip 提示 | boolean | true |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| tableLayout | 表格元素的 [table-layout](https://developer.mozilla.org/zh-CN/docs/Web/CSS/table-layout) 属性，设为 `fixed` 表示内容不会影响列的布局 | - \| `auto` \| `fixed` | 无<hr />固定表头/列或使用了 `column.ellipsis` 时，默认值为 `fixed` | |
|
||||
| bordered | 是否展示外边框和列边框 | boolean | false | |
|
||||
| columns | 表格列的配置描述，具体项见下表 | [ColumnsType](#Column)\[] | - | |
|
||||
| components | 覆盖默认的 table 元素 | [TableComponents](https://git.io/fANxz) | - | |
|
||||
| dataSource | 数据数组 | object\[] | - | |
|
||||
| expandable | 配置展开属性 | [expandable](#expandable) | - | |
|
||||
| footer | 表格尾部 | function(currentPageData) | - | |
|
||||
| loading | 页面是否加载中 | boolean \| [object](/components/spin/#API) ([更多](https://github.com/ant-design/ant-design/issues/4544#issuecomment-271533135)) | false | |
|
||||
| locale | 默认文案设置，目前包括排序、过滤、空数据文案 | object | filterConfirm: `确定` <br> filterReset: `重置` <br> emptyText: `暂无数据` <br> [默认值](https://github.com/ant-design/ant-design/blob/4ad1ccac277782d7ed14f7e5d02d6346aae0db67/components/locale/default.tsx#L19) | |
|
||||
| pagination | 分页器，参考[配置项](#pagination)或 [pagination](/components/pagination/) 文档，设为 false 时不展示和进行分页 | object | - | |
|
||||
| rowClassName | 表格行的类名 | function(record, index): string | - | |
|
||||
| rowKey | 表格行 key 的取值，可以是字符串或一个函数 | string \| function(record): string | `key` | |
|
||||
| rowSelection | 表格行是否可选择，[配置项](#rowSelection) | object | - | |
|
||||
| scroll | 表格是否可滚动，也可以指定滚动区域的宽、高，[配置项](#scroll) | object | - | |
|
||||
| showHeader | 是否显示表头 | boolean | true | |
|
||||
| size | 表格大小 | `default` \| `middle` \| `small` | default | |
|
||||
| summary | 总结栏 | (currentData) => ReactNode | - | |
|
||||
| title | 表格标题 | function(currentPageData) | - | |
|
||||
| onChange | 分页、排序、筛选变化时触发 | function(pagination, filters, sorter, extra: { currentDataSource: [], action: `paginate` \| `sort` \| `filter` }) | - | |
|
||||
| onHeaderRow | 设置头部行属性 | function(column, index) | - | |
|
||||
| onRow | 设置行属性 | function(record, index) | - | |
|
||||
| getPopupContainer | 设置表格内各类浮层的渲染节点，如筛选菜单 | (triggerNode) => HTMLElement | () => TableHtmlElement | |
|
||||
| sortDirections | 支持的排序方式，取值为 `ascend` `descend` | Array | \[`ascend`, `descend`] | |
|
||||
| showSorterTooltip | 表头是否显示下一次排序的 tooltip 提示 | boolean | true | |
|
||||
| sticky | 设置粘性头部和滚动条 | boolean \| `{offsetHeader?: number, offsetScroll?: number}` | - | 4.6.0 |
|
||||
|
||||
#### onRow 用法
|
||||
|
||||
|
||||
@ -9,6 +9,8 @@
|
||||
@table-header-icon-color: #bfbfbf;
|
||||
@table-header-icon-color-hover: darken(@table-header-icon-color, 10%);
|
||||
@table-header-sort-active-filter-bg: lighten(@table-header-sort-active-bg, 2%);
|
||||
@table-sticky-zindex: @zindex-table-fixed + 1;
|
||||
@table-sticky-scroll-bar-active-bg: fade(@table-sticky-scroll-bar-bg, 80%);
|
||||
|
||||
.@{table-prefix-cls}-wrapper {
|
||||
max-width: 100%;
|
||||
@ -516,7 +518,7 @@
|
||||
&-cell-fix-right {
|
||||
position: -webkit-sticky !important;
|
||||
position: sticky !important;
|
||||
z-index: 2;
|
||||
z-index: @zindex-table-fixed;
|
||||
background: @table-bg;
|
||||
}
|
||||
|
||||
@ -595,6 +597,36 @@
|
||||
box-shadow: inset -10px 0 8px -8px darken(@shadow-color, 5%);
|
||||
}
|
||||
}
|
||||
&-sticky {
|
||||
&-header {
|
||||
position: sticky;
|
||||
z-index: @table-sticky-zindex;
|
||||
}
|
||||
&-scroll {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
z-index: @table-sticky-zindex;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: lighten(@border-color-split, 80%);
|
||||
border-top: 1px solid @border-color-split;
|
||||
opacity: 0.6;
|
||||
&:hover {
|
||||
transform-origin: center bottom;
|
||||
}
|
||||
&-bar {
|
||||
height: 8px;
|
||||
background-color: @table-sticky-scroll-bar-bg;
|
||||
border-radius: @table-sticky-scroll-bar-radius;
|
||||
&:hover {
|
||||
background-color: @table-sticky-scroll-bar-active-bg;
|
||||
}
|
||||
&-active {
|
||||
background-color: @table-sticky-scroll-bar-active-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (-ms-high-contrast: none) {
|
||||
|
||||
@ -138,7 +138,7 @@
|
||||
"rc-slider": "~9.3.0",
|
||||
"rc-steps": "~4.1.0",
|
||||
"rc-switch": "~3.2.0",
|
||||
"rc-table": "~7.8.0",
|
||||
"rc-table": "~7.9.2",
|
||||
"rc-tabs": "~11.6.0",
|
||||
"rc-textarea": "~0.3.0",
|
||||
"rc-tooltip": "~4.2.0",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user