[data grid] Export columns that I am not seeing

[93carlosmesa]

The problem in depth

I need to export some columns that I don't have in the dataGrid, so what I do is to update the columns, export the data and then the idea is to have the same dataGrid again, so I save the columns previously. But the function updateColumns adds elements but does not delete them because I understand that it modifies the columns that we have with the corresponding data.

const handleExport = (options: GridCsvExportOptions) => {
  const allColumns = [...gridApiRef.current.getVisibleColumns()];

  let copyOptions = { ...options };
  gridApiRef.current.updateColumns([...addColumnsPositionToExport()]);
  const columnsToExport = getColumnToExport();
  copyOptions.fields = columnsToExport;

  gridApiRef.current.exportDataAsCsv(copyOptions);

  gridApiRef.current.updateColumns([...allColumns]);
};

The only step I can't get with gridApiRef React.MutableRefObject is to put back the columns from the beginning. There is no function to delete columns or remove columns.

Your environment

`npx @mui/envinfo`

System: OS: macOS 14.6.1 Binaries: Node: 18.19.1 - ~/.nvm/versions/node/v18.19.1/bin/node npm: 10.2.4 - ~/.nvm/versions/node/v18.19.1/bin/npm pnpm: Not Found Browsers: Chrome: 130.0.6723.117 Edge: 130.0.2849.80 Safari: 17.6 npmPackages: @emotion/react: ^11.13.0 => 11.13.0 @emotion/styled: ^11.13.0 => 11.13.0 @mui/base: ^5.0.0-beta.40 => 5.0.0-dev.20240529-082515-213b5e33ab @mui/core-downloads-tracker: 5.16.6 @mui/icons-material: ^5.16.6 => 5.16.6 @mui/lab: ^5.0.0-alpha.173 => 5.0.0-alpha.173 @mui/material: ^5.16.6 => 5.16.6 @mui/private-theming: 5.16.6 @mui/styled-engine: 5.16.6 @mui/styled-engine-sc: ^6.0.0-alpha.18 => 6.0.0-dev.20240529-082515-213b5e33ab @mui/styles: ^5.16.6 => 5.16.6 @mui/system: ^5.16.6 => 5.16.6 @mui/types: 7.2.15 @mui/utils: 6.1.4 @mui/x-data-grid: 7.22.0 @mui/x-data-grid-generator: ^7.22.0 => 7.22.0 @mui/x-data-grid-premium: ^7.22.0 => 7.22.0 @mui/x-data-grid-pro: ^7.22.0 => 7.22.0 @mui/x-date-pickers: ^7.22.0 => 7.22.0 @mui/x-internals: 7.21.0 @mui/x-license: 7.21.0 @mui/x-license-pro: ^6.10.2 => 6.10.2 @types/react: ^18.3.3 => 18.3.3 react: 18.3.1 => 18.3.1 react-dom: 18.3.1 => 18.3.1 styled-components: ^6.1.12 => 6.1.12 typescript: ^5.6.3 => 5.6.3

Search keywords: DataGridPro update column Order ID: #1061-3100

[michelengelen]

Would it make sense to hide the columns you don't need? As you already mentioned you cannot delete columns with updateColumns which is an inconsistency to updateRows.

Would having that functionality (deleting columns) fix your use case?

related issue: #15296

[93carlosmesa]

Thanks for the help. I don't want to hide them, as the client could see the columns, the idea is to be able to just add the columns to export and delete them at the end of the process.

[93carlosmesa]

On the other hand I would like to understand why if we have a setColumnVisibilityModel, why we don't have a getColumnVisibilityModel, it would be very useful, wouldn't it? So I don't have to have a variable to control that value, or is there a way to get the model?

[michelengelen]

There are three ways to get the currently visible columns:

• a selector, but this only works inside of the grids context, so a child component for instance:

  const visibilityModel = useGridSelector(apiRef, gridColumnVisibilityModelSelector);

• a method on the apiRef called getVisibleColumns. This will return all column definitions that are currently visible.
• you can access the columns state on the apiRef directly (not recommended):

  const visibilityModel = apiRef.current.state.columns.columnVisibilityModel

[michelengelen]

Thanks for the help. I don't want to hide them, as the client could see the columns, the idea is to be able to just add the columns to export and delete them at the end of the process.

This is tricky as the updateColumns method does not support deleting columns (yet).

@arminmeh any idea how this could be achieved?

[arminmeh]

I was thinking maybe state restore could work, but it does not clear new columns as well

We can extend updateColumns to support clearing out columns that are not passed as a first argument The additional flag only has to change this fixed value

Alternatively, to be more aligned with the rows API, we can add setColumns that completely replaces current columns state

thoughts @mui/xgrid?

[cherniavskii]

@93carlosmesa How about hiding the columns and including them in the CSV export by passing the fields param to the exportDataAsCsv method? Here's a demo: https://codesandbox.io/p/sandbox/nice-panini-jwxhk3?file=%2Fsrc%2FDemo.tsx

Is this what you're looking for?