[DataGrid] Allow to pass csvOptions and printOptions to GridToolbar

[flaviendelangle]

Custom CSV export seems to be a pretty common use can. For me it feels wrong that users have to override the whole toolbar in order to apply the slightest customization (ex: #3563, #3064, #2860, #2156, ...)

Even the doc was dodging the question by creating a very incomplete GridToolbar without the other built-in buttons.
But most of the time, users just want to customize the CSV and/or print export, not to loose all the other features of the GridToolbar.

I added csvOptions and printOptions to GridToolbar and just forward them to GridToolbarExport which makes everything a lot easier

Before:

const CustomToolbar = React.forwardRef<HTMLDivElement, GridToolbarProps>(function GridToolbar(
  props,
  ref,
) {
  const { className, csvOptions, printOptions, ...other } = props;
  const rootProps = useGridRootProps();

  if (
    rootProps.disableColumnFilter &&
    rootProps.disableColumnSelector &&
    rootProps.disableDensitySelector
  ) {
    return null;
  }

  return (
    <GridToolbarContainer ref={ref} {...other}>
      <GridToolbarColumnsButton />
      <GridToolbarFilterButton />
      <GridToolbarDensitySelector />
      <GridToolbarExport csvOptions={{ delimited: ';' }} />
    </GridToolbarContainer>
  );
});

const CustomDataGrid = (props: DataGridProps) => {
  return (
    <DataGrid {...props} components={{ Toolbar: CustomToolbar }} />
  )
}

After:

const CustomDataGrid = (props: DataGridProps) => {
  return (
    <DataGrid {...props} componentsProps={{ toolbar: { csvOptions: { delimiter: ';' }} />
  )
}

---

Other changes

• Add basic tests for CSV export at the UI level (we only had unit test on the export method)
• Reformulate the doc page to better explain the various level of customization

[mui-bot]

These are the results for the performance tests:

Test case	Unit	Min	Max	Median	Mean	σ
Filter 100k rows	ms	208.1	402.6	292	303.62	80.223
Sort 100k rows	ms	335.6	870.6	502	571.88	190.092
Select 100k rows	ms	157.7	324.1	246	237.94	55.317
Deselect 100k rows	ms	128.2	188.6	151	158	22.168

Generated by 🚫 dangerJS against 170c4d8

[m4theushw]

I've left only a few suggestions for the documentation. Looks good.