FixedDataTable v0.6 版本迁移指南：API 重大变更解析-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01008/article/details/148527345

FixedDataTable v0.6 版本迁移指南：API 重大变更解析

fixed-data-table A React table component designed to allow presenting thousands of rows of data. 项目地址: https://gitcode.com/gh_mirrors/fi/fixed-data-table

FixedDataTable 是一个高性能的 React 表格组件库，在 v0.6 版本中进行了重大的 API 重构，旨在简化使用方式并提高灵活性。本文将详细解析这些变更，帮助开发者顺利迁移到新版本。

核心变更概述

v0.6 版本的变更主要集中在两大方面：

可定制的单元格渲染：提供了更灵活的单元格内容控制方式
灵活的数据源：解耦了表格与数据源的强绑定关系

快速迁移指南

Table 组件变更

移除了 rowGetter：现在数据直接在 Column 的 cell 属性中提供
移除了 headerDataGetter：表头数据现在通过 Column 的 header 属性提供
移除了 footerData 和 footerDataGetter：页脚数据现在通过 Column 的 footer 属性提供

Column 组件变更

移除了 dataKey：不再需要此属性，但可以在自定义单元格中使用
cellRenderer 替换为 cell API：支持 React 元素或函数
cellClassName：现在直接在 cell 元素上设置
label 和 headerRenderer 替换为 header API
headerClassName：现在直接在 header 元素上设置
footerRenderer 替换为 footer API
footerClassName：现在直接在 footer 元素上设置
移除了 cellDataGetter 和 columnData：数据现在直接通过 cell 提供

ColumnGroup 组件变更

label 和 groupHeaderRenderer 替换为 header API
移除了 columnGroupData：数据现在直接通过 cell 提供

深入解析：可定制的单元格渲染

在旧版本中，单元格内容的定制主要通过 cellRenderer 属性实现，但存在较大局限性。新版本提供了 cell、header 和 footer 三个新 API，它们不再自动包装内容在默认单元格中。

静态内容渲染

const {Column, Cell} = require('fixed-data-table');

const MyColumn = (
  <Column
    header={<Cell>Email</Cell>}
    cell={<Cell className="my-class">Static content</Cell>}
    width={200}
  />
);

动态数据获取

class MyDataFetchingCell extends React.Component {
  render() {
    var {rowIndex, field, ...props} = this.props;
    return (
      <Cell {...props}>
        content: {this._getMyDataForIndex(rowIndex, field)}
      </Cell>
    );
  }

  _getMyDataForIndex(index, field) {
    // 自定义数据获取逻辑
  }
}

const MyColumn = (
  <Column
    header={<Cell>Email</Cell>}
    cell={<MyDataFetchingCell field="email" />}
    width={200}
  />
);

使用渲染函数

const MyColumn = (
  <Column
    header={<Cell>Email</Cell>}
    cell={({rowIndex, ...props}) => (
      <Cell {...props}>
        content: {getMyDataForIndex(rowIndex)}
      </Cell>
    )}
    width={200}
  />
);

深入解析：灵活的数据源

旧版本要求通过 rowGetter 提供所有数据，这种设计不够灵活。新版本移除了这一限制，开发者可以自由选择数据管理方式。

基础数据绑定示例

const rows = [
  {name: 'Sally', email: 'sally@gmail.com'},
  // 更多数据...
];

class MyCell extends React.Component {
  render() {
    var {rowIndex, data, field, ...props} = this.props;
    return (
      <Cell {...props}>
        {data[rowIndex][field]}
      </Cell>
    );
  }
}

const MyTable = (
  <Table
    rowsCount={rows.length}
    rowHeight={50}
    width={1000}
    height={500}>
    <Column
      header={<Cell>Email</Cell>}
      cell={<MyCell data={rows} field="email" />}
      width={200}
    />
  </Table>
);