diff --git a/docs/data/data-grid/export/PrintExportSelectedRows.js b/docs/data/data-grid/export/PrintExportSelectedRows.js deleted file mode 100644 index 2b50951c8158c..0000000000000 --- a/docs/data/data-grid/export/PrintExportSelectedRows.js +++ /dev/null @@ -1,39 +0,0 @@ -import * as React from 'react'; -import { useDemoData } from '@mui/x-data-grid-generator'; -import { - DataGrid, - GridToolbar, - gridFilteredSortedRowIdsSelector, - selectedGridRowsSelector, -} from '@mui/x-data-grid'; - -const getSelectedRowsToExport = ({ apiRef }) => { - const selectedRowIds = selectedGridRowsSelector(apiRef); - if (selectedRowIds.size > 0) { - return Array.from(selectedRowIds.keys()); - } - - return gridFilteredSortedRowIdsSelector(apiRef); -}; - -export default function PrintExportSelectedRows() { - const { data, loading } = useDemoData({ - dataSet: 'Commodity', - rowLength: 10, - maxColumns: 6, - }); - - return ( -
- -
- ); -} diff --git a/docs/data/data-grid/export/PrintExportSelectedRows.tsx b/docs/data/data-grid/export/PrintExportSelectedRows.tsx deleted file mode 100644 index 5a0ca2049f126..0000000000000 --- a/docs/data/data-grid/export/PrintExportSelectedRows.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import * as React from 'react'; -import { useDemoData } from '@mui/x-data-grid-generator'; -import { - DataGrid, - GridToolbar, - GridPrintGetRowsToExportParams, - gridFilteredSortedRowIdsSelector, - selectedGridRowsSelector, - GridRowId, -} from '@mui/x-data-grid'; - -const getSelectedRowsToExport = ({ - apiRef, -}: GridPrintGetRowsToExportParams): GridRowId[] => { - const selectedRowIds = selectedGridRowsSelector(apiRef); - if (selectedRowIds.size > 0) { - return Array.from(selectedRowIds.keys()); - } - - return gridFilteredSortedRowIdsSelector(apiRef); -}; - -export default function PrintExportSelectedRows() { - const { data, loading } = useDemoData({ - dataSet: 'Commodity', - rowLength: 10, - maxColumns: 6, - }); - - return ( -
- -
- ); -} diff --git a/docs/data/data-grid/export/PrintExportSelectedRows.tsx.preview b/docs/data/data-grid/export/PrintExportSelectedRows.tsx.preview deleted file mode 100644 index 11e312d983798..0000000000000 --- a/docs/data/data-grid/export/PrintExportSelectedRows.tsx.preview +++ /dev/null @@ -1,9 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/data-grid/export/export.md b/docs/data/data-grid/export/export.md index 65dee9725b4a8..9c3b94fed0724 100644 --- a/docs/data/data-grid/export/export.md +++ b/docs/data/data-grid/export/export.md @@ -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. diff --git a/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md b/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md new file mode 100644 index 0000000000000..89a64998b4111 --- /dev/null +++ b/docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md @@ -0,0 +1,135 @@ +--- +productId: x-data-grid +--- + +# Migration from v6 to v7 + + + +

This guide describes the changes needed to migrate the Data Grid from v6 to v7.

+ + + +## 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. + + + +## 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. + + + + + + + + + + + + + + + +### Print export + +- The print export will now only print the selected rows if there are any. + If there are no selected rows, it will print all rows. This makes the print export consistent with the other exports. + You can [customize the rows to export by using the `getRowsToExport` function](/x/react-data-grid/export/#customizing-the-rows-to-export). + + + + + + + + + + + + diff --git a/docs/data/pages.ts b/docs/data/pages.ts index e7243b2f94308..317c912791c4c 100644 --- a/docs/data/pages.ts +++ b/docs/data/pages.ts @@ -431,6 +431,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', diff --git a/docs/pages/x/migration/migration-data-grid-v6.js b/docs/pages/x/migration/migration-data-grid-v6.js new file mode 100644 index 0000000000000..8ce5141b987e5 --- /dev/null +++ b/docs/pages/x/migration/migration-data-grid-v6.js @@ -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 ; +} diff --git a/packages/grid/x-data-grid/src/hooks/features/export/useGridPrintExport.tsx b/packages/grid/x-data-grid/src/hooks/features/export/useGridPrintExport.tsx index b143d906338b3..04e1bdcf8ac94 100644 --- a/packages/grid/x-data-grid/src/hooks/features/export/useGridPrintExport.tsx +++ b/packages/grid/x-data-grid/src/hooks/features/export/useGridPrintExport.tsx @@ -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, @@ -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 { @@ -104,9 +104,7 @@ export const useGridPrintExport = ( ); const updateGridRowsForPrint = React.useCallback( - ( - getRowsToExport: (params: GridPrintGetRowsToExportParams) => GridRowId[], - ) => { + (getRowsToExport: NonNullable) => { const rowsToExportIds = getRowsToExport({ apiRef }); const newRows = rowsToExportIds.map((id) => apiRef.current.getRow(id)); apiRef.current.setRows(newRows); @@ -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 @@ -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