[DataGrid] Add support for getRowsToExport option to print export (#…

…10084) Co-authored-by: Andrew Cherniavskyi <[email protected]>
mui · Sep 20, 2023 · 82d44ea · 82d44ea
1 parent 52b7efa
commit 82d44ea
Show file tree

Hide file tree

Showing 13 changed files with 207 additions and 30 deletions.
diff --git a/docs/data/data-grid/export/PrintExportSelectedRows.js b/docs/data/data-grid/export/PrintExportSelectedRows.js
@@ -0,0 +1,39 @@
+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 (
+    <div style={{ height: 300, width: '100%' }}>
+      <DataGrid
+        {...data}
+        checkboxSelection
+        loading={loading}
+        slots={{ toolbar: GridToolbar }}
+        slotProps={{
+          toolbar: { printOptions: { getRowsToExport: getSelectedRowsToExport } },
+        }}
+      />
+    </div>
+  );
+}
diff --git a/docs/data/data-grid/export/PrintExportSelectedRows.tsx b/docs/data/data-grid/export/PrintExportSelectedRows.tsx
@@ -0,0 +1,43 @@
+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 (
+    <div style={{ height: 300, width: '100%' }}>
+      <DataGrid
+        {...data}
+        checkboxSelection
+        loading={loading}
+        slots={{ toolbar: GridToolbar }}
+        slotProps={{
+          toolbar: { printOptions: { getRowsToExport: getSelectedRowsToExport } },
+        }}
+      />
+    </div>
+  );
+}
diff --git a/docs/data/data-grid/export/PrintExportSelectedRows.tsx.preview b/docs/data/data-grid/export/PrintExportSelectedRows.tsx.preview
@@ -0,0 +1,9 @@
+<DataGrid
+  {...data}
+  checkboxSelection
+  loading={loading}
+  slots={{ toolbar: GridToolbar }}
+  slotProps={{
+    toolbar: { printOptions: { getRowsToExport: getSelectedRowsToExport } },
+  }}
+/>
diff --git a/docs/data/data-grid/export/export.md b/docs/data/data-grid/export/export.md
@@ -88,14 +88,20 @@ There are a few ways to include or hide other columns.
 
 ## Exported rows
 
-:::warning
-This section only applies to the CSV and the Excel export.
-The print export always prints rows in their current state.
-:::
+### 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.
 
+### Customizing the rows to export
+
 Alternatively, you can set the `getRowsToExport` function and export any rows you want, as in the following example.
 The grid exports a few [selectors](/x/react-data-grid/state/#access-the-state) that can help you get the rows for the most common use-cases:
 
@@ -186,7 +192,7 @@ With `pageStyle` option, you can override the main content color with a [more sp
 
 ### Customize grid display
 
-By default, the print export display all the DataGrid. It is possible to remove the footer and the toolbar by setting respectively `hideFooter` and `hideToolbar` to `true`.
+By default, the print export displays all the DataGrid. It is possible to remove the footer and the toolbar by setting respectively `hideFooter` and `hideToolbar` to `true`.
 
 ```jsx
 <GridToolbarExport
@@ -197,7 +203,17 @@ By default, the print export display all the DataGrid. It is possible to remove
 />
 ```
 
-For more option to customize the print export, please visit the [`printOptions` API page](/x/api/data-grid/grid-print-export-options/).
+If rows are selected when exporting, the checkboxes will not be included in the printed page. To export the checkboxes you can set `includeCheckboxes` to `true`.
+
+```jsx
+<GridToolbarExport
+  printOptions={{
+    includeCheckboxes: true,
+  }}
+/>
+```
+
+For more options to customize the print export, please visit the [`printOptions` API page](/x/api/data-grid/grid-print-export-options/).
 
 ## Custom export format
 

diff --git a/docs/pages/x/api/data-grid/grid-csv-export-options.md b/docs/pages/x/api/data-grid/grid-csv-export-options.md
@@ -29,7 +29,7 @@ import { GridCsvExportOptions } from '@mui/x-data-grid';
 | <span class="prop-name optional">delimiter<sup><abbr title="optional">?</abbr></sup></span>                  | <span class="prop-type">string</span>                                                   | <span class="prop-default">','</span>              | The character used to separate fields.                                                                                                                         |
 | <span class="prop-name optional">fields<sup><abbr title="optional">?</abbr></sup></span>                     | <span class="prop-type">string[]</span>                                                 |                                                    | The columns exported.<br />This should only be used if you want to restrict the columns exports.                                                               |
 | <span class="prop-name optional">fileName<sup><abbr title="optional">?</abbr></sup></span>                   | <span class="prop-type">string</span>                                                   | <span class="prop-default">`document.title`</span> | The string used as the file name.                                                                                                                              |
-| <span class="prop-name optional">getRowsToExport<sup><abbr title="optional">?</abbr></sup></span>            | <span class="prop-type">(params: GridCsvGetRowsToExportParams) =&gt; GridRowId[]</span> |                                                    | Function that returns the id of the rows to export on the order they should be exported.                                                                       |
+| <span class="prop-name optional">getRowsToExport<sup><abbr title="optional">?</abbr></sup></span>            | <span class="prop-type">(params: GridCsvGetRowsToExportParams) =&gt; GridRowId[]</span> |                                                    | Function that returns the list of row ids to export on the order they should be exported.                                                                      |
 | <span class="prop-name optional">includeColumnGroupsHeaders<sup><abbr title="optional">?</abbr></sup></span> | <span class="prop-type">boolean</span>                                                  | <span class="prop-default">true</span>             | If `true`, the CSV will include the column groups.                                                                                                             |
 | <span class="prop-name optional">includeHeaders<sup><abbr title="optional">?</abbr></sup></span>             | <span class="prop-type">boolean</span>                                                  | <span class="prop-default">true</span>             | If `true`, the CSV will include the column headers and column groups.<br />Use `includeColumnGroupsHeaders` to control whether the column groups are included. |
 | <span class="prop-name optional">utf8WithBom<sup><abbr title="optional">?</abbr></sup></span>                | <span class="prop-type">boolean</span>                                                  | <span class="prop-default">false</span>            | If `true`, the UTF-8 Byte Order Mark (BOM) prefixes the exported file.<br />This can allow Excel to automatically detect file encoding as UTF-8.               |
diff --git a/docs/pages/x/api/data-grid/grid-excel-export-options.md b/docs/pages/x/api/data-grid/grid-excel-export-options.md
@@ -27,7 +27,7 @@ import { GridExcelExportOptions } from '@mui/x-data-grid-premium';
 | <span class="prop-name optional">exceljsPreProcess<sup><abbr title="optional">?</abbr></sup> [<span class="plan-premium" title="Premium plan"></span>](/x/introduction/licensing/#premium-plan)</span>          | <span class="prop-type">(processInput: GridExceljsProcessInput) =&gt; Promise&lt;void&gt;</span> |                                                    | Method called before adding the rows to the workbook.<br />Not supported when `worker` is set.<br />To use with web workers, use the option in `setupExcelExportWebWorker`. |
 | <span class="prop-name optional">fields<sup><abbr title="optional">?</abbr></sup> [<span class="plan-premium" title="Premium plan"></span>](/x/introduction/licensing/#premium-plan)</span>                     | <span class="prop-type">string[]</span>                                                          |                                                    | The columns exported.<br />This should only be used if you want to restrict the columns exports.                                                                            |
 | <span class="prop-name optional">fileName<sup><abbr title="optional">?</abbr></sup> [<span class="plan-premium" title="Premium plan"></span>](/x/introduction/licensing/#premium-plan)</span>                   | <span class="prop-type">string</span>                                                            | <span class="prop-default">`document.title`</span> | The string used as the file name.                                                                                                                                           |
-| <span class="prop-name optional">getRowsToExport<sup><abbr title="optional">?</abbr></sup> [<span class="plan-premium" title="Premium plan"></span>](/x/introduction/licensing/#premium-plan)</span>            | <span class="prop-type">(params: GridGetRowsToExportParams&lt;Api&gt;) =&gt; GridRowId[]</span>  |                                                    | Function that returns the id of the rows to export on the order they should be exported.                                                                                    |
+| <span class="prop-name optional">getRowsToExport<sup><abbr title="optional">?</abbr></sup> [<span class="plan-premium" title="Premium plan"></span>](/x/introduction/licensing/#premium-plan)</span>            | <span class="prop-type">(params: GridGetRowsToExportParams&lt;Api&gt;) =&gt; GridRowId[]</span>  |                                                    | Function that returns the list of row ids to export on the order they should be exported.                                                                                   |
 | <span class="prop-name optional">includeColumnGroupsHeaders<sup><abbr title="optional">?</abbr></sup> [<span class="plan-premium" title="Premium plan"></span>](/x/introduction/licensing/#premium-plan)</span> | <span class="prop-type">boolean</span>                                                           | <span class="prop-default">true</span>             | If `true`, the headers of the column groups will be added into the file.                                                                                                    |
 | <span class="prop-name optional">includeHeaders<sup><abbr title="optional">?</abbr></sup> [<span class="plan-premium" title="Premium plan"></span>](/x/introduction/licensing/#premium-plan)</span>             | <span class="prop-type">boolean</span>                                                           | <span class="prop-default">true</span>             | If `true`, the first row of the file will include the headers of the grid.                                                                                                  |
 | <span class="prop-name optional">valueOptionsSheetName<sup><abbr title="optional">?</abbr></sup> [<span class="plan-premium" title="Premium plan"></span>](/x/introduction/licensing/#premium-plan)</span>      | <span class="prop-type">string</span>                                                            |                                                    | Name given to the worksheet containing the columns valueOptions.<br />valueOptions are added to this worksheet if they are provided as an array.                            |