T
TanStack•2y ago
foreign-sapphire

React - How to Access Original Flat Row Data When Self-Managing Row Selection State

I have a table component where I have both the hook and the JSX to render the table. However, I want to be able to manage the row selection state outside of this component and have it in a parent component. I want to manage the state in a parent component so I can access the data of the selected rows, specifically the original row data for the selected rows in the parent component. In the code below, I pass in getter and setter of the row selection state (rowSelection and setRowSelection) to my Table component. When I access the rowSelection state in the parent component after I select the first row I get this: {0: true} . This isn't helpful to me. I want to be able to access the original data for that row. I understand that from the table hook instances I can use getSelectedRowModel().flatRows to access the original data, but as I said before, I want to be able to access this data from a parent component, not in my table component where my table hook is currently. What can I do to access the original row data for all of my selected rows in a parent component? This is how I have my Table component set up so far: 
// imports ...

const Table = ({ data, columns, rowSelection, setRowSelection}) => {
  
const tableInstance = useReactTable({
    columns,
    data,
    state: {
      rowSelection,
    },
    enableRowSelection: true,
    onRowSelectionChange: setRowSelection,
    getCoreRowModel: getCoreRowModel(),
  });

// render table ...
// imports ...

const Table = ({ data, columns, rowSelection, setRowSelection}) => {
  
const tableInstance = useReactTable({
    columns,
    data,
    state: {
      rowSelection,
    },
    enableRowSelection: true,
    onRowSelectionChange: setRowSelection,
    getCoreRowModel: getCoreRowModel(),
  });

// render table ...
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?