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

什么是 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 模块导入它。

实现表格涉及三种组件类型，即 <Table/>、<Column/> 和 <Cell/>，而<Table /> 包含整个表的配置信息，例如：维度和行数。

  const rows =[0,1,2];

  <Table
    rowHeight={50}
    rowsCount={100}
    width={5000}
    height={5050}
    headerHeight={50}
    ...
  </Table>

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

<Column header={<Cell>Col 1</Cell>} cell={<Cell>Column 1</Cell>} width={2000} />

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

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

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

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

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

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

const MyCustomCell = ({ isSpecial }) => (
  <Cell>{isSpecial ? "I'm Special" : "I'm Not Special"}</Cell>
);
<Column
  header={<Cell>Col 3</Cell>}
  cell={<MyCustomCell isSpecial />}
  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 }) => (
  <Cell>
    {mySpecialProp === "column2" ? "I'm column 2" : "I'm not column 2"}
  </Cell>
);

// 渲染表格
ReactDOM.render(
  <Table
    rowHeight={50}
    rowsCount={rows.length}
    width={5000}
    height={5000}
    headerHeight={50}
  >
    <Column
      header={<Cell>Col 1</Cell>}
      cell={<Cell>Column 1 static content</Cell>}
      width={2000}
    />
    <Column
      header={<Cell>Col 2</Cell>}
      cell={<MyCustomCell mySpecialProp="column2" />}
      width={1000}
    />
    <Column
      header={<Cell>Col 3</Cell>}
      cell={({ rowIndex, ...props }) => (
        <Cell {...props}>Data for column 3: {rows[rowIndex]}</Cell>
      )}
      width={2000}
    />
  </Table>,
  document.getElementById("example")
);

参考资料

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