onRowSelected (useRowSelect missing feature?)

[MaximeBernard]

Hi,

I've been using react-table by implementing my own <Table> component which I use everywhere I need to display a <Table> but one of my pages needs to select rows.

I'd figured I'd do something like

const [data, setData] = useState();
const doWhatever = (rows) => setData(rows);

return <Table onRowsSelected={doWhathever} />

but I don't see a way with current API to send selectedFlatRows outside my <Table /> 🤔

Any idea?

[MaximeBernard]

For those of you coming here and wondering if I found something, I ended up doing a "nasty hack" with some useEffect and useState to detect the change. It looks like that

const [selectedData, setSelectedData] = useState<readonly T[]>([]);
const selectionColumn = {
    id: 'selection',
    Header: ({
      getToggleAllRowsSelectedProps,
      selectedFlatRows,
    }: UseRowSelectInstanceProps<T>) => {
      // This is a hack to compensate "onRowSelected" missing feature from React Table
      useEffect(() => {
        if (onRowSelection !== undefined) {
          const rows = selectedFlatRows.map(({ original }) => original);
          if (!isEqual(rows, selectedData)) {
            setSelectedData(rows);
            onRowSelection(rows);
          }
        }
      }, [selectedFlatRows]);

      return (
        <div>
          <IndeterminateCheckbox {...getToggleAllRowsSelectedProps()} />
        </div>
      );
    },
    Cell: ({ row }: { readonly row: UseRowSelectRowProps<T> }) => (
      <div>
        <IndeterminateCheckbox {...row.getToggleRowSelectedProps()} />
      </div>
    ),
  };

I'll be glad to point to a better answer if there's one :)

[alessandro308]

What I did to manage Table state outside of Table component:

• I created a context, called TableHandlers
• The context value is an array of two items: [registerTable, {...}]
  The first is a function that is invoked by every table at the mounting passing the handlers defined inside. The context save them and re-expose them in the second parameter. Doing that, the second parameter can now be used by anywhere inside the context to manage the table state outside the table component.

[MaximeBernard]

Interesting! So you put a <TableContext.Provider> in your <TableComponent> and you're using a useContext(TableContext) when you need the data?

[alessandro308]

No, I put the TableContext.Provider around the table and it's wrapper, like:

const TableHandler = ({children}) => {
   // define context and state
  const  handlers = useState();
   return <TableContext.Provider value={handlers}>{children}</..>
}

// then in the table
const [setter] = useContext(TableContext);
useEffect(() => {
setter({ selectRows,  /* and other function defined in the table component I want to expose */})
}, [])

// finally, in my component

function MyComponent(){
  const [_, tableHandlers] = useContext(TableContext)
  onClick = () => tableHandlers.selectRows();
  return (<Table/><div onClick={onClick}/>)
}

// and the wrap all with the defined context so to have it in as a parent element
<TableHandler>
  <My Component/>
 </TableHandler>

[MaximeBernard]

Ok makes sense! Thanks 👍