Table 表格

展示行列数据。

何时使用

  • 当有大量结构化的数据需要展现时;
  • 当需要对数据进行排序、搜索、分页、自定义操作等复杂行为时。

如何使用

指定表格的数据源 dataSource 为一个数组。

  1. const dataSource = [{
  2. key: '1',
  3. name: '胡彦斌',
  4. age: 32,
  5. address: '西湖区湖底公园1号'
  6. }, {
  7. key: '2',
  8. name: '胡彦祖',
  9. age: 42,
  10. address: '西湖区湖底公园1号'
  11. }];
  12. const columns = [{
  13. title: '姓名',
  14. dataIndex: 'name',
  15. key: 'name',
  16. }, {
  17. title: '年龄',
  18. dataIndex: 'age',
  19. key: 'age',
  20. }, {
  21. title: '住址',
  22. dataIndex: 'address',
  23. key: 'address',
  24. }];
  25. <Table dataSource={dataSource} columns={columns} />

代码演示

基本用法

简单的表格,最后一列是各种操作。

Table表格 - 图1

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Table, Icon, Divider } from 'choerodon-ui';
  4. const columns = [{
  5. title: 'Name',
  6. dataIndex: 'name',
  7. key: 'name',
  8. render: text => <a href="#">{text}</a>,
  9. }, {
  10. title: 'Age',
  11. dataIndex: 'age',
  12. key: 'age',
  13. }, {
  14. title: 'Address',
  15. dataIndex: 'address',
  16. key: 'address',
  17. }, {
  18. title: '',
  19. key: 'action',
  20. render: (text, record) => (
  21. <span>
  22. <a href="#">Action {record.name}</a>
  23. <Divider type="vertical" />
  24. <a href="#">Delete</a>
  25. <Divider type="vertical" />
  26. <a href="#" className="c7n-dropdown-link">
  27. More actions <Icon type="down" />
  28. </a>
  29. </span>
  30. ),
  31. }];
  32. const data = [{
  33. key: '1',
  34. name: 'John Brown',
  35. age: 32,
  36. address: 'New York No. 1 Lake Park',
  37. }, {
  38. key: '2',
  39. name: 'Jim Green',
  40. age: 42,
  41. address: 'London No. 1 Lake Park',
  42. }, {
  43. key: '3',
  44. name: 'Joe Black',
  45. age: 32,
  46. address: 'Sidney No. 1 Lake Park',

带边框

添加表格边框线,页头和页脚。

Table表格 - 图2

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Table } from 'choerodon-ui';
  4. const columns = [{
  5. title: 'Name',
  6. dataIndex: 'name',
  7. render: text => <a href="#">{text}</a>,
  8. }, {
  9. title: 'Cash Assets',
  10. className: 'column-money',
  11. dataIndex: 'money',
  12. }, {
  13. title: 'Address',
  14. dataIndex: 'address',
  15. }];
  16. const data = [{
  17. key: '1',
  18. name: 'John Brown',
  19. money: '¥300,000.00',
  20. address: 'New York No. 1 Lake Park',
  21. }, {
  22. key: '2',
  23. name: 'Jim Green',
  24. money: '¥1,256,000.00',
  25. address: 'London No. 1 Lake Park',
  26. }, {
  27. key: '3',
  28. name: 'Joe Black',
  29. money: '¥120,000.00',
  30. address: 'Sidney No. 1 Lake Park',
  31. }];
  32. ReactDOM.render(
  33. <Table
  34. columns={columns}
  35. dataSource={data}
  36. bordered
  37. title={() => 'Header'}
  38. footer={() => 'Footer'}
  39. />,
  40. document.getElementById('container'));

JSX 风格的 API

使用 JSX 风格的 API(2.5.0 以后引入)

这个只是一个描述 columns 的语法糖,所以你不能用其他组件去包裹 ColumnColumnGroup

Table表格 - 图3

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Table, Icon, Divider } from 'choerodon-ui';
  4. const { Column, ColumnGroup } = Table;
  5. const data = [{
  6. key: '1',
  7. firstName: 'John',
  8. lastName: 'Brown',
  9. age: 32,
  10. address: 'New York No. 1 Lake Park',
  11. }, {
  12. key: '2',
  13. firstName: 'Jim',
  14. lastName: 'Green',
  15. age: 42,
  16. address: 'London No. 1 Lake Park',
  17. }, {
  18. key: '3',
  19. firstName: 'Joe',
  20. lastName: 'Black',
  21. age: 32,
  22. address: 'Sidney No. 1 Lake Park',
  23. }];
  24. ReactDOM.render(
  25. <Table dataSource={data}>
  26. <ColumnGroup title="Name">
  27. <Column
  28. title="First Name"
  29. dataIndex="firstName"
  30. key="firstName"
  31. />
  32. <Column
  33. title="Last Name"
  34. dataIndex="lastName"
  35. key="lastName"
  36. />
  37. </ColumnGroup>
  38. <Column
  39. title="Age"
  40. dataIndex="age"
  41. key="age"
  42. />
  43. <Column
  44. title="Address"
  45. dataIndex="address"

可选择

第一列是联动的选择框。

默认点击 checkbox 触发选择行为,需要点击行触发可以参考例子:https://codesandbox.io/s/000vqw38rl

Table表格 - 图4

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Table } from 'choerodon-ui';
  4. const columns = [{
  5. title: 'Name',
  6. dataIndex: 'name',
  7. render: text => <a href="#">{text}</a>,
  8. }, {
  9. title: 'Age',
  10. dataIndex: 'age',
  11. }, {
  12. title: 'Address',
  13. dataIndex: 'address',
  14. }];
  15. const data = [{
  16. key: '1',
  17. name: 'John Brown',
  18. age: 32,
  19. address: 'New York No. 1 Lake Park',
  20. }, {
  21. key: '2',
  22. name: 'Jim Green',
  23. age: 42,
  24. address: 'London No. 1 Lake Park',
  25. }, {
  26. key: '3',
  27. name: 'Joe Black',
  28. age: 32,
  29. address: 'Sidney No. 1 Lake Park',
  30. }, {
  31. key: '4',
  32. name: 'Disabled User',
  33. age: 99,
  34. address: 'Sidney No. 1 Lake Park',
  35. }];
  36. // rowSelection object indicates the need for row selection
  37. const rowSelection = {
  38. onChange: (selectedRowKeys, selectedRows) => {
  39. console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  40. },
  41. getCheckboxProps: record => ({
  42. disabled: record.name === 'Disabled User', // Column configuration not to be checked
  43. name: record.name,
  44. }),
  45. selections: true,
  46. };

选择和操作

选择后进行操作,完成后清空选择,通过 rowSelection.selectedRowKeys 来控制选中项。

Table表格 - 图5

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Table, Button } from 'choerodon-ui';
  4. const columns = [{
  5. title: 'Name',
  6. dataIndex: 'name',
  7. }, {
  8. title: 'Age',
  9. dataIndex: 'age',
  10. }, {
  11. title: 'Address',
  12. dataIndex: 'address',
  13. }];
  14. const data = [];
  15. for (let i = 0; i < 46; i++) {
  16. data.push({
  17. key: i,
  18. name: `Edward King ${i}`,
  19. age: 32,
  20. address: `London, Park Lane no. ${i}`,
  21. });
  22. }
  23. class App extends React.Component {
  24. state = {
  25. selectedRowKeys: [], // Check here to configure the default column
  26. loading: false,
  27. };
  28. start = () => {
  29. this.setState({ loading: true });
  30. // ajax request after empty completing
  31. setTimeout(() => {
  32. this.setState({
  33. selectedRowKeys: [],
  34. loading: false,
  35. });
  36. }, 1000);
  37. }
  38. onSelectChange = (selectedRowKeys) => {
  39. console.log('selectedRowKeys changed: ', selectedRowKeys);
  40. this.setState({ selectedRowKeys });
  41. }
  42. render() {

自定义选择项

通过 rowSelection.selections 自定义选择项,默认不显示下拉选项,设为 true 时显示默认选择项。

Table表格 - 图6

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Table } from 'choerodon-ui';
  4. const columns = [{
  5. title: 'Name',
  6. dataIndex: 'name',
  7. }, {
  8. title: 'Age',
  9. dataIndex: 'age',
  10. }, {
  11. title: 'Address',
  12. dataIndex: 'address',
  13. }];
  14. const data = [];
  15. for (let i = 0; i < 46; i++) {
  16. data.push({
  17. key: i,
  18. name: `Edward King ${i}`,
  19. age: 32,
  20. address: `London, Park Lane no. ${i}`,
  21. });
  22. }
  23. class App extends React.Component {
  24. state = {
  25. selectedRowKeys: [], // Check here to configure the default column
  26. }
  27. onSelectChange = (selectedRowKeys) => {
  28. console.log('selectedRowKeys changed: ', selectedRowKeys);
  29. this.setState({ selectedRowKeys });
  30. }
  31. render() {
  32. const { selectedRowKeys } = this.state;
  33. const rowSelection = {
  34. selectedRowKeys,
  35. onChange: this.onSelectChange,
  36. hideDefaultSelections: true,
  37. selections: [{
  38. key: 'all-data',
  39. text: 'Select All Data',
  40. onSelect: () => {
  41. this.setState({
  42. selectedRowKeys: [...Array(46).keys()], // 0...45
  43. });

下拉菜单筛选

设置 filterBar 属性为false来显示下拉过滤菜单。

对某一列数据进行筛选,使用列的 filters 属性来指定需要筛选菜单的列,onFilter 用于筛选当前数据,filterMultiple 用于指定多选和单选。

Table表格 - 图7

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Table } from 'choerodon-ui';
  4. const columns = [{
  5. title: 'Name',
  6. dataIndex: 'name',
  7. filters: [{
  8. text: 'Joe',
  9. value: 'Joe',
  10. }, {
  11. text: 'Jim',
  12. value: 'Jim',
  13. }, {
  14. text: 'Last Name',
  15. value: 'last',
  16. children: [{
  17. text: 'Green',
  18. value: 'Green',
  19. }, {
  20. text: 'Black',
  21. value: 'Black',
  22. }],
  23. }],
  24. // specify the condition of filtering result
  25. // here is that finding the name started with `value`
  26. onFilter: (value, record) => record.name.indexOf(value) > -1,
  27. }, {
  28. title: 'Age',
  29. dataIndex: 'age',
  30. filters: [],
  31. onFilter: (value, record) => record.name.indexOf(value) === 0,
  32. }, {
  33. title: 'Address',
  34. dataIndex: 'address',
  35. filters: [{
  36. text: 'London',
  37. value: 'London',
  38. }, {
  39. text: 'New York',
  40. value: 'New York',
  41. }],
  42. filterMultiple: true,
  43. onFilter: (value, record) => record.address.indexOf(value) === 0,
  44. }];
  45. const data = [{
  46. key: '1',

筛选和排序

对某一列数据进行筛选,使用列的 filters 属性来指定需要筛选菜单的列,onFilter 用于筛选当前数据,filterMultiple 用于指定多选和单选。

对某一列数据进行排序,通过指定列的 sorter 函数即可启动排序按钮。sorter: function(a, b) { ... }, a、b 为比较的两个列数据。

使用 defaultSortOrder 属性,设置列的默认排序顺序。

Table表格 - 图8

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Table } from 'choerodon-ui';
  4. const columns = [{
  5. title: 'Name',
  6. dataIndex: 'name',
  7. filters: [{
  8. text: 'Joe',
  9. value: 'Joe',
  10. }, {
  11. text: 'Jim',
  12. value: 'Jim',
  13. }],
  14. // specify the condition of filtering result
  15. // here is that finding the name started with `value`
  16. onFilter: (value, record) => record.name.indexOf(value) === 0,
  17. sorter: (a, b) => a.name.length - b.name.length,
  18. }, {
  19. title: 'Age',
  20. dataIndex: 'age',
  21. defaultSortOrder: 'descend',
  22. sorter: (a, b) => a.age - b.age,
  23. filters: [],
  24. onFilter: (value, record) => record.age.toString().indexOf(value) === 0,
  25. }, {
  26. title: 'Address',
  27. dataIndex: 'address',
  28. filters: [{
  29. text: 'London',
  30. value: 'London',
  31. }, {
  32. text: 'New York',
  33. value: 'New York',
  34. }],
  35. filterMultiple: false,
  36. onFilter: (value, record) => record.address.indexOf(value) === 0,
  37. sorter: (a, b) => a.address.length - b.address.length,
  38. }];
  39. const data = [{
  40. key: '1',
  41. name: 'John Brown',
  42. age: 32,
  43. address: 'New York No. 1 Lake Park',
  44. }, {
  45. key: '2',
  46. name: 'Jim Green',

可控的筛选和排序

使用受控属性对筛选和排序状态进行控制。

  1. columns 中定义了 filteredValue 和 sortOrder 属性即视为受控模式。
  2. 只支持同时对一列进行排序,请保证只有一列的 sortOrder 属性是生效的。
  3. 务必指定 column.key

Table表格 - 图9

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Table, Button } from 'choerodon-ui';
  4. const data = [{
  5. key: '1',
  6. name: 'John Brown',
  7. age: 32,
  8. address: 'New York No. 1 Lake Park',
  9. }, {
  10. key: '2',
  11. name: 'Jim Green',
  12. age: 42,
  13. address: 'London No. 1 Lake Park',
  14. }, {
  15. key: '3',
  16. name: 'Joe Black',
  17. age: 32,
  18. address: 'Sidney No. 1 Lake Park',
  19. }, {
  20. key: '4',
  21. name: 'Jim Red',
  22. age: 32,
  23. address: 'London No. 2 Lake Park',
  24. }];
  25. function findText(value, filters) {
  26. const found = filters.find(filter => filter.value === value);
  27. return found ? found.text : value;
  28. }
  29. class App extends React.Component {
  30. state = {
  31. filteredInfo: { name: ['1'], address: ['a'] },
  32. barFilters: ['No. 1'],
  33. sortedInfo: null,
  34. }
  35. handleChange = (pagination, filters, sorter, barFilters) => {
  36. console.log('Various parameters', pagination, filters, sorter, barFilters);
  37. this.setState({
  38. filteredInfo: filters,
  39. sortedInfo: sorter,
  40. barFilters,
  41. });
  42. }
  43. clearFilters = () => {

自定义筛选菜单

通过 filterDropdownfilterDropdownVisiblefilterDropdownVisibleChange 定义自定义的列筛选功能,并实现一个搜索列的示例。

Table表格 - 图10

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Table, Input, Button, Icon } from 'choerodon-ui';
  4. const data = [
  5. {
  6. key: '1',
  7. name: 'John Brown',
  8. age: 32,
  9. address: 'New York No. 1 Lake Park',
  10. },
  11. {
  12. key: '2',
  13. name: 'Joe Black',
  14. age: 42,
  15. address: 'London No. 1 Lake Park',
  16. },
  17. {
  18. key: '3',
  19. name: 'Jim Green',
  20. age: 32,
  21. address: 'Sidney No. 1 Lake Park',
  22. },
  23. {
  24. key: '4',
  25. name: 'Jim Red',
  26. age: 32,
  27. address: 'London No. 2 Lake Park',
  28. },
  29. ];
  30. class App extends React.Component {
  31. state = {
  32. filterDropdownVisible: false,
  33. data,
  34. searchText: '',
  35. filtered: false,
  36. };
  37. onInputChange = e => {
  38. this.setState({ searchText: e.target.value });
  39. };
  40. onSearch = () => {
  41. const { searchText } = this.state;
  42. const reg = new RegExp(searchText, 'gi');
  43. this.setState({
  44. filterDropdownVisible: false,

远程加载数据

这个例子通过简单的 ajax 读取方式,演示了如何从服务端读取并展现数据,具有筛选、排序等功能以及页面 loading 效果。开发者可以自行接入其他数据处理方式。

另外,本例也展示了筛选排序功能如何交给服务端实现,列不需要指定具体的 onFiltersorter 函数,而是在把筛选和排序的参数发到服务端来处理。

注意,此示例使用 模拟接口,展示数据可能不准确,请打开网络面板查看请求。

Table表格 - 图11

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Table } from 'choerodon-ui';
  4. import reqwest from 'reqwest';
  5. const columns = [
  6. {
  7. title: 'Name',
  8. dataIndex: 'name',
  9. sorter: true,
  10. render: (name) => `${name.first} ${name.last}`,
  11. width: '20%',
  12. },
  13. {
  14. title: 'Gender',
  15. dataIndex: 'gender',
  16. filters: [
  17. { text: 'Male', value: 'male' },
  18. { text: 'Female', value: 'female' },
  19. ],
  20. width: '20%',
  21. },
  22. {
  23. title: 'Email',
  24. dataIndex: 'email',
  25. },
  26. ];
  27. class App extends React.Component {
  28. state = {
  29. data: [],
  30. pagination: {},
  31. loading: false,
  32. };
  33. handleTableChange = (pagination, filters, sorter) => {
  34. const pager = { ...this.state.pagination };
  35. pager.current = pagination.current;
  36. this.setState({
  37. pagination: pager,
  38. });
  39. this.fetch({
  40. results: pagination.pageSize,
  41. page: pagination.current,
  42. sortField: sorter.field,
  43. sortOrder: sorter.order,
  44. ...filters,
  45. });

紧凑型

三种紧凑型的列表,小型列表只用于对话框内。

Table表格 - 图12

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Table } from 'choerodon-ui';
  4. const columns = [{
  5. title: 'Name',
  6. dataIndex: 'name',
  7. }, {
  8. title: 'Age',
  9. dataIndex: 'age',
  10. }, {
  11. title: 'Address',
  12. dataIndex: 'address',
  13. }];
  14. const data = [{
  15. key: '1',
  16. name: 'John Brown',
  17. age: 32,
  18. address: 'New York No. 1 Lake Park',
  19. }, {
  20. key: '2',
  21. name: 'Jim Green',
  22. age: 42,
  23. address: 'London No. 1 Lake Park',
  24. }, {
  25. key: '3',
  26. name: 'Joe Black',
  27. age: 32,
  28. address: 'Sidney No. 1 Lake Park',
  29. }];
  30. ReactDOM.render(
  31. <div>
  32. <h4>Large size table</h4>
  33. <Table columns={columns} dataSource={data} size="large" />
  34. <h4>Small size table</h4>
  35. <Table columns={columns} dataSource={data} size="small" />
  36. </div>,
  37. document.getElementById('container'));

可展开

当表格内容较多不能一次性完全展示时。

Table表格 - 图13

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Table } from 'choerodon-ui';
  4. const columns = [
  5. { title: 'Name', dataIndex: 'name', key: 'name' },
  6. { title: 'Age', dataIndex: 'age', key: 'age' },
  7. { title: 'Address', dataIndex: 'address', key: 'address' },
  8. { title: 'Action', dataIndex: '', key: 'x', render: () => <a href="#">Delete</a> },
  9. ];
  10. const data = [
  11. { key: 1, name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park', description: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.' },
  12. { key: 2, name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park', description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.' },
  13. { key: 3, name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park', description: 'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.' },
  14. ];
  15. ReactDOM.render(
  16. <Table
  17. columns={columns}
  18. expandedRowRender={record => <p style={{ margin: 0 }}>{record.description}</p>}
  19. dataSource={data}
  20. />,
  21. document.getElementById('container'));

表格行/列合并

表头只支持列合并,使用 column 里的 colSpan 进行设置。

表格支持行/列合并,使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时,设置的表格不会渲染。

Table表格 - 图14

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Table } from 'choerodon-ui';
  4. // In the fifth row, other columns are merged into first column
  5. // by setting it's colSpan to be 0
  6. const renderContent = (value, row, index) => {
  7. const obj = {
  8. children: value,
  9. props: {},
  10. };
  11. if (index === 4) {
  12. obj.props.colSpan = 0;
  13. }
  14. return obj;
  15. };
  16. const columns = [{
  17. title: 'Name',
  18. dataIndex: 'name',
  19. render: (text, row, index) => {
  20. if (index < 4) {
  21. return <a href="#">{text}</a>;
  22. }
  23. return {
  24. children: <a href="#">{text}</a>,
  25. props: {
  26. colSpan: 5,
  27. },
  28. };
  29. },
  30. }, {
  31. title: 'Age',
  32. dataIndex: 'age',
  33. render: renderContent,
  34. }, {
  35. title: 'Home phone',
  36. colSpan: 2,
  37. dataIndex: 'tel',
  38. render: (value, row, index) => {
  39. const obj = {
  40. children: value,
  41. props: {},
  42. };
  43. if (index === 2) {
  44. obj.props.rowSpan = 2;
  45. }
  46. // These two are merged into above cell

树形数据展示

表格支持树形数据的展示,可以通过设置 indentSize 以控制每一层的缩进宽度。

注:暂不支持父子数据递归关联选择。

Table表格 - 图15

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Table } from 'choerodon-ui';
  4. const columns = [{
  5. title: 'Name',
  6. dataIndex: 'name',
  7. key: 'name',
  8. }, {
  9. title: 'Age',
  10. dataIndex: 'age',
  11. key: 'age',
  12. width: '12%',
  13. }, {
  14. title: 'Address',
  15. dataIndex: 'address',
  16. width: '30%',
  17. key: 'address',
  18. }];
  19. const data = [{
  20. key: 1,
  21. name: 'John Brown sr.',
  22. age: 60,
  23. address: 'New York No. 1 Lake Park',
  24. children: [{
  25. key: 11,
  26. name: 'John Brown',
  27. age: 42,
  28. address: 'New York No. 2 Lake Park',
  29. }, {
  30. key: 12,
  31. name: 'John Brown jr.',
  32. age: 30,
  33. address: 'New York No. 3 Lake Park',
  34. children: [{
  35. key: 121,
  36. name: 'Jimmy Brown',
  37. age: 16,
  38. address: 'New York No. 3 Lake Park',
  39. }],
  40. }, {
  41. key: 13,
  42. name: 'Jim Green sr.',
  43. age: 72,
  44. address: 'London No. 1 Lake Park',
  45. children: [{
  46. key: 131,

固定表头

方便一页内展示大量数据。

需要指定 column 的 width 属性,否则列头和内容可能不对齐。

Table表格 - 图16

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Table } from 'choerodon-ui';
  4. const columns = [{
  5. title: 'Name',
  6. dataIndex: 'name',
  7. width: 150,
  8. }, {
  9. title: 'Age',
  10. dataIndex: 'age',
  11. width: 150,
  12. }, {
  13. title: 'Address',
  14. dataIndex: 'address',
  15. }];
  16. const data = [];
  17. for (let i = 0; i < 100; i++) {
  18. data.push({
  19. key: i,
  20. name: `Edward King ${i}`,
  21. age: 32,
  22. address: `London, Park Lane no. ${i}`,
  23. });
  24. }
  25. ReactDOM.render(
  26. <Table columns={columns} dataSource={data} pagination={{ pageSize: 50 }} scroll={{ y: 240 }} />,
  27. document.getElementById('container'));

固定列

对于列数很多的数据,可以固定前后的列,横向滚动查看其它数据,需要和 scroll.x 配合使用。

若列头与内容不对齐或出现列重复,请指定列的宽度 width

建议指定 scroll.x 为大于表格宽度的固定值或百分比。注意,且非固定列宽度之和不要超过 scroll.x

Table表格 - 图17

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Table } from 'choerodon-ui';
  4. const columns = [
  5. { title: 'Full Name', width: 100, dataIndex: 'name', key: 'name', fixed: 'left' },
  6. { title: 'Age', width: 100, dataIndex: 'age', key: 'age', fixed: 'left' },
  7. { title: 'Column 1', dataIndex: 'address', key: '1' },
  8. { title: 'Column 2', dataIndex: 'address', key: '2' },
  9. { title: 'Column 3', dataIndex: 'address', key: '3' },
  10. { title: 'Column 4', dataIndex: 'address', key: '4' },
  11. { title: 'Column 5', dataIndex: 'address', key: '5' },
  12. { title: 'Column 6', dataIndex: 'address', key: '6' },
  13. { title: 'Column 7', dataIndex: 'address', key: '7' },
  14. { title: 'Column 8', dataIndex: 'address', key: '8' },
  15. {
  16. title: 'Action',
  17. key: 'operation',
  18. fixed: 'right',
  19. width: 100,
  20. render: () => <a href="#">action</a>,
  21. },
  22. ];
  23. const data = [{
  24. key: '1',
  25. name: 'John Brown',
  26. age: 32,
  27. address: 'New York Park',
  28. }, {
  29. key: '2',
  30. name: 'Jim Green',
  31. age: 40,
  32. address: 'London Park',
  33. }];
  34. ReactDOM.render(<Table columns={columns} dataSource={data} scroll={{ x: 1300 }} />, document.getElementById('container'));

固定头和列

适合同时展示有大量数据和数据列。

若列头与内容不对齐或出现列重复,请指定列的宽度 width

建议指定 scroll.x 为大于表格宽度的固定值或百分比。注意,且非固定列宽度之和不要超过 scroll.x

Table表格 - 图18

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Table } from 'choerodon-ui';
  4. const columns = [
  5. { title: 'Full Name', width: 100, dataIndex: 'name', key: 'name', fixed: 'left' },
  6. { title: 'Age', width: 100, dataIndex: 'age', key: 'age', fixed: 'left' },
  7. { title: 'Column 1', dataIndex: 'address', key: '1', width: 150 },
  8. { title: 'Column 2', dataIndex: 'address', key: '2', width: 150 },
  9. { title: 'Column 3', dataIndex: 'address', key: '3', width: 150 },
  10. { title: 'Column 4', dataIndex: 'address', key: '4', width: 150 },
  11. { title: 'Column 5', dataIndex: 'address', key: '5', width: 150 },
  12. { title: 'Column 6', dataIndex: 'address', key: '6', width: 150 },
  13. { title: 'Column 7', dataIndex: 'address', key: '7', width: 150 },
  14. { title: 'Column 8', dataIndex: 'address', key: '8' },
  15. {
  16. title: 'Action',
  17. key: 'operation',
  18. fixed: 'right',
  19. width: 100,
  20. render: () => <a href="#">action</a>,
  21. },
  22. ];
  23. const data = [];
  24. for (let i = 0; i < 100; i++) {
  25. data.push({
  26. key: i,
  27. name: `Edrward ${i}`,
  28. age: 32,
  29. address: `London Park no. ${i}`,
  30. });
  31. }
  32. ReactDOM.render(<Table columns={columns} dataSource={data} scroll={{ x: 1500, y: 300 }} />, document.getElementById('container'));

表头分组

columns[n] 可以内嵌 children,以渲染分组表头。

Table表格 - 图19

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Table } from 'choerodon-ui';
  4. const columns = [{
  5. title: 'Name',
  6. dataIndex: 'name',
  7. key: 'name',
  8. width: 100,
  9. fixed: 'left',
  10. filters: [{
  11. text: 'Joe',
  12. value: 'Joe',
  13. }, {
  14. text: 'John',
  15. value: 'John',
  16. }],
  17. onFilter: (value, record) => record.name.indexOf(value) === 0,
  18. }, {
  19. title: 'Other',
  20. children: [{
  21. title: 'Age',
  22. dataIndex: 'age',
  23. key: 'age',
  24. width: 200,
  25. sorter: (a, b) => a.age - b.age,
  26. }, {
  27. title: 'Address',
  28. children: [{
  29. title: 'Street',
  30. dataIndex: 'street',
  31. key: 'street',
  32. width: 200,
  33. }, {
  34. title: 'Block',
  35. children: [{
  36. title: 'Building',
  37. dataIndex: 'building',
  38. key: 'building',
  39. width: 100,
  40. }, {
  41. title: 'Door No.',
  42. dataIndex: 'number',
  43. key: 'number',
  44. width: 100,
  45. }],
  46. }],
  47. }],

可编辑单元格

带单元格编辑功能的表格。

Table表格 - 图20

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Table, Input, Icon, Button, Popconfirm } from 'choerodon-ui';
  4. class EditableCell extends React.Component {
  5. state = {
  6. value: this.props.value,
  7. editable: false,
  8. }
  9. handleChange = (e) => {
  10. const value = e.target.value;
  11. this.setState({ value });
  12. }
  13. check = () => {
  14. this.setState({ editable: false });
  15. if (this.props.onChange) {
  16. this.props.onChange(this.state.value);
  17. }
  18. }
  19. edit = () => {
  20. this.setState({ editable: true });
  21. }
  22. render() {
  23. const { value, editable } = this.state;
  24. return (
  25. <div className="editable-cell">
  26. {
  27. editable ? (
  28. <div className="editable-cell-input-wrapper">
  29. <Input
  30. value={value}
  31. onChange={this.handleChange}
  32. onPressEnter={this.check}
  33. />
  34. <Icon
  35. type="check"
  36. className="editable-cell-icon-check"
  37. onClick={this.check}
  38. />
  39. </div>
  40. ) : (
  41. <div className="editable-cell-text-wrapper">
  42. {value || ' '}
  43. <Icon

可编辑行

带行编辑功能的表格。

Table表格 - 图21

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Table, Input, Popconfirm } from 'choerodon-ui';
  4. const data = [];
  5. for (let i = 0; i < 100; i++) {
  6. data.push({
  7. key: i.toString(),
  8. name: `Edrward ${i}`,
  9. age: 32,
  10. address: `London Park no. ${i}`,
  11. });
  12. }
  13. const EditableCell = ({ editable, value, onChange }) => (
  14. <div>
  15. {editable
  16. ? <Input style={{ margin: '-5px 0' }} value={value} onChange={e => onChange(e.target.value)} />
  17. : value
  18. }
  19. </div>
  20. );
  21. class EditableTable extends React.Component {
  22. constructor(props) {
  23. super(props);
  24. this.columns = [{
  25. title: 'name',
  26. dataIndex: 'name',
  27. width: '25%',
  28. render: (text, record) => this.renderColumns(text, record, 'name'),
  29. }, {
  30. title: 'age',
  31. dataIndex: 'age',
  32. width: '15%',
  33. render: (text, record) => this.renderColumns(text, record, 'age'),
  34. }, {
  35. title: 'address',
  36. dataIndex: 'address',
  37. width: '40%',
  38. render: (text, record) => this.renderColumns(text, record, 'address'),
  39. }, {
  40. title: 'operation',
  41. dataIndex: 'operation',
  42. render: (text, record) => {
  43. const { editable } = record;
  44. return (
  45. <div className="editable-row-operations">
  46. {

嵌套子表格

展示每行数据更详细的信息。

Table表格 - 图22

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Table, Badge, Menu, Dropdown, Icon } from 'choerodon-ui';
  4. const menu = (
  5. <Menu>
  6. <Menu.Item>
  7. Action 1
  8. </Menu.Item>
  9. <Menu.Item>
  10. Action 2
  11. </Menu.Item>
  12. </Menu>
  13. );
  14. function NestedTable() {
  15. const expandedRowRender = () => {
  16. const columns = [
  17. { title: 'Date', dataIndex: 'date', key: 'date' },
  18. { title: 'Name', dataIndex: 'name', key: 'name' },
  19. { title: 'Status', key: 'state', render: () => <span><Badge status="success" />Finished</span> },
  20. { title: 'Upgrade Status', dataIndex: 'upgradeNum', key: 'upgradeNum' },
  21. {
  22. title: 'Action',
  23. dataIndex: 'operation',
  24. key: 'operation',
  25. render: () => (
  26. <span className="table-operation">
  27. <a href="#">Pause</a>
  28. <a href="#">Stop</a>
  29. <Dropdown overlay={menu}>
  30. <a href="#">
  31. More <Icon type="down" />
  32. </a>
  33. </Dropdown>
  34. </span>
  35. ),
  36. },
  37. ];
  38. const data = [];
  39. for (let i = 0; i < 3; ++i) {
  40. data.push({
  41. key: i,
  42. date: '2014-12-24 23:12:00',
  43. name: 'This is production name',
  44. upgradeNum: 'Upgraded: 56',

拖拽排序

使用自定义元素,我们可以集成 react-dnd 来实现拖拽排序。

Table表格 - 图23

  1. import React, { useState, useCallback, useRef } from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { Table } from 'choerodon-ui';
  4. import { DndProvider, useDrag, useDrop, createDndContext } from 'react-dnd';
  5. import update from 'immutability-helper';
  6. // import { HTML5Backend } from 'react-dnd-html5-backend';
  7. const RNDContext = createDndContext(HTML5Backend);
  8. const type = 'DragableBodyRow';
  9. const DragableBodyRow = ({
  10. index,
  11. moveRow,
  12. className,
  13. style,
  14. ...restProps
  15. }) => {
  16. const ref = React.useRef();
  17. const [{ isOver, dropClassName }, drop] = useDrop({
  18. accept: type,
  19. collect: (monitor) => {
  20. const { index: dragIndex } = monitor.getItem() || {};
  21. if (dragIndex === index) {
  22. return {};
  23. }
  24. return {
  25. isOver: monitor.isOver(),
  26. dropClassName:
  27. dragIndex < index ? ' drop-over-downward' : ' drop-over-upward',
  28. };
  29. },
  30. drop: (item) => {
  31. moveRow(item.index, index);
  32. },
  33. });
  34. const [, drag] = useDrag({
  35. item: { type, index },
  36. collect: (monitor) => ({
  37. isDragging: monitor.isDragging(),
  38. }),
  39. });
  40. drop(drag(ref));
  41. return (
  42. <tr
  43. ref={ref}
  44. className={`${className}${isOver ? dropClassName : ''}`}

导出表单

展示一个表单的导出操作

Table表格 - 图24

  1. import ReactDOM from 'react-dom';
  2. import { Table, Button, Icon, Divider } from 'choerodon-ui';
  3. import React, { useState } from 'react';
  4. import axios from 'axios';
  5. const columns = [
  6. {
  7. title: 'Name',
  8. dataIndex: 'name',
  9. key: 'name1',
  10. render: (text) => <a href="#">{text}</a>,
  11. },
  12. {
  13. title: 'Age',
  14. dataIndex: 'age',
  15. key: 'age1',
  16. },
  17. {
  18. title: 'Address',
  19. dataIndex: 'address',
  20. key: 'address1',
  21. },
  22. {
  23. title: '',
  24. key: 'action1',
  25. render: (text, record) => (
  26. <span>
  27. <a href="#">Action {record.name}</a>
  28. <Divider type="vertical" />
  29. <a href="#">Delete</a>
  30. <Divider type="vertical" />
  31. <a href="#" className="c7n-dropdown-link">
  32. More actions <Icon type="down" />
  33. </a>
  34. </span>
  35. ),
  36. },
  37. ];
  38. const data = [
  39. {
  40. key: '11',
  41. name: 'John Brown',
  42. age: 32,
  43. address: 'New York No. 1 Lake Park',
  44. },
  45. {
  46. key: '12',

API

Table

参数说明类型默认值
autoScroll是否在翻页时自动滚动到表格可视区域,并滚动到第一条booleantrue
bordered是否展示外边框和列边框booleanfalse
columns表格列的配置描述,具体项见下表ColumnProps[]-
components覆盖默认的 table 元素object-
dataSource数据数组any[]
defaultExpandAllRows初始时,是否展开所有行booleanfalse
defaultExpandedRowKeys默认展开的行string[]-
expandedRowKeys展开的行,控制属性string[]-
expandedRowRender额外的展开行Function(record):ReactNode-
expandRowByClick通过点击行来展开子行booleanfalse
footer表格尾部Function(currentPageData)
empty当数据源为空时显示的内容ReactNode-
indentSize展示树形数据时,每层缩进的宽度,以 px 为单位number15
loading页面是否加载中boolean|objectfalse
locale默认文案设置,目前包括排序、过滤、空数据文案objectfilterConfirm: ‘确定’
filterReset: ‘重置’
emptyText: ‘暂无数据’
pagination分页器,参考配置项pagination,设为 false 时不展示和进行分页object
rowClassName表格行的类名Function(record, index):string-
rowKey表格行 key 的取值,可以是字符串或一个函数string|Function(record):string‘key’
rowSelection列表项是否可选择,配置项objectnull
scroll设置横向或纵向滚动,也可用于指定滚动区域的宽和高,建议为 x 设置一个数字,如果要设置为 true,需要配合样式 .c7n-table td { white-space: nowrap; }{ x: number | true, y: number }-
showHeader是否显示表头booleantrue
size正常或迷你类型,default or smallstringdefault
title表格标题Function(currentPageData)
onChange分页、排序、筛选变化时触发Function(pagination, filters, sorter)
onColumnFilterChange右上角行过滤按钮中选项变化时触发Function(item)
onExpand点击展开图标时触发Function(expanded, record)
onExpandedRowsChange展开的行变化时触发Function(expandedRows)
onHeaderRow设置头部行属性Function(column, index)-
onRow设置行属性Function(record, index)-
filterBar显示过滤条,设置为false时,在列头上会显示过滤菜单按钮booleantrue
filters<受控>过滤条中的过滤条件,例:[{ name: ‘Jom’ }, ‘OR’, { name: ‘Jim’ }]name 为列的 keydataIndexany[]-
noFilters去掉组件自带的模糊搜索booleanfalse
filterBarPlaceholder过滤条的占位文本string

onRow 用法

适用于 onRow onHeaderRow onCell onHeaderCell

  1. <Table
  2. onRow={(record) => {
  3. return {
  4. onClick: () => {}, // 点击行
  5. onMouseEnter: () => {}, // 鼠标移入行
  6. onXxxx...
  7. };
  8. }}
  9. onHeaderRow={(column) => {
  10. return {
  11. onClick: () => {}, // 点击表头行
  12. };
  13. }}
  14. />

Column

列描述数据对象,是 columns 中的一项,Column 使用相同的 API。

参数说明类型默认值
className列的 classNamestring-
colSpan表头列合并,设置为 0 时,不渲染number
dataIndex列数据在数据项中对应的 key,支持 a.b.c 的嵌套写法string-
disableClick禁用点击列表筛选项booleanfalse
filterDropdown可以自定义筛选菜单,此函数只负责渲染图层,需要自行编写各种交互ReactNode-
filterDropdownVisible用于控制自定义筛选菜单是否可见boolean-
filtered标识数据是否经过过滤,筛选图标会高亮booleanfalse
filteredValue筛选的受控属性,外界可用此控制列的筛选状态,值为已筛选的 value 数组string[]-
filterIcon自定义 fiter 图标。ReactNodefalse
filterMultiple是否多选booleanfalse
filters表头的筛选菜单项object[]-
fixed列是否固定,可选 true(等效于 left) ‘left’ ‘right’boolean|stringfalse
keyReact 需要的 key,如果已经设置了唯一的 dataIndex,可以忽略这个属性string-
render生成复杂数据的渲染函数,参数分别为当前行的值,当前行数据,行索引,@return里面可以设置表格行/列合并Function(text, record, index) {}-
align设置列内容的对齐方式‘left’ | ‘right’ | ‘center’‘left’
sorter排序函数,本地排序使用一个函数(参考 Array.sort 的 compareFunction),需要服务端排序可设为 trueFunction|boolean-
sortOrder排序的受控属性,外界可用此控制列的排序,可设置为 ‘ascend’ ‘descend’ falseboolean|string-
title列头显示文字string|ReactNode-
filterTitle过滤条可选则的列的名字,默认为属性title的值string|ReactNode-
width列宽度string|number-
onCell设置单元格属性Function(record)-
onFilter本地模式下,确定筛选的运行函数Function-
onFilterDropdownVisibleChange自定义筛选菜单可见变化时调用function(visible) {}-
onHeaderCell设置头部单元格属性Function(column)-

ColumnGroup

参数说明类型默认值
title列头显示文字string|ReactNode-

pagination

分页的配置项。

参数说明类型默认值
position指定分页显示的位置‘top’ | ‘bottom’ | ‘both’‘bottom’

更多配置项,请查看 Pagination

rowSelection

选择功能的配置。

参数说明类型默认值
fixed把选择框列固定在左边boolean-
getCheckboxProps选择框的默认属性配置Function(record)-
hideDefaultSelections去掉『全选』『反选』两个默认选项booleanfalse
selectedRowKeys指定选中项的 key 数组,需要和 onChange 进行配合string[][]
columnWidth自定义列表选择框宽度string|number-
selections自定义选择项 配置项, 设为 true 时使用默认选择项object[]|booleantrue
type多选/单选,checkbox or radiostringcheckbox
onChange选中项发生变化的时的回调Function(selectedRowKeys, selectedRows)-
onSelect用户手动选择/取消选择某列的回调Function(record, selected, selectedRows, nativeEvent)-
onSelectAll用户手动选择/取消选择所有列的回调Function(selected, selectedRows, changeRows)-
onSelectInvert用户手动选择反选的回调Function(selectedRows)-

selection

参数说明类型默认值
keyReact 需要的 key,建议设置string-
text选择项显示的文字string|React.ReactNode-
onSelect选择项点击回调Function(changeableRowKeys)-

在 TypeScript 中使用

  1. import { Table } from 'choerodon-ui';
  2. import { ColumnProps } from 'choerodon-ui/lib/table';
  3. interface IUser {
  4. key: number;
  5. name: string;
  6. }
  7. const columns: ColumnProps<IUser>[] = [{
  8. key: 'name',
  9. title: 'Name',
  10. dataIndex: 'name',
  11. }];
  12. const data: IUser[] = [{
  13. key: 0,
  14. name: 'Jack',
  15. }];
  16. class UserTable extends Table<IUser> {}
  17. <UserTable columns={columns} dataSource={data} />
  18. // 使用 JSX 风格的 API
  19. class NameColumn extends Table.Column<IUser> {}
  20. <UserTable dataSource={data}>
  21. <NameColumn key="name" title="Name" dataIndex="name" />
  22. </UserTable>

注意

按照 React 的规范,所有的组件数组必须绑定 key。在 Table 中,dataSourcecolumns 里的数据值都需要指定 key 值。对于 dataSource 默认将每列数据的 key 属性作为唯一的标识。

如果你的数据没有这个属性,务必使用 rowKey 来指定数据列的主键。若没有指定,控制台会出现以下的提示,表格组件也会出现各类奇怪的错误。

Table表格 - 图25

  1. // 比如你的数据主键是 uid
  2. return <Table rowKey="uid" />;
  3. // 或
  4. return <Table rowKey={record => record.uid} />;