PerformanceTable 大数据表格

展示行列数据。

何时使用

  • 当有大数据需要高性能展现时;
  • 千级数据量,简单需求,高流畅要求;

代码演示

基本

最简单的用法。

PerformanceTable大数据表格 - 图1

  1. import React, { useEffect, useState } from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { PerformanceTable, Button } from 'choerodon-ui/pro';
  4. const Table = () => {
  5. const tableRef = React.createRef();
  6. const [fakeLargeData, setFakeLargeData] = useState([]);
  7. const columns = [
  8. {
  9. title: 'Id',
  10. dataIndex: 'id',
  11. key: 'id',
  12. width: 70,
  13. fixed: true,
  14. },
  15. {
  16. title: '姓',
  17. dataIndex: 'lastName',
  18. key: 'lastName',
  19. width: 150,
  20. },
  21. {
  22. title: '名',
  23. dataIndex: 'firstName',
  24. key: 'firstName',
  25. width: 150,
  26. },
  27. {
  28. title: '城市',
  29. dataIndex: 'city',
  30. key: 'city',
  31. width: 300,
  32. },
  33. {
  34. title: '街道',
  35. dataIndex: 'street',
  36. key: 'street',
  37. width: 300,
  38. },
  39. {
  40. title: '公司',
  41. dataIndex: 'companyName',
  42. key: 'companyName',
  43. width: 300,
  44. },
  45. ];
  46. useEffect(() => {
  47. fetch('../data/fakeLargeData.json')
  48. .then((response) => response.json())
  49. .then((data) => {
  50. setFakeLargeData(data);

调整列宽

把鼠标移动到列分割线的时候,会显示出一个蓝色的移动手柄,点击不松开并左右拖动就可以调整列的宽度。

PerformanceTable大数据表格 - 图2

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { PerformanceTable } from 'choerodon-ui/pro';
  4. class ResizableColumnTable extends React.Component {
  5. constructor(props) {
  6. super(props);
  7. const data = fakeData.filter((v, i) => i < 8);
  8. this.state = {
  9. data,
  10. };
  11. }
  12. render() {
  13. const { data } = this.state;
  14. const columns = [
  15. {
  16. title: 'Id',
  17. dataIndex: 'id',
  18. key: 'id',
  19. width: 50,
  20. resizable: true,
  21. fixed: true,
  22. },
  23. {
  24. title: '姓名',
  25. dataIndex: 'firstName',
  26. key: 'firstName',
  27. width: 100,
  28. resizable: true,
  29. onResize: (columnWidth, dataKey) => {
  30. console.log(columnWidth, dataKey);
  31. },
  32. },
  33. {
  34. title: '城市',
  35. dataIndex: 'city',
  36. key: 'city',
  37. width: 400,
  38. resizable: true,
  39. },
  40. {
  41. title: '街道',
  42. dataIndex: 'street',
  43. key: 'street',
  44. width: 400,
  45. resizable: true,
  46. },
  47. {
  48. title: '公司',
  49. dataIndex: 'companyName',
  50. key: 'companyName',

流体列宽

如果需要把某列设置为自动宽度,需要配置 flexGrow 属性。 flexGrow 是 number 类型。会按照所有 flexGrow 总和比例撑满剩下的宽度。

注意: 设置 flexGrow 以后,就不能设置 width 和 resizable 属性。 可以通过 minWidth 设置一个最小宽度。

PerformanceTable大数据表格 - 图3

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { PerformanceTable } from 'choerodon-ui/pro';
  4. class FluidColumnTable extends React.Component {
  5. constructor(props) {
  6. super(props);
  7. this.state = {
  8. data: fakeData,
  9. };
  10. }
  11. render() {
  12. const { data } = this.state;
  13. const columns = [
  14. {
  15. title: 'Id',
  16. dataIndex: 'id',
  17. key: 'id',
  18. width: 70,
  19. fixed: true,
  20. },
  21. {
  22. title: '姓',
  23. dataIndex: 'lastName',
  24. key: 'lastName',
  25. width: 100,
  26. fixed: true,
  27. },
  28. {
  29. title: '名',
  30. dataIndex: 'firstName',
  31. key: 'firstName',
  32. width: 130,
  33. resizable: true,
  34. sortable: true,
  35. },
  36. {
  37. title: (
  38. <span>
  39. 城市 <code>flexGrow: 1 </code>
  40. </span>
  41. ),
  42. dataIndex: 'city',
  43. key: 'city',
  44. flexGrow: 1,
  45. sortable: true,
  46. },
  47. {
  48. title: (
  49. <span>
  50. 公司 <code>flexGrow: 2</code>

锁定列

Fixed 锁定列。

PerformanceTable大数据表格 - 图4

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { PerformanceTable } from 'choerodon-ui/pro';
  4. class FixedColumnTable extends React.Component {
  5. constructor(props) {
  6. super(props);
  7. this.state = {
  8. data: fakeData,
  9. };
  10. }
  11. render() {
  12. const columns = [
  13. {
  14. title: 'Id',
  15. dataIndex: 'id',
  16. key: 'id',
  17. width: 70,
  18. fixed: true,
  19. },
  20. {
  21. title: '姓',
  22. dataIndex: 'lastName',
  23. key: 'lastName',
  24. width: 130,
  25. fixed: true,
  26. },
  27. {
  28. title: '名',
  29. dataIndex: 'firstName',
  30. key: 'firstName',
  31. width: 130,
  32. },
  33. {
  34. title: '城市',
  35. dataIndex: 'city',
  36. key: 'city',
  37. width: 200,
  38. },
  39. {
  40. title: '街道',
  41. dataIndex: 'street',
  42. key: 'street',
  43. width: 200,
  44. },
  45. {
  46. title: '公司',
  47. dataIndex: 'companyName',
  48. key: 'companyName',
  49. width: 300,
  50. },
  51. {

自动换行

如果想让单元格自动换行,需要设置 wordWrap。

PerformanceTable大数据表格 - 图5

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { PerformanceTable } from 'choerodon-ui/pro';
  4. class WordWrapTable extends React.Component {
  5. constructor(props) {
  6. super(props);
  7. this.state = {
  8. data: fakeData,
  9. };
  10. }
  11. render() {
  12. const columns = [
  13. {
  14. title: 'Id',
  15. dataIndex: 'id',
  16. key: 'id',
  17. width: 70,
  18. fixed: true,
  19. },
  20. {
  21. title: '姓名',
  22. dataIndex: 'firstName',
  23. key: 'firstName',
  24. width: 150,
  25. },
  26. {
  27. title: '城市',
  28. dataIndex: 'city',
  29. key: 'city',
  30. width: 200,
  31. },
  32. {
  33. title: '街道',
  34. dataIndex: 'street',
  35. key: 'street',
  36. width: 300,
  37. },
  38. {
  39. title: '公司',
  40. dataIndex: 'companyName',
  41. key: 'companyName',
  42. width: 300,
  43. },
  44. {
  45. title: '邮箱',
  46. dataIndex: 'email',
  47. key: 'email',
  48. width: 300,
  49. },
  50. ];
  51. return (

自定义单元格

根据不同的业务场景,单元格中可以自己定义显示的内容。如果有相关单元格需要key唯一,获取rowIndex处理。

PerformanceTable大数据表格 - 图6

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { PerformanceTable, CheckBox } from 'choerodon-ui/pro';
  4. import { Popover } from 'choerodon-ui';
  5. const NameCell = ({ rowData, dataIndex }) => {
  6. return (
  7. <Popover
  8. title="Description"
  9. content={
  10. <>
  11. <p>
  12. <b>Name:</b> {`${rowData.firstName} ${rowData.lastName}`}{' '}
  13. </p>
  14. <p>
  15. <b>Email:</b> {rowData.email}{' '}
  16. </p>
  17. <p>
  18. <b>Company:</b> {rowData.companyName}{' '}
  19. </p>
  20. <p>
  21. <b>Sentence:</b> {rowData.sentence}{' '}
  22. </p>
  23. </>
  24. }
  25. >
  26. {rowData[dataIndex].toLocaleString()}
  27. </Popover>
  28. );
  29. };
  30. const ActionCell = ({ rowData, dataIndex }) => {
  31. function handleAction() {
  32. alert(`id:${rowData[dataIndex]}`);
  33. console.log(rowData, dataIndex);
  34. }
  35. return (
  36. <span>
  37. <a onClick={handleAction}> Edit </a>|
  38. <a onClick={handleAction}> Remove </a>
  39. </span>
  40. );
  41. };
  42. class CustomColumnTable extends React.Component {
  43. constructor(props) {
  44. super(props);
  45. this.state = {
  46. data: fakeData,
  47. checkValues: [],
  48. };

排序

设置 sortable,同时在 performanceTable 定义一个 onSortColumn 回调函数,点击列头排序图标的时候,会触发该方法,并返回 sortColumn 和 sortType。

PerformanceTable大数据表格 - 图7

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { PerformanceTable } from 'choerodon-ui/pro';
  4. class SortTable extends React.Component {
  5. constructor(props) {
  6. super(props);
  7. this.state = {
  8. sortColumn: 'id',
  9. data: fakeData,
  10. };
  11. this.handleSortColumn = this.handleSortColumn.bind(this);
  12. }
  13. getData() {
  14. const { data, sortColumn, sortType } = this.state;
  15. if (sortColumn && sortType) {
  16. return data.sort((a, b) => {
  17. let x = a[sortColumn];
  18. let y = b[sortColumn];
  19. if (typeof x === 'string') {
  20. x = x.charCodeAt();
  21. }
  22. if (typeof y === 'string') {
  23. y = y.charCodeAt();
  24. }
  25. if (sortType === 'asc') {
  26. return x - y;
  27. } else {
  28. return y - x;
  29. }
  30. });
  31. }
  32. return data;
  33. }
  34. handleSortColumn(sortColumn, sortType) {
  35. this.setState({
  36. loading: true,
  37. });
  38. setTimeout(() => {
  39. console.log(sortColumn);
  40. this.setState({

树形

树形表格,主要为了展示有结构关系的数据,需要在 Table 组件上设置一个 isTree 属性,同时 data 中的数据需要通过 children 来定义关系结构。

PerformanceTable大数据表格 - 图8

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { PerformanceTable } from 'choerodon-ui/pro';
  4. class TreeTable extends React.Component {
  5. constructor(props) {
  6. super(props);
  7. this.state = {
  8. data: fakeTreeData
  9. };
  10. }
  11. render() {
  12. const { data } = this.state;
  13. const columns = [
  14. {
  15. title: 'Key',
  16. dataIndex: 'key',
  17. width: 100,
  18. },
  19. {
  20. title: 'Label (Tree Col)',
  21. dataIndex: 'labelName',
  22. flexGrow: 1,
  23. treeCol: true,
  24. },
  25. {
  26. title: 'Status',
  27. width: 100,
  28. dataIndex: 'status',
  29. },
  30. {
  31. title: 'Count',
  32. width: 100,
  33. dataIndex: 'count',
  34. },
  35. ];
  36. return (
  37. <div>
  38. <PerformanceTable
  39. isTree
  40. virtualized
  41. minHeight={260}
  42. height={400}
  43. data={data}
  44. columns={columns}
  45. defaultExpandedRowKeys={[0]}
  46. onExpandChange={(expanded, rowData) => {
  47. console.log(expanded, rowData);
  48. }}
  49. renderTreeToggle={(icon, rowData, expanded) => {
  50. if (rowData.labelName === '手机') {
  51. return <i className="icon icon-spin icon-spinner" />;

可展开

实现一个可以展开的 Table ,需要以下几个属性的组合完成。

第一步:给 Table 设置属性 renderRowExpanded(rowData) => React.Node 用来返回需要在展开面板中渲染的内容 rowExpandedHeight 设置可展开区域的高度, 默认是 100 expandedRowKeys(受控) 和 defaultExpandedRowKeys 用来配置需要展开的行。

需要注意的是这两个属性接收的参数是一个的数组,数组中是 rowKey。 rowKey 给每一行数据对一个唯一 key , 对应 data 中的一个唯一值的 key。

第二步:自定义 Cell 自定义一个 Cell, 在内部放一个可以操作按钮,用于操作 expandedRowKeys 中的。

PerformanceTable大数据表格 - 图9

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { PerformanceTable, Button } from 'choerodon-ui/pro';
  4. const rowKey = 'id';
  5. const ExpandCell = ({ rowData, dataIndex, expandedRowKeys, onChange }) => (
  6. <Button
  7. onClick={() => {
  8. onChange(rowData);
  9. }}
  10. funcType="flat"
  11. size="small"
  12. >
  13. {expandedRowKeys.some((key) => key === rowData[rowKey]) ? '-' : '+'}
  14. </Button>
  15. );
  16. class ExpandedTable extends React.Component {
  17. constructor(props) {
  18. super(props);
  19. this.state = {
  20. data: fakeData,
  21. expandedRowKeys: [0],
  22. };
  23. this.handleExpanded = this.handleExpanded.bind(this);
  24. }
  25. handleExpanded(rowData, dataKey) {
  26. const { expandedRowKeys } = this.state;
  27. let open = false;
  28. const nextExpandedRowKeys = [];
  29. expandedRowKeys.forEach((key) => {
  30. if (key === rowData[rowKey]) {
  31. open = true;
  32. } else {
  33. nextExpandedRowKeys.push(key);
  34. }
  35. });
  36. if (!open) {
  37. nextExpandedRowKeys.push(rowData[rowKey]);
  38. }
  39. this.setState({
  40. expandedRowKeys: nextExpandedRowKeys,
  41. });
  42. }
  43. render() {
  44. const { expandedRowKeys, data } = this.state;
  45. const columns = [
  46. {
  47. title: '#',

可编辑

可编辑的表格。

PerformanceTable大数据表格 - 图10

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { PerformanceTable } from 'choerodon-ui/pro';
  4. import _ from 'lodash';
  5. export const EditCell = ({ rowData, dataIndex, onChange }) => {
  6. return rowData.status === 'EDIT' ? (
  7. <input
  8. className="input"
  9. style={{ height: 26 }}
  10. defaultValue={rowData[dataIndex]}
  11. onChange={(event) => {
  12. onChange && onChange(rowData.id, dataIndex, event.target.value);
  13. }}
  14. />
  15. ) : (
  16. rowData[dataIndex]
  17. );
  18. };
  19. const ActionCell = ({ rowData, onClick }) => {
  20. return (
  21. <a
  22. onClick={() => {
  23. onClick && onClick(rowData.id);
  24. }}
  25. >
  26. {rowData.status === 'EDIT' ? 'Save' : 'Edit'}
  27. </a>
  28. );
  29. };
  30. class EditTable extends React.Component {
  31. constructor(props) {
  32. super(props);
  33. this.state = {
  34. data: fakeData.filter((item, index) => index < 20),
  35. };
  36. this.handleChange = this.handleChange.bind(this);
  37. this.handleEditState = this.handleEditState.bind(this);
  38. }
  39. handleChange(id, key, value) {
  40. const { data } = this.state;
  41. // 可使用 _.clone
  42. const nextData = [...data];
  43. nextData.find((item) => item.id === id)[key] = value;
  44. this.setState({
  45. data: nextData,
  46. });
  47. }
  48. handleEditState(id) {
  49. const { data } = this.state;

组合列

在某些情况下,需要合并列来组织数据之间的关系,设置 colSpan 属性,同时通过 children 设置表头分组。

PerformanceTable大数据表格 - 图11

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { PerformanceTable } from 'choerodon-ui/pro';
  4. class FixedColumnTable extends React.Component {
  5. constructor(props) {
  6. super(props);
  7. this.state = {
  8. data: fakeDataForColSpan,
  9. };
  10. }
  11. render() {
  12. const columns = [
  13. {
  14. title: 'Id',
  15. dataIndex: 'id',
  16. key: 'id',
  17. width: 70,
  18. verticalAlign: 'middle',
  19. fixed: true,
  20. },
  21. {
  22. header: '基本信息',
  23. type: 'ColumnGroup',
  24. align: 'center',
  25. verticalAlign: 'middle',
  26. fixed: true,
  27. children: [
  28. {
  29. title: '姓',
  30. dataIndex: 'lastName',
  31. key: 'lastName',
  32. width: 150,
  33. resizable: true,
  34. },
  35. {
  36. title: '名',
  37. dataIndex: 'firstName',
  38. key: 'firstName',
  39. width: 150,
  40. resizable: true,
  41. },
  42. {
  43. title: '邮箱',
  44. dataIndex: 'email',
  45. key: 'email',
  46. width: 200,
  47. resizable: true,
  48. },
  49. ],
  50. },

自动高度

自适应高度。

PerformanceTable大数据表格 - 图12

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { PerformanceTable } from 'choerodon-ui/pro';
  4. class AutoHeightTable extends React.Component {
  5. constructor(props) {
  6. super(props);
  7. this.state = {
  8. data: fakeData,
  9. };
  10. }
  11. render() {
  12. const columns = [
  13. {
  14. title: 'Id',
  15. dataIndex: 'id',
  16. key: 'id',
  17. width: 70,
  18. fixed: true,
  19. },
  20. {
  21. title: '姓名',
  22. dataIndex: 'firstName',
  23. key: 'firstName',
  24. width: 130,
  25. resizable: true,
  26. onResize: (columnWidth, dataKey) => {
  27. console.log(columnWidth, dataKey);
  28. },
  29. },
  30. {
  31. title: '城市',
  32. dataIndex: 'city',
  33. key: 'city',
  34. width: 200,
  35. },
  36. {
  37. title: '街道',
  38. dataIndex: 'street',
  39. key: 'street',
  40. width: 300,
  41. },
  42. {
  43. title: '公司',
  44. dataIndex: 'companyName',
  45. key: 'companyName',
  46. width: 300,
  47. },
  48. {
  49. title: '邮箱',
  50. dataIndex: 'email',

虚拟滚动

虚拟滚动,大数据表格。

PerformanceTable大数据表格 - 图13

  1. import React, { useEffect, useState } from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { PerformanceTable, Button } from 'choerodon-ui/pro';
  4. const LargeListsTable = () => {
  5. const tableRef = React.createRef();
  6. const [fakeLargeData, setFakeLargeData] = useState([]);
  7. const columns = [
  8. {
  9. title: 'Id',
  10. dataIndex: 'id',
  11. key: 'id',
  12. width: 70,
  13. fixed: true,
  14. },
  15. {
  16. title: '姓',
  17. dataIndex: 'lastName',
  18. key: 'lastName',
  19. width: 150,
  20. },
  21. {
  22. title: '名',
  23. dataIndex: 'firstName',
  24. key: 'firstName',
  25. width: 150,
  26. },
  27. {
  28. title: '城市',
  29. dataIndex: 'city',
  30. key: 'city',
  31. width: 300,
  32. },
  33. {
  34. title: '街道',
  35. dataIndex: 'street',
  36. key: 'street',
  37. width: 300,
  38. },
  39. {
  40. title: '公司',
  41. dataIndex: 'companyName',
  42. key: 'companyName',
  43. width: 300,
  44. },
  45. ];
  46. useEffect(() => {
  47. fetch('../data/fakeLargeData.json')
  48. .then((response) => response.json())
  49. .then((data) => {
  50. setFakeLargeData(data);

固定横向滚动条页面底部

固定横向滚动条页面底部。

PerformanceTable大数据表格 - 图14

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { PerformanceTable } from 'choerodon-ui/pro';
  4. class AffixHorizontalScrollbarTable extends React.Component {
  5. constructor(props) {
  6. super(props);
  7. this.state = {
  8. data: fakeData,
  9. };
  10. }
  11. render() {
  12. const columns = [
  13. {
  14. title: 'Id',
  15. dataIndex: 'id',
  16. key: 'id',
  17. width: 70,
  18. fixed: true,
  19. },
  20. {
  21. title: '姓名',
  22. dataIndex: 'firstName',
  23. key: 'firstName',
  24. width: 130,
  25. resizable: true,
  26. onResize: (columnWidth, dataKey) => {
  27. console.log(columnWidth, dataKey);
  28. },
  29. },
  30. {
  31. title: '城市',
  32. dataIndex: 'city',
  33. key: 'city',
  34. width: 200,
  35. },
  36. {
  37. title: '街道',
  38. dataIndex: 'street',
  39. key: 'street',
  40. width: 300,
  41. },
  42. {
  43. title: '公司',
  44. dataIndex: 'companyName',
  45. key: 'companyName',
  46. width: 300,
  47. },
  48. {
  49. title: '邮箱',
  50. dataIndex: 'email',

合并单元格

合并单元格。

PerformanceTable大数据表格 - 图15

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { PerformanceTable } from 'choerodon-ui/pro';
  4. class FixedColumnTable extends React.Component {
  5. constructor(props) {
  6. super(props);
  7. this.state = {
  8. data: fakeDataForColSpan,
  9. };
  10. }
  11. render() {
  12. const columns = [
  13. {
  14. title: 'Id',
  15. dataIndex: 'id',
  16. key: 'id',
  17. width: 70,
  18. fixed: true,
  19. },
  20. {
  21. title: '姓',
  22. dataIndex: 'lastName',
  23. key: 'lastName',
  24. width: 130,
  25. fixed: true,
  26. colSpan: 2,
  27. resizable: true,
  28. },
  29. {
  30. title: '名',
  31. dataIndex: 'firstName',
  32. key: 'firstName',
  33. width: 130,
  34. resizable: true,
  35. fixed: true,
  36. },
  37. {
  38. title: '城市',
  39. dataIndex: 'city',
  40. key: 'city',
  41. width: 200,
  42. colSpan: 2,
  43. resizable: true,
  44. },
  45. {
  46. title: '街道',
  47. dataIndex: 'street',
  48. key: 'street',
  49. width: 300,
  50. resizable: true,

拖拽

拖拽。

PerformanceTable大数据表格 - 图16

  1. import { PerformanceTable, Icon } from 'choerodon-ui/pro';
  2. import React from 'react';
  3. import ReactDOM from 'react-dom';
  4. import { useDrag, useDrop, DndProvider } from 'react-dnd';
  5. // import { HTML5Backend } from 'react-dnd-html5-backend';
  6. const { Column, Cell, HeaderCell } = PerformanceTable;
  7. const style = {
  8. border: '1px dashed gray',
  9. cursor: 'move',
  10. padding: '0 0.1rem',
  11. };
  12. const ItemTypes = {
  13. COLUMN: 'column',
  14. ROW: 'row',
  15. };
  16. function DraggableHeaderCell({ children, onDrag, id, ...rest }) {
  17. const ref = React.useRef(null);
  18. const [{ canDrop, isOver }, drop] = useDrop({
  19. accept: ItemTypes.COLUMN,
  20. collect: (monitor) => ({
  21. isOver: monitor.isOver(),
  22. canDrop: monitor.canDrop(),
  23. }),
  24. drop(item, _monitor) {
  25. onDrag(item.id, id);
  26. },
  27. });
  28. const [{ isDragging }, drag] = useDrag({
  29. item: { id, type: ItemTypes.COLUMN },
  30. collect: (monitor) => ({
  31. isDragging: monitor.isDragging(),
  32. }),
  33. });
  34. const opacity = isDragging ? 0 : 1;
  35. const isActive = canDrop && isOver;
  36. drag(drop(ref));
  37. const styles = {
  38. ...style,
  39. opacity,
  40. background: isActive ? '#ddd' : null,
  41. };
  42. return (
  43. <HeaderCell {...rest} style={{ padding: 0 }}>

API

Table

属性名称类型 (默认值)描述
columnsColumn[]表格列的配置描述,具体项见下表
affixHeaderboolean,number将表头固定到页面上的指定位置
affixHorizontalScrollbarboolean,number将横向滚动条固定在页面底部的指定位置
autoHeightboolean自动高度
bodyRefReact.Ref表格主体部分上的 ref
borderedboolean(true)表格边框
cellBorderedboolean单元格边框
data *Array<Object>表格数据
defaultExpandAllRowsboolean默认展开所有节点
defaultExpandedRowKeysstring[]通过 rowKey 指定默认展开的行
defaultSortTypeenum: ‘desc’, ‘asc’排序类型
expandedRowKeysstring[]通过 rowKey 指定展开的行 (受控)
headerHeightnumber(30)表头高度
heightnumber(200)高度
hoverboolean (true)表格的行设置鼠标悬停效果
isTreeboolean是否展示为树表格
loadingboolean显示 loading 状态
localeobject本地化语言配置
minHeightnumber (0)最小高度
onDataUpdated(nextData: object[], scrollTo: (coord: { x: number; y: number }) => void) => void数据更新后的回调函数
onExpandChange(expanded:boolean, rowData:object) => void树形表格,在展开节点的回调函数
onRowClick(rowData:object) => void行点击后的回调函数, 返回 rowDate
onScroll(scrollX:object, scrollY:object) => void滚动条滚动时候的回调函数
onSortColumn(dataKey:string, sortType:string) => void点击排序列的回调函数,返回 sortColumn, sortType 这两个值
renderEmpty(info: React.Node) => React.Node自定义渲染数据为空的状态
renderLoading(loading: React.Node) => React.Node自定义渲染数据加载中的状态
renderRowExpanded(rowDate?: Object) => React.Node自定义可以展开区域的内容
renderTreeToggle(icon:node, rowData:object, expanded:boolean) => node树形表格,在展开节点的回调函数
rowClassNamestring , (rowData:object) => string为行自定义 className
rowExpandedHeightnumber (100)设置可展开区域的高度
rowHeight(rowData:object) => number, number(46)行高
rowKeystring (‘key’)每一个行对应的 data 中的唯一 key
shouldUpdateScrollboolean(true)数据更新后更新滚动条位置
showHeaderboolean (true)显示表头
showScrollArrowboolean (false)显示滚动条箭头
sortColumnstring排序列名称
sortTypeenum: ‘desc’, ‘asc’排序类型(受控)
clickScrollLengthobject ({horizontal?: 100;vertical?: 30;})滚动条箭头点击滚动距离
virtualizedboolean呈现大表格数据
widthnumber宽度
wordWrapboolean单元格自动换行

Form methods

  • scrollTop

垂直滚动条滚动到指定位置

  1. scrollTop: (top: number) => void;
  • scrollLeft

横向滚动条滚动到指定位置

  1. scrollLeft: (left: number) => void;

Column

属性名称类型 (默认值)描述
alignenum: ‘left’,’center’,’right’对齐方式
colSpannumber合并列单元格,当被合并列的 dataKey 对应的值为 null 或者 undefined时,才会合并。
fixedboolean, ‘left’, ‘right’固定列
flexGrownumber设置列宽自动调节,当设置了 flexGrow 就不能设置 resizablewidth 属性
minWidthnumber(200)当使用了 flexGrow 以后,可以通过 minWidth 设置一个最小宽度
onResize(columnWidth?: number, dataKey?: string) => void列宽改变后的回调
resizableboolean可自定义调整列宽
sortableboolean可排序
treeColboolean指定列显示为 Tree
verticalAlignenum: ‘top’, ‘middle’, ‘bottom’垂直对齐方式
widthnumber列宽

sortable 是用来定义该列是否可排序,但是根据什么 key 排序需要 在 Cell 设置一个 dataKey 这里的排序是服务端排序,所以需要在 <Table>onSortColumn 回调函数中处理逻辑,回调函数会返回 sortColumn, sortType 这两个值。

ColumnGroup

属性名称类型 (默认值)描述
alignenum: ‘left’,’center’,’right’对齐方式
fixedboolean, ‘left’, ‘right’固定列组
verticalAlignenum: ‘top’, ‘middle’, ‘bottom’垂直对齐方式
headerReact.ReactNode分组表头

Cell

属性名称类型 (默认值)描述
dataKeystring数据绑定的 key ,同时也是排序的 key
rowDataobject行数据
rowIndexnumber行号

分页请结合 Pagination 组件。