sunny-green

How to get selected rows data outside Table component?

Hi, I'm having trouble with getting selected rows data outside Table component: My table component looks like on the image. Do you have any idea how to access it in parent component ? Thank you for attention.

3 Replies

unwilling-turquoise•3y ago

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.

// ParentComponent.tsx
import { type SelectedRows, Table } from "./Table";

type Row = {
  id: string;
  name: string;
}

function ParentComponent() {
  const [selectedRows, setSelectedRows] = useState<SelectedRows<Row>>([]);

  function onRowSelectionChange(selectedRows: SelectedRows<Row>) {
    setSelectedRows(selectedRows);
  }

  return (
    <Table
      columns={...}
      data={...}
      onRowSelectionChange={onRowSelectionChange}
    />
  );
}

// ParentComponent.tsx
import { type SelectedRows, Table } from "./Table";

type Row = {
  id: string;
  name: string;
}

function ParentComponent() {
  const [selectedRows, setSelectedRows] = useState<SelectedRows<Row>>([]);

  function onRowSelectionChange(selectedRows: SelectedRows<Row>) {
    setSelectedRows(selectedRows);
  }

  return (
    <Table
      columns={...}
      data={...}
      onRowSelectionChange={onRowSelectionChange}
    />
  );
}

// Table.tsx
import { useReactTable, type ColumnDef, type Row } from "@tanstack/react-table";

export type SelectedRows<T extends object> = Row<T>[];

export interface TableProps<T extends object> {
  columns: ColumnDef<T>[];
  data: T[];
  onRowSelectionChange?: (selectedRows: SelectedRows<T>) => void;
};

export function Table<T extends object>({
  columns,
  data,
  onRowSelectionChange
}: TableProps<T>) {
  // 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 (
    ...
  );
}

// Table.tsx
import { useReactTable, type ColumnDef, type Row } from "@tanstack/react-table";

export type SelectedRows<T extends object> = Row<T>[];

export interface TableProps<T extends object> {
  columns: ColumnDef<T>[];
  data: T[];
  onRowSelectionChange?: (selectedRows: SelectedRows<T>) => void;
};

export function Table<T extends object>({
  columns,
  data,
  onRowSelectionChange
}: TableProps<T>) {
  // 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 (
    ...
  );
}

sunny-greenOP•3y ago

Thanks. It works, i have version 7.8.0 . But the whole concept helped me. I used useTable instead useReactTable , and in useEffect I used other method provided and it worked.

sunny-greenOP•3y ago

selectedFlatRows worked

Gaming

Programming

How to get selected rows data outside Table component?

Did you find this page helpful?