@aliretail/react-materials-components/demo/Tablex/example.md

B 端物料组件库

---
title: Tablex-Simple
order: 6
---

ActionBar 是用于渲染表格操作栏的容器，样式为 flex 布局。其中可以自由组装多种模式，常用组件有:

- WhaleButtonGroup 按钮组
- AliretailTableCompact 用于设定表格紧凑
- AliretailTableZebra 用于设定表格斑马线功能
- AliretailTableFullscreen 用于设定表格是否全屏的功能
- AliretailTableSetting 表格自定义列功能

```jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Button } from '@alifd/next';
import { Tablex } from '@aliretail/react-materials-components';

const {
  AliretailTableContainer,
  AliretailTable,
  AliretailTableActionBar,
  AliretailTableSetting,
  AliretailTableZebra,
  AliretailTableCompact,
  AliretailTableFullscreen,
} = Tablex;
import WhaleButtonGroup from '@aliretail/react-whale-button-group';

class App extends Component {
  state = {
    dataSource: [],
  };

  componentDidMount() {
    fetch('https://dip.alibaba-inc.com/api/v2/services/schema/mock/51757')
      .then((res) => res.json())
      .then((res) => {
        this.setState({
          dataSource: res,
        });
      });
  }

  render() {
    const { dataSource } = this.state;
    return (
      <div>
        <AliretailTableContainer
          columns={[
            {
              title: '标题',
              dataIndex: 'title',
            },
            {
              group: 'Group 示例',
              children: [
                {
                  key: 'c2',
                  title: 'Group-价格',
                  dataIndex: 'price',
                },
                {
                  key: 'c3',
                  title: 'Group-状态',
                  dataIndex: 'status',
                },
              ],
            },
            {
              title: '价格',
              dataIndex: 'price',
            },
            {
              title: '状态',
              dataIndex: 'status',
            },
            {
              title: '购买原因',
              dataIndex: 'purchasePerson',
            },
          ]}
          dataSource={dataSource}
          settingProps={{
            localStorageKey: 'testKey',
          }}
        >
          <AliretailTableActionBar>
            <WhaleButtonGroup>
              <Button
                onClick={() => {
                  alert('新增');
                }}
              >
                新增
              </Button>
              <Button
                onClick={() => {
                  alert('新增');
                }}
              >
                新增
              </Button>
              <Button
                onClick={() => {
                  alert('新增');
                }}
              >
                新增
              </Button>
              <Button
                onClick={() => {
                  alert('新增');
                }}
              >
                新增
              </Button>
              <Button
                onClick={() => {
                  alert('新增');
                }}
              >
                新增
              </Button>
              <Button
                onClick={() => {
                  alert('新增');
                }}
              >
                新增
              </Button>
              <Button
                onClick={() => {
                  alert('删除');
                }}
              >
                删除
              </Button>
            </WhaleButtonGroup>
            <WhaleButtonGroup>
              <AliretailTableCompact />
              <AliretailTableZebra />
              <AliretailTableFullscreen />
              <AliretailTableSetting />
            </WhaleButtonGroup>
          </AliretailTableActionBar>
          <AliretailTable />
        </AliretailTableContainer>
      </div>
    );
  }
}

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