EuiInMemoryTable pagination does not render correct items

[justinkambic]

Issue

I'm attempting to supply custom pagination to an EuiInMemoryTable and it's not working.

The function where I'm rendering my table looks like this:

renderTable() => {
  const {
      pageIndex,
      pageSize,
      pipelines,
      // etc
    } = this.state;
  const pagination = {
      pageIndex,
      pageSize,
      totalItemCount: pipelines.length,
      pageSizeOptions: [2, 3, 5, 8]
    };

  //etc...

  return (
      <EuiInMemoryTable
        columns={this.columns}
        itemId="id"
        items={this.state.pipelines}
        message={this.state.message}
        onChange={this.onTableChange}
        pagination={pagination}
        search={search}
        sorting={true}
        isSelectable={true}
        selection={selectionOptions}
      />
    );
}

and the onChange function that's handling table changes:

onTableChange = (props) => {
    const {
      page: {
        index,
        size,
      }
    } = props;

    this.setState({
      pageIndex: index,
      pageSize: size,
    });
  };

onChange is firing and providing the updated criteria changes, and when the component is re-rendered, it is updating the pagination.pageIndex prop:

Repro

You can also view this bug in the EUI docs, under In-Memory Table - Selection, the page buttons are not causing the component to render the appropriate page.