TableVirtuoso displays only one row when 'data-index' is missing from row props

Question

Using TableVirtuoso I encountered a problem where only a single row of data was displayed. This was despite mostly copying the MUI example from their website.

I only changed the row component, row content rendering and row header rendering.

const VirtuosoTableComponents: TableComponents<Data> = {
  Scroller: React.forwardRef<HTMLDivElement>((props, ref) => (
    <TableContainer component={Paper} {...props} ref={ref} />
  )),
  Table: (props) => (
    <Table {...props} sx={{ borderCollapse: 'separate', tableLayout: 'fixed' }} />
  ),
  TableHead,
  TableRow: ({ item: _item, 'data-index': index, ...props }) => <TableRow onClick={onRowClick(index)} {...props} />,
  TableBody: React.forwardRef<HTMLTableSectionElement>((props, ref) => (
    <TableBody {...props} ref={ref} />
  )),
};

export default function ReactVirtualizedTable() {
  return (
    <Paper style={{ height: 400, width: '100%' }}>
      <TableVirtuoso
        data={rows}
        components={VirtuosoTableComponents}
        fixedHeaderContent={fixedHeaderContent}
        itemContent={rowContent}
      />
    </Paper>
  );
}

Answer 1

The problem was that I extracted the data-index prop to get the row index for onclick handler purposes and haven't passed it along. The fix:

const VirtuosoTableComponents: TableComponents<Data> = {
// …
   TableRow: ({ item: _item, ...props }) => <TableRow onClick={onRowClick(props['data-index'])} {...props} />,
// …
}