Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
## API
- Loading branch information
Showing
16 changed files
with
345 additions
and
214 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,60 +1,113 @@ | ||
| /** | ||
| * | ||
| * @title 更灵活的表格 | ||
| * @description 手写表格的头组件来达到更灵活的配置表格 | ||
| * | ||
| */ | ||
| * | ||
| * @title 表头分组 | ||
| * @description columns[n] 可以内嵌 children，以渲染分组表头。 | ||
| * | ||
| */ | ||
|
|
||
|
|
||
| import Button from 'bee-button'; | ||
| import React, { Component } from 'react'; | ||
| import Table from '../../src'; | ||
| import Button from "bee-button"; | ||
| import React, { Component } from "react"; | ||
| import Table from "../../src"; | ||
|
|
||
| const { ColumnGroup, Column } = Table; | ||
|
|
||
| const data3 = [ | ||
| { a: '北京', b: '北京', c: '250', d: 2, key: '1' }, | ||
| const columns = [ | ||
| { | ||
| title: "Name", | ||
| dataIndex: "name", | ||
| key: "name", | ||
| width: 100, | ||
| fixed: "left" | ||
| }, | ||
| { | ||
| title: "Other", | ||
| children: [ | ||
| { | ||
| title: "Age", | ||
| dataIndex: "age", | ||
| key: "age", | ||
| width: 200 | ||
| }, | ||
| { | ||
| title: "Address", | ||
| children: [ | ||
| { | ||
| title: "Street", | ||
| dataIndex: "street", | ||
| key: "street", | ||
| width: 200 | ||
| }, | ||
| { | ||
| title: "Block", | ||
| children: [ | ||
| { | ||
| title: "Building", | ||
| dataIndex: "building", | ||
| key: "building", | ||
| width: 100 | ||
| }, | ||
| { | ||
| title: "Door No.", | ||
| dataIndex: "number", | ||
| key: "number", | ||
| width: 100 | ||
| } | ||
| ] | ||
| } | ||
| ] | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| title: "Company", | ||
| children: [ | ||
| { | ||
| title: "Company Address", | ||
| dataIndex: "companyAddress", | ||
| key: "companyAddress" | ||
| }, | ||
| { | ||
| title: "Company Name", | ||
| dataIndex: "companyName", | ||
| key: "companyName" | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| title: "Gender", | ||
| dataIndex: "gender", | ||
| key: "gender", | ||
| width: 60, | ||
| fixed: "right" | ||
| } | ||
| ]; | ||
|
|
||
| class Demo3 extends Component { | ||
| render () { | ||
| return ( | ||
| const data = []; | ||
| for (let i = 0; i < 20; i++) { | ||
| data.push({ | ||
| key: i, | ||
| name: "John Brown", | ||
| age: i + 1, | ||
| street: "Lake Park", | ||
| building: "C", | ||
| number: 2035, | ||
| companyAddress: "Lake Street 42", | ||
| companyName: "SoftLake Co", | ||
| gender: "M" | ||
| }); | ||
| } | ||
|
|
||
| <Table data={data3}> | ||
| <ColumnGroup title="地址"> | ||
| <Column | ||
| title="省" | ||
| dataIndex="a" | ||
| key="a" | ||
| width={100} | ||
| /> | ||
| <Column | ||
| id="123" | ||
| title="市" | ||
| dataIndex="b" | ||
| key="b" | ||
| width={100} | ||
| class Demo3 extends Component { | ||
| render() { | ||
| return ( | ||
| <Table | ||
| columns={columns} | ||
| data={data} | ||
| bordered | ||
| scroll={{ x: "130%", y: 240 }} | ||
| /> | ||
| </ColumnGroup> | ||
| <Column | ||
| title="数量" | ||
| dataIndex="c" | ||
| key="c" | ||
| width={200} | ||
| /> | ||
| <Column | ||
| title="操作" | ||
| dataIndex="" | ||
| key="d" | ||
| render={(text, record, index) => { | ||
| return ( | ||
| <Button size="sm" colors="info" style={{ minWidth: 50 }}>增加</Button> | ||
| ); | ||
| }} | ||
| /> | ||
| </Table> | ||
| ) | ||
| } | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export default Demo3; | ||
| export default Demo3; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
Oops, something went wrong.