Setup ArrowKeyStepper to do keyboard navigation within Table

[rickychien]

version 8.3.1

According to ArrowKeyStepper example, it is supposed to be able to decorate any virtualized component (eg. Table, Grid, or List).

I'm struggling with setting up ArrowKeyStepper and Table but unfortunately my keyboard navigation still doesn't work.

ArrowKeyStepper({
  columnCount: 1,
  mode: "cells",
  rowCount: size,
},
  () => (
    Table({
      headerHeight: 24,
      rowCount,
      rowGetter: ({ index }) =>list[index],
      rowHeight: 22,
      width,
      height,
    },
      columns
    )
  )
)

Are these Children function parameters necessary? and I also don't think onSectionRendered can be passed into Table since none of these parameters are exported from Table.

I suspect that could be an unimplemented feature for Table / List, ArrowKeyStepper should support Grid, Table and List as document mentioned.

[bvaughn]

This seems like the type of issue that should probably be directed to Stack Overflow rather than Github as it's really a question of usage (eg "am I using this correctly?")

Are these Children function parameters necessary? and I also don't think onSectionRendered can be passed into Table since none of these parameters are exported from Table.

The child function parameters (documented here) are absolutely necessary. You've omitted them in your above example which is why it doesn't work.

ArrowKeyStepper controls the scrolled-to-row (and/or column) of its child. It has not been connected it to the child in the example above. (Without the scrollToRow it can't tell Table when to update the visible row. Without the onSectionRendered parameter it can't know when Table has been scrolled.)

There is a usage example here in the docs and a full demo here (which you can see live here). I suggest forking one of the 2 examples and swapping Grid for Table. The differences are minor. You'll have to map the Table onRowsRendered parameters to fit the more Grid like onSectionRendered passed down from ArrowKeyStepper but that's just a matter of renaming the parameters.

<ArrowKeyStepper
  columnCount={1}
  rowCount={rowCount}
>
  {({ onSectionRendered, scrollToRow }) => (
    <Table
      {...props}
      onRowsRendered={({ startIndex, stopIndex }) => {
        onSectionRendered({ rowStartIndex: startIndex, rowStopIndex: stopIndex })
      }
      scrollToIndex={scrollToRow}
    />
  )}
</ArrowKeyStepper>