How do you get the dynamic / current row index / position?

[MarkConway94]

Hi all,

I'm using a table with useSortBy and was wondering if its possible for a row to dynamically know its current position in the table.
I have seen that rows have an index variable which is their original position in the table but there is no dynamic or current index variable.

My use case is displaying football league data and it would be useful for a row to know its current position in the table after sorting by points or goals etc.
This way I can have a 'position' column where the row can use its current position for the value. It would also be useful for implementing different styling based on current row position.

Thanks,
Mark

[rahulmathews]

Yah, I think you can use something like this for:
Cell: row => { return <div>{row.index + 1}</div>; }

[MarkConway94]

Hi, thanks for the response. Unfortunately that is only giving me the original index of the row and does not change to reflect the current position of the row.

[Seddy24]

There is probably a cleaner way but this worked for me, used the index from map to render a number instead of the 'Cell' render.

tbody {...getTableBodyProps()}>
	{rows.map((row, i) => {
	  prepareRow(row);
	  return (
		<tr {...row.getRowProps()}>
		  {row.cells.map((cell) => {
			return (
			  <td {...cell.getCellProps()}>
				{cell.column.id === 'rowNumber' ? i + 1 : cell.render('Cell')}
			  </td>
			);
		  })}
		</tr>
	  );
	})}
</tbody>

In my column setup, I have this as a placeholder.

 {
      Header: () => <span>Row #</span>,
      id: 'rowNumber',
      width: 30
 },

[guavamole]

Render allows you to pass in props so you can do

cell.render('Cell', {dynamicIndex: i})

then in your column setup

 {
      Header: (props) => <span>Row # {props.dynamicRow}</span>,
      id: 'rowNumber',
      width: 30
 },