大家好，很高兴又见面了，我是"高级前端?进阶?"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

什么是 FixedDataTable

Fixed-Data-Table-2 是 facebook/fixed-data-table 的延续， 后者存储库不再维护，并且有许多拉取请求（pull requests ）等待处理。

本质上，FixDataTable 是一个 React 组件，用于以灵活、强大的方式构建和渲染数据，支持标准表格功能，例如：标题、列、行、标题分组以及固定位置和滚动列。

FixDataTable旨在处理数千行数据而不牺牲性能，平滑滚动是固定数据表的首要目标，同时代码架构具有高度的灵活性和可扩展性。FixedDataTable 的典型特点包括：

• 固定页眉和页脚
• 固定列和可滚动列
• 处理大量数据
• 可变行高（具有自适应滚动位置）
• 调整列大小
• 高性能滚动
• 可定制的样式
• 跳转到行或列
• 受控滚动 API 允许触摸支持

但是 FixDataTable 也有自己的一些局限性，比如：

• FixDataTable 不提供布局重排机制或计算内容布局信息，例如：单元格内容的宽度和高度， 开发人员必须向表提供布局信息。
• FixDataTable 不处理数据排序，但是允许开发人员提供可排序、过滤或尾加载感知的数据获取器。
• FixDataTable 不获取数据

此版本的 FixDataTable 由 Schr?dinger, Inc. 维护。它是 Facebook 的 FixDataTable 存储库的 fork 版本，可在 BSD 许可证下使用，同时对固定数据表的贡献和修改也受 BSD 许可证的约束。

如何使用 FixDataTable

首先使用 npm 安装 fixed-data-table-2：

npm install fixed-data-table-2

使用链接标签添加默认样式表 dist/fixed-data-table.css 或使用 CSS 模块导入它。

实现表格涉及三种组件类型，即

  const rows =[0,1,2];

  

定义表中一列的数据显示方式，包括该列的所有单元格行为。 不是直接操作每个单元格，而是将单元格组件作为 prop 传递给列，并且该列将为数据数组中的每个索引渲染一个单元格。

Col 1} cell={Column 1} width={2000} />

列中的单元格组件将接收数据的当前数组索引作为 prop (this.props.rowIndex),使用它来访问每个单元格的正确值。

const rows = [0, 1, 2];
Column 1}
  cell={({ rowIndex, ...props }) => {rows[rowIndex]}}
  width={2000}
/>;

如果 data 是对象数组，请为每列定义一个 columnKey 属性，它也将传递到该列中的所有单元格。

const rows = [
  { someKey: "someValue" },
  { someKey: "anotherValue" },
  { someKey: "yetAnother" },
];

Col 1}
  columnKey="someKey"
  cell={({ rowIndex, columnKey, ...props }) => (
    {rows[rowIndex][columnKey]}
  )}
  width={2000}
/>;

您可能会发现定义自定义单元格组件很有用，这些组件也可以传递到列：

const MyCustomCell = ({ isSpecial }) => (
  {isSpecial ? "I'm Special" : "I'm Not Special"}
);
Col 3}
  cell={}
  width={2000}
/>;

下面是完整的代码示例：

import React from "react";
import ReactDOM from "react-dom";
import { Table, Column, Cell } from "fixed-data-table-2";
import "fixed-data-table-2/dist/fixed-data-table.css";
// 表data作为数组列表
const rows = [
  "first row",
  "second row",
  "third row",
  // .... and more
];
// 使用特殊prop的自定义单元实现
const MyCustomCell = ({ mySpecialProp }) => (
  
    {mySpecialProp === "column2" ? "I'm column 2" : "I'm not column 2"}
  
);

// 渲染表格
ReactDOM.render(
  

参考资料

https://github.com/schrodinger/fixed-data-table-2

https://schrodinger.github.io/fixed-data-table-2/

https://schrodinger.github.io/fixed-data-table-2/example-reorder.html

https://www.material-react-table.com/blog/the-best-react-data-grid-table-libraries-with-material-design-in-2023