企业级的大数据量的 UI 展现，后台管理系统的3个核心场景

  1. Table 表格：支持虚拟滚动、列锁定、树状展开、内置的排序和过滤支持等
  2. Tree 树：动态加载节点数据、支持节点的拖拽、支持节点多选框、可内置于下拉框等等。
  3. Form 表单：表单状态管理、布局系统、丰富的验证机制等功能。可以一站式满足表单的开发需求

让不懂技术的人也能够参与开发，比如产品和运营，设计
ToB端页面，大部分界面以表格进行展示，以承载数据信息为主；结构简单，分类清晰，便于用户浏览
中后台业务表单很多也很重要，沉淀思考方案，把这个议题聊透，汇总出一个 Table的最佳实践。

帮助用户快速了解并简单分析信息的差异性、关联性等
整体界面需要复用度高，拓展性强
表格中各列内容相对独立，可根据业务需求或用户关注点的不同进行自定义调整
使用一种前端框架进行开发，保持视觉和代码一致性

数据量大，承载了核心业务
逻辑交互复杂，质量失控
拖拽生成表单、复杂自定义组件，输出 schema
快速配置简洁 JSON，输出基于 Antd 的表单
抽象出一些业务常见的表单

表格特性

常见的表格功能

  1. 固定表头 Header
    1. sticky 固定左侧列
    2. 固定右侧列
  2. 行选择
    1. 调整样式，如列颜色等
  3. 点击触发操作(比如加载数据)
  4. 导出当前数据
  5. 按列过滤
  6. 搜索
  7. 排序
    1. 表头上下箭头排序
    2. 拖拽行排序，交换行顺序
    3. 拖拽列顺序
  8. 绑定和展示数据(比如 http 查询的结果数据)
  9. 表格编辑
    1. 重命名列
    2. 编辑当前行
  10. 分页

表格技术点

  1. 大数据筛选排序优化
  2. Canvas Grid
    1. canvas实现 Table，性能好
    2. 快速滚动不会白屏，按照帧渲染
  3. DOM，AgGrid
    1. div实现 Table，容易定制开发
    2. 对象池技术
    3. 虚拟DOM，快速滚动会白屏
  4. 多人协同
    1. OT算法 https://github.com/Operational-Transformation/ot.js

table4.x

不支持的组合 expandedRowRender和column.fixed
展开行不能喝固定列一起使用
展开行不应该和固定列产生冲突。展开行作为单独一列，也应该独立于滚动之外。
从性能考虑，展开行只有在用户点击展开的时候进行渲染。这就导致了我们无法知道是否渲染方法会返回空元素。
v4 添加 rowExpandable 属性，用于判断是否该行支持展开；展开相关属性全部收入 expandable 属性中。

Table 的背景颜色正式提出了一个 @table-bg 变量
在 v4 中，Table 会跟随该变量设置背景色，不会再出现背景被透出来的情况。
v4 全选当前页”替换成了“选择全部”。并将他们抽取成 Table 的两个静态属性。便于用户选择与组合：
v4 templateAreas 属性简化用户的布局设置：

  1. templateAreas: [
  2.   [name, address, address],
  3.   [name, building, no]
  4. ]

v4 summary 属性支持。在 Table 中直接渲染一个 tfoot：用作总结栏
表格导出参考
https://github.com/adazzle/react-data-grid

table3.x

在 v3 中，左侧固定列和右侧固定列分别是两个独立的 Table：
position: sticky 实现元素相对于容器的粘附效果
rc-resize-observer ，通过 ResizeObserver 我们获得了更好的性能以及更准确的监听时机。
hideDefaultSelections 的属性。会在勾选框边上添加一个下拉框并提供两个默认功能：

  • 全选当前页面
  • 反选当前页面
  • 单独开启这个属性并不会有效果，它还有一个条件是你得设置 selections 且至少有一个选项

table4.x封装

  1. import React, { memo } from 'react'
  2. import { Table } from 'antd'
  4. function TableList (props) {
  6.   const {
  7.     className='',
  8.     thead, 
  9.     data, 
  10.     rowKey = 'id',
  11.     type,
  12.     loading,
  13.     scroll,
  14.     selected,
  15.     pagination, // 默认带分页
  16.     rowChange, // null 没有单选或者复选列
  17.     paginationChange, // 分页改变
  18.     children
  19.   } = props
  22.   // rowSelection 选择表格行
  23.   const rowSelection = {
  24.     type, // 默认 'checkbox'
  25.     selectedRowKeys: selected, // 默认选中的
  26.     onChange: (rowKey, row) => rowChange({ rowKey, row }),
  27.     getCheckboxProps: record => {
  28.       return {
  29.         defaultChecked: record.id === 1, // 默认选中的
  30.         disabled: record.id === 4, // 禁用的
  31.       }
  32.     },
  33.   }
  35.   // 分页
  36.   function setPagination(data, paginationChange) {
  37.     const {
  38.       current,
  39.       pageSize,
  40.       total,
  41.       count,
  42.     } = data
  44.     return {
  45.       current,
  46.       pageSize,
  47.       total,
  48.       showQuickJumper: true,
  49.       onShowSizeChange(page, limit) {
  50.         console.log('show size', page, limit) // 向父级传递事件
  51.         paginationChange && paginationChange({ page, limit })
  52.       },
  53.       onChange(page, limit) {
  54.         console.log('page', page, limit)
  55.         paginationChange && paginationChange({ page, limit })
  56.       },
  57.       showTotal() {
  58.         return `共有 ${count} 条`
  59.       }
  60.     }
  61.   }
  63.   // 设置行属性
  64.   function onRow ({record, index}) {
  65.     return {
  66.       onClick: event => {
  67.         // console.log('onrow', record, index)
  68.       }, // 点击行
  69.       onDoubleClick: event => {
  70.         console.log('onrow', record, index)
  71.       },
  72.       onContextMenu: event => { },
  73.       onMouseEnter: event => { }, // 鼠标移入行
  74.       onMouseLeave: event => { },
  75.     }
  76.   }
  78.   const attr = {
  79.     className,
  80.     rowKey,
  81.     loading,
  82.     scroll,
  83.     bordered: true,
  84.     columns: thead,
  85.     dataSource: tbody,
  86.     pagination: pagination && setPagination(data, paginationChange),
  87.     rowSelection: type && rowSelection,
  88.   }
  91.   return (
  92.     <section>
  93.       <Table
  94.         onRow={ (record, index) => onRow({record, index}) }
  95.       />
  96.       { children }
  97.     </section>
  98.   )
  99. }
  101. export default TableList

onChange

  1. fucntion App() {
  2.   const onChange = (pagination, filters, sorter) => {
  3.     // const { current, pageSize } = pagination
  4.     console.log(pagination, filters, sorter)
  5.   }
  7.   return (
  8.     <Table
  9.       onChange={onChange}
  10.       />
  11.   )
  12. }

pagination, filters
image.png

pagination

  1. import { injectIntl } from 'react-intl';
  2. @injectIntl
  3. class App extends PureComponent {}
  5. const { intl, onChange} = this.props;
  7. const attr = {
  8.   rowKey: 'id',
  9.   loading,
  10.   dataSource,
  11.   columns,
  12.   pagination: {
  13.     total,
  14.     current,
  15.     pageSize,
  16.     showSizeChanger: true,
  17.     showQuickJumper: true,
  18.     showTotal: value => intl.formatMessage(locales.total, { value }),
  19.     // value 是搜索框的值
  20.     onShowSizeChange: (current, pageSize) => onChange({ value, current, pageSize }),
  21.     onChange: (current, pageSize) => onChange({ value, current, pageSize }),
  22.   },
  23. };

hooks onChange优化

  1. import { FormattedMessage } from 'react-intl';
  3. function TableList() {
  5.   const attr = {
  6.     rowKey: 'id',
  7.     loading,
  8.     columns,
  9.     dataSource,
  10.     onChange: (pagination, filters) => {
  11.       const { current, pageSize } = pagination
  12.       props.onChange({ value, current, pageSize, filters });
  13.     },
  14.     pagination: {
  15.       total,
  16.       current,
  17.       pageSize,
  18.       showSizeChanger: true,
  19.       showQuickJumper: true,
  20.       showTotal: value => 
  21.         <FormattedMessage id="table.pagination.total" values={{ value }} />,
  22.     },
  23.   };
  25.   return <Table {...attr} />
  26. }
  28.   memo的用法
  29. function propsEqual(prevProps, nextProps) {
  30.   // true 不会触发 render，false会重新 render
  31.   return JSON.stringify(prevProps.value) === JSON.stringify(nextProps.value)
  32. }
  34. export default memo(TableList, propsEqual);