安装

开始使用FixedDataTable的最简单方法是通过npm安装它：

npm install react --save
npm install fixed-data-table-2 --save

如果您使用的是标准构建系统（例如browserify或webpack），则可以直接使用require方式引入：

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

对于布局和样式，需要添加默认样式表：fixed-data-table-2/dist/fixed-data-table.min.css。

构建你的 Table#

可以通过Table组件设置表格。为了能够处理大量的数据，该表只呈现那些对用户可见的部分，为了计算这个，静态的width，height，rowsCount和rowHeight是必需的：

const React = require('react');
const {Table} = require('fixed-data-table-2');

class MyTable extends React.Component {
  render() {
    return (
      <Table
        rowsCount={100}
        rowHeight={50}
        width={1000}
        height={500}>
        // TODO: Add columns
      </Table>
    );
  }
}

自定义数据#

通常，您将希望按行呈现自定义数据，让我们向表中添加一些数据，并为该列添加标题。

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

class MyTable extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      myTableData: [
        {name: 'Rylan'},
        {name: 'Amelia'},
        {name: 'Estevan'},
        {name: 'Florence'},
        {name: 'Tressa'},
      ],
    };
  }

  render() {
    return (
      <Table
        rowsCount={this.state.myTableData.length}
        rowHeight={50}
        headerHeight={50}
        width={1000}
        height={500}>
        <Column
          header={<Cell>Name</Cell>}
          cell={props => (
            <Cell {...props}>
              {this.state.myTableData[props.rowIndex].name}
            </Cell>
          )}
          width={200}
        />
      </Table>
    );
  }
}

提供了cell属性（当值为函数时返回组件），该函数将传递单元格rowIndex的width和height。通过使用rowIndex，我们可以从this.state.myTableData[rowIndex]中获取每个单元格的数据。

创建可复用的单元格#

通过自定义组件的方式实现单元格的可复用性，如：以下电子邮箱示例

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

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

class MyLinkCell extends React.Component {
  render() {
    const {rowIndex, field, data, ...props} = this.props;
    const link = data[rowIndex][field];
    return (
      <Cell {...props}>
        <a href={link}>{link}</a>
      </Cell>
    );
  }
}

class MyTable extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      myTableData: [
        {name: 'Rylan', email: 'Angelita_Weimann42@gmail.com'},
        {name: 'Amelia', email: 'Dexter.Trantow57@hotmail.com'},
        {name: 'Estevan', email: 'Aimee7@hotmail.com'},
        {name: 'Florence', email: 'Jarrod.Bernier13@yahoo.com'},
        {name: 'Tressa', email: 'Yadira1@hotmail.com'},
      ],
    };
  }

  render() {
    return (
      <Table
        rowsCount={this.state.myTableData.length}
        rowHeight={50}
        headerHeight={50}
        width={1000}
        height={500}>
        <Column
          header={<Cell>Name</Cell>}
          cell={
            <MyTextCell
              data={this.state.myTableData}
              field="name"
            />
          }
          width={200}
        />
        <Column
          header={<Cell>Email</Cell>}
          cell={
            <MyLinkCell
              data={this.state.myTableData}
              field="email"
            />
          }
          width={200}
        />
      </Table>
    );
  }
}