---
title: seniortable 高级表格
nav:
  path: /Components
  title: Components
group:
  path: /business
  title: 业务组件
---

## SeniortTable

Demo:

```tsx
import React, { useState, useEffect } from 'react';
import { Button } from 'antd';
import { SeniortTable } from 'react-yis-component';

const Demo = () => {
  const [checkedOptions, setcCheckedOptions] = useState([
    'name',
    'age',
    '1',
    '2',
    '3',
    '4',
  ]);

  const columns = [
    {
      title: 'Full Name',
      width: 120,
      dataIndex: 'name',
      key: 'name',
      ellipsis: true,
      filters: [
        {
          text: 'London',
          value: 'London',
        },
        {
          text: 'New York',
          value: 'New York',
        },
      ],
      onFilterDropdownVisibleChange: visible => {
        console.log(visible);
      },
      // filteredValue: ["London"]
    },
    {
      title: 'Age',
      width: 100,
      dataIndex: 'age',
      key: 'age',
      filters: [
        {
          text: 'London',
          value: 'London',
        },
        {
          text: 'New York',
          value: 'New York',
        },
      ],
    },
    { title: 'Column 1', dataIndex: 'address', key: '1', ellipsis: true },
    { title: 'Column 2', dataIndex: 'address', key: '2', ellipsis: true },
    { title: 'Column 3', dataIndex: 'address', key: '3', ellipsis: true },
    { title: 'Column 4', dataIndex: 'address', key: '4', ellipsis: true },
    { title: 'Column 5', dataIndex: 'address', key: '5', ellipsis: true },
    { title: 'Column 6', dataIndex: 'address', key: '6', ellipsis: true },
    { title: 'Column 7', dataIndex: 'address', key: '7', ellipsis: true },
    { title: 'Column 8', dataIndex: 'address', key: '8', ellipsis: true },
    {
      title: 'Action',
      key: 'operation',
      fixed: 'right',
      width: 100,
      render: () => <a>action</a>,
    },
  ];

  let dataSource = [];
  for (let i = 0; dataSource.length < 50; i++) {
    dataSource.push({
      key: (i + 1).toString(),
      name: 'Joe Black-' + i,
      age: 20 + i,
      address: `Sidney No.${i + 1} Lake Park`,
      index: i,
    });
  }

  const [plainOptions, setPlainOptions] = useState([]);
  useEffect(() => {
    if (columns.length > 0) {
      let newPlainOptions = columns.map((item: any) => {
        return { title: item.title, key: item.key };
      });
      setPlainOptions(newPlainOptions);
    }
  }, []);

  const onSelectChange = (selectedRowKeys, selectedRows) => {
    console.log('selectedRowKeys changed: ', selectedRowKeys, selectedRows);
  };

  const rowSelection = {
    onChange: onSelectChange,
  };

  let newcolumns = [];
  plainOptions.map(item => {
    columns.map(titleItem => {
      if (item.title === titleItem.title) {
        newcolumns.push(titleItem);
      }
    });
  });

  console.log(newcolumns);

  return (
    <div
      style={{ height: '100%', padding: '40px', backgroundColor: '#F5F5F5' }}
    >
      <SeniortTable
        toolBarShow={true}
        toolBarRender={[
          <Button key="1" type="primary">
            新建
          </Button>,
          <Button key="2">批量分组</Button>,
          <Button key="3">批量删除</Button>,
        ]}
        draggable={true}
        tableConfig={{
          rowKey: record => record.key,
          columns: newcolumns.map(item => {
            if (checkedOptions.filter(checks => checks === item.key).length > 0)
              return { ...item, filterType: true };
            else return item;
          }),
          dataSource,
          pagination: {
            showSizeChanger: true,
            showQuickJumper: true,
          },
          rowSelection,
          onChange: (pagination, filters, sorter) =>
            console.log(pagination, filters, sorter),
          rowClassName: (record, index) => {
            let className = 'light-row';
            if (index % 2 === 1) className = 'dark-row';
            return className;
          },
          onRow: record => {
            return {
              onClick: event => {
                console.log(record, event);
              }, // 点击行
              onDoubleClick: event => {},
              onContextMenu: event => {},
              onMouseEnter: event => {}, // 鼠标移入行
              onMouseLeave: event => {},
            };
          },
        }}
        handleNewDrop={data => setPlainOptions(data)}
        plainOptions={plainOptions}
        checkedOptions={checkedOptions}
        onSearch={value => console.log(value)}
        onSortEnd={(oldIndex, newIndex) => console.log(oldIndex, newIndex)}
        configs={['搜索', '刷新', '行高', '导出', '设置']}
        onCheckColumns={e => setcCheckedOptions(e.checked)}
        onClickToolbar={key => console.log(key)}
      />
    </div>
  );
};

export default Demo;
```