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