react-virtualized arrowkeystepper table

Question

my problem is in ArrowKeyStepper. it’s not working for me. I try to pushing keybord buttons, but it doesn’t have any effect. link to documentation here react-virtualized

          <ArrowKeyStepper
            columnCount={1}
            rowCount={data.length}
            mode="cells"
          >
            {({ onSectionRendered, scrollToRow }) => {
              return (
                <Table
                  onRowsRendered={({ startIndex, stopIndex }) => {
                    onSectionRendered({
                      rowStartIndex: startIndex,
                      rowStopIndex: stopIndex
                    });
                  }}
                  scrollToRow={scrollToRow}
                  rowCount={data.length}
                  rowGetter={({ index }) => data[index]}
                >
                  // Column here
                </Table>
              );
            }}
          </ArrowKeyStepper>

I tried to find the answer, but it didn't work.

Answer 1

With Table you can try to use scrollToIndex and then pass the index of the table item instead of using ArrowKeyStepper.

const {index} = this.props
  return (
    <Table
      onRowsRendered={({ startIndex, stopIndex }) => {
        onSectionRendered({
          rowStartIndex: startIndex,
          rowStopIndex: stopIndex
        });
      }}
      scrollToRow={scrollToRow}
      rowCount={data.length}
      rowGetter={({ index }) => data[index]}
      scrollToIndex={index}
    >
      // Column here
    </Table>
 );