React Mui data-grid-pro 可扩展行，可以从父级重置模型

Question

I have data-grid-pro component with these parameters

<DataGridPro
        apiRef={apiRef}
        density="comfortable"
        autoHeight
        headerHeight={75}
        getRowId={(row) => row.domain_id}
        loading={tableData?.length === 0}
        rows={tableData}
        columns={columns}
        initialState={savedState.initialState}
        pageSize={pageSize}
        rowsPerPageOptions={[10, 25, 50, 100]}
        onPageSizeChange={(newPageSize) => setPageSize(newPageSize)}
        getDetailPanelHeight={getDetailPanelHeight}
        getDetailPanelContent={renderRowSubComponent}
        pagination
        components={{ Toolbar: CustomToolBar }}
        componentsProps={{ toolbar: { onResetFilters: handleResetFilters } }}
        }}
/>

renderRowSubComponent is doing some async call and making expandable Data-grid pro children content with header (it means the data -grid have possibility to filter, sort..etc)

I have made a custom toolbar CustomToolBar, where onResetFilters is doing model cleanup apiRef.current.setSortModel([]), apiRef.current.setFilterModel({ items: [] })...etc

<GridToolbarContainer>
      <GridToolbarColumnsButton sx={{ ml: 1 }} />
      <GridToolbarFilterButton sx={{ ml: 1 }} />
      <GridToolbarDensitySelector sx={{ ml: 1 }} />
      <GridToolbarExport sx={{ ml: 1 }} />
      <Button
        color="primary"
        rel="noopener"
        size="small"
        startIcon={<RotateLeft />}
        onClick={() => onResetFilters(apiRef.current)}
      >
        {RESET_FILTERS}
      </Button>
    </GridToolbarContainer>

Is it possible from the parent toolbar make cleanup for all instances? I don't want have toolbar for each expanded rows, I want to have one parent toolbar, and clear models from it.

Answer 1

To make it you can pass componentsProps to the DataGrid

components={{ Toolbar: CustomToolBar }}
componentsProps={{ toolbar: { onResetFilters: handleResetFilters } }}

on the handleResetFilters method you will handle it like this

const handleResetFilters = () => {
    apiRef.current.setSortModel([]);
    apiRef.current.setFilterModel({ items: [] });
    apiRef.current.setSelectionModel([]);
    apiRef.current.setColumnVisibilityModel({});
    apiRef.current.setEditRowsModel({});
    apiRef.current.setPinnedColumns([]);
    apiRef.current.setEditRowsModel({});
    // clear children instances
    Object.entries(apiRefs).forEach(([key, ref]) => {
      if (ref !== null) {
        ref.current.setSortModel([]);
        ref.current.setFilterModel({ items: [] });
        ref.current.setSelectionModel([]);
        ref.current.setColumnVisibilityModel({});
        ref.current.setPinnedColumns([]);
      } else {
        // remove unused keys
        delete apiRefs[key];
      }
    });
  };

Where apiRef is useGridApiRef from "@mui/x-data-grid-pro" and apiRefs is the state of the parent component setup on the children instances.