ant design table 二次封装

ant design table 二次封装

这里封装了table size 与列排序、列展示与隐藏、列固定 功能

目录结构与依赖

创建creact-react-app,直接省略了，不会自己百度，安装依赖

npm insatll -s antd react-dnd react-dnd-html5-backend immutability-helper

目录结构
├─Q1Tabel
│ DragSortingTable.tsx // 列排序、列展示与隐藏、列固定 功能
│ index.tsx // table扩展
│ Q1Table.d.ts
│ README.md
│ tdEmpty.css

DragSortingTable.tsx

import React, {useEffect, useState} from 'react'
import {Table, Tooltip,} from 'antd';
import {DndProvider, useDrag, useDrop} from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
import update from 'immutability-helper';
import {PushpinOutlined} from '@ant-design/icons'
import {ColumnPropsSwith, fixedType, PropsType} from './Q1Table'

const type = 'DragbleBodyRow';

const DragableBodyRow = ({index, moveRow, className, style, ...restProps}: any): any => {
  const ref = React.useRef();
  const [{isOver, dropClassName}, drop] = useDrop({
    accept: type,
    collect: monitor => {
      const {index: dragIndex} = monitor.getItem() || {};
      if (dragIndex === index) {
        return {};
      }
      return {
        isOver: monitor.isOver(),
        dropClassName: dragIndex < index ? ' drop-over-downward' : ' drop-over-upward',
      };
    },
    drop: (item: any) => {
      moveRow(item.index, index);
    },
  });
  const [, drag] = useDrag({
    item: {type, index},
    collect: monitor => ({
      isDragging: monitor.isDragging(),
    }),
  });
  drop(drag(ref));
  return (
    <tr
      ref={ref}
      className={`${className}${isOver ? dropClassName : ''}`}
      style={
  {cursor: 'move', ...style}}
      {...restProps}
    />
  );
};

export function getPriority(a) {
  return !a.fixed && a.fixed !== true ? 1 : (a.fixed === 'right' ? 2 : 0)
}
// 固定项重新排序
export function sortArr(arr) {
  return arr.sort((a, b) => {
    const priorityA = getPriority(a)
    const priorityB = getPriority(b)
    if (priorityA !== priorityB) {
      return priorityA - priorityB;
    }
    if (a.sortIndex === undefined && b.sortIndex === undefined) {
      return 0;
    }
    const sortA = a.sortIndex === undefined ? Infinity : a.sortIndex;
    const sortB = b.sortIndex === undefined ? Infinity : b.sortIndex;
    return sortA > sortB ? 1 : (sortA === sortB ? 0 : -1);
  })
}


function DragSortingTable(props: PropsType) {
  const originDate = props.columns // 保存原始数据
  const originDateKeys = originDate.length && originDate.map((item: any) => {
    if (item.switch) {
      return item.dataIndex
    }
    return []
  }) || [] // 获取原始数据已选中的值
  const [data, setData] = useState(originDate)
  const [selectedRowKeys, setSelectedRowKeys] = useState(originDateKeys)


  // 改变父级table排序
  useEffect(() => {
    if (props && props.colChange)
      props.colChange(data)
  }, [data])


  // 拖动组件
  const components = {
    body: {
      row: DragableBodyRow,
    },
  };

  // 拖动排序
  const moveRow = (dragIndex: any, hoverIndex: any) => {
    const dragRow = data[dragIndex];
    setData(sortArr(update(
      data,
      {
        $splice: [
          [dragIndex, 1],
          [hoverIndex, 0, dragRow],
        ],
      }
      )
    ))
  };

  // 列展示显示与隐藏
  const rowSelection: any = {
    selectedRowKeys,
    columnWidth: 30,
    onChange: (selectedRowKeys: Array<string | number>): void => {
      setSelectedRowKeys(selectedRowKeys);
      const modifyData = data.map(orig => {
        orig.switch = 0
        selectedRowKeys.map(modify => {
          if (orig.dataIndex === modify) {
            orig.switch = 1
          }
        })
        return orig
      })
      setData(modifyData)
    },
  }

  // 固定到左侧
  const fixedChange = (rowIndex: number, direction: fixedType) => {
    let originDateS = [...data]
    let dataChange = originDateS[rowIndex]
    // 取消固定
    if (dataChange.fixed && dataChange.fixed === direction) {
      delete originDateS[rowIndex].fixed
      sortArr(originDateS)  // 需要重新排序
    } else {
      // 新增固定 或者 变更固定位置
      dataChange = Object.assign(dataChange, {fixed: direction})
      originDateS.splice(rowIndex, 1)