How to use react-window with React Table version 6.10.0?

Question

I am following this virtualized-rows example of react table. I know this code is using react and react table latest versions. How can I use the react-window package with my react table version 6.10.0 and react version is 16.2.0? Also, I am loading data from backend in blocks, for example, the first 500 records, then the next 500 records and so on but the react table is visible to users with first 500 records and after this data is kept on appending, in this case, react-window FixedSizeList function is useful or VariableSizeList is useful?

Code to render 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,
      },
    ]}
/>

Function to render columns:

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

Some code snippets will really help.