StickyTable虚拟滚动封装

StickyTable功能点

1. 支持横向，纵向虚拟滚动
2. 列拖拽
3. Sticky吸顶

loading加载中的状态

暂无数据

StickyTable

css variables 不能用 rgba 设置颜色，
因为左侧固定的列，拖拽时，rgba半透明，会透出下面的文字

import {useState} from 'react';
import { array, bool } from 'prop-types';
import { BaseTable, useTablePipeline, features } from 'ali-react-table';
import { Spin, Empty } from 'antd';
import styles from './style.module.less';
function BlockSpin() {
  return <Spin style={{ display: 'block' }} />;
}
const style = {
  maxHeight: '640px',
  overflow: 'auto',
  '--line-height': 1.5715,
  '--font-size': '12px',
  '--row-height': '48px',
  '--header-row-height': '40px',
  '--cell-padding': '8px',
  '--lock-shadow': '10px 0 8px -8px rgba(0, 0, 0, 0.2)',
  '--border-color': '#f0f0f0',
  // '--bgcolor': '#fff',
  '--bgcolor': 'inherit', // transparent 用 tr的颜色，选中当前行
  '--header-bgcolor': '#dceefe', // 'rgba(205,229,253, 0.45)',
  '--color': 'rgba(0, 0, 0, 0.65)', // td文字颜色
  '--header-color': 'rgba(0, 0, 0, 0.65)', // th 文字颜色
  // '--hover-bgcolor': '#fafafa',
  '--hover-bgcolor': '#fafcff', // 'rgba(205,229,253, 0.1)', // hover时 tr的颜色
  // '--header-hover-bgcolor': 'rgba(205,229,253, 0.3)' = #f5fafe
  '--header-hover-bgcolor': '#f5fafe',
  '--header-highlight-bgcolor': '#f5fafe',
  '--highlight-bgcolor': '#f5fafe',
};
StickyTable.propTypes = {
  columns: array.isRequired,
  dataSource: array.isRequired,
  loading: bool,
};
StickyTable.defaultProps = {
  loading: false,
};
function StickyTable({ dataSource, columns, loading }) {
  // 选中高亮的当前行
  const [currentIndex, setCurrentIndex] = useState(null);
  function getRowProps(record, rowIndex) {
    return {
      style:
        rowIndex === currentIndex
          ? { '--bgcolor': '#eff5fe', '--hover-bgcolor': '#eff5fe' }
          : { '--bgcolor': '#fff' },
      onClick() {
        setCurrentIndex(rowIndex);
      },
    };
  }
  const pipeline = useTablePipeline()
    .input({ dataSource, columns })
    .use(
      features.sort({
        mode: 'single',
        // 默认排序的列
        // defaultSorts: [{ code: 'area', order: 'desc' }],
        orders: ['desc', 'asc'],
        highlightColumnWhenActive: true,
      }),
    )
    .use( // 拖拽列
      features.columnResize({
        fallbackSize: 120,
        // handleBackground: '#ddd',
        handleHoverBackground: 'rgba(229,243,255,0.5)',
        handleActiveBackground: '#e5f3ff',
      }),
    )
  // .use(features.columnRangeHover()); // 鼠标hover 高亮当前列
  return (
    <BaseTable
      {...pipeline.getProps()}
      isLoading={loading}
      getRowProps={getRowProps}
      style={style}
      className={styles.table}
      components={{
        LoadingIcon: BlockSpin,
        EmptyContent:() => <Empty image={Empty.PRESENTED_IMAGE_SIMPLE}/>,
      }}
    />
  );
}
export default StickyTable;

style.module.less

.table {
  th, td, div {
    word-break: break-all; // 强制英文单词断行
    word-wrap: break-word; // 自动换行
    white-space: break-spaces;
  }
  th {
    font-weight: 500 !important;
  }
  td {
    transition: 
      text-decoration ease-in 200ms, 
      font-weight ease 300ms;
  }
  a {
    color: inherit;
    &:hover {
      text-decoration: underline;
    }
  }
}

LoadingContentWrapper

LoadingContentWrapper文档，自定义加载中的状态
https://ali-react-table.js.org/docs/table/api/

function LoadingContentWrapper({ children, visible }) {
  console.log('bisib', visible)
  // visible 表示表格是否处于加载状态中
  // children 是表格的实际内容
  return (
    <Spin spinning={visible}>
      {children}
    </Spin>
  )
}