How do I check all mui table checkboxes when the 'selectAll' checkbox is in a parent or sibling component and the table in another component

Question

I have a mui table, but it is structured in separate components and I want to, when the tableHeader's checkbox is checked, check all the checkboxes in the tableBody Component.

The parent has a callback function, which is supposed to check all the checkbox columns, and it is here where I need help. is it possible? (I have inherited this code and am very new to React)

The parent has the table header and table body components, e.g.

const onAllRowsSelected = useCallback(() => {

},[]);


return (
    <TableContainer>
        <Table>
            <OTableHead
                columns={columns}
                onSelectAllClick={onAllRowsSelected}
                numSelected={0}
                rowCount={steps.length}
            />
            <OTableBody
                columns={columns}
                deviceId={deviceId}
                optimise={optimise}
                onSelected={handleSelected}
            />
        </Table>
    </TableContainer>
)

OTableHead has the checkbox to selectAll (check all the checkboxes in the OtableBody)

return (
    <TableHead>
        <TableRow>
            <TableCell key={'drag'}/>
            <TableCell key={'select'}>
                <Checkbox
                    onChange={onSelectAllClick}
                    inputProps={{ 'aria-label': 'Select all steps' }}
                />
            </TableCell>

            {columns.map((column) => (
                <TableCell key={column.field}>
                    {column.heading}
                </TableCell>
            ))}
        </TableRow>
    </TableHead>
);

and OTableBody uses a query to get the data, store it in the 'steps' array, which is used to build the table rows.

 const data = useQuery(o_data_query, {
    variables: {
        Id: Id,
        send: send
    },
    fetchPolicy: 'cache-and-network'
});

let steps = resOData.data != undefined ?  resOData.data.jobO.data : [];

<TableBody>
  {steps.map((step, index) => (
      <TableRow
         hover={true}
         key={step.workStepId}
         selected={isItemSelected}
         aria-checked={isItemSelected}
      >
          <TableCell  key={'select'}  padding="checkbox"  >
             <Checkbox
                 checked={isItemSelected}
                 inputProps={{ 'aria-labelledby': step.workStepId }}
                 onClick={(event) => handleClick(event, step.workStepId)}
             />
          </TableCell>
      </TableRow>
   ))}
</TableBody>

Is it possible, or should I rather get the data in the parent and pass that as props down to the table body, or restructure the head and table body into the parent component? Thanks

Answer 1

in this case, you can manage using react sibling

const [selectAll, setSelectAll] = useState('Default value');

const onAllRowsSelected = useCallback(() => {
 or set here setSelectAll()
 ......
},[]);


return (
    <TableContainer>
        <Table>
            <OTableHead
                columns={columns}
                onSelectAllClick={onAllRowsSelected}
                numSelected={0}
                setSelectAll={setSelectAll}
                rowCount={steps.length}
            />
            <OTableBody
                selectAll={selectAll}
                columns={columns}
                deviceId={deviceId}
                optimise={optimise}
                onSelected={handleSelected}
            />
        </Table>
    </TableContainer>
)