diff --git a/components/table/demo/fixed-header.md b/components/table/demo/fixed-header.md new file mode 100644 index 0000000000..b5530925a3 --- /dev/null +++ b/components/table/demo/fixed-header.md @@ -0,0 +1,38 @@ +# 固定表头 + +- order: 16 + +方便一页内展示大量数据。 + +--- + +````jsx +import { Table } from 'antd'; + +const columns = [{ + title: '姓名', + dataIndex: 'name', + width: 150, +}, { + title: '年龄', + dataIndex: 'age', + width: 150, +}, { + title: '住址', + dataIndex: 'address', +}]; + +const data = []; +for (let i = 0; i < 100; i++) { + data.push({ + key: i, + name: '李大嘴' + i, + age: 32, + address: '西湖区湖底公园' + i + '号' + }); +} + +ReactDOM.render( + +, mountNode); +```` diff --git a/components/table/index.md b/components/table/index.md index 86426c3bf7..86c3f51f86 100644 --- a/components/table/index.md +++ b/components/table/index.md @@ -69,6 +69,7 @@ const columns = [{ | locale | 设置排序、过滤按钮的文字或 `title` | Object | | [默认值](https://github.com/ant-design/ant-design/issues/575#issuecomment-159169511) | | indentSize | 展示树形数据时,每层缩进的宽度,以 px 为单位 | Number | | 15 | | onRowClick | 处理行点击事件 | Function(record, index) | | 无 | +| useFixedHeader | 是否固定表头 | Boolean | | false | ### Column diff --git a/style/components/table.less b/style/components/table.less index ebb9f9495f..6970bed99d 100644 --- a/style/components/table.less +++ b/style/components/table.less @@ -77,6 +77,15 @@ width: 60px; } + &-header + &-body { + overflow: auto; + height: 360px; + } + + &-header table { + border-radius: @border-radius-base @border-radius-base 0 0; + } + &-loading { position: relative; .@{table-prefix-cls}-body {