Как использовать реагирующее окно с React Table версии 6.10.0? - PullRequest
Новая
       29

Как использовать реагирующее окно с React Table версии 6.10.0?

0 голосов
/ 25 октября 2019

Я слежу за этим virtualized-row * примером таблицы реагирования. Я знаю, что этот код использует реагировать и реагировать таблицы последних версий. Как я могу использовать пакет react-window с моей реактивной таблицей версии 6.10.0 и реактивной версии 16.2.0? Кроме того, я загружаю данные из бэкэнда в блоки, например, первые 500 записей, затем следующие 500 записей и т. Д., Но таблица реакции видна пользователям с первыми 500 записями, и после того, как эти данные продолжают добавляться, в этомcase, response-window FixedSizeList функция полезна или VariableSizeList полезна?

Код для отображения React Table: 

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',
    },
  ];

Некоторые фрагменты кода действительно помогут.

...