ali-react-table 虚拟表格%26交叉表

https://ali-react-table.js.org/
高性能、高可定制性的 React 虚拟滚动表格

• 支持 10万条数据的渲染
• 过滤、搜索、分页、自定义列
• 排序、树状模式、列高亮
• 实现下钻、右键菜单、交叉表/透视表、收拢/展开等功能
• 表格操作栏
• Excel 导出功能等
• 表格内部用 RxJS 来处理各种事件。 表格源码… 看不懂的话就算了

安装依赖

npm install ali-react-table

构建失败的情况

ali-react-table 不支持 dvajs的 webpack打包

• 会构建失败，npm run build fails to minify
• 原因：react-scripts@2.0.0 必须大于 2.0
• https://create-react-app.bootcss.com/docs/troubleshooting/#npm-run-build-fails-to-minify
• 用最新的 create-react-app没有构建失败的问题
• 如果是 dvajs的项目，npm run build 无法构建成功，不能使用，推荐使用 react-window

BaseTable滚动

• 行（dataSource）负责提供数据
• 列（columns）控制表格如何展现 ```jsx import { BaseTable } from ‘ali-react-table’

function BasicUsage() {

const dataSource = [ { prov: ‘湖北省’, confirm: 54406, cure: 4793, dead: 1457, t: ‘2020-02-15 19:52:02’ }, { prov: ‘广东省’, confirm: 1294, cure: 409, dead: 2, t: ‘2020-02-15 19:52:02’ }, { prov: ‘河南省’, confirm: 1212, cure: 390, dead: 13, t: ‘2020-02-15 19:52:02’ }, { prov: ‘浙江省’, confirm: 1162, cure: 428, dead: 0, t: ‘2020-02-15 19:52:02’ }, { prov: ‘湖南省’, confirm: 1001, cure: 417, dead: 2, t: ‘2020-02-15 19:52:02’ }, ]

const columns = [ { code: ‘prov’, name: ‘省份’, width: 90, lock: true, }, { code: ‘confirm’, name: ‘确诊’, width:300, children: [ { code: ‘item’, name: ‘整体曝光’, width: 100, render: (value, record, index) => value[0]}, { code: ‘item’, name: ‘搜索曝光’, width: 100, render: (value, record, index) => value[1]}, { code: ‘item’, name: ‘成交转化率’, width: 100, render: (value, record, index) => value[2] }, ], }, { code: ‘cure’, name: ‘治愈’, width: 100, align: ‘right’ }, { code: ‘t’, name: ‘更新时间’, width: 180 }, { code: ‘t1’, name: ‘更新时间’,width: 100, }, { code: ‘t2’, name: ‘更新时间’,width: 100, }, { code: ‘t3’, name: ‘更新时间’,width: 100, }, { code: ‘t4’, name: ‘更新时间’,width: 100, }, { code: ‘t5’, name: ‘更新时间’,width: 100, }, { code: ‘t6’, name: ‘更新时间’,width: 100, }, { code: ‘t7’, name: ‘更新时间’,width: 100, }, { code: ‘t8’, name: ‘更新时间’,width: 100, }, ]

const ARR = Array.from({length: 1000}).map((_, i) => i).map((item, i) => { return { code: TIME${i}, name: ‘更新时间’,width: 100, } }) const newColumns = […columns, …ARR]

dataSource.forEach((item, i) => { item.item = [100, 200, 300] }) console.log(‘dd’, dataSource)

return (

<a name="JDPFN"></a>
### useVirtual
- true 开启所有虚拟滚动
- false 关闭所有虚拟滚动
- 'auto' ，默认值；根据表格的行数或列数自动调整是否开启虚拟滚动
   - 行数量超过 100 时，自动开启纵向虚拟滚动
   - 列数量超过 100 时，自动开启横向虚拟滚动
   - 表头的横向虚拟滚动默认关闭
- 水平方向【x轴，横向滚动】的虚拟滚动 要求：所有的列都有一个指定的宽度；
```jsx
import { BaseTable, useTablePipeline, features } from 'ali-react-table';
function App() {
    const attrs = {
    dataSource: [],
    columns: [],
      useVirtual: true,
  }
  return (
      <BaseTable {...attrs}/>
  )
}

columns

lock: true，锁定列
getSpanRect

const columns = [
  code: 'name',  // key
  name: '名字',
  features: { sortable: true },
  {
        getSpanRect: () => {
        return {rowSpan: 2, colSpan: 3}
    }
    }
]

自定义 Loading居中

.art-loading-indicator-wrapper {
  text-align: center !important;
}

TableTransform

纯函数，包装和转换 dataSource/columns
输入列配置 + 数据源，输出一份新的列配置 + 数据源

• 多个 transform 可组合性较好，降低多个功能之间的冲突
• 表格功能不满足业务需求时，可自行实现自定义 transform，与 commonTransforms 配合使用
• BaseTable 提供灵活的 column 配置来提供高可定制性，上层实现各类 transform 实现拓展功能

交叉表

• 交叉表，树状结构

<CrossTable
  // 推荐为交叉表设置一个默认列宽
  defaultColumnWidth={100}
    // leftTree, topTree 均为 { key, value, children } 的嵌套树状结构
  leftTree={leftTree}
  topTree={topTree}
  getValue={(leftNode, topNode) => {
    // 自定义的取数逻辑，针对每个单元格都会调用一次
    // leftNode 表示当前单元格对应的左侧树节点，topNode 是对应的上方树节点
  }}
  render={(value, leftNode, topNode) => {
    // 可选的 自定义的渲染逻辑
    return value
  }}
/>