@aliretail/react-materials-components/demo/FormComponents/tablex.md

B 端物料组件库

---
title: TableX - 表格
order: 150
---

```jsx
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import { FormComponents } from '@aliretail/react-materials-components';
const {
  setup,
  AliretailTableDefaultPageSizeList,
  SchemaForm,
  SchemaMarkupField: Field,
  FormEffectHooks,
  createFormActions,
} = FormComponents;

setup();
const { onFieldMount$ } = FormEffectHooks;

const App = () => {
  const [pageNo, setPageNo] = useState(1);
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const [pageSize, setPageSize] = useState(AliretailTableDefaultPageSizeList[0]);

  const onSelectionChange = (newKeys) => {
    setSelectedRowKeys(newKeys);
  };

  return (
    <SchemaForm
      onChange={console.log}
      defaultValue={{
        table: [
          {
            id: '130100', // 叶子节点编号
            name: '河北省/石家庄市', // 当前地址名称
            children: [{ name: '子表格名称1' }, { name: '子表格名称2' }],
          },
          {
            id: '130101', // 叶子节点编号
            name: '河北省/石家庄市', // 当前地址名称
            children: [{ name: '子表格名称1' }, { name: '子表格名称2' }],
          },
          {
            id: '130102', // 叶子节点编号
            name: '河北省/石家庄市', // 当前地址名称
            children: [{ name: '子表格名称1' }, { name: '子表格名称2' }],
          },
        ],
      }}
      effects={() => {
        const { setFieldState, getFieldState, getFormGraph } = createFormActions();
        onFieldMount$('table').subscribe((payload) => {
          console.log('初始化', payload);
          setFieldState('table', (state) => {
            // 设置到第二页面
            setPageNo(2);
          });
        });
      }}
      schema={{
        type: 'object',
        properties: {
          table: {
            type: 'object',
            'x-component': 'TableX',
            'x-component-props': {
              columns: [
                {
                  dataIndex: 'id',
                  title: '叶子节点编号',
                },
                {
                  dataIndex: 'name',
                  title: '当前地址名称',
                },
              ],
              rowSelection: {
                selectedRowKeys,
                onChange: onSelectionChange,
              },
              paginationProps: {
                current: pageNo,
                pageSize,
                onChange: (page) => {
                  setPageNo(page);
                  console.log('跳到第几页：' + page);
                },
                onPageSizeChange: (size) => {
                  setPageSize(size);
                  console.log('每页显示数量修改：' + size);
                },
                total: 90,
              },
            },
            properties: {
              // 操作区域的按钮
              actionBar: {
                type: 'object',
                properties: {
                  input: {
                    'x-component': 'Input',
                  },
                },
              },
            },
          },
        },
      }}
    />
  );
};

ReactDOM.render(<App />, mountNode);
```

### TableX 拓展属性

| 拓展字段                           | 类型                 | 默认值     | 备注                                          |
| :--------------------------------- | :------------------- | :--------- | :-------------------------------------------- |
| showTableSetting                   | `boolean`            | false      | 是否显示 tablecell 控制器等设置               |
| paginationProps                    | `object`             | undefined  | 同 TableX 的参数支持                          |
| className                          | `string`             | undefined  | 同 TableX 的参数支持                          |
| dataSource                         | `object[]`           | []         | 显示的数据源                                  |
| rowSelection                       | `object`             | undefinded | 是否支持每个 item 的勾选 同 TableX 的参数支持 |
| 'x-component-props'.readOnlyRender | (props) => ReactNode |            | 用于覆盖默认的预览状态                        |

#### TableX.rowSelection

只列了部分常用字段，具体字段请参考 TableX

| 拓展字段        | 类型       | 默认值                                                            | 备注                                                                         |
| :-------------- | :--------- | :---------------------------------------------------------------- | :--------------------------------------------------------------------------- |
| selectedRowKeys | `array`    | []                                                                | 设置了此属性,将 rowSelection 变为受控状态,接收值为该行数据的 primaryKey 的值 |
| onChange        | `function` | `() => {}`                                                        | 当勾选内容改变时的事件                                                       |
| mode            | `string`   | 选择 selection 的模式, 可选值为 single, multiple，默认为 multiple |