使用 InfiniteLoader、Table、Column、AutoSizer 和 CellMeasurer 构建响应式无限滚动 table

Question

我刚刚完成了使用 InfiniteLoader、Table、Column 和 AutoSizer 的工作 table，我意识到这 table 不能随浏览器水平缩放 window。尽管图书馆的大部分内容都有很好的记录，但我还是花了很长时间才开始工作。我想要实现的是像 table 这样的 HTML，它根据浏览器 window 的宽度调整大小，随着内容换行垂直增加行高，并使用具有不同行高的无限加载。反应虚拟化是否可以实现所有这些点？最好先问一下，因为组合这个库的所有移动部分可能很棘手。谢谢！

这是我的组件：

import React from 'react';
import fetch from 'isomorphic-fetch';
import { InfiniteLoader, Table, Column, AutoSizer } from 'react-virtualized';
import { connect } from 'react-redux';
import { CSSTransitionGroup } from 'react-transition-group';
import { fetchProspects } from '../actions/prospects';
import Footer from './footer';

class ProspectsTable extends React.Component {

  constructor(props, context) {
    super(props, context);
    this.renderProspects = this.renderProspects.bind(this);
    this.isRowLoaded = this.isRowLoaded.bind(this);
    this.loadMoreRows = this.loadMoreRows.bind(this);
    this.rowRenderer = this.rowRenderer.bind(this);
    this.state = {
      remoteRowCount: 200,
      list: [
        {
          fullName: '1 Vaughn',
          email: 'brianv@gmail.com',
          phone: '608 774 6464',
          programOfInterest: 'Computer Science',
          status: 'Active',
          dateCreated: '10/31/2017',
        },
        {
          fullName: '2 Vaughn',
          email: 'brianv@gmail.com',
          phone: '608 774 6464',
          programOfInterest: 'Computer Science',
          status: 'Active',
          dateCreated: '10/31/2017',
        },
        {
          fullName: '3 Vaughn',
          email: 'brianv@gmail.com',
          phone: '608 774 6464',
          programOfInterest: 'Computer Science',
          status: 'Active',
          dateCreated: '10/31/2017',
        },
      ],
    };
  }

  isRowLoaded({ index }) {
    return !!this.state.list[index];
  }

  loadMoreRows({ startIndex, stopIndex }) {
    return fetch(`http://localhost:5001/api/prospects?startIndex=${startIndex}&stopIndex=${stopIndex}`)
      .then((response) => {
        console.log('hi', response);
        console.log('hi', this.props);
      });
  }

  rowRenderer({ key, index, style }) {
    return (
      <div
        key={key}
        style={style}
      >
        {this.state.list[index]}
      </div>
    );
  }

  render() {
    return (
            <InfiniteLoader
              isRowLoaded={this.isRowLoaded}
              loadMoreRows={this.loadMoreRows}
              rowCount={this.state.remoteRowCount}
            >
              {({ onRowsRendered, registerChild }) => (
                <div>
                  <AutoSizer>
                    {({ width }) => (
                      <Table
                        ref={registerChild}
                        onRowsRendered={onRowsRendered}
                        width={width}
                        height={300}
                        headerHeight={20}
                        rowHeight={30}
                        rowCount={this.state.list.length}
                        rowGetter={({ index }) => this.state.list[index]}
                      >
                        <Column
                          label="Full Name"
                          dataKey="fullName"
                          width={width / 6}
                        />
                        <Column
                          width={width / 6}
                          label="Email"
                          dataKey="email"
                        />
                        <Column
                          width={width / 6}
                          label="Phone"
                          dataKey="phone"
                        />
                        <Column
                          width={width / 6}
                          label="Program of Interest"
                          dataKey="programOfInterest"
                        />
                        <Column
                          width={width / 6}
                          label="Status"
                          dataKey="status"
                        />
                        <Column
                          width={width / 6}
                          label="Date Created"
                          dataKey="dateCreated"
                        />
                      </Table>
                    )}
                  </AutoSizer>
                </div>
              )}
            </InfiniteLoader>
      );
    }
  }
}

const mapStateToProps = state => ({
  prospects: state.prospects,
});

export default connect(mapStateToProps)(ProspectsTable);

这是一个与我的代码非常相似的 plnkr，我经常引用它：https://plnkr.co/edit/lwiMkw?p=preview

Answer 1

到目前为止，在一个雄心勃勃的项目上做得很好。关于实现剩余目标的一些想法：

Resizes based on the browser window's width

尝试将您的 AutoSizer 组件置于此层次结构的顶层，并确保其父组件的宽度随视口而变化。这可以像父 div 和 width: 100vw.
grows row heights vertically as content wraps, and uses infinite load with varying row heights

这些都可以通过根据数据动态设置行高来实现。来自 Table 的 rowHeight 道具上的 docs：

Either a fixed row height (number) or a function that returns the height of a row given its index: ({ index: number }): number

React-Virtualized 通过提前计算其维度来发挥其魔力，因此您将无法获得 flex-wrap 功能或其他基于 CSS 的解决方案以正常工作。相反，确定如何使用给定行的数据（可能还有当前屏幕尺寸）来计算该行的高度。例如：
```
const BASE_ROW_HEIGHT = 30;
const MAX_NAME_CHARS_PER_LINE = 20;

...

  getRowHeight = ({ index }) => {
    const data = this.state.list[index];

    // Not a great example, but you get the idea;
    // use some facet of the data to tell you how
    // the height should be manipulated
    const numLines = Math.ceil(fullName.length / MAX_NAME_CHARS_PER_LINE);

    return numLines * BASE_ROW_HEIGHT;
  };

  render() {
    ...

    <Table
      ...
      rowHeight={this.getRowHeight}
    >      
  }
```

作为额外的参考，我发现 React-Virtualized Table example 的源代码非常有用——尤其是关于动态设置行高的行：

_getRowHeight({ index }) {
  const { list } = this.context;

  return this._getDatum(list, index).size;
}

祝你好运！

使用 InfiniteLoader、Table、Column、AutoSizer 和 CellMeasurer 构建响应式无限滚动 table

Building a responsive infinite scroll table with InfiniteLoader, Table, Column, AutoSizer, and CellMeasurer

javascript

reactjs

react-virtualized