ColumnsTable动态列

antd Table自定义列的显示

const filterColumn = [0,1,2,3].sort()
const _columns = filterColumn.map(it => columns[it])
隐藏列
<tr 
    draggable 
  onDragStart={onDrag(e,row, index)} 
  onDrop={onDrop(e, row, index)} 
  onDragOver={allowDrop(ev)}
>
funciton onDrag(e, row, index) {e.dataTransfer.setData('index',index)}
funciton onDrop(ev, row, index) {
  e.preventDefault();
  const dragIndex = e.dataTransfer.getData(index)
  dragAndDrop(dragIndex, index);
}
funciton allowDrop(e) { e.preventDefalut() }
// 组件抛出 index，用户自己排序
function dragAndDrop(dragIndex, index) {
  array.move(dragIndex, index)
  const item = arr.splice(dragIndex, 1, arr[index])
  arr.splice(index, 1, item) //数组替换
}
显示序号
const current = 1;
const pageSize = 10;
(rowIndex + 1) + (current - 1) * pageSize
// (rowIndex + 1) + (current* pageSize) * pageSize
初始化进行排序，后端初始化排序
排序 asc 升序，排序是个互斥的，这一列排序，下一列就要取消排序
arr.sort((a,b) => a.value > b.value ? 1 : -1)
desc 降序
arr.sort((a,b) => a.value < b.value ? 1 : -1)

ColumnsTable.jsx

import { useState } from 'react';
import { array } from 'prop-types';
import CustomColumn from './CustomColumns';
import TableList from '../TableList';
ColumnsTable.propTypes = {
  columns: array.isRequired,
  dataSource: array.isRequired,
};
function ColumnsTable({ columns, ...rest }) {
  const [state, setState] = useState(columns);
  function checkChange(checked) {
    const _state = columns.filter(it => checked.includes(it.dataIndex));
    setState(_state);
  }
  return (
    <>
      <div className='text-right mb8'>
        <CustomColumn
          columns={columns}
          onChange={checkChange}
        />
      </div>
      <TableList
        {...rest}
        columns={state}
      />
    </>
  );
}
export default ColumnsTable;

组件使用 ColumnsTable

import ColumnsTable from '@/components';
const columns = [
  {dataIndex: 'user', title: '用户'},
];
function App() {
  return <ColumnsTable columns={columns}/>
}

CustomColumn.jsx 自定义表头

import React, { memo, useState } from 'react';
import { array, func, number } from 'prop-types';
import { Popover, Checkbox } from 'antd';
import { SettingOutlined } from '@ant-design/icons';
import equal from 'fast-deep-equal';
const { Group } = Checkbox;
const iconStyle = { padding: 8, fontSize: 16 };
CustomColumn.propTypes = {
  columns: array.isRequired,
  onChange: func.isRequired,
  width: number,
};
CustomColumn.defaultProps = {
  width: 100, // 下拉的宽度
};
function CustomColumn({ columns, onChange, width }) {
  const [checked, setChecked] = useState(initState);
  function initState() {
    return (columns || []).map(it => it.dataIndex);
  }
  const options = columns.map(({ title, dataIndex }) => ({ label: title, value: dataIndex }));
  const menu = (
    <Group
      style={{ width }}
      options={options}
      value={checked}
      onChange={onCheck}
    />
  );
  function onCheck(values) {
    if (values.length < 1) return;
    setChecked(values);
    onChange(values);
  }
  return (
    <Popover
      trigger='click'
      content={menu}
      placement='bottomRight'
    >
      <SettingOutlined style={iconStyle} />
    </Popover>
  );
}
function propsEqual({ columns }, props) {
  return equal(columns, props.columns);
}
export default memo(CustomColumn, propsEqual);

表格组件参考 https://procomponents.ant.design/components/table?current=1&pageSize=5