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

[bryanltobing]

how can i achieve this with v8?

[bryanltobing]

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]);

[bryanltobing]

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;