index column

[Ajayghoshm]

I need to add a index column as the first column, which doesn't get effected by the sorting,
currently i added a index column and index data as the props passed,
but this column will get sorted (change the index order, becomes random ordering number)
is there any way to solve the issue

Before Sorting

After Sorting

[IamDhana]

Render index column as custom cell
https://codesandbox.io/s/wonderful-wozniak-sn3yt?file=/src/App.js

[Ajayghoshm]

This one still get sorting issue

[Ajayghoshm]

hooks => { hooks.visibleColumns.push(columns => [ { id: "count", isIndex: true, width: 50, Header: 'No', disableFilters: true, disableSortBy: true, Cell: ({ row }) => { console.log("no",row) return( <Fragment> {row.index+1} </Fragment> ) } }, ...columns ]); }

i tried this approach , still no solved

[gargroh]

Bad approach - but what upfront is coming in my mind -

Try to check on instance.rows i.e. in Cell try to find the index of given row and return its index.

[IamDhana]

May I know why it is a bad approach?

[Ajayghoshm]

If you are talking about the index value inside the "Cell"
Cell: ({ row }) => { console.log("no",row,row.index) return( <Fragment> {row.index} </Fragment> ) }
this index value changes order on sorting.

[Ajayghoshm]

I was able to solve this issue, defined a actual row inside the actual table component which count the row by using the index value in the map function of row

[Multisanti64]

I'm so glad i found your answer. I've had the same problem. I followed your way and solved it like this:
Added indexed attribute to column:
const columns = useMemo<Column<typeof result[number]>[]>(() => [ { Header: '№', id: 'index', disableSortBy: true, indexed: true, <-- custom attribute } ]
And then checked this property in render:
page.map((row, i) => { prepareRow(row) return ( <tr {...row.getRowProps()}> { row.cells.map((cell) => ( <td {...cell.getCellProps()} className={cell.column.classes ? cell.column.classes : ''}> {cell.column.indexed ? i + 1 : cell.render('Cell')} </td> )) } </tr> ) })

[gsh4rm4]

viewIndex was accessible in V6, which solved the challenge listed in this discussion.

It looks like V7 removed viewIndex. I'm not sure if @gary-menzel or someone else knows how to access viewIndex of a row in V7?

[henry61024]

You could use Cell render props' row and flatRow arguments to achieve this requirement

// columns
[
  {
    Header: 'No',
    id: 'id',
    Cell: ({ row, flatRows }) => {
      return flatRows.indexOf(row) + 1;
    },
  },
  // ...other columns
]

Cell render props document: https://react-table.tanstack.com/docs/api/useTable#cell-properties

[changyeamoon]

@henry61024 any idea on how to do this with Tanstack table 8? Dont see flatRows exposed anymore

[HareeshJakkampudi]

@changyeamoon

try this
example:
cell:(props)=>{

 return props?.table?.getSortedRowModel()?.flatRows?.indexOf(props?.row)+1;

}

[YuriyDyachkov]

@changyeamoon

try this example: cell:(props)=>{

 return props?.table?.getSortedRowModel()?.flatRows?.indexOf(props?.row)+1;

}

Please tell me how can i do this with expanded rows?

[lazy-ocean]

I had to modify pieces from above comments to make it work with sorting applied, maybe this will help someone as well:

{
  Header: "No",
  id: "id",
  cell: ({ row, table }) =>
         (table.getSortedRowModel()?.flatRows?.findIndex((flatRow) => flatRow.id === row.id) || 0) + 1,
}

[sghong3130]

사랑해요

[Zain-ul-din]

Thanks to @lazy-ocean

we can also use this for (shift + click) multi-select:

 let lastSelectedID = null

cell: ({ row, table }) => {
       const nonSortedIdx =
         table.getSortedRowModel()?.flatRows?.findIndex((flatRow) => flatRow.id === row.id) || 0

       return (
         <div className="flex justify-center items-center w-full pr-4">
           <p>
             {nonSortedIdx + ' ' + row.id}{' '}
             <Checkbox
               checked={row.getIsSelected()}
               onClick={(e) => {
                 if (e.shiftKey) {
                   const { rows, rowsById } = table.getRowModel()
                   const rowsToToggle = getRowRange(
                     rows,
                     Number(nonSortedIdx),
                     Number(lastSelectedID)
                   )
                   const isCellSelected = rowsById[nonSortedIdx].getIsSelected()
                   rowsToToggle.forEach((_row) => _row.toggleSelected(!isCellSelected))
                 } else {
                   row.toggleSelected()
                 }
                 lastSelectedID = nonSortedIdx
               }}
               onCheckedChange={(value) => {
                 row.toggleSelected(!!value)
               }}
               aria-label="Select row"
             />
           </p>
         </div>
       )
     },
     enableSorting: true,
     enableHiding: true
   },
   

util

export const getRowRange = (
rows: Row<any>[],
currentID: number,
selectedID: number
): Row<any>[] => {
const rangeStart = selectedID > currentID ? currentID : selectedID
const rangeEnd = rangeStart === currentID ? selectedID : currentID
return rows.slice(rangeStart, rangeEnd + 1)
}

[rajagopalstalwart]

@lazy-ocean its working Good, Thank you for providing

[therealokoro]

From the future ...

April 11, 2024. @lazy-ocean answer works perfectly

[aboveyunhai]

@lazy-ocean solution works perfectly,
but I doubt that the rows.findIndex might cause O(n^2) performance when you have thousands of rows and do index find for each cell.
That could be terribly slow without knowing how the cell function is handled internally,

Therefore, my idea is built upon @lazy-ocean solution, just cache the array in map upon the sorting change, and do the idx on rendering.
Simply convert the O(n^2) to O(n)

  const sortedRows = table.getSortedRowModel().flatRows;
   // this will only run upon sorting change.
  const sortedMap = useMemo(() => {
    const output: Record<string, number> = {};
    sortedRows.forEach((row, idx) => {
      output[row.id] = idx;
    });
    return output;
  }, [sortedRows]);

 <div>
    {cell.column.id === "id"
       ? sortedMap[row.id] + 1
       : flexRender( cell.column.columnDef.cell, cell.getContext())
    }
</div>