get access to selected row data from outside table component

[jitenderchand1]

I have a common component for the table which is being used in different pages through the app. Now the selection of rows is being saved inside the table component itself. I want to access the selected rows of data from its parent component whenever button pressed

Here is an example
https://codesandbox.io/s/naughty-pond-3e5jp

[07harish]

Hi, Right now I am doing it using useEffect and listening to [selectedFlatRows], which is triggering lot of issues. Sometimes it ends up in an infinite loop & checkbox on onchange row.getToggleSelectedRows() triggers/renders twice -> ends up having no selected rows.

Let me know if you find any solution.

[kalpa277]

After sorting data in our order(table) how to download CSV in same order in React. Please provide any link in [email protected]

[GuptaSiddhant]

There are 2 days to do it in my opinion:

1. Use events & subjects (RxJS) - may be overkill
2. Maintain a state of selected rows in you app. Send a setter callback to your table and use useEffect to call the setter whenever the rows are selected...
   Example: CodeSandBox
   I've saved the selectedIds, but you can save the selectedFlatRows[].original as well.

[vishwa3]

I used useMountedLayoutEffect of React-table as described here #1739 (comment) . Used callback but just used useMountedLayoutEffect instead of useEffect

[kalpa277]

After sorting data in our order(table) how to download CSV in same order in React. Please provide any link in [email protected]

[jeremysouthon]

I had an issue when trying to do this using a callback function (method num 2 in @GuptaSiddhant answer) and it was causing a re-rendering loop. Found out that it was because my table data was not 'memoized'

[seanonthenet]

Thanks. This was my issue too.

[presencewebdesign]

How do you memorize columns?

[seanonthenet]

How do you memorize columns?

const columns = React.useMemo( () => [ { Header: 'Column 1', accessor: 'col1', }, { Header: 'Column 2', accessor: 'col2', }, ], [] )

[singis]

Spent so many hours with this issue. Thanks for this fix!!

[AgustinMachiavelloFundcraft]

Thank you so much! I've spent way too many hours and started going crazy.

[ralbritton-utah]

does anyone have a current example of how to make this work? Sandbox references don't seem to be working. TY

[CatPerry]

Yeah, I'm looking for the codesandbox solution, because useMemo, which seems to help others, isnt my issue

[vishwajit-nalawade]

Did you get any solution?
I am facing the same issue.

[GuptaSiddhant]

@ralbritton-utah @CatPerry @vishwajit-nalawade
I recreated the codesandbox: https://codesandbox.io/s/unruffled-lalande-9l00qp?file=/src/App.js

[ralbritton-utah]

I changed my approach to this.
In my column I made a column for a checkbox:

  {
        Header: "",
        id: "checkbox",
        width: 30,
        Cell: ({ row }) => (
          <div>
            <Checkbox
              key={row.original.sourceId}
              onToggle={() => onToggle(row.original)}
              value={row.original.included}
              {...row.getToggleRowSelectedProps()}
            />
          </div>
        )
      },

and then I have a handleCheckbox function to do what I needed with the data on selected rows.

[luisam19]

Hi, I'm trying to select a row from a dinamic table, but I don't find how is the onSubmit. If anyone can help me it would be very helpful.

This is how i fill the table:

<tbody id="table-doby" >
        {Dataset.map((THE_DATASET,index)=>{
          return (
            <tr >
              <td>< input value={index} type="checkbox"/> </td>
              <td>{THE_DATASET.Name_study }  </td>
              <td>{THE_DATASET.Number_Subjects}</td>
              <td>{THE_DATASET.Number_EEG_raw}</td>
              <td>{THE_DATASET.Number_EEG_processed}</td>
              <td></td>
              <td className='contenedor-operaciones'>
                <button className="btn btn-secondary btn-sm btn-block" > Descargar </button>
                <button className="btn btn-danger btn-sm btn-block"> Eliminar</button>
              </td>
            </tr>
          )
        })}
      </tbody>

[Kost927]

Is there any solution? Coz my data is dynamic data
const filteredData = useMemo(() => {
if (filter) {
try {
return filter(unfilteredData)
} catch (e) {
console.error(e)
}
}

return unfilteredData
}, [unfilteredData, filter])

and I can't leave dependency’s array empty. But Also I have to manipulate with selected data in a parent component. But get " Maximum update depth exceeded" when trying to set data to the state. "handleSelectRows" comes from the parent component. And code below in the react-table component.
const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow, visibleColumns, selectedFlatRows } = tableInstance

useEffect(() => {
if (selectedFlatRows && handleSelectRows) handleSelectRows(selectedFlatRows)
}, [selectedFlatRows])

[hamidrezaghanbari]

its my problem too...
please help to solve this issue MR.@tannerlinsley

[kalpa277]

For particular row or table we can download CSV but whereas as to desc and then download CSV can't possible..i think so Kalpataru Sahoo

…

On Tue 26 Apr, 2022, 10:08 AM Hamidreza Ghanbari, ***@***.***> wrote: its my problem too... — Reply to this email directly, view it on GitHub <#2155 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AWNFMHRR2PUJO6HOQVXLSVDVG5XN5ANCNFSM4MHOQIJQ> . You are receiving this because you commented.Message ID: ***@***.***>

[kalpa277]

https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Export%20CSV&selectedStory=Only%20Export%20Selected%20Rows&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel

[bryanprimus]

how can i achieve this with v8?

[bryanprimus]

not sure if this is the proper way to do so. but this is my workaround

// outside table component
const [selectedRows, setSelectedRows] = useState<typeof Data>([]);

// inside table component <Table/>
type TableProps {
  rowSelection?: {
    onRowSelectionChange: (data: TData[]) => void;
  };
}

const {
    getSelectedRowModel,
  } = useReactTable({...});

 const selectedRowData = getSelectedRowModel().flatRows.map(
    row => row.original
  );

  useEffect(() => {
    if (rowSelection) {
      rowSelection.onRowSelectionChange(selectedRowData);
    }
  }, [selectedRowData, rowSelection]);

[bryanprimus]

not sure if this is the proper way to do so. but this is my workaround

this causes so many rerender. not sure why. nvm. this is the fix #2155 (comment)

[16am]

After two broken dev servers and hours in search of a way to do that, this seems to work…
useEffect(() => { if (isSelectable && selectedFlatRows) { const rows = selectedFlatRows.map((row) => row.original); context.dispatch({ action: "selectedFlatRows", data: rows }); } }, [selectedFlatRows]);

[16am]

I use only row.original which is what I need

[tanmayaBiswalOdiware]

Yep, row.original is the thing I needed. Thanks to you, I will not need to waffle through the internet for another hour ^^

[ruslandjent]

works fine @8.9.1

Parent

const handleChange = useCallback((data: TData[]) => {
    setSelectedData(data)
  }, [])
  
  <Table ... onSelectedRowsChange={handleChange} />

Table component

const [rowSelection, setRowSelection] = useState<RowSelectionState>({})

  const table = useReactTable({
    data,
    columns,
    state: {
      rowSelection,
    },
    getFilteredRowModel: getFilteredRowModel(),
    onColumnFiltersChange: setColumnFilters,
    enableRowSelection: () => true,
    onRowSelectionChange: setRowSelection,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
    onSortingChange: setSorting,
  })

useEffect(() => {
    onSelectedRowsChange(
      table.getSelectedRowModel().flatRows.map((row) => row.original),
    )
  }, [rowSelection, table, onSelectedRowsChange])

[nazmiboxed]

This won't work for server side manual pagination. The selected rows from previous page will get lost when calling the method getSelectedRowModel.

[nazmiboxed]

This is a way to get selected row datas for manual pagination (server-side pagination)

  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
  const [selectedRows, setSelectedRows] = useState<ExpressOrder[]>([]);

  useEffect(() => {
    const handleSelectionState = (selections: RowSelectionState) => {
      setSelectedRows((prev) =>
        Object.keys(selections).map(
          (key) =>
            table.getSelectedRowModel().rowsById[key]?.original ||
            prev.find((row) => row._id === key),
        ),
      );
    };

    handleSelectionState(rowSelection);
  }, [rowSelection]);

  const table = useReactTable({
    data,
    columns,
    pageCount,
    onRowSelectionChange: setRowSelection,
    getCoreRowModel: getCoreRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    onPaginationChange,
    manualPagination: true,
    getRowId: (row) => row._id,
    state: {
      rowSelection,
      pagination,
      columnVisibility: {
        _id: false,
      },
    },
  });

This way, when user selected a number of rows on page 1, the selected row data will be kept when user selects at another page.

[filipploss]

thanks for the great example. You helped a lot

[mohitkumartoshniwal]

Thanks. It was helpful

[flaviodelgrosso]

UPDATE:

Accessing the getSelectedRowModel table API is useful to get the original data selected.

const selectedRows = table.getSelectedRowModel().rows.map(({ original }) => original);

---

I tried to create a custom hook to handle rows selection like this. Sincerely don't know if it's a good practice at the moment...

import { Row, Table } from '@tanstack/react-table';
import React, { useCallback, useState } from 'react';

export function useTableRowsSelection<T>() {
  const [selectedRows, setSelectedRows] = useState<T[]>([]);

  const onRowSelectionChange = useCallback(
    (row: Row<T>) => (event: React.ChangeEvent<HTMLInputElement>) => {
      row.getToggleSelectedHandler()(event);
      if (!row.getIsSelected()) {
        setSelectedRows((prev) => [...prev, row.original]);
      } else {
        setSelectedRows((prev) => prev.filter((item) => item !== row.original));
      }
    },
    [],
  );

  const onAllRowsSelectionChange = useCallback(
    (table: Table<T>) => (event: React.ChangeEvent<HTMLInputElement>) => {
      table.getToggleAllRowsSelectedHandler()(event);
      if (table.getIsAllRowsSelected()) {
        setSelectedRows([]);
      } else {
        setSelectedRows(table.getPreSelectedRowModel().rows.map((row) => row.original));
      }
    },
    [],
  );

  return {
    selectedRows,
    onRowSelectionChange,
    onAllRowsSelectionChange,
  };
}

Then you can use it outside the table component:

const { selectedRows, onRowSelectionChange, onAllRowsSelectionChange } = useTableRowsSelection<Data>();

And here my columns definitions. Attached onAllRowsSelectionChange and onRowSelectionChange to the onChange event of checkboxes:

const columns: ColumnDef<Data>[] = useMemo(
    () => [
      {
        id: 'my-data',
        header: ({ table }) => (
          <Checkbox
            {...{
              checked: table.getIsAllRowsSelected(),
              indeterminate: table.getIsSomeRowsSelected(),
              onChange: onAllRowsSelectionChange(table),
            }}
          />
        ),
        cell: ({ row }) => (
          <Checkbox
            {...{
              checked: row.getIsSelected(),
              disabled: !row.getCanSelect(),
              indeterminate: row.getIsSomeSelected(),
              onChange: onRowSelectionChange(row),
            }}
          />
        ),
        size: 1,
      },
      ...
    ],
    [],
  );

[pontusab]

If you want you can use zustand and do it like this:

  const { rowSelection, setRowSelecton } = useTransactionsStore(
    (state) => state,
  );

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

export const useTransactionsStore = create<Store>((set) => ({
rowSelection: {},
setRowSelecton: (fn: (prev: PrevState) => PrevState) => {
  return set((state) => ({ rowSelection: fn(state.rowSelection) }));
},
}));

[kilias07]

great, could you please write how you manage types for this state ? I've tried with
setRowSelecton: (fn: (prev: PrevState) => PrevState) => void;

[duynhut0405]

i ussing onRowSelectionChange

  const onRowSelectionChange = (updater) => {
    const nextState = updater(rowSelectionState);
    setRowSelectionState(nextState);
    setSelect && setSelect(Object.keys(nextState));
  };

and useEffect with dependency rowSelectionState

  useEffect(() => {
    if (setSelectFlat) {
      const flatData = table.getSelectedRowModel().flatRows.map((row) => row.original);
      setSelectFlat((pre) => {
        const data = uniqueArray([...pre, ...flatData]);
        return data.filter((item) => item[keySelected] in rowSelectionState);
      });
    }
  }, [rowSelectionState]);

[ptcampbell]

Old thread, but in case someone finds this useful, this was my solution:

interface DataTableProps<TData, TValue> {
  columns: ColumnDef<TData, TValue>[];
  data: TData[];
  onRowSelectionChange: (rows: unknown) => void;
}

... 

const [rowSelection, setRowSelection] = useState<RowSelectionState>({});

  const handleRowSelectionChange: OnChangeFn<RowSelectionState> = (state) => {
    setRowSelection(state);
  };

  useEffect(() => {
    onRowSelectionChange(rowSelection);
  }, [rowSelection, onRowSelectionChange]);

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

[QastanFIT]

Any idea on how to set the initial row selection?

[AgustinMachiavelloFundcraft]

To pre-select rows you should initialize selectedRowIds in the initialState of your table:

// This will be your prop
// key -> row index
// value -> is selected
const initiallySelected = {
1: false, // not selected
2: true, // selected
...
}


// Inside your table component, initialize the prop in selectedRowIds
useTable(
    initialState: {
        selectedRowIds: initallySelected
    }
)

[Semkoo]

After hours of attempting and wanting to avoid useEffect

Here is what I came up and I hope it helps you guys out there

..., 
const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({});
...,
const handleOnRowSelectionChange = React.useCallback(
  (valueFn: Updater<RowSelectionState>) => {
    if (typeof valueFn === "function") {
      const updatedRowSelection = valueFn(rowSelection);
      setRowSelection(updatedRowSelection);

      // Get all selected rows based on the updatedRowSelection
      const selectedRows = Object.keys(updatedRowSelection).reduce(
        (acc, key) => {
          if (updatedRowSelection[key]) {
            const row = data.find((row) => row.id.toString() === key);
            if (row) {
              acc.push(row);
            }
          }
          return acc;
        },
        [] as StepOutput[],
      );

      // Call the onRowSelectionChange function with the selected rows
      onRowSelectionChange?.(selectedRows);
    }
  },
  [data, onRowSelectionChange, rowSelection],
);
...
const table = useReactTable({
   ..., 
       onRowSelectionChange: handleOnRowSelectionChange,
   .... 
});
...,

return (
  <> 
    ...,
    <SomeAwesomeTableName table={table} columns={columns} />
     ...
  </>
)

[abbott]

For matching the indices of an array instead of an object property, the following works:

  const handleOnRowSelectionChange = useCallback(
    (valueFn: Updater<RowSelectionState>) => {
      if (typeof valueFn === "function") {
        const updatedRowSelection = valueFn(rowSelection);
        setRowSelection(updatedRowSelection);

        const selectedRows = Object.keys(updatedRowSelection).reduce(
        (acc, key) => {
          if (updatedRowSelection[key]) {
            const index = parseInt(key, 10);
            const row = data[index]; 
            if (row) {
              acc.push(row);
            }
          }
          return acc;
        }, []);

        console.log("Selected row(s):", selectedRows);
        onRowSelectionChange?.(selectedRows);
      }
    },
    [data, onRowSelectionChange, rowSelection]
  );

[Semkoo]

This is a lot better and avoids additional looping, awesome work 💯