how do get data instead index on react-table 8 ?

[d-strygwyr]

how do get the data instead index when row selection?

[SomnathKadam]

Try below code

const UpdateButton = (
  row: any,
) => {
  
  console.log('Single row data here', row?.original);
   

  return (
    <div>
       .........
    </div>
  );
};

And your columns may look like

......,
{header: 'Status',
accessorKey: 'Status',
cell: ({ row }: any) => UpdateButton(row)},
......

[d-strygwyr]

I got an infinite loop after setting the data to the state.

I found a solution but IDK this is the best practice or not.

Table.tex

interface DataTableProps {
  data: Array<any>;
  columns: Array<any>;
  isLoading?: boolean;
  // eslint-disable-next-line no-unused-vars
  onSelectRow?: (data: Product.Item[]) => void;
}

const Table: React.FC<DataTableProps> = ({ data, columns, isLoading, onSelectRow }): JSX.Element => {
  const [rowSelection, setRowSelection] = React.useState({});

  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    state: {
      rowSelection,
    },
    onRowSelectionChange: setRowSelection,
  });


  React.useEffect(() => {
    const dataSelected = table.getSelectedRowModel().flatRows.map((row) => row.original);
    onSelectRow?.(dataSelected);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [JSON.stringify(table.getSelectedRowModel().flatRows)]);  <--------- re-triger when flatrows have changes

.... return tsx

List.tsx

  const columns = [
    columnHelper.display({
      id: 'select',
      size: 30,
      header: ({ table }) => (
        <Checkbox
          {...{
            checked: table.getIsAllRowsSelected(),
            indeterminate: table.getIsSomeRowsSelected(),
            onChange: table.getToggleAllRowsSelectedHandler(),
          }}
        />
      ),

      cell: ({ row }) => (
        <div className="text-center">
          <Checkbox
            {...{
              checked: row.getIsSelected(),
              indeterminate: row.getIsSomeSelected(),
              onChange: row.getToggleSelectedHandler(),
            }}
          />
        </div>
      ),
    }),
    
    ...return another column
    
    
...return tsx
  <div>
    <Table
       columns={columns}
       data={productList}
       isLoading={isFetching && !isSuccess}
       onSelectRow={(selectedRows: ProductListProps[]) => setProductSelect(selectedRows)}  <---------------- set the data selected to state
    />
  </div>

[greg-wiltshire]

If you have control of the selected rows state in your component then you can just add a listener hook that uses the table API to get the row data.

 const getSelectedRowModel = table.getSelectedRowModel

useEffect(() => {

        const selectedRowData = getSelectedRowModel().rows.map(row => row.original)
    
    }, [getSelectedRowModel, rowSelection])

Where rowSelection is your state variable.

The alternative is to add additional logic to your onRowSelectionChange option to filter your data by the ids in the table selectedRows state.

[ndinhbang]

@hafidzamr you can use getRowId option https://tanstack.com/table/v8/docs/api/core/table#getrowid

 const table = useReactTable({
        getRowId: (originalRow, index, parent) => originalRow.id,
        ...
    })