React-table: Get row and column index of clicked cell

[dumptruckman]

What version of React-Table are you using?

6.7.4

What bug are you experiencing, or what feature are you proposing?

How can I find out what the column and row index are for a clicked cell? I'm assuming this should be possible with the getTdProps callback but I can't seem to find both pieces of information.

[xxdeveloper]

All information is in the documentation.

Example:

<ReactTable
  ...
  getTdProps={this.onRowClick}
  ...
/>

const onRowClick = (state, rowInfo, column, instance) => {
  return {
    onClick: (e, handleOriginal) => {
      console.log(`Row index: ${rowInfo.index}, column header: ${column.Header}`);
      if (handleOriginal) {
        handleOriginal();
      }
    }
  };
};

[dumptruckman]

column.Header does not seem to be the column index so I'm still hoping to figure that out.

[gary-menzel]

There is no internal column index. You'll need to work it out from from the column.id (which is either the one you supplied, or the one generated as a result of a string-based accessor). If you end up building the ability (externally) for users to move columns around then an index won't be as useful as an id or some other type of identifier for a column.

Given the column is provided - and you can add any props into a column definition that you like - you could simply create a colIndex in each of your column definitions that made sense - if you need a sequential number.

ReactTable is deliberately minimalist in what decorations it adds to structures (with the exception of pivots - which is likely to be refactored out into a separate component in a future version).

[gary-menzel]

Also note: the index and viewIndex will change if data is filtered or sorted and viewIndex is relative to the current page. If you need a reliable identifier for a row, then you should provide that as part of your data.

[dumptruckman]

Awesome, thanks for the info!