forked from alibaba-fusion/next
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request alibaba-fusion#1915 from youluna/feat-table-column…
…s-sticky Feat table columns sticky
- Loading branch information
Showing
24 changed files
with
1,080 additions
and
57 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,85 @@ | ||
| # 通过columns设置列 | ||
|
|
||
| - order: 0 | ||
|
|
||
| 通过 `columns` 参数设置列 | ||
|
|
||
| :::lang=en-us | ||
| # Simple | ||
|
|
||
| - order: 0 | ||
|
|
||
| Set table columns via `columns` | ||
| ::: | ||
|
|
||
| --- | ||
|
|
||
| ````jsx | ||
| import { Table } from '@alifd/next'; | ||
|
|
||
| const dataSource = () => { | ||
| const result = []; | ||
| for (let i = 0; i < 5; i++) { | ||
| result.push({ | ||
| title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`}, | ||
| id: 100306660940 + i, | ||
| time: 2000 + i | ||
| }); | ||
| } | ||
| return result; | ||
| }; | ||
| const render = (value, index, record) => { | ||
| return <a href="javascript:;">Remove({record.id})</a>; | ||
| }; | ||
|
|
||
| const columns = [{ | ||
| title: "Title1", | ||
| dataIndex: "id", | ||
| width: 140, | ||
| }, { | ||
| title: "Group2-7", | ||
| children: [{ | ||
| title: "Title2", | ||
| dataIndex: "id", | ||
| width: 140, | ||
| }, { | ||
| title: "Title3", | ||
| dataIndex: "title.name", | ||
| lock: true, | ||
| width: 200 | ||
| }, { | ||
| title: 'Group4-7', | ||
| children: [{ | ||
| title: "Title4", | ||
| dataIndex: "title.name", | ||
| width: 400, | ||
| }, { | ||
| title: "Title5", | ||
| dataIndex: "title.name", | ||
| width: 200 | ||
| }, { | ||
| title: 'tet', | ||
| children: [{ | ||
| title: "Title6", | ||
| dataIndex: "title.name", | ||
| width: 400, | ||
| }, { | ||
| title: "Title7", | ||
| dataIndex: "title.name", | ||
| width: 200 | ||
| }] | ||
| }] | ||
| }] | ||
| }, { | ||
| title: '', | ||
| children: [{ | ||
| title: "Time", | ||
| dataIndex: "time", | ||
| width: 500, | ||
| }, { | ||
| cell: render, | ||
| width: 200 | ||
| }] | ||
| }]; | ||
| ReactDOM.render(<Table columns={columns} dataSource={dataSource()} />, mountNode); | ||
| ```` |
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 |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| # 可展开-锁列 | ||
|
|
||
| - order: 6 | ||
|
|
||
| (IE下不支持) `Table.StickyLock` 模式下，展开行的可视区域宽度与 `Table` 占屏幕宽度保持一致, 本模式下 `expandedRowIndent` 为 `[0, 0]`，不可修改。 | ||
|
|
||
| :::lang=en-us | ||
| # Expandable | ||
|
|
||
| - order: 6 | ||
|
|
||
| (Can't work with IE)When you use `Table.StickyLock`, the width of expanded row will be the same as the width of table take in screen. `expandedRowIndent` will be `[0, 0]`, and it can't be modified. | ||
| ::: | ||
|
|
||
| --- | ||
|
|
||
| ````jsx | ||
| import { Table, Button } from '@alifd/next'; | ||
|
|
||
| const dataSource = () => { | ||
| const result = []; | ||
| for (let i = 0; i < 5; i++) { | ||
| result.push({ | ||
| title: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`, | ||
| id: 100306660940 + i, | ||
| time: 2000 + i | ||
| }); | ||
| } | ||
| return result; | ||
| }, | ||
| expandedRowRender = (record, rowIndex) => { | ||
| if(rowIndex === 0) { | ||
| return record.title; | ||
| } | ||
| return (<Table.StickyLock hasBorder={false} dataSource={dataSource()}> | ||
| <Table.Column title="Id" dataIndex="id" lock width={100}/> | ||
| <Table.Column title="Title" dataIndex="title" width={200}/> | ||
| <Table.Column title="Time" dataIndex="time" width={200}/> | ||
| <Table.Column title="Title" dataIndex="title" width={200}/> | ||
| <Table.Column title="Title" dataIndex="title" width={200}/> | ||
| <Table.Column title="Title" dataIndex="title" width={200}/> | ||
| <Table.Column title="Title" dataIndex="title" width={200}/> | ||
| </Table.StickyLock>) | ||
| }, | ||
| render = (value, index, record) => { | ||
| return <a>Remove({record.id})</a>; | ||
| }; | ||
|
|
||
| class App extends React.Component { | ||
| constructor(props) { | ||
| super(props); | ||
| this.state = { | ||
| dataSource: dataSource() | ||
| }; | ||
| } | ||
|
|
||
| render() { | ||
| return (<div> | ||
| <Table.StickyLock | ||
| expandedIndexSimulate | ||
| dataSource={this.state.dataSource} | ||
| hasBorder={false} | ||
| // expandedRowIndent 仅在IE下才会生效，非IE模式下为[0,0]且不可修改 | ||
| expandedRowIndent={[2, 0]} | ||
| expandedRowRender={expandedRowRender} | ||
| onRowClick={() => console.log('rowClick')} | ||
| > | ||
| <Table.Column title="Id" dataIndex="id" lock width={100}/> | ||
| <Table.Column title="Title" dataIndex="title" width={200}/> | ||
| <Table.Column title="Time" dataIndex="time" width={200}/> | ||
| <Table.Column cell={render} width={300}/> | ||
| </Table.StickyLock> | ||
| </div>); | ||
| } | ||
| } | ||
|
|
||
| ReactDOM.render(<App/>, mountNode); | ||
| ```` |
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
Oops, something went wrong.