Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[DataGrid] Print selected rows by default #10846

Merged
merged 5 commits into from
Nov 7, 2023
Merged
Show file tree
Hide file tree
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 0 additions & 39 deletions docs/data/data-grid/export/PrintExportSelectedRows.js

This file was deleted.

43 changes: 0 additions & 43 deletions docs/data/data-grid/export/PrintExportSelectedRows.tsx

This file was deleted.

This file was deleted.

9 changes: 0 additions & 9 deletions docs/data/data-grid/export/export.md
Original file line number Diff line number Diff line change
Expand Up @@ -88,15 +88,6 @@ There are a few ways to include or hide other columns.

## Exported rows

### Print export

The print export always prints all rows regardless of whether or not some rows are selected.
To export only selected rows via print you can use the `getRowsToExport` function.

{{"demo": "PrintExportSelectedRows.js", "bg": "inline", "defaultCodeOpen": false}}

### CSV and Excel export

By default, the data grid exports the selected rows if there are any.
If not, it exports all rows except the footers (filtered and sorted rows, according to active rules), including the collapsed ones.

Expand Down
129 changes: 129 additions & 0 deletions docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,129 @@
---
productId: x-data-grid
---

# Migration from v6 to v7

<!-- #default-branch-switch -->

<p class="description">This guide describes the changes needed to migrate the Data Grid from v6 to v7.</p>

<!-- ## Introduction

To get started, check out [the blog post about the release of MUI X v6](https://mui.com/blog/mui-x-v6/). -->

## Start using the new release

In `package.json`, change the version of the data grid package to `next`.

```diff
-"@mui/x-data-grid": "^6.0.0",
+"@mui/x-data-grid": "next",
```

Since v7 is a major release, it contains changes that affect the public API.
These changes were done for consistency, improved stability and to make room for new features.
Described below are the steps needed to migrate from v6 to v7.

<!-- ## Run codemods

The `preset-safe` codemod will automatically adjust the bulk of your code to account for breaking changes in v6.
You can run `v6.0.0/data-grid/preset-safe` targeting only Data Grid or `v6.0.0/preset-safe` to target Date and Time pickers as well.

You can either run it on a specific file, folder, or your entire codebase when choosing the `<path>` argument.

```bash
// Data Grid specific
npx @mui/x-codemod v6.0.0/data-grid/preset-safe <path>
// Target Date and Time Pickers as well
npx @mui/x-codemod v6.0.0/preset-safe <path>
```

:::success
Apart from the removed methods and exports that require manual intervention, around 50% of the DataGrid breaking changes are automatically handled by the `preset-safe` codemod 🎉.
:::

:::info
If you want to run the codemods one by one, check out the codemods included in the [preset-safe codemod for data grid](https://github.com/mui/mui-x/blob/master/packages/x-codemod/README.md#preset-safe-for-data-grid) for more details.
:::

Breaking changes that are handled by `preset-safe` codemod are denoted by a ✅ emoji in the table of contents on the right side of the screen or next to the specific point that is handled by it.

If you have already applied the `v6.0.0/data-grid/preset-safe` (or `v6.0.0/preset-safe`) codemod, then you should not need to take any further action on these items. If there's a specific part of the breaking change that is not part of the codemod or needs some manual work, it will be listed in the end of each section.

All other changes must be handled manually.

:::warning
Not all use cases are covered by codemods. In some scenarios, like props spreading, cross-file dependencies, etc., the changes are not properly identified and therefore must be handled manually.

For example, if a codemod tries to rename a prop, but this prop is hidden with the spread operator, it won't be transformed as expected.

```tsx
<DataGrid {...newProps} />
```

After running the codemods, make sure to test your application and that you don't have any console errors.

Feel free to [open an issue](https://github.com/mui/mui-x/issues/new/choose) for support if you need help to proceed with your migration.
::: -->

## Breaking changes

Since v7 is a major release, it contains some changes that affect the public API.
These changes were done for consistency, improve stability and make room for new features.
Below are described the steps you need to make to migrate from v6 to v7.

<!-- ### Renamed props

- -->

<!-- ### Removed props

- -->

<!-- ### State access

- -->

<!-- ### Events

- -->

<!-- ### Columns

- -->

<!-- ### Rows

- -->

<!-- ### `apiRef` methods

- -->

<!-- ### Filtering

- -->

<!-- ### Editing

- -->

<!-- ### Other exports

- -->

<!-- ### CSS classes

- Some CSS classes were removed or renamed

| MUI X v6 classes | MUI X v7 classes | Note |
| :--------------- | :--------------- | :--- |
| | | |
| | | | -->

<!-- ### Removals from the public API

- -->

<!-- ### Rename `components` to `slots` -->
7 changes: 7 additions & 0 deletions docs/data/pages.ts
Original file line number Diff line number Diff line change
Expand Up @@ -424,6 +424,13 @@ const pages: MuiPage[] = [
pathname: '/x/migration-group',
title: 'Migration',
children: [
{
pathname: '/x/migration-v7',
subheader: 'Upgrade to v7',
children: [
{ pathname: '/x/migration/migration-data-grid-v6', title: 'Breaking changes: Data Grid' },
],
},
{
pathname: '/x/migration-v6',
subheader: 'Upgrade to v6',
Expand Down
7 changes: 7 additions & 0 deletions docs/pages/x/migration/migration-data-grid-v6.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import * as React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
import * as pageProps from 'docsx/data/migration/migration-data-grid-v6/migration-data-grid-v6.md?@mui/markdown';

export default function Page() {
return <MarkdownDocs {...pageProps} />;
}
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import * as React from 'react';
import { unstable_ownerDocument as ownerDocument } from '@mui/utils';
import { GridApiCommunity, GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
import { GridPrintExportApi } from '../../../models/api/gridPrintExportApi';
import { useGridLogger } from '../../utils/useGridLogger';
import { gridExpandedRowCountSelector } from '../filter/gridFilterSelector';
import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
import { GridPrintExportOptions, GridPrintGetRowsToExportParams } from '../../../models/gridExport';
import { GridRowId, GridValidRowModel } from '../../../models/gridRows';
import { GridPrintExportOptions } from '../../../models/gridExport';
import { GridValidRowModel } from '../../../models/gridRows';
import { GridInitialStateCommunity } from '../../../models/gridStateCommunity';
import {
gridColumnDefinitionsSelector,
Expand All @@ -15,7 +15,7 @@ import {
import { gridClasses } from '../../../constants/gridClasses';
import { useGridApiMethod } from '../../utils/useGridApiMethod';
import { gridRowsMetaSelector } from '../rows/gridRowsMetaSelector';
import { getColumnsToExport } from './utils';
import { defaultGetRowsToExport, getColumnsToExport } from './utils';
import { mergeStateWithPaginationModel } from '../pagination/useGridPagination';
import { GridPipeProcessor, useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
import {
Expand Down Expand Up @@ -104,9 +104,7 @@ export const useGridPrintExport = (
);

const updateGridRowsForPrint = React.useCallback(
(
getRowsToExport: (params: GridPrintGetRowsToExportParams<GridApiCommunity>) => GridRowId[],
) => {
(getRowsToExport: NonNullable<GridPrintExportOptions['getRowsToExport']>) => {
const rowsToExportIds = getRowsToExport({ apiRef });
const newRows = rowsToExportIds.map((id) => apiRef.current.getRow(id));
apiRef.current.setRows(newRows);
Expand Down Expand Up @@ -178,14 +176,12 @@ export const useGridPrintExport = (
// the footer is always being placed at the bottom of the page as if all rows are exported
// so if getRowsToExport is being used to only export a subset of rows then we need to
// adjust the footer position to be correctly placed at the bottom of the grid
if (options?.getRowsToExport) {
const gridFooterElement: HTMLElement | null = gridClone.querySelector(
`.${gridClasses.footerContainer}`,
);
gridFooterElement!.style.position = 'absolute';
gridFooterElement!.style.width = '100%';
gridFooterElement!.style.top = `${computedTotalHeight - gridFooterElementHeight}px`;
}
const gridFooterElement: HTMLElement | null = gridClone.querySelector(
`.${gridClasses.footerContainer}`,
);
gridFooterElement!.style.position = 'absolute';
gridFooterElement!.style.width = '100%';
gridFooterElement!.style.top = `${computedTotalHeight - gridFooterElementHeight}px`;

// printDoc.body.appendChild(gridClone); should be enough but a clone isolation bug in Safari
// prevents us to do it
Expand Down Expand Up @@ -325,9 +321,7 @@ export const useGridPrintExport = (
options?.includeCheckboxes,
);

if (options?.getRowsToExport) {
updateGridRowsForPrint(options.getRowsToExport);
}
updateGridRowsForPrint(options?.getRowsToExport ?? defaultGetRowsToExport);

apiRef.current.unstable_setVirtualization(false);
await raf(); // wait for the state changes to take action
Expand Down