action,
+ },
+];
+
+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(
+
,
+ mountNode,
+);
+```
diff --git a/components/table/index.en-US.md b/components/table/index.en-US.md
index 6187607cf8..bd88e63f38 100644
--- a/components/table/index.en-US.md
+++ b/components/table/index.en-US.md
@@ -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` | -
`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`
filterReset: `Reset`
emptyText: `No Data`
[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` | -
`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`
filterReset: `Reset`
emptyText: `No Data`
[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
diff --git a/components/table/index.zh-CN.md b/components/table/index.zh-CN.md
index 358e81a53a..5fa7dd0658 100644
--- a/components/table/index.zh-CN.md
+++ b/components/table/index.zh-CN.md
@@ -65,32 +65,33 @@ const columns = [
### Table
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| tableLayout | 表格元素的 [table-layout](https://developer.mozilla.org/zh-CN/docs/Web/CSS/table-layout) 属性，设为 `fixed` 表示内容不会影响列的布局 | - \| `auto` \| `fixed` | 无
固定表头/列或使用了 `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: `确定`
filterReset: `重置`
emptyText: `暂无数据`
[默认值](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` | 无
固定表头/列或使用了 `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: `确定`
filterReset: `重置`
emptyText: `暂无数据`
[默认值](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 用法
diff --git a/components/table/style/index.less b/components/table/style/index.less
index b002e9ef92..b12e70af67 100644
--- a/components/table/style/index.less
+++ b/components/table/style/index.less
@@ -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) {
diff --git a/package.json b/package.json
index ddcbfa5954..7dcae97af9 100644
--- a/package.json
+++ b/package.json
@@ -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",