[DataGrid] Print export #2519

DanailH · 2021-09-01T13:31:26Z

Fixes #200

This is the initial version of the Print Export feature. I'll keep the PR as a Draft for now as tests and docs are missing from the PR and I would like to discuss the approach and features before adding the tests and docs and converting it to normal PR.

Preview: https://deploy-preview-2519--material-ui-x.netlify.app/storybook/?path=/story/x-grid-tests-toolbar--export

Explanation:

In the Export drop-down menu in the GridToolbar is now an additional button called Print. The remaining API is part of the useGridPrintExport hook. The setup is identical to the CSV Export feature.

Options available for the Print Export:

export interface GridPrintExportOptions {
  /**
   * The string used as the print window title.
   * @default 'Print Window'
   */
  fileName?: string;
  /**
   * The columns to be printed.
   * This should only be used if you want to restrict the columns exports.
   */
  fields?: string[];
  /**
   * If `true`, the hidden columns will also be printed.
   * @default false
   */
  allColumns?: boolean;
  /**
   * If `true`, the toolbar is removed for when printing.
   * @default false
   */
  hideToolbar?: boolean;
  /**
   * If `true`, the footer is removed for when printing.
   * @default false
   */
  hideFooter?: boolean;
  /**
   * If `false`, all <style> and <link type="stylesheet" /> tags from the <head> will not be copied
   * to the print window.
   * @default true
   */
  copyStyles?: boolean;
  /**
   * One or more classes passed to the print window.
   */
  bodyClass?: string;
  /**
   * Provide Print specific styles to the print window.
   */
  pageStyle?: string | Function;
}

These options can also be passed to the GridToolbarExport component (same as the CSV export).

ToDo:

Add tests
Add docs

m4theushw

I had a quick look and it's working fantastically. 👌

Did you think about exposing the function below as a disableVirtualization API call? It could be used instead of updating the state.

https://github.com/mui-org/material-ui-x/blob/4eb92a6dcae63f6fbb0bb9d195a8adde805a356f/packages/grid/_modules_/grid/hooks/features/virtualization/useGridNoVirtualization.ts#L23

We could add a few CSS rules with @media print to make the grid print-safe. The left and right borders could be removed, the same for the padding.
In the full-featured demo, when I close the print window it shows columns that were hidden before, like the ID.

DanailH · 2021-09-02T11:13:24Z

I had a quick look and it's working fantastically. 👌

Did you think about exposing the function below as a disableVirtualization API call? It could be used instead of updating the state.

https://github.com/mui-org/material-ui-x/blob/4eb92a6dcae63f6fbb0bb9d195a8adde805a356f/packages/grid/_modules_/grid/hooks/features/virtualization/useGridNoVirtualization.ts#L23

We could add a few CSS rules with @media print to make the grid print-safe. The left and right borders could be removed, the same for the padding.

In the full-featured demo, when I close the print window it shows columns that were hidden before, like the ID.

@m4theushw thanks for the review. I'll wait to see what the others have to say and fix the issues.

For the disableVirtualization - when worked on the implementation that wasn't available. I can have a look and see about exposing it.

I was thinking of adding the CSS rules. We can add a few but that's why I added the option for people to provide their own riles directly.

I'll check about the hidden columns, that shouldn't happen

flaviendelangle · 2021-09-02T11:59:39Z

Concerning the rename of the CSV option interface

We will need to make a PR in the core (adding also the print at the same time I suppose) and then delete this file (and the js part).

https://github.com/mui-org/material-ui-x/blob/2dbaca1a24fb554408e6b8ec225bf612d8e445a9/docs/pages/api-docs/data-grid/grid-export-csv-options.md

oliviertassinari

It looks like a great start. We are going further than what I was expecting for the first iteration, which is cool. I would propose we offer two different levels of solution:

You have built an API to turn the rendering of the grid in a print-ready mode. I would propose that we double down on it:

There is a rendering bug on http://0.0.0.0:3001/components/data-grid/export/#csv-export, only one row is visible in the print version
There is a rendering bug on http://0.0.0.0:3001/components/data-grid/export/#csv-export, the restored state is not identical to the initial one. Related to [DataGrid] Print export #2519 (comment)
We could expose this as a public API. It would make it easy for developers that are used to the AG Grid API. It would allow more customizations for the developers, say they want to print chart at the same time or do some other transformations before calling print (Pro only?). [DataGrid] Print export #2519 (comment)
There is likely something to do about > 1,000 rows export. It prints on 20 pages, it feels that beyond, it's pointless. Same feedback for the autoHeight prop.

The new export menu option is cool. It's what I mean by "going further than what I was expecting". I didn't notice something specific about it, outside of a few changes, some breaking, on the existing CSV feature that maybe should be done standalone (not sure, I assume we fixed stuff not directly related to the print).

A side thought, for the docs, we could try to sell developers to use the Print export when they need the PDF export 😁

oliviertassinari · 2021-09-02T14:26:51Z

packages/grid/_modules_/grid/hooks/features/export/useGridPrintExport.tsx

+      // Revert columns to their original state
+      apiRef!.current.updateColumns(
+        columns.map((column) => {
+          if (previousHiddenColumns.current.includes(column.field)) {


Instead of keeping track of a previousHiddenColumns state, could it be simpler to store the whole column state and restore it?

Unfortunately, it won't work unless I deep clone it.

oliviertassinari · 2021-09-02T14:29:29Z

packages/grid/_modules_/grid/hooks/features/export/useGridPrintExport.tsx

+      setGridState((state) => {
+        previousGridState.current = state;
+        return {
+          ...state,
+          containerSizes: {
+            ...state.containerSizes!,
+            renderingZone: {
+              ...state.containerSizes!.renderingZone,
+              height: visibleSortedRows.size * props.rowHeight!,
+            },
+            renderingZonePageSize: visibleSortedRows.size,
+          },
+          viewportSizes: {
+            ...state.viewportSizes,
+            height: visibleSortedRows.size * props.rowHeight!,
+          },
+        };
+      });


This logic looks brittle (away from the related logic, and might duplicate). Is there a way we could call an imperative API, e.g. an enableAutoHeight() method to move it closer to the hooks that manage containerSizes and viewportSizes as well as not duplicating the logic that handles the autoHeight prop?

Ok, I took a bit more time to check this more in-depth. The problem is that this logic doesn't really do enable autoHeight neither it disables the virtualization. What it does is force the grid to render all rows (have all the HTML for the rows be in the dom but still keep the scroll so that the content on the page doesn't jump).

For example @m4theushw suggestion to reuse his logic from the useGridNoVirtualization won't work because as far as can see there are other places where that prop is directly red and used (same as the autoHeight , which was my original idea). I'll see if moving that chunk into useGridNoVirtualization will make sense and expose it as an API from there.

Update: Another solution is to explain in the docs that in order to use the feature one needs to set disableVirtualization={true}. I would love some feedback on this approach as it will only be applicable for the DataGridPro

packages/grid/_modules_/grid/hooks/features/export/useGridPrintExport.tsx

flaviendelangle · 2021-09-14T15:31:01Z

@DanailH https://github.com/mui-org/material-ui-x/blob/next/docs/src/pages/components/data-grid/getting-started/getting-started.md

We can update the Print line on this page

m4theushw

If the dark mode is used it will print with the styles from the dark mode. Since we only have the dark styles to copy I don't see an easy alternative. I think only with option 3 from #2519 (comment) we can solve that, by creating another theme to wrap the grid before rendering.

packages/grid/_modules_/grid/models/gridExport.ts

packages/grid/_modules_/grid/hooks/features/export/useGridPrintExport.tsx

m4theushw · 2021-10-04T23:48:02Z

packages/grid/_modules_/grid/hooks/features/export/useGridPrintExport.tsx

+  const buildPrintWindow = React.useCallback((title?: string): HTMLIFrameElement => {
+    const iframeEl = document.createElement('iframe');
+
+    iframeEl.id = 'grid-print-window';


Will it work without the id? If not, useId() could be used to generate a unique value.

The id is only used for the tests. If we are going with your approach, setting the id is not needed.

m4theushw · 2021-10-05T00:50:50Z

packages/grid/_modules_/grid/hooks/features/export/useGridPrintExport.tsx

+      previousGridState.current = gridState;
+
+      if (props.pagination) {
+        apiRef.current.setPageSize(visibleRowCount);


This won't work if the user is controlling the page size. Forcing the state also doesn't work, because it will require a forceUpdate() to propagate the changes, and when this runs, all effects will also run again and reset the value back to the prop value. I see some options:

Add a escape hatch to temporarily disable the state update constraint. https://github.com/mui-org/material-ui-x/blob/95fed89847c5f1489ddb63dafedcf0d907d46354/packages/grid/_modules_/grid/hooks/features/core/useGridControlState.ts#L40

Add a note to the docs mentioning that the print export doesn't work if pageSize or page is present.

Render the grid inside the iframe and disable the virtualization:

ReactDOM.render(<DataGrid {...props} disableVirtualization />, iframeEl)

There's going to be a dependency cycle with 3., which I believe we could solve by using require() instead of import.

I would go with option 2. -> the reason is that 3. for me will be too expensive in terms of the time it will take to render.
Also, this feature (along with a couple of other ones) doesn't work with server-side pagination which is controlled. If a developer is controlling the pagination the print export has an API that they can call manually.

This looks to me like a corner case - we can see what the feedback will be and if it is problem then we can spend time fixing it.

Co-authored-by: Matheus Wichman <[email protected]>

…tExport.tsx Co-authored-by: Matheus Wichman <[email protected]>

github-actions · 2021-10-06T12:28:04Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

flaviendelangle · 2021-10-08T15:31:21Z

packages/grid/_modules_/grid/models/api/gridPrintExportApi.ts

+   * Print the grid's data.
+   * @param {GridPrintExportOptions} options The options to apply on the export.
+   */
+  exportDataAsPrint: (options?: GridPrintExportOptions) => void;


I think we should rename this one UNSTABLE_exportDataAsPrint for a few months, the time to stabilize the API and behavior.

We should probably do it for most of the new API methods.
On the Tree Data I also hide them from the documentation (@ignore) but the UNSTABLE_ may be enough

I'm with this as long as we keep it as a general rule of thumb - new API methods should be marked as unstable @m2mathew @oliviertassinari what do you think?

Update: I'll keep this one as it is because I use it on the toolbar button directly. But I marked the disableVirtualization one as unstable.

flaviendelangle · 2021-10-08T15:32:20Z

docs/src/pages.js

@@ -58,7 +58,8 @@ dataGridComponentAPI.children = [
  { pathname: '/api-docs/data-grid/grid-col-def', title: 'GridColDef' },
  { pathname: '/api-docs/data-grid/grid-cell-params', title: 'GridCellParams' },
  { pathname: '/api-docs/data-grid/grid-row-params', title: 'GridRowParams' },
-  { pathname: '/api-docs/data-grid/grid-export-csv-options', title: 'GridExportCSVOptions' },


How do we avoid having 404 on the doc while we update the core page list ?

I can merge that and then open a PR against the core with this change.

packages/grid/_modules_/grid/models/api/gridDisableVirtualizationApi.ts

packages/grid/_modules_/grid/models/gridExport.ts

DanailH · 2021-10-12T13:38:18Z

@m2mathew @flaviendelangle I would like to proceed with merging this and releasing it to see what the feedback will be. Ideally, I would like to merge it tomorrow or today so that it is included in this week's release.

github-actions · 2021-10-12T14:09:45Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

github-actions · 2021-10-13T07:03:51Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

DanailH · 2021-10-13T12:16:23Z

As we discussed I'm merging this.

m4theushw

The print button is not working. We should fix this before the release.

docs/src/pages/components/data-grid/export/export.md

packages/grid/_modules_/grid/hooks/features/export/useGridPrintExport.tsx

DanailH added 7 commits August 25, 2021 11:21

Feature setup

87fa872

First stable version

59731a7

Spacing

ab92970

Cleanup

38a3985

Add features

83b45ee

Clean up

d1adab3

Resolve conflicts

0a97a56

DanailH added component: data grid This is the name of the generic UI component, not the React module! new feature New feature or request labels Sep 1, 2021

DanailH requested review from oliviertassinari, flaviendelangle and m4theushw September 1, 2021 13:31

DanailH self-assigned this Sep 1, 2021

DanailH marked this pull request as draft September 1, 2021 13:31

DanailH added this to the Sprint 21 milestone Sep 1, 2021

Generate docs

2dbaca1

m4theushw reviewed Sep 2, 2021

View reviewed changes

oliviertassinari reviewed Sep 2, 2021

View reviewed changes

flaviendelangle reviewed Sep 2, 2021

View reviewed changes

oliviertassinari modified the milestones: Sprint 21, Sprint 22 Sep 6, 2021

DanailH added 5 commits September 7, 2021 14:12

Fix bugs

7c1fdb9

Update disable virtualization hook

cdd0042

Fix PR comments

2920589

add hook dep

4a3773a

Resolve conflicts

cd6cf2f

resolve conflicts

4e02009

flaviendelangle removed this from the v5 stable version milestone Oct 4, 2021

m4theushw reviewed Oct 5, 2021

View reviewed changes

DanailH and others added 4 commits October 5, 2021 15:43

Update packages/grid/_modules_/grid/models/gridExport.ts

b667abb

Co-authored-by: Matheus Wichman <[email protected]>

Update packages/grid/_modules_/grid/hooks/features/export/useGridPrin…

67a1b25

…tExport.tsx Co-authored-by: Matheus Wichman <[email protected]>

PR comment

0e5c37c

update docs

9e88436

DanailH removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Oct 6, 2021

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Oct 6, 2021

resolve conflicts

1d77f3e

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Oct 6, 2021

flaviendelangle reviewed Oct 8, 2021

View reviewed changes

pr comments

ae7fad4

DanailH requested review from flaviendelangle and m4theushw October 12, 2021 13:38

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Oct 12, 2021

resove conflicts

8e2eec1

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Oct 12, 2021

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Oct 13, 2021

resolve conflicts

52949e6

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Oct 13, 2021

DanailH merged commit f422f9a into mui:next Oct 13, 2021

m4theushw reviewed Oct 13, 2021

View reviewed changes

This was referenced Oct 14, 2021

v5.0.0-beta.4 #2865

Merged

[DataGrid] Fix print export by setting the correct DOM selectors #2869

Merged

m4theushw mentioned this pull request Nov 29, 2021

[DataGrid] Print Export of DataGrid asks for Pro License when useState is passed as pageSize #3154

Closed

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DataGrid] Print export #2519

[DataGrid] Print export #2519

DanailH commented Sep 1, 2021 •

edited by flaviendelangle

Loading

m4theushw left a comment

DanailH commented Sep 2, 2021

flaviendelangle commented Sep 2, 2021

oliviertassinari left a comment •

edited

Loading

oliviertassinari Sep 2, 2021

DanailH Sep 8, 2021

oliviertassinari Sep 2, 2021 •

edited

Loading

DanailH Sep 8, 2021 •

edited

Loading

flaviendelangle commented Sep 14, 2021

m4theushw left a comment •

edited

Loading

m4theushw Oct 4, 2021

DanailH Oct 5, 2021

m4theushw Oct 5, 2021 •

edited

Loading

DanailH Oct 5, 2021

github-actions bot commented Oct 6, 2021

flaviendelangle Oct 8, 2021

DanailH Oct 12, 2021 •

edited

Loading

flaviendelangle Oct 8, 2021

DanailH Oct 12, 2021

DanailH commented Oct 12, 2021 •

edited

Loading

github-actions bot commented Oct 12, 2021

github-actions bot commented Oct 13, 2021

DanailH commented Oct 13, 2021

m4theushw left a comment

[DataGrid] Print export #2519

[DataGrid] Print export #2519

Conversation

DanailH commented Sep 1, 2021 • edited by flaviendelangle Loading

Explanation:

m4theushw left a comment

Choose a reason for hiding this comment

DanailH commented Sep 2, 2021

flaviendelangle commented Sep 2, 2021

oliviertassinari left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

oliviertassinari Sep 2, 2021 • edited Loading

Choose a reason for hiding this comment

DanailH Sep 8, 2021 • edited Loading

Choose a reason for hiding this comment

flaviendelangle commented Sep 14, 2021

m4theushw left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

m4theushw Oct 5, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Oct 6, 2021

Choose a reason for hiding this comment

DanailH Oct 12, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

DanailH commented Oct 12, 2021 • edited Loading

github-actions bot commented Oct 12, 2021

github-actions bot commented Oct 13, 2021

DanailH commented Oct 13, 2021

m4theushw left a comment

Choose a reason for hiding this comment

DanailH commented Sep 1, 2021 •

edited by flaviendelangle

Loading

oliviertassinari left a comment •

edited

Loading

oliviertassinari Sep 2, 2021 •

edited

Loading

DanailH Sep 8, 2021 •

edited

Loading

m4theushw left a comment •

edited

Loading

m4theushw Oct 5, 2021 •

edited

Loading

DanailH Oct 12, 2021 •

edited

Loading

DanailH commented Oct 12, 2021 •

edited

Loading