Table 表格

Table 表格

展示行列数据。

何时使用

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

注意事项

Pro Table 功能集成多，逻辑复杂，因此存在一定性能问题，在开发技术选型前一定要注意考量。

性能瓶颈

多字段：单行字段 50+ （10条）影响首次渲染速度，影响不大
大数据量：单次渲染总单元格数超过 1000+

处理方案

根据具体场景及需求使用基础表格或大数据表格

相关教程：Table

代码演示

基础

最简单的表格示例。


import React from 'react';
import ReactDOM from 'react-dom';
import { DataSet, Table } from 'choerodon-ui/pro';
class App extends React.Component {
  userDs = new DataSet({
    primaryKey: 'userid',
    name: 'user',
    autoQuery: true,
    pageSize: 5,
    fields: [
      {
        name: 'userid',
        type: 'string',
        label: '编号',
        required: true,
      },
      {
        name: 'name',
        type: 'intl',
        label: '姓名',
      },
      {
        name: 'age',
        type: 'number',
        label: '年龄',
        max: 100,
        step: 1,
      },
      {
        name: 'sex',
        type: 'string',
        label: '性别',
        lookupCode: 'HR.EMPLOYEE_GENDER',
        required: true,
      },
      { name: 'enable', type: 'boolean', label: '是否开启' },
    ],
  });
  get columns() {
    return [
      { name: 'userid' },
      { name: 'name', editor: true },
      { name: 'age', editor: true },

级联

头行场景，级联列表。子表格依赖于头表格参数查询。使用 DataSet children 属性关联数据集。


import React from 'react';
import ReactDOM from 'react-dom';
import {
  DataSet,
  Table,
  TextField,
  Modal,
  Button,
  Lov,
  Tabs,
} from 'choerodon-ui/pro';
const { Column } = Table;
const { TabPane } = Tabs;
function editorRenderer(record) {
  return record.status === 'add' ? <TextField /> : null;
}
function maleFilter(record) {
  return record.get('sex') === 'M' || !record.get('sex');
}
// 过滤展示数据 结合 table filter
function femaleFilter(record) {
  return record.get('sex') === 'F';
}
class App extends React.Component {
  friendsDs = new DataSet({
    dataToJSON: 'normal',
    queryUrl: '/dataset/user/queries',
    cascadeParams(parent) {
      console.log('cascadeParams', parent.toData());
      // 级联查询参数 (record, primaryKey) => object
      return {
        __parent: parent.toData(),
      };
    },
    fields: [
      { name: 'name', type: 'string', label: '姓名', required: true },
      { name: 'age', type: 'number', label: '年龄', step: 1 },
      {
        name: 'sex',
        type: 'string',
        label: '性别',
        lookupCode: 'HR.EMPLOYEE_GENDER',
        required: true,
      },
    ],
    events: {
      query: ({ params, data }) =>
        console.log('friend query parameter', params, data),
    },
  });
  enemyFriendsDs = new DataSet({
    dataToJSON: 'normal',
    selection: 'single',
    fields: [
      { name: 'name', type: 'string', label: '姓名', required: true },
      { name: 'age', type: 'number', label: '年龄', step: 1 },
      {

显示原始值

使用 pristine 属性控制修改后仍显示原始值。


import React from 'react';
import ReactDOM from 'react-dom';
import {
  DataSet,
  Table,
  Form,
  TextField,
  NumberField,
  SelectBox,
  Modal,
  Button,
} from 'choerodon-ui/pro';
const { Column } = Table;
class EditButton extends React.Component {
  handleClick = e => {
    const { record, onClick } = this.props;
    onClick(record, e);
  };
  render() {
    return <Button funcType="flat" icon="mode_edit" onClick={this.handleClick} size="small" />;
  }
}
class App extends React.Component {
  userDs = new DataSet({
    primaryKey: 'userid',
    name: 'user',
    autoQuery: true,
    pageSize: 5,
    fields: [
      {
        name: 'userid',
        type: 'string',
        label: '编号',
        required: true,
      },
      {
        name: 'name',
        type: 'intl',
        label: '姓名',
      },
      {

行内编辑

editMode 为 inline 的单行编辑模式。


import React from 'react';
import ReactDOM from 'react-dom';
import { DataSet, Table, Button } from 'choerodon-ui/pro';
const { Column } = Table;
class App extends React.Component {
  ds = new DataSet({
    primaryKey: 'userid',
    name: 'user',
    autoQuery: true,
    pageSize: 5,
    cacheSelection: true,
    fields: [
      {
        name: 'userid',
        type: 'string',
        label: '编号',
        required: true,
        unique: true,
        help: '主键，区分用户',
      },
      { name: 'name', type: 'intl', label: '姓名' },
      {
        name: 'age',
        type: 'number',
        label: '年龄',
        unique: 'uniqueGroup',
        max: 100,
        step: 1,
        help: '用户年龄，可以排序',
      },
      {
        name: 'numberMultiple',
        type: 'number',
        label: '数值多值',
        multiple: true,
        min: 10,
        max: 100,
        step: 0.5,
      },
      { name: 'code', type: 'object', label: '代码描述', lovCode: 'LOV_CODE' },
      {
        name: 'code_code',
        bind: 'code.code',

自定义行内编辑

通过 editor 自定义控制行内编辑


import React from 'react';
import ReactDOM from 'react-dom';
import { DataSet, Table, Button, Switch } from 'choerodon-ui/pro';
const { Column } = Table;
class App extends React.Component {
  userDs = new DataSet({
    primaryKey: 'userid',
    name: 'user',
    autoQuery: true,
    pageSize: 5,
    fields: [
      {
        name: 'userid',
        type: 'string',
        label: '编号',
      },
      {
        name: 'name',
        type: 'intl',
        label: '姓名',
        required: true,
      },
      {
        name: 'age',
        type: 'number',
        label: '年龄',
        max: 100,
        step: 1,
      },
      {
        name: 'sex',
        type: 'string',
        label: '性别',
        lookupCode: 'HR.EMPLOYEE_GENDER',
        required: true,
      },
      { name: 'enable', type: 'boolean', label: '是否开启' },
    ],
    events: {
      submit: ({ data }) => console.log('submit data', data),
    },
  });

树形数据

树形 Table 的功能展示。


import React from 'react';
import ReactDOM from 'react-dom';
import { DataSet, Table, Button, Icon } from 'choerodon-ui/pro';
import { observer } from 'mobx-react';
const { Column } = Table;
function iconRenderer({ record, text }) {
  return [
    <Icon key="icon" type={record.get('icon')} />,
    <span key="text">{text}</span>,
  ];
}
function expandedRowRenderer({ record }) {
  return (
    <p>
      功能代码：{record.get('functionCode')} 入口页面：{record.get('url')}
    </p>
  );
}
@observer
class AddChildButton extends React.Component {
  render() {
    const { dataSet, ...otherProps } = this.props;
    const { current } = dataSet;
    return <Button {...otherProps} disabled={!current || !current.get('id')} />;
  }
}
class App extends React.Component {
  ds = new DataSet({
    primaryKey: 'id',
    queryUrl: '/tree.mock',
    submitUrl: '/tree.mock',
    autoQuery: true,
    parentField: 'parentId',
    idField: 'id',
    checkField: 'ischecked',
    fields: [
      { name: 'id', type: 'number' },
      { name: 'text', type: 'string', label: '功能名称' },
      { name: 'url', type: 'string', label: '入口页面' },
      { name: 'expand', type: 'boolean', label: '是否展开' },
      { name: 'ischecked', type: 'boolean', label: '是否开启' },
      { name: 'score', type: 'number', order: 'asc' },
      { name: 'parentId', type: 'number', parentFieldName: 'id' },
    ],
    events: {
      indexchange: ({ current }) => console.log('current user', current),
      submit: ({ data }) => console.log('submit tree data', data),
    },
  });
  state = {
    expandIconColumnIndex: 0,

树形数据异步懒加载

点击展开图标时异步加载子数据。


import React from 'react';
import ReactDOM from 'react-dom';
import { DataSet, Table, Button, Icon, Spin } from 'choerodon-ui/pro';
import { observer } from 'mobx-react';
import axios from 'axios';
import classNames from 'classnames';
const { Column } = Table;
function iconRenderer({ record, text }) {
  return [
    <Icon key="icon" type={record.get('icon')} />,
    <span key="text">{text}</span>,
  ];
}
function expandedRowRenderer({ record }) {
  return (
    <p style={{ display: 'none' }}>
      功能代码：{record.get('functionCode')} 入口页面：{record.get('url')}
    </p>
  );
}
// icon 渲染问题， 首先判断record的值和自定义状态来判断出叶节点和父节点进行不同的渲染
function expandicon({
  prefixCls,
  expanded,
  expandable,
  needIndentSpaced,
  record,
  onExpand,
}) {
  if (record.get('parentId')) {
    // 子结点渲染
    return <span style={{ paddingLeft: '0.18rem' }} />;
  }
  if (record.getState('loadding') === true) {
    // 自定义状态渲染
    return <Spin tip="loading" delay={200} size="small" />;
  }
  const iconPrefixCls = `${prefixCls}-expand-icon`;
  const classString = classNames(iconPrefixCls, {
    [`${iconPrefixCls}-expanded`]: expanded,
  });

树形数据异步分页

异步加载数据并对父亲节点进行分页处理。


import React from 'react';
import ReactDOM from 'react-dom';
import { DataSet, Table, Button, Icon, Spin } from 'choerodon-ui/pro';
import { observer } from 'mobx-react';
import axios from 'axios';
import classNames from 'classnames';
const { Column } = Table;
function iconRenderer({ record, text }) {
  return [
    <Icon key="icon" type={record.get('icon')} />,
    <span key="text">{text}</span>,
  ];
}
function expandedRowRenderer({ record }) {
  return (
    <p style={{ display: 'none' }}>
      功能代码：{record.get('functionCode')} 入口页面：{record.get('url')}
    </p>
  );
}
// icon 渲染问题， 首先判断record的值和自定义状态来判断出叶节点和父节点进行不同的渲染
function expandicon({
  prefixCls,
  expanded,
  expandable,
  needIndentSpaced,
  record,
  onExpand,
}) {
  if (record.get('parentId')) {
    // 子结点渲染
    return <span style={{ paddingLeft: '0.18rem' }} />;
  }
  if (record.getState('loadding') === true) {
    // 自定义状态渲染
    return <Spin tip="loding" delay={200} size="small" />;
  }
  const iconPrefixCls = `${prefixCls}-expand-icon`;
  const classString = classNames(iconPrefixCls, {
    [`${iconPrefixCls}-expanded`]: expanded,
  });

组合列

组合表头展示列信息。


import React from 'react';
import ReactDOM from 'react-dom';
import { DataSet, Table } from 'choerodon-ui/pro';
const { Column } = Table;
class App extends React.Component {
  ds = new DataSet({
    primaryKey: 'userid',
    name: 'user',
    autoQuery: true,
    pageSize: 5,
    fields: [
      { name: 'userid', type: 'string', label: '编号', required: true },
      { name: 'name', type: 'string', label: '姓名' },
      { name: 'age', type: 'number', label: '年龄', max: 100, step: 1 },
      {
        name: 'sex',
        type: 'string',
        label: '性别',
        lookupCode: 'HR.EMPLOYEE_GENDER',
      },
      {
        name: 'date.startDate',
        type: 'date',
        label: '开始日期',
        defaultValue: new Date(),
      },
      {
        name: 'sexMultiple',
        type: 'string',
        label: '性别（多值）',
        lookupCode: 'HR.EMPLOYEE_GENDER',
        multiple: true,
      },
    ],
  });
  render() {
    return (
      <Table dataSet={this.ds}>
        <Column header="组合">
          <Column name="name" width={100} />
          <Column name="age" />
        </Column>
        <Column header="组合3">
          <Column header="组合2">
            <Column name="sex" />
            <Column name="date.startDate" />
          </Column>

组合行

通过隐藏行实现行合并展示。


/* eslint-disable no-plusplus */
import React from 'react';
import ReactDOM from 'react-dom';
import { DataSet, Table } from 'choerodon-ui/pro';
let needLoadFlag = true;
const rowCombineArr = [];
const transformData = (ds) => {
  const data = ds.toData();
  let currentName = null;
  let repeatNum = 0;
  let repeatStart = 0;
  for (let i = 0; i < data.length; i++) {
    const record = data[i];
    // 根据name进行合并
    const { name } = record;
    if (currentName === null) {
      currentName = name;
      repeatNum = 1;
      repeatStart = i;
      rowCombineArr[repeatStart] = 1;
    } else if (currentName === name) {
      rowCombineArr[i] = 0;
      repeatNum++;
    } else {
      currentName = null;
      rowCombineArr[repeatStart] = repeatNum;
      repeatNum = 0;
      i--;
    }
    if (i === data.length - 1) {
      rowCombineArr[repeatStart] = repeatNum;
    }
  }
  ds.loadData(data);
};
const newDataSet = {
  fields: [
    {
      name: 'name',
      type: 'string',
      label: 'name',

高级搜索条

Table queryBar 设为 advancedBar 展示高级搜索条。


import React from 'react';
import ReactDOM from 'react-dom';
import { DataSet, Table, Button } from 'choerodon-ui/pro';
const optionData = [
  { text: '男', value: 'M' },
  { text: '女', value: 'F' },
];
class App extends React.Component {
  optionDs = new DataSet({
    data: optionData,
    selection: 'single',
  });
  ds = new DataSet({
    primaryKey: 'userid',
    name: 'user',
    autoQuery: true,
    pageSize: 5,
    queryFields: [
      { name: 'name', type: 'string', label: '姓名' },
      { name: 'age', type: 'number', label: '年龄' },
      {
        name: 'sex.text',
        type: 'string',
        label: '性别',
        textField: 'text',
        valueField: 'value',
        options: this.optionDs, // 下拉框组件的菜单数据集
        defaultValue: 'F',
      },
      { name: 'date.startDate', type: 'date', label: '开始日期' },
      {
        name: 'sexMultiple',
        type: 'string',
        label: '性别（多值）',
        lookupCode: 'HR.EMPLOYEE_GENDER',
        multiple: true,
      },
    ],
    fields: [
      { name: 'userid', type: 'string', label: '编号', required: true },
      { name: 'name', type: 'string', label: '姓名' },
      { name: 'age', type: 'number', label: '年龄', max: 100, step: 1 },
      {
        name: 'sex',

过滤条

Table queryBar 设为 bar 展示过滤条。


import React from 'react';
import ReactDOM from 'react-dom';
import { DataSet, Table, Button } from 'choerodon-ui/pro';
const config = {
  primaryKey: 'userid',
  name: 'user',
  autoQuery: true,
  pageSize: 5,
  queryFields: [
    { name: 'name', type: 'string', label: '姓名', defaultValue: 'Hugh' },
    { name: 'age', type: 'number', label: '年龄' },
    { name: 'code', type: 'object', label: '代码描述', lovCode: 'LOV_CODE' },
    {
      name: 'sex',
      type: 'string',
      label: '性别',
      lookupCode: 'HR.EMPLOYEE_GENDER',
    },
    { name: 'date.startDate', type: 'date', label: '开始日期' },
    {
      name: 'sexMultiple',
      type: 'string',
      label: '性别（多值）',
      lookupCode: 'HR.EMPLOYEE_GENDER',
      multiple: true,
    },
  ],
  fields: [
    { name: 'userid', type: 'string', label: '编号', required: true },
    { name: 'name', type: 'string', label: '姓名' },
    { name: 'age', type: 'number', label: '年龄', max: 100, step: 1 },
    {
      name: 'sex',
      type: 'string',
      label: '性别',
      lookupCode: 'HR.EMPLOYEE_GENDER',
    },
    {
      name: 'date.startDate',
      type: 'date',
      label: '开始日期',
      defaultValue: new Date(),
    },
    {
      name: 'sexMultiple',
      type: 'string',
      label: '性别（多值）',
      lookupCode: 'HR.EMPLOYEE_GENDER',
      multiple: true,
    },

专业搜索条

Table queryBar 设为 professionalBar 展示专业搜索条。


import React from 'react';
import ReactDOM from 'react-dom';
import { DataSet, Table } from 'choerodon-ui/pro';
const optionData = [
  { text: '男', value: 'M' },
  { text: '女', value: 'F' },
];
class App extends React.Component {
  optionDs = new DataSet({
    data: optionData,
    selection: 'single',
  });
  ds = new DataSet({
    primaryKey: 'userid',
    name: 'user',
    autoQuery: true,
    pageSize: 5,
    queryFields: [
      { name: 'name', type: 'string', label: '姓名' },
      { name: 'age', type: 'number', label: '年龄' },
      {
        name: 'sex.text',
        type: 'string',
        label: '性别',
        textField: 'text',
        valueField: 'value',
        options: this.optionDs, // 下拉框组件的菜单数据集
        defaultValue: 'F',
      },
      { name: 'date.startDate', type: 'date', label: '开始日期' },
      {
        name: 'sexMultiple',
        type: 'string',
        label: '性别（多值）',
        lookupCode: 'HR.EMPLOYEE_GENDER',
        multiple: true,
      },
    ],
    fields: [
      { name: 'name', type: 'string', label: '姓名' },
      { name: 'age', type: 'number', label: '年龄' },
      {
        name: 'sex.text',
        type: 'string',
        label: '性别',
        textField: 'text',

自定义搜索条

queryBar 采用钩子类型自定义搜索条，预置搜索条组件可导出配合使用。


import React from 'react';
import ReactDOM from 'react-dom';
import { DataSet, Table, Button, Form } from 'choerodon-ui/pro';
const { FilterBar } = Table;
const optionData = [
  { text: '男', value: 'M' },
  { text: '女', value: 'F' },
];
class App extends React.Component {
  optionDs = new DataSet({
    data: optionData,
    selection: 'single',
  });
  ds = new DataSet({
    primaryKey: 'userid',
    name: 'user',
    autoQuery: true,
    pageSize: 5,
    queryFields: [
      { name: 'name', type: 'string', label: '姓名' },
      { name: 'age', type: 'number', label: '年龄' },
      {
        name: 'sex.text',
        type: 'string',
        label: '性别',
        textField: 'text',
        valueField: 'value',
        options: this.optionDs,
      },
    ],
    fields: [
      { name: 'userid', type: 'string', label: '编号', required: true },
      { name: 'name', type: 'string', label: '姓名' },
      { name: 'age', type: 'number', label: '年龄', max: 100, step: 1 },
      {
        name: 'sex',
        type: 'string',
        label: '性别',
        lookupCode: 'HR.EMPLOYEE_GENDER',
      },
      {
        name: 'date.startDate',
        type: 'date',
        label: '开始日期',
        defaultValue: new Date(),
      },
      {
        name: 'sexMultiple',
        type: 'string',
        label: '性别（多值）',

自定义查询 DataSet

自定义列表头部查询 DataSet，更灵活处理查询数据源逻辑。


import React from 'react';
import ReactDOM from 'react-dom';
import { DataSet, Table } from 'choerodon-ui/pro';
const { Column } = Table;
class App extends React.Component {
  qds = new DataSet({
    autoQuery: true,
    name: 'user',
    pageSize: 1,
    fields: [
      { name: 'name', type: 'string', label: '姓名' },
      { name: 'age', type: 'number', label: '年龄' },
      {
        name: 'code',
        type: 'object',
        label: '代码描述',
        lovCode: 'LOV_CODE',
      },
      {
        name: 'code_code',
        type: 'string',
        label: '代码',
        maxLength: 20,
        bind: 'code.code',
        ignore: 'always',
      },
      {
        name: 'code_description',
        type: 'string',
        label: '代码描述',
        bind: 'code.description',
        ignore: 'always',
      },
    ],
  });
  ds = new DataSet({
    primaryKey: 'userid',
    name: 'user',
    autoQuery: true,
    pageSize: 5,
    queryDataSet: this.qds,
    selection: 'single',
    fields: [
      { name: 'userid', type: 'string', label: '编号', required: true },

Spin 受控

Table Spin 受控与自定义渲染展示。


import React from 'react';
import ReactDOM from 'react-dom';
import { DataSet, Table, Button, message } from 'choerodon-ui/pro';
const { Column } = Table;
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      spinProps: {},
    };
  }
  ds = new DataSet({
    primaryKey: 'userid',
    name: 'user',
    autoQuery: true,
    pageSize: 5,
    fields: [
      {
        name: 'userid',
        type: 'string',
        label: '编号',
        required: true,
        unique: true,
        help: '主键，区分用户',
      },
      { name: 'name', type: 'intl', label: '姓名' },
      {
        name: 'age',
        type: 'number',
        label: '年龄',
        unique: 'uniqueGroup',
        max: 100,
        step: 1,
        help: '用户年龄，可以排序',
      },
    ],
  });
  handleUp = () => {
    this.setState({
      spinProps: { indicator: this.c7nIcon, size: 'large', spinning: true },
    });
    message.success('启用自定义Spin');
  };

按钮受控

结合 mobx 处理一些按钮状态控制，避免在事件中使用 state 导致性能问题。


import React from 'react';
import ReactDOM from 'react-dom';
import { observer } from 'mobx-react-lite';
import {
  DataSet,
  Table,
  Button,
} from 'choerodon-ui/pro';
const HeaderButtons = observer(props => {
  const isDisabled = props.dataSet.selected.length === 0;
  return (
    <Button icon="delete" disabled={isDisabled}>
      删除
    </Button>
  );
});
const App = observer(() => {
  const userDs = new DataSet({
    primaryKey: 'userid',
    name: 'user',
    autoQuery: true,
    pageSize: 5,
    fields: [
      {
        name: 'userid',
        type: 'string',
        label: '编号',
        required: true,
      },
      {
        name: 'name',
        type: 'intl',
        label: '姓名',
      },
      {
        name: 'age',
        type: 'number',
        label: '年龄',
        max: 100,
        step: 1,
      },
      {
        name: 'sex',
        type: 'string',

动态配置字段编辑器

动态切换字段编辑器，根据字段基础的值来改变字段性别编辑器为 lov 或 select。


import React from 'react';
import ReactDOM from 'react-dom';
import { DataSet, Table, Button, Switch, Select } from 'choerodon-ui/pro';
const { Column } = Table;
class App extends React.Component {
  optionDs = new DataSet({
    selection: 'single',
    queryUrl: '/common/code/HR.EMPLOYEE_GENDER/',
    autoQuery: true,
  });
  userDs = new DataSet({
    autoCreate: true,
    primaryKey: 'userid',
    name: 'user',
    pageSize: 5,
    fields: [
      {
        name: 'base',
        type: 'string',
        label: '基础',
      },
      {
        name: 'sex',
        label: '性别',
        dynamicProps: {
          type: ({ record }) => {
            return record.get('base') === 'Lov' ? 'object' : 'string';
          },
          lovCode: ({ record }) => {
            return record.get('base') === 'Lov' ? 'LOV_CODE' : null;
          },
          options: ({ record }) => {
            return record.get('base') === 'Lov' ? null : this.optionDs;
          },

自适应高度

通过 autoHeight 使得表格可以自适应容器高度，内容超出表内滚动。(需要父级元素非仅由 Table 撑开)。

autoHeight 属性:

类型	默认值 / 自定义
boolean	false
boolean	true = { type: ‘minHeight’, diff: 80 }
object	{ type: ‘minHeight’ \| ‘maxHeight’, diff: number(Table 自适应底部预留调整参数) }


import React from 'react';
import ReactDOM from 'react-dom';
import {
  DataSet,
  Table,
  Form,
  TextField,
  NumberField,
  SelectBox,
  Modal,
  Button,
} from 'choerodon-ui/pro';
import { observer } from 'mobx-react';
const { Column } = Table;
class App extends React.Component {
  userDs = new DataSet({
    primaryKey: 'userid',
    name: 'user',
    autoQuery: true,
    pageSize: 5,
    fields: [
      {
        name: 'userid',
        type: 'string',
        label: '编号',
        required: true,
      },
      {
        name: 'name',
        type: 'intl',
        label: '姓名',
      },
      {
        name: 'age',
        type: 'number',
        label: '年龄',
        max: 100,
        step: 1,
      },
      {
        name: 'sex',
        type: 'string',
        label: '性别',
        lookupCode: 'HR.EMPLOYEE_GENDER',
        required: true,
      },
      { name: 'enable', type: 'boolean', label: '是否开启' },
    ],
  });
 demoDs = new DataSet({
    autoCreate: true,
    fields: [

虚拟滚动

虚拟滚动，virtual 配合 height 使用。

当前版本还有一些问题，拖动滚动不顺滑等，非必需情况（大数据需求并同时对功能性需求很高）下使用建议不使用。

后续会不断完善此功能，感谢理解。


import React from 'react';
import ReactDOM from 'react-dom';
import { DataSet, Table } from 'choerodon-ui/pro';
class App extends React.Component {
  userDs = new DataSet({
    primaryKey: 'userid',
    name: 'user',
    autoQuery: true,
    pageSize: 10,
    fields: [
      {
        name: 'userid',
        type: 'string',
        label: '编号',
        required: true,
        unique: true, // 唯一索引或联合唯一索引组名 设置可编辑只有新增才能编辑,确保该字段或字段组唯一性
        help: '主键，区分用户',
      },
      {
        name: 'name',
        type: 'intl',
        label: '姓名',
      },
      {
        name: 'age',
        type: 'number',
        label: '年龄',
        unique: 'uniqueGroup',
        max: 100,
        step: 1,
        help: '用户年龄，可以排序',
      },
      {
        name: 'numberMultiple',
        type: 'number',
        label: '数值多值',
        multiple: true,
        min: 10,
        max: 100,
        step: 0.5,
      },
      {
        name: 'code',
        type: 'object',
        label: '代码描述',
      },

拖拽集成

拖拽集成，点击对应按钮查看不同类型拖拽示例。


import React from 'react';
import ReactDOM from 'react-dom';
import {
  DataSet,
  Table,
  Form,
  TextField,
  NumberField,
  SelectBox,
  Modal,
  Button,
} from 'choerodon-ui/pro';
const { Column } = Table;
class EditButton extends React.Component {
  handleClick = e => {
    const { record, onClick } = this.props;
    onClick(record, e);
  };
  render() {
    return <Button funcType="flat" icon="mode_edit" onClick={this.handleClick} size="small" />;
  }
}
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      dragColumnAlign: undefined,
    };
  }
  userDs = new DataSet({
    primaryKey: 'userid',
    name: 'user',
    autoQuery: true,
    pageSize: 5,
    fields: [
      {
        name: 'userid',
        type: 'string',
        label: '编号',
        required: true,
      },
      {
        name: 'name',
        type: 'intl',

表头编辑

支持对列 header 编辑以及列的位置拖拽修改，触发对应的事件获取信息进行处理。


import React from 'react';
import ReactDOM from 'react-dom';
import {
  DataSet,
  Table,
  Form,
  TextField,
  NumberField,
  SelectBox,
  Modal,
  Button,
} from 'choerodon-ui/pro';
const { Column } = Table;
class EditButton extends React.Component {
  handleClick = (e) => {
    const { record, onClick } = this.props;
    onClick(record, e);
  };
  render() {
    return (
      <Button
        funcType="flat"
        icon="mode_edit"
        onClick={this.handleClick}
        size="small"
      />
    );
  }
}
const columnsNew = [
  { name: 'age', header: '芳龄' },
  { name: 'name', header: '贵姓' },
  { name: 'userid', header: '排位' },
  { name: 'enable', header: '甄选' },
];
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      editColumns: 'order',
      columnsNew: columnsNew,
      isDragColumn: true,
    };
  }

拖拽渲染示例

可以通过 rowDragRender 里面方法进行对于整体的拖拽控制，如 droppableProps，droppableProps 控制是否可以拖动和放入等。更多查看 react-beautiful-dnd。


import React from 'react';
import ReactDOM from 'react-dom';
import {
  DataSet,
  Table,
  Form,
  TextField,
  NumberField,
  SelectBox,
  Modal,
  Button,
} from 'choerodon-ui/pro';
const { Column } = Table;
const { TableRow } = Table;
class EditButton extends React.Component {
  handleClick = (e) => {
    const { record, onClick } = this.props;
    onClick(record, e);
  };
  render() {
    return (
      <Button
        funcType="flat"
        icon="mode_edit"
        onClick={this.handleClick}
        size="small"
      />
    );
  }
}
class App extends React.Component {
  userDs = new DataSet({
    primaryKey: 'userid',
    name: 'user',
    autoQuery: true,
    pageSize: 5,
    fields: [
      {
        name: 'userid',
        type: 'string',
        label: '编号',
        required: true,
      },

功能总和

极其复杂的案例，通过操作了解更多 Table 功能。


import React from 'react';
import ReactDOM from 'react-dom';
import {
  DataSet,
  Table,
  NumberField,
  DateTimePicker,
  SelectBox,
  Modal,
  Button,
  AutoComplete,
} from 'choerodon-ui/pro';
const { Column } = Table;
function sexIdRenderer({ record }) {
  // 获取性别codeValueId
  return record.getField('sex').getLookupData().codeValueId;
}
function handleUserDSLoad({ dataSet }) {
  const first = dataSet.get(0);
  if (first) {
    first.selectable = false;
  }
}
function renderColumnFooter(dataset, name) {
  const max = Math.max(
    0,
    ...dataset.data
      .map((record) => record.get(name))
      .filter((value) => !isNaN(value)),
  );
  return `最大年龄：${NumberField.format(max)}`;
}
function renderColumnHeader(dataset, name) {
  const field = dataset.getField(name);
  return (
    <span>
      <i>-=</i>
      {field ? field.get('label') : ''}
      <i>=-</i>
    </span>
  );
}
const codeDynamicProps = {
  lovCode({ record }) {
    if (record) {
      return 'LOV_CODE';
    }
  },
};
const nameDynamicProps = {

API

Table

参数	说明	类型	默认值
header	表头	ReactNode \| (records) => ReactNode
footer	表脚	ReactNode \| (records) => ReactNode
border	是否显示边框	boolean	true
autoFocus	是否新增行自动获焦至第一个可编辑字段	boolean	false
selectionMode	选择记录的模式, 可选值: rowbox \| click \| dblclick \| mousedown \| none	string	rowbox
alwaysShowRowBox	是否一直显示 rowbox,开启后在其他模式下也会显示 rowbox	boolean	false
onRow	设置行属性	({ dataSet, record, index, expandedRow }) => object
buttons	功能按钮，内置按钮可添加 `afterClick` 钩子，用于执行除了默认行为外的动作，可选值：`add` `delete` `remove` `save` `query` `reset` `expandAll` `collapseAll` `export` 或数组或自定义按钮，数组为可选值字符串+按钮配置属性对象	string \| [string, object] \| ReactNode \| object
queryFields	自定义查询字段组件或默认组件属性，默认会根据 queryDataSet 中定义的 field 类型自动匹配组件	ReactNode[] \| object
queryFieldsLimit	头部显示的查询字段的数量，超出限制的查询字段放入弹出窗口	number
queryBar	查询条, 可选值为钩子或者内置类型：filterBar \| professionalBar \| advancedBar \| normal \| bar \| none	string \| ({ dataSet, queryDataSet, buttons, pagination, queryFields, queryFieldsLimit }) => ReactNode	normal
summaryBar	汇总条, 可选值为钩子或者字段 name	string \| ({ dataSet, summaryFieldsLimit }) => ReactNode
summaryFieldsLimit	头部显示的汇总字段的数量，超出限制的查询字段收起	number
useMouseBatchChoose	是否使用鼠标批量选择,开启后在 rowbox 的情况下可以进行鼠标拖动批量选择,在起始的 rowbox 处按下,在结束位置松开	boolean	false
rowHeight	行高	number \| auto	30
defaultRowExpanded	默认行是否展开，当 dataSet 没有设置 expandField 时才有效	boolean	false
expandRowByClick	通过点击行来展开子行	boolean	false
expandedRowRenderer	展开行渲染器	({ dataSet, record }) => ReactNode
expandIcon	自定义展开图标	({ prefixCls, expanded, expandable, needIndentSpaced, record, onExpand }) => ReactNode
expandIconColumnIndex	展开图标所在列索引	number
expandIconAsCell	展开图标是否单独单元格展示	boolean	true \| false(tree mode)
indentSize	展示树形数据时，每层缩进的宽度	number	15
filter	数据过滤，返回值 true - 显示 false - 不显示	(record) => boolean
mode	表格展示的模式，tree 需要配合 dataSet 的 idField 和 parentField 来展示，可选值: list \| tree	string	list
editMode	表格编辑的模式，可选值: cell \| inline	string	cell
filterBarFieldName	`queryBar`为`bar`时，直接输入的过滤条件的字段名	string	params
filterBarPlaceholder	`queryBar`为`bar`时输入框的占位符	string
pagination	分页器，参考配置项或 pagination，设为 false 时不展示分页	object \| false
highLightRow	当前行高亮	boolean	true
selectedHighLightRow	勾选行高亮	boolean	false
columnResizable	可调整列宽	boolean	true
pristine	显示原始值	boolean	false
onExpand	点击展开图标时触发	(expanded, record) => void
virtual	是否开启虚拟滚动，当设置表格高度时有效	boolean	false
virtualSpin	是否开启虚拟滚动 Spin	boolean	false
autoHeight	是否开启高度自适应	boolean \| { type: ‘minHeight’ \| ‘maxHeight’, diff: number(80) }	false
autoFootHeight	是否开启是否单独处理 column footer	boolean	false
autoFocus	是否新增行自动获焦至第一个可编辑字段	boolean	false
editorNextKeyEnterDown	是否开启回车跳转下一行编辑	boolean	true
autoMaxWidth	是否开启双击侧边栏宽度最大自适应, 初次双击为最大值再次双击为 minWidth	boolean	false
dragColumnAlign	增加一个可拖拽列，实现行拖拽	left \| right
dragColumn	打开列拖拽,组合列无法使用	boolean	false
dragRow	行拖拽，实现行的拖拽，会导致拖拽列的一些事件失效，可以用dragColumnAlign来避免，树形数据无法使用	boolean	false
onDragEnd	完成拖拽后的触发事件	(dataSet, columns, resultDrag, provided) => void
columnsDragRender	控制列的拖拽渲染	请查看DragRender配置项
rowDragRender	控制列的拖拽渲染	请查看DragRender配置项
columnsMergeCoverage	优先级高于columns，实现表头文字修改自定义修改和列的位置自定义修改	ColumnProps[]	[]
columnsOnChange	拖拽列和修改表头文字触发事件	(change: ChangeColumns) => void
columnsEditType	合并列信息选择，目前可以选择表头文字或者表的位置进行合并	order \| all \| header
onDragEndBefore	完成拖拽后,切换位置之前的触发事件	(dataSet, columns, resultDrag, provided) => false \| void \|resultDrag
keyboard	开启关闭新增的快捷按钮事件	boolean	false
dynamicFilterBar	`queryBar` 为 `filterBar` 时筛选条属性配置	DynamicFilterBarConfig

更多属性请参考 DataSetComponent。

Table.Column

参数	说明	类型	默认值
name	列对照的字段名	string
width	列宽，不推荐给所有列设置宽度，而是给某一列不设置宽度达到自动宽度的效果	number
minWidth	最小列宽	number	100
header	列头	ReactNode \| (dataSet, name) => ReactNode
footer	列脚	ReactNode \| (dataSet, name) => ReactNode
renderer	单元格渲染回调	({ value, text, name, record, dataSet }) => ReactNode
editor	编辑器, 设为 `true` 时会根据 field 的 type 自动匹配编辑器。不可编辑请使用 `false` 值，而不是在控件上加 disabled。	FormField \| ((record, name) => FormField \| boolean) \| boolean
lock	是否锁定，可选值 false \| true \| ‘left’ \| ‘right’	boolean\| string	false
align	文字对齐方式，可选值： left \| center \| right	string
resizable	是否可调整宽度	boolean	true
sortable	是否可排序（后端请求排序，前端排序请自定义 header 自行实现）	boolean	false
style	列单元格内链样式	object
className	列单元格样式名	string
headerStyle	列头内链样式	object
headerClassName	列头样式名	string
footerStyle	列脚内链样式	object
footerClassName	列脚样式名	string
help	额外信息，常用于提示	`string`
showHelp	展示提示信息的方式。可选值 tooltip \| newLine \| none	string	tooltip
onCell	设置单元格属性	({ dataSet, record, column }) => object
command	行操作按钮集，该值为数组或返回数组的钩子，内置按钮可添加 `afterClick` 钩子，用于执行除了默认行为外的动作，数组可选值：`edit` `delete` 或 [`edit`\| `delete` , 按钮配置属性对象] 或自定义按钮	(string \| [string, object] \| ReactNode)[] \| ({ dataSet, record }) => (string \| [string, object] \| ReactNode \| object )[]
hidden	隐藏	boolean
tooltip	用 Tooltip 显示单元格内容。可选值 none \| always \| overflow	string	none

Table.FilterBar

参数	说明	类型	默认值
paramName	输入的过滤条件的字段名	string	params
placeholder	输入框的占位符	string	过滤表

更多属性请参考 Table queryBar 属性的钩子参数。

Table.AdvancedQueryBar & Table.ProfessionalBar

参数	说明	类型	默认值
queryFieldsLimit	头部显示的查询字段的数量，超出限制的查询字段放入弹出窗口	number	1

更多属性请参考 Table queryBar 属性的钩子参数。

Table.ToolBar

参数	说明	类型	默认值
queryFieldsLimit	头部显示的查询字段的数量，超出限制的查询字段放入弹出窗口	number	1
pagination	分页器，参考pagination	PaginationComponent

更多属性请参考 Table queryBar 属性的钩子参数。

pagination

分页的配置项。

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

dragRender

可以满足自定义更多的渲染需求，注意会覆盖默认值，建议阅读中文地址react-beautiful-dnd 以及当前代码示例。控制 renderClone 拖拽起来的时候会在 body 下面新增加一个 table 会在这个 table 注入元素比如下面的示例可以实现在类名为 c7n-pro-table-drag-container 的 table 里面渲染对应的元素，这里你可以增加样式覆盖完成你想要的拖拽样式，由于拖拽使用的 Fixed 定位所以会导致 table 长度变化，可以根据业务修改合适的 columns 的宽度来让表现更加自然。renderIcon 来渲染拖拽的自定义 Icon。

可以注意一下设置新增拖拽例的key值 DRAG_KEY = ‘drag-column‘; 防止拖拽在dom结构外报错的table 类名 c7n-pro-table-drag-container

参数	说明	类型
droppableProps	droppableProps 参考文档	object
draggableProps	DraggableProps 参考文档	object
renderClone	拖拽起来的时候会在 body 下面新增加一个 table 会在这个 table 注入元素	(DragTableRowProps \| DragTableHeaderCellProps) => ReactElement
renderIcon	可以自定义图标图标	当为 row 时候（{record}）=> ReactElement 为column 时候（{column，dataSet, snapshot}）=> ReactElement

spin

spin 的配置项。

参数	说明	类型
indicator	加载指示符	ReactElement
spinning	是否旋转	boolean

更多案列和属性请参考 Spin。

分页配置

分页功能配置可以按照如下配置进行全局配置

import { configure } from 'choerodon-ui';
configure({
  pagination: { pageSizeOptions: ['10', '20', '50', '100', '1000'] },
});

全局配置操作，建议在初始化的时候进行。更多的配置参考pagination;

导出配置

可以根据需求进行全局配置，和局部配置

import { configure } from 'choerodon-ui';
import { DataSet } from 'choerodon-ui/pro';
// 全局配置
const basicUrl = ``;
configure({
  transport: {
    exports: ({ dataSet, name: fieldName }) => {
      const _token = dataSet.current.get('_token');
      return {
        url: `${basicUrl}/v1/export`,
        method: 'POST',
        params: { _token, fieldName },
        transformResponse: (res) => {
          try {
            const aLink = document.createElement('a');
            const blob = new Blob([res.data], {
              type: 'application/vnd.ms-excel',
            });
            aLink.href = URL.createObjectURL(blob);
            aLink.download = fieldName;
            aLink.click();
            document.body.appendChild(aLink);
          } catch (e) {
            // do nothing, use default error deal
          }
        },
      };
    },
  },
});
// 局部使用
// eslint-disable-next-line no-unused-vars
const tableDs = new DataSet({
  primaryKey: 'userid',
  name: 'user',
  autoQuery: true,
  pageSize: 5,
  cacheSelection: true,
  transport: {
    exports: ({ dataSet }) => {
      const fileId = dataSet.name;
      return {
        url: `/_api/table/${fileId}`,
        method: 'get',
      };
    },
  },
});

新增快捷键

keyboard 控制是否开启

Alt + n，焦点在 table 单元格内（非 querybar 区）时，新增行（代码可配置是首行还是末行新建）
Ctrl + s，焦点在table单元格，则保存当前 table
Ctrl + d（或 Command + d）：
焦点在 table 单元格，则复制上一行的单元格内容
焦点在 table 某行，则复制上一行的所有单元格内容
Delete，当前焦点元素内时，删除 1 个字符
Alt + delete，焦点在 table 单元格内，删除当前行，弹出二次提示框
Shift + 方向键，焦点在 table 某行，当前 table 可多选的情况，可选择多行

局部的使用 demo 方法参见Table;

Table表格

Table 表格

何时使用

代码演示

基础

级联

显示原始值

行内编辑

自定义行内编辑

树形数据

树形数据异步懒加载

树形数据异步分页

组合列

组合行

高级搜索条

过滤条

专业搜索条

自定义搜索条

自定义查询 DataSet

Spin 受控

按钮受控

动态配置字段编辑器

自适应高度

虚拟滚动

拖拽集成

表头编辑

拖拽渲染示例

功能总和

API

Table

Table.Column

Table.FilterBar

Table.AdvancedQueryBar & Table.ProfessionalBar

Table.ToolBar

pagination

dragRender

spin

分页配置

导出配置

新增快捷键