T
TanStack•3y ago
extended-salmon

Optional Row Selection (passing data back to parent)

What would be the best way to handle rowSelectionChange in the parent when the table is the child? I have a component called table, which is generic and takes all kinds of tables (user, invoices, etc.) 
  if (props.rowSelection) {
    state.rowSelection = rowSelection;
    tableConfig.onRowSelectionChange = (rowSelection) => {
      setRowSelection(rowSelection);
      props.onRowSelectionChange?.(table.getSelectedRowModel().flatRows);
    };
  }
  if (props.rowSelection) {
    state.rowSelection = rowSelection;
    tableConfig.onRowSelectionChange = (rowSelection) => {
      setRowSelection(rowSelection);
      props.onRowSelectionChange?.(table.getSelectedRowModel().flatRows);
    };
  }
Here I am simply adding all the necessary things in case row selection (if it's needed for the table) gives some more explanation on state and table config; it's just defined like this. 
const state: {
    pagination?: PaginationState;
    rowSelection?: RowSelectionState;
    rowSorting?: ColumnSort[];
  } = {};

  const tableConfig: TableOptions<unknown> = {
    data: tableData,
    columns: tableColumns,
    getCoreRowModel: getCoreRowModel(),
    debugTable: true,
  };
const state: {
    pagination?: PaginationState;
    rowSelection?: RowSelectionState;
    rowSorting?: ColumnSort[];
  } = {};

  const tableConfig: TableOptions<unknown> = {
    data: tableData,
    columns: tableColumns,
    getCoreRowModel: getCoreRowModel(),
    debugTable: true,
  };
and adding values accordingly to it once those are handled, the table is created 
  tableConfig.state = state;
  const table = useReactTable(tableConfig);
  tableConfig.state = state;
  const table = useReactTable(tableConfig);
now the issue is, for example, if the rows are selected and once a button is clicked in the parent component, I need to handle all selected "rows." I was thinking of something like this, but it seems to not work 
    <Table
      data={data}
      columns={columns}
      isLoading={isLoading}
      rowSelection={true}
      onRowSelectionChange={(rows) => {
        console.log(rows);
      }}
    />
    <Table
      data={data}
      columns={columns}
      isLoading={isLoading}
      rowSelection={true}
      onRowSelectionChange={(rows) => {
        console.log(rows);
      }}
    />
When pressing and selecting, it is not omitting it. Once pressed again, it omits the first value (row selected). Once the button in the parent is pressed, I would need to handle (send an API call with the desired row. ids Is there a better way of handling this? What approach should I take, and how can I pass these selected rows back to the parent component "once selected."
1 Reply
extended-salmon
extended-salmonOP•3y ago
@Maintainer - Table

Did you find this page helpful?