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

B 端物料组件库

---
title: TableX - 锁列
order: 152
---

```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 [pageSize, setPageSize] = useState(AliretailTableDefaultPageSizeList[0]);

  return (
    <SchemaForm
      onChange={console.log}
      defaultValue={{
        table: [
          {
            id: '130100', // 叶子节点编号
            title: 'I have a dream.',
            address: '河北省/石家庄市',
            name: '张三',
            storeName: '有间店铺',
            storeType: '解忧杂货铺',
          },
          {
            id: '130101', // 叶子节点编号
            title:
              'I am happy to join with you today in what will go down in history as the greatest demonstration for freedom in the history of our nation.Five score years ago, a great American, in whose symbolic shadow we stand today, signed the Emancipation Proclamation. This momentous decree came as a great beacon light of hope to millions of Negro slaves who had been seared in the flames of withering injustice. It came as a joyous daybreak to end the long night of their captivity.',
            address: '河北省/石家庄市',
            name: '张三',
            storeName: '有间店铺',
            storeType: '解忧杂货铺',
          },
          {
            id: '130102', // 叶子节点编号
            title: 'I have a dream.',
            address:
              '河北省/石家庄市河北省/石家庄市河北省/石家庄市河北省/石家庄市河北省/石家庄市河北省/石家庄市河北省/石家庄市河北省/石家庄市河北省/石家庄市河北省/石家庄市河北省/石家庄市',
            name: '张三',
            storeName: '有间店铺',
            storeType: '解忧杂货铺',
          },
        ],
      }}
      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': {
              stickyLock: true,
              columns: [
                {
                  dataIndex: 'id',
                  title: '叶子节点编号',
                  width: 300,
                  lock: true,
                },
                {
                  dataIndex: 'title',
                  title: '标题',
                  width: 300,
                },
                {
                  dataIndex: 'address',
                  title: '当前地址名称',
                  width: 300,
                },
                {
                  dataIndex: 'storeName',
                  title: '店铺名称',
                  width: 300,
                },
                {
                  dataIndex: 'storeType',
                  title: '店铺类型',
                  width: 300,
                },
                {
                  dataIndex: 'name',
                  title: '姓名',
                  width: 300,
                  lock: 'right',
                },
              ],
              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);
```