6

How to disable/overide Export button of XGrid's GridToolbar in MUI?

keemor
  • 1,149
  • 15
  • 16
Mhodin Sha Ali
  • 61
  • 1
  • 3

8 Answers8

8

For anyone revisiting this question in the future, I found the property componentsProps on the DataGrid component allows you to pass in an object that has the csvOptions to disable the export button.

<DataGrid
  disableColumnFilter
  disableColumnSelector
  disableDensitySelector
  rows={skus}
  columns={columns}
  components={{ Toolbar: GridToolbar }}
  componentsProps={{
    toolbar: {
      csvOptions: { disableToolbarButton: true },
      printOptions: { disableToolbarButton: true },
      showQuickFilter: true,
      quickFilterProps: { debounceMs: 250 },
    },
  }}
  experimentalFeatures={{ newEditingApi: true }}
/>
Ricky Clark III
  • 81
  • 1
  • 3
3

If you disable both options that are available (print and download CSV) the whole button goes away.

You can do this by passing the disable props to the componentsProps as per below;

<Datagrid
    components={{ Toolbar: GridToolbar }}
    componentsProps={{
        toolbar: {
            printOptions: { disableToolbarButton: true },
            csvOptions: { disableToolbarButton: true },
    }}
/>
double-beep
  • 5,031
  • 17
  • 33
  • 41
vornies
  • 105
  • 7
1

You can create your own toolbar using GridToolbarContainer and items that you need. For example if you need only column and filter buttons code will look like this:

CodeSandbox example

Vixata
  • 11
  • 2
0

There is no prop for the Export button so far. But I already made a ticket for this in the material ui github, so I hope this that should be resolved soon.

Vixata
  • 11
  • 2
0

Yeah none of props are available to disable the export button but I have came across some work around which I’d mention below https://github.com/mui-org/material-ui-x/issues/1557

Mhodin Sha Ali
  • 61
  • 1
  • 3
0

This is how you can make your custom export button with disabled property using useGridApiRef which is available in DataGridPro:

Notice that apiRef must be passed to DataGrid as apiRef={apiRef}

https://codesandbox.io/s/mui-datagridpro-disable-export-as-csv-button-pewlff?file=/src/App.tsx:476-1339

Toolbar

import { MutableRefObject, useState } from "react";
import SaveAltIcon from "@mui/icons-material/SaveAlt";
import { Button } from "@mui/material";
import { GridToolbarContainer } from "@mui/x-data-grid";
import { GridApiPro } from "@mui/x-data-grid-pro/models/gridApiPro";

type Props = {
  apiRef: MutableRefObject<GridApiPro>;
};

const Toolbar = ({ apiRef }: Props) => {
  const [disabled, setDisabled] = useState(true);

  const onExportClick = () =>
    apiRef.current.exportDataAsCsv({ delimiter: ";", utf8WithBom: true });

  return (
    <GridToolbarContainer>
      <Button
        startIcon={<SaveAltIcon />}
        onClick={onExportClick}
        disabled={disabled}
      >
        {apiRef.current.getLocaleText("toolbarExport")}
      </Button>
      <Button onClick={() => setDisabled((state) => !state)}>
        {disabled ? "Enable" : "Disable"} export button
      </Button>
    </GridToolbarContainer>
  );
};

export default Toolbar;

App

export default function App() {
  const apiRef = useGridApiRef();
  
  return (
    <DataGridPro
      autoHeight
      apiRef={apiRef}
      components={{
        Toolbar
      }}
      componentsProps={{ toolbar: { apiRef } }}
      rows={rows}
      columns={columns}
    />
  );
}
keemor
  • 1,149
  • 15
  • 16
0

Here an example with only the "Columns" visibility Button, using same analogy you can build any custom ToolBar by puting only needed tools.

import {
 DataGrid,
 GridToolbarContainer
 GridToolbarColumnsButton,
 // Check available tools in the docs
} from '@mui/x-data-grid';
 // your custom ToolBar
 const CustomToolbar = () => <GridToolbarContainer>
       <GridToolbarColumnsButton>,
       // other tools here
   </GridToolbarContainer>

 // Your Grid
 <DataGrid
    // other Props here
    components={{
      Toolbar: CustomToolbar,
    }}
  //...
phoenixstudio
  • 1,776
  • 1
  • 14
  • 19
0

I'm still using this at @mui/x-data-grid": "^5.17.25" with no warning, But the components/componentsProps API is deprecated and slots/slotProps API is preferred. last feb. 10, 2023, If slots/slotProps not working just stick temporarily to that previous version.

mjw
  • 11
  • 2