[data grid] Excel Export Is not Disabled Per Configuration

[lisaWriteJava]

The problem in depth

I've set the excel export to be disabled but it still functions and appears: Example

Your environment

`npx @mui/envinfo`

``` Chrome Browser System: OS: Linux 3.10 CentOS Linux 7 (Core) Binaries: Node: 16.20.0 - ~/.nvm/versions/node/v16.20.0/bin/node npm: 7.24.2 - ~/node_modules/.bin/npm pnpm: Not Found Browsers: Chrome: 120.0.6099.71 npmPackages: @emotion/react: latest => 11.11.3 @emotion/styled: latest => 11.11.0 @mui/base: 5.0.0-beta.32 @mui/core-downloads-tracker: 5.15.5 @mui/icons-material: ^5.15.3 => 5.15.5 @mui/lab: ^5.0.0-alpha.159 => 5.0.0-alpha.161 @mui/material: ^5.15.3 => 5.15.5 @mui/private-theming: 5.15.5 @mui/styled-engine: 5.15.5 @mui/styles: ^5.15.3 => 5.15.5 @mui/system: 5.15.5 @mui/types: 7.2.13 @mui/utils: ^5.15.4 => 5.15.5 @mui/x-data-grid: 6.19.1 @mui/x-data-grid-generator: ^6.16.2 => 6.19.1 @mui/x-data-grid-premium: ^6.19.1 => 6.19.1 @mui/x-data-grid-pro: 6.19.1 @mui/x-license-pro: ^6.10.2 => 6.10.2 @types/react: 17.0.75 react: ^17.0.2 => 17.0.2 react-dom: ^17.0.2 => 17.0.2 styled-components: latest => 6.1.8 ```

Search keywords: datagrid excel export Order ID: 66765

[lisaWriteJava]

Here's an excerpt based upon a mui example (https://mui.com/x/react-data-grid/export/#excel-export)

function CustomToolbar() {
  return (
    <GridToolbarContainer>
      <GridToolbarExport />
    </GridToolbarContainer>
  );
}

export default function ExcelExport() {
  return (
    <div style={{ height: 300, width: "100%" }}>
      <DataGridPremium
        rows={rows}
        columns={columns}
        slotProps={{
          toolbar: { excelOptions: { disableToolbarButton: true } },
        }}
        slots={{
          toolbar: CustomToolbar,
        }}
      />
    </div>
  );
}

[michelengelen]

You need to pass the excelOptions to the GridToolbarExport component when you are using it like this.

function CustomToolbar(props: GridSlotProps['toolbar']) {
  return (
    <GridToolbarContainer>
      <GridToolbarExport excelOptions={props.excelOptions} />
    </GridToolbarContainer>
  );
}

export default function ExcelExport() {
  return (
    <div style={{ height: 300, width: '100%' }}>
      <DataGridPremium
        rows={rows}
        columns={columns}
        slots={{
          toolbar: CustomToolbar,
        }}
        slotProps={{
          toolbar: {
            excelOptions: { disableToolbarButton: true },
          },
        }}
      />
    </div>
  );
}

as shown above the props get passed to the CustomToolbar component, so you can still use the slotProps prop.

[michelengelen]

Here is a demo in codesandbox: Demo

If you have additional questions feel free to reopen.

[github-actions[bot]]

:warning: This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue. Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@lisaWriteJava: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.