mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 22:36:31 +08:00
Code Issues Actions 26 Packages Projects Releases Wiki Activity

Add scroll and column.fixed document

Browse Source
This commit is contained in:
afc163 2016-03-24 17:47:08 +08:00
parent 0243afb7c5
commit 4760d0b54c
5 changed files with 26 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
components/table/demo/fixed-columns-header.md
View File

@ -4,7 +4,7 @@
适合同时展示有大量数据和数据列。
> 需要给每列都指定宽度 `width`。
> 需要指定 scroll.x 为宽度，或者指定每列宽度 `width`，否则可能有错位问题，
---
@ -14,14 +14,14 @@ import { Table } from 'antd';
const columns = [
{ title: '姓名', width: 100, dataIndex: 'name', key: 'name', fixed: 'left' },
{ title: '年龄', width: 100, dataIndex: 'age', key: 'age', fixed: 'left' },
{ title: '列1', width: 75, dataIndex: 'age', key: '1' },
{ title: '列2', width: 75, dataIndex: 'age', key: '2' },
{ title: '列3', width: 75, dataIndex: 'age', key: '3' },
{ title: '列4', width: 75, dataIndex: 'age', key: '4' },
{ title: '列5', width: 75, dataIndex: 'age', key: '5' },
{ title: '列6', width: 75, dataIndex: 'age', key: '6' },
{ title: '列7', width: 75, dataIndex: 'age', key: '7' },
{ title: '列8', width: 75, dataIndex: 'age', key: '8' },
{ title: '列1', dataIndex: 'age', key: '1' },
{ title: '列2', dataIndex: 'age', key: '2' },
{ title: '列3', dataIndex: 'age', key: '3' },
{ title: '列4', dataIndex: 'age', key: '4' },
{ title: '列5', dataIndex: 'age', key: '5' },
{ title: '列6', dataIndex: 'age', key: '6' },
{ title: '列7', dataIndex: 'age', key: '7' },
{ title: '列8', dataIndex: 'age', key: '8' },
{
title: '操作',
key: 'operation',
@ -43,7 +43,7 @@ for (let i = 0; i < 100; i++) {
const App = React.createClass({
render() {
return <Table columns={columns} dataSource={data} scroll={{ x: true, y: 300 }} />;
return <Table columns={columns} dataSource={data} scroll={{ x: 1000, y: 300 }} />;
}
});

22
components/table/demo/fixed-columns.md
View File

@ -2,9 +2,9 @@
- order: 17
对于列数很多的数据，可以固定前后的列，横向滚动查看其它数据，需要和 `scroll={{ x: true }}` 配合使用。
对于列数很多的数据，可以固定前后的列，横向滚动查看其它数据，需要和 `scroll.x` 配合使用。
> 需要给每列都指定宽度 `width`。
> 需要指定 scroll.x 为宽度，或者指定每列宽度 `width`，否则可能有错位问题，
---
@ -14,14 +14,14 @@ import { Table } from 'antd';
const columns = [
{ title: '姓名', width: 100, dataIndex: 'name', key: 'name', fixed: 'left' },
{ title: '年龄', width: 100, dataIndex: 'age', key: 'age', fixed: 'left' },
{ title: '列1', width: 75, dataIndex: 'age', key: '1' },
{ title: '列2', width: 75, dataIndex: 'age', key: '2' },
{ title: '列3', width: 75, dataIndex: 'age', key: '3' },
{ title: '列4', width: 75, dataIndex: 'age', key: '4' },
{ title: '列5', width: 75, dataIndex: 'age', key: '5' },
{ title: '列6', width: 75, dataIndex: 'age', key: '6' },
{ title: '列7', width: 75, dataIndex: 'age', key: '7' },
{ title: '列8', width: 75, dataIndex: 'age', key: '8' },
{ title: '列1', dataIndex: 'age', key: '1' },
{ title: '列2', dataIndex: 'age', key: '2' },
{ title: '列3', dataIndex: 'age', key: '3' },
{ title: '列4', dataIndex: 'age', key: '4' },
{ title: '列5', dataIndex: 'age', key: '5' },
{ title: '列6', dataIndex: 'age', key: '6' },
{ title: '列7', dataIndex: 'age', key: '7' },
{ title: '列8', dataIndex: 'age', key: '8' },
{
title: '操作',
key: 'operation',
@ -43,7 +43,7 @@ const data = [{
const App = React.createClass({
render() {
return <Table columns={columns} dataSource={data} scroll={{ x: true }} />;
return <Table columns={columns} dataSource={data} scroll={{ x: 1000 }} />;
}
});

5
components/table/index.md
View File

@ -73,13 +73,15 @@ const columns = [{
| bordered | 是否展示外边框和列边框 | Boolean | false |
| showHeader | 是否显示表头 | Boolean | true |
| footer | 表格底部自定义渲染函数 | Function(currentPageData) | |
| scroll | 横向或纵向支持滚动，也可用于指定滚动区域的宽高度：`{{ x: true, y: 300 }}` | Object | - |
### Column
列描述数据对象，是 columns 中的一项。
| 参数 | 说明 | 类型 | 默认值 |
|------------|----------------------------|-----------------|---------------------|---------|
|-----------|----------------------------|-----------------|---------|
| title | 列头显示文字 | String or React.Element | |
| key | React 需要的 key，建议设置 | String | |
| dataIndex | 列数据在数据项中对应的 key | String | |
@ -91,6 +93,7 @@ const columns = [{
| colSpan | 表头列合并,设置为 0 时，不渲染 | Number | |
| width | 列宽度 | String or Number | - |
| className | 列的 className | String | - |
| fixed | 列是否固定，可选 true(和 left 效果一致) 'left' 'right' | Boolean or String | false |
### rowSelection

2
package.json
View File

@ -57,7 +57,7 @@
"rc-slider": "^3.5.1",
"rc-steps": "~1.4.1",
"rc-switch": "~1.3.2",
"rc-table": "~4.0.0-beta.2",
"rc-table": "~4.0.0-beta.3",
"rc-tabs": "~5.8.0",
"rc-time-picker": "~1.1.0",
"rc-tooltip": "~3.3.1",

1
style/components/table.less
View File

@ -16,7 +16,6 @@
table {
width: 100%;
max-width: 100%;
border-collapse: separate;
text-align: left;
}