Here's what I ended up doing. Using v8 and TypeScript btw, not sure how previous versions handle row selection and table state. Once the selected rows change, I update the internal state of the table component. Then, I use a useEffect hook to call a onRowSelectionChange callback with the selected rows. This way, the parent component can access the selected rows at the time the selection changes. ```ts // ParentComponent.tsx import { type SelectedRows, Table } from "./Table"; type Row = { id: string; name: string; } function ParentComponent() { const [selectedRows, setSelectedRows] = useState>([]); function onRowSelectionChange(selectedRows: SelectedRows) { setSelectedRows(selectedRows); } return ( ); } ``` ```ts // Table.tsx import { useReactTable, type ColumnDef, type Row } from "@tanstack/react-table"; export type SelectedRows = Row[]; export interface TableProps { columns: ColumnDef[]; data: T[]; onRowSelectionChange?: (selectedRows: SelectedRows) => void; }; export function Table({ columns, data, onRowSelectionChange }: TableProps) { // We keep track of the row selection internally so that we can provide a custom return value // to the consumer when the selection changes. If we try to access the selected rows at the time // the row selection changes (onRowSelectionChange), we are one step behind, so we have to use // this internal state instead. const [rowSelection, setRowSelection] = useState({}); const table = useReactTable({ columns, data, onRowSelectionChange: setRowSelection }); useEffect(() => { const selectedRows = table.getSelectedRowModel().flatRows; onRowSelectionChange?.(selectedRows); }, [rowSelection]); return ( ... ); } ```

How to get selected rows data outside Table component?

Similar Threads

Similar Threads

Similar Threads