0

我正在关注这个反应表的虚拟化行示例。我知道这段代码正在使用 react 和 react table 最新版本。如何使用react-window我的反应表版本 6.10.0 和反应版本为 16.2.0 的包？另外，我正在从后端加载数据块，例如，前 500 条记录，然后是接下来的 500 条记录，依此类推，但反应表对具有前 500 条记录的用户可见，并且在此数据保持追加后，在此案例，react-windowFixedSizeList函数有用还是VariableSizeList有用？

渲染 React 表的代码：

const columns = this.renderColumn();

<ReactTable
    data={data}
    filterable={true}
    defaultFilterMethod={(filter, row) =>
      matchSorter([row[filter.id]], filter.value).length !== 0
    }
    columns={columns}
    showPagination={false}
    pageSize={data.length}
    minRows={0}
    ref={r => {
      this.selectTable = r;
    }}
    noDataText="No results found"
    defaultSorted={[
      {
        id: 'travelerLastName',
        desc: false,
      },
    ]}
/>

渲染列的功能：

renderColumn = () => [
    {
      name: '',
      Header: x => {
        return (
          <div className={s.selectAllWrapper}>
            <label className={s.checkboxContainer}>
              <input
                type="checkbox"
                onChange={() => this.toggleSelectAll()}
                checked={this.state.selectAll === 1}
                ref={input => {
                  if (input) {
                    input.indeterminate = this.state.selectAll === 2;
                  }
                }}
              />
              <span className={s.checkmark} />
            </label>
          </div>
        );
      },
      Cell: ({ original }) => {
        return (
          <div className={s.selectAllWrapper}>
            <label className={s.checkboxContainer}>
              <input
                type="checkbox"
                className="checkbox"
                checked={this.state.selected[original.id] === true}
                onChange={() => this.toggleRow(original.id)}
              />
              <span className={s.checkmark} />
            </label>
          </div>
        );
      },
      Filter: ({ filter, onChange }) => (
        <div
          style={{
            background: 'rgba(155, 155, 155, 0.1)',
            padding: '7px 5px',
            fontSize: 'inherit',
            fontWeight: 'normal',
            outline: 'none',
            height: '40px',
            border: 'none',
          }}
        >
          <SearchIcon title={''} />
        </div>
      ),
      sortable: false,
      width: 45,
    },
    {
      id: `travelerFirstName`,
      Header: 'First Name',
      Cell: ({ original }) => {
        return (
          <a
            href={`/client/travelers/${original.traveler_id}?tab=profile`}
            target="_blank"
          >
            {original.travelerFirstName}
          </a>
        );
      },
      accessor: d => d.travelerFirstName,
      filterMethod: function(filter, rows) {
        return filterIncludedData(
          rows,
          'travelerFirstName',
          filter.value.toLowerCase(),
        );
      },
      filterAll: true,
      Filter: ({ filter, onChange }) => (
        <input
          placeholder="Search First Name"
          value={filter ? filter.value : ''}
          onChange={event => onChange(event.target.value)}
        />
      ),
      className: 'left-aligned',
    },
  ];

一些代码片段确实会有所帮助。

4

0 回答 0