How to pass row data to Toolbar in Material UI React typescript

Question

Since I want to add the action after selection in GridHeader, I am following the tutorial to try to put them together: https://mui.com/x/react-data-grid/selection/#controlled-selection

https://mui.com/x/react-data-grid/column-visibility/#column-visibility-panel I believe this is a very common and universal requirement. When I select a row or rows, I can't pass the resulting data to the GridToolbar subcomponent. It seems that it does not support passing properties. There is example code:

export defualt function App(props: any){
    const {rows, columns} = props;
    const [selectionModel, setSelectionModel] = useState<GridSelectionModel>([]);
    return (
      <DataGrid components={{ Toolbar: DataToolbar }}
         onSelectionModelChange={(newSelectionModel) => {
                    setSelectionModel(newSelectionModel);
                }}
         selectionModel={selectionModel} 
         {...others} />
    );
}

function DataToolbar (){
    <GridToolbarContainer>    
        <Auctions />               
        <GridToolbarQuickFilter />             
        <GridToolbarColumnsButton />           
        <GridToolbarDensitySelector />
    </GridToolbarContainer>
}
function Auctions (){
    const apiRef = useGridApiContext();
    const [selected, setSelected] = useState(false);
    const handleSelected: GridEventListener<'rowSelectionCheckboxChange'> = (
        params, event, details) => {
        //Processing Event
        setSelected(!selected);
    };
    useGridApiEventHandler(apiRef, 'rowSelectionCheckboxChange', handleSelected);
    return (
        <Fragment>           
            <IconButton disabled={!selected}><DeleteIcon color={selected? "error" : "disabled"} /></IconButton>
        </Fragment>
    );
}

Answer 1

Many thanks to the MUI team for their help, now it has been solved. An explanation was found for this problem in here: https://github.com/mui/mui-x/issues/7377

The Demo in here: https://codesandbox.io/s/sleepy-lehmann-vgvlq8?file=/demo.tsx

I'm copying it here in the hope that it will be helpful to those who have the same questions

function Auctions({ selectionModel }) {
  const hasSelectedRows = selectionModel.length > 0;

  return (
    <React.Fragment>
      <IconButton disabled={!hasSelectedRows}>
        <DeleteIcon color={hasSelectedRows ? "error" : "disabled"} />
      </IconButton>
    </React.Fragment>
  );
}

function DataToolbar({ selectionModel }) {
  return (
    <GridToolbarContainer>
      <Auctions selectionModel={selectionModel} />
      <GridToolbarQuickFilter />
      <GridToolbarColumnsButton />
      <GridToolbarDensitySelector />
    </GridToolbarContainer>
  );
}

export default function FlexLayoutGrid() {
  const { data } = useDemoData({
    dataSet: "Commodity",
    rowLength: 5,
    maxColumns: 6
  });

  const [selectionModel, setSelectionModel] = React.useState<
    GridSelectionModel
  >([]);

  return (
    <div style={{ height: 400, width: "100%" }}>
      <DataGrid
        {...data}
        onSelectionModelChange={(newSelectionModel) => {
          setSelectionModel(newSelectionModel);
        }}
        selectionModel={selectionModel}
        components={{ Toolbar: DataToolbar }}
        checkboxSelection
        componentsProps={{
          toolbar: {
            selectionModel: selectionModel
          }
        }}
      />
    </div>
  );
}