Make serial number column static while other column sorted in react table 7

[rishiAPV]

I have used serial number as first column, so the data will be like 1,2,3... when I try to sort other columns, serial number column also will be sorted, is there any way to keep it static???

[devarsh]

Here's what you can do, but you need to pass row index to cell renderer where you're rendering cell

i.e

return (
 {page.map((row, index) => {
              prepareRow(row);

                <TableRow
                  component="div"
                  {...row.getRowProps()}
                >
                  {row.cells.map((cell) => {
                    return (
                      <TableCell
                        component="div"
                        variant="head"
                        {...cell.getCellProps()}
                      >
                        {cell.render("Cell", { index: index })} //this is where you pass the index of the rendered row
                      </TableCell>
                    );
                  })}
                </TableRow>
              );
})}

const SequenceCellRenderer = (props) => {
  console.log(props);
  const { index } = props;
  return <div>{index}</div>;
};

const SequenceHeaderRenderer = ({ getToggleAllPageRowsSelectedProps }) => {
  return <div>#</div>;
};

const useSequenceColumn = (hooks) => {
  hooks.visibleColumns.push((columns) => [
    {
      id: "sequence",
      Header: SequenceHeaderRenderer,
      Cell: SequenceCellRenderer,
    },
    ...columns,
  ]);
};