可固定列可排序table

基本思路是：一组数据同时创建两个table并使其完全重叠;将其中一个做隐藏化处理，
包括适用pointer-event取消对事件的感知，visibility隐藏部分cell,此table作为显示固定部分；
升降序可根据字段按需设置，多个字段都设了默认值的话则取第0个，多个字段的排序互斥；
适用方法与antd 的table类似


  1 import React, { useState } from 'react'
import { Icon } from 'antd'
import $ from './table.scss'

export interface Column {
  key: string
  title: string | JSX.Element
  headerClassName?: string
  tdClassName?: string
  width?: number | string
  alignment?: string
  render?: (record: any) => React.ReactNode
  sortChange?: (flag: sortE, col: any) => void
  defaultSort?: string
}
interface Props {
  columns: Column[]
  dataSource: any[]
  rowKey: string
  tableWidth?: number | string
  fixedLeft?: number
}
enum sortE {
  'asc' = 'asc',
  'desc' = 'desc',
  'unsort' = 'unsort',
}
enum textAlign {
  'left' = 'left',
  'right' = 'right',
}
export default function({ columns, dataSource, rowKey, tableWidth = '', fixedLeft = 0 }: Props) {
  const colSortMap = new Map<string | Column, [sortE, React.Dispatch<any>]>()
  const sortCols: Column[] = columns.filter(col => {
    return col.sortChange
  })
  sortCols.forEach(col => {
    colSortMap.set(col, useState(sortE.unsort))
  })
  const sortDefaultCols: Column[] = sortCols.filter(col => {
    return col.defaultSort
  })
  if (sortDefaultCols.length) {
    if (sortDefaultCols[0].defaultSort === sortE.desc) {
      colSortMap.set(sortDefaultCols[0], useState(sortE.desc))
    } else if (sortDefaultCols[0]!.defaultSort === sortE.asc) {
      colSortMap.set(sortDefaultCols[0], useState(sortE.asc))
    }
  }

  const sortChange = (col: Column, flag: sortE) => {
    colSortMap.forEach((val, k) => {
      colSortMap.get(k)![1](sortE.unsort)
    })
    colSortMap.get(col)![1](flag)
    if (col.sortChange) {
      col.sortChange(flag, col)
    }
  }
  const sorter = (col: Column) => {
    return (
      <span className={$.sorter}>
        <Icon
          type="caret-up"
          onClick={() => sortChange(col, sortE.asc)}
          style={{ color: colSortMap.get(col)![0] === sortE.asc ? 'gray' : 'gainsboro' }}
        />
        <Icon
          type="caret-down"
          onClick={() => sortChange(col, sortE.desc)}
          style={{ color: colSortMap.get(col)![0] === sortE.desc ? 'gray' : 'gainsboro' }}
        />
      </span>
    )
  }
  const isVisible = (fixcol: number, isFixed: boolean, index: number) => {
    if (isFixed && fixcol > 0) {
      return index < fixcol ? 'visible' : 'hidden'
    } else if (!isFixed && fixcol > 0) {
      return index < fixcol ? 'hidden' : 'visible'
    } else {
      return 'visible'
    }
  }
  const head = (cols: Column[], isFixed = false) => {
    return (
      <thead>
        <tr>
          {cols.map((col, i) => (
            <th
              key={col.key}
              className={isFixed && i === fixedLeft - 1 ? $.shadow : ''}
              style={{
                visibility: isVisible(fixedLeft, isFixed, i),
                textAlign: (col.alignment as textAlign) || 'left',
                width: col.width,
              }}
            >
              <div>
                <span>{col.title}</span>
                {col.sortChange && sorter(col)}
              </div>
            </th>
          ))}
        </tr>
      </thead>
    )
  }

  const body = (bodyData: any[], cols: Column[], isFixed = false) => {
    return (
      <tbody>
        {bodyData.map((record, index) => (
          <tr key={record[rowKey]}>
            {cols.map(({ key, alignment, render, width }, i) => (
              <td
                key={key}
                className={isFixed && i === fixedLeft - 1 ? $.shadow : ''}
                style={{
                  visibility: isVisible(fixedLeft, isFixed, i),
                  textAlign: (alignment as textAlign) || 'left',
                  width: width || '',
                }}
              >
                <div>{render ? render({ index, ...record }) : record[key]}</div>
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    )
  }
  return (
    <div className={$.table_content}>
      <div className={$.table_scroll_x}>
        <table style={{ width: tableWidth && tableWidth }}>
          <colgroup>
            {columns.map(item => {
              return <col key={item.key} />
            })}
          </colgroup>
          {head(columns)}
          {body(dataSource, columns)}
        </table>
      </div>
      {fixedLeft > 0 && (
        <div
          className={$.table_fixed_left}
          style={{
            backgroundColor: 'transparent',
            pointerEvents: 'none',
            maxWidth: '100%',
            overflow: 'hidden',
          }}
        >
          <table style={{ width: tableWidth && tableWidth }}>
            <colgroup>
              {columns.map(item => {
                return <col key={item.key} />
              })}
            </colgroup>
            {head(columns, true)}
            {body(dataSource, columns, true)}
          </table>
        </div>
      )}
    </div>
  )
}

table.scss

.table_content{
    position: relative;
    td,th{
        text-align: left;
        padding: 8px;
        border-bottom: 2px solid #EBEEF5;
        &:last-child{
            text-align: right;
        }
    }
    th{
        background-color: #F1F1F1;
        font-size: 13px;
        color: #909399;
    }
    .table_scroll_x{
        overflow: auto;
        overflow-x: scroll;
        transition: opacity .3s;
        height: 100%;
        &::-webkit-scrollbar { display: none !important }
        table{
            min-width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            table-layout: fixed;
            height: 100%;
        }
    }
    .table_fixed_left{
        position: absolute;
        top: 0;
        z-index: 1;
        left: 0;
        overflow: hidden;
        width: auto;
        height: 100%;
        table{
            border-collapse: separate;
            border-spacing: 0;
            table-layout: fixed;
            height: 100%;
            td{
                background: #fff;
            }
            .shadow{
                position: relative;
                &::after{
                    content:'';
                    position: absolute;
                    display: inline-block;
                    top: 0;
                    right: -8px;
                    bottom: -2px;
                    width: 8px;
                    background-image: linear-gradient(90deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.00) 100%);
                }
            }
        }
    }
    .sorter{
        display: inline-flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
}