Print Friendly Layouts

You know those "Print Friendly" buttons you sometimes see on a web site? I don't see them much these days as much I used to, but they're meant to remove some elements of the UI and do some formatting to make a page easier to physically print. We can do this same thing with ag-Grid and easily create a print friendly layout.

Right now we're using autoHeight as the domLayout from the video on setting grid height and width. We're going to build on that same concept but make some changes, as "print" is another type of domLayout for ag-Grid.

To get started, we need to add a height to our style piece of state and set domLayout to null. This null option for domLayout just sets it back to normal. Let's set the height and width of the grid to 600 px each.

style: {
  height: "600px",
  width: "600px",
},
domLayout: null,

We also need to remove the domLayout prop from our AgGridReact component. We'll be toggling back and forth between the print and null options using state and lifecycle methods, so having the prop passed directly into the grid causes some unexpected behavior.

For the purpose of this demo, let's also comment out sizeColumnsToFit in our onGridReady function:

onGridReady = (params) => {
  this.gridApi = params.api;
  this.columnApi = params.columnApi;
  // this.gridApi.sizeColumnsToFit();
};

There's nothing wrong with using sizeColumnsToFit with the print layout, it just makes it harder for you to see the difference between the normal and print layouts when the grid is automatically resizing all of the columns to fit onto the screen.

With that stuff out of the way, let's create a function to set domLayout to print in our state:

// App.js
setPrinterFriendly = () => {
  this.setState({ domLayout: "print" });
};

Let's do the same thing for setting it back to normal:

// App.js
setNormal = () => {
  this.setState({ domLayout: null });
};

Let's also add two buttons to above our grid to call these functions:

// App.js above the grid with the other buttons
<button type="button" onClick={this.setPrinterFriendly}>Printer Friendly</button>
<button type="button" onClick={this.setNormal}>Normal</button>

Note: In the video, I take a second to add type="button" to all of the buttons. This doesn't have anything to do with ag-Grid. It's to prevent the default form submission behavior in buttons. This behavior doesn't happen consistently across all browsers, but it's worth keeping our HTML a little more precise.

These buttons will set the state, but we need to react to these state changes and tell the grid to actually set the domLayout on the grid. We'll do this with our old friend componentDidUpdate:

componentDidUpdate = (prevProps, prevState) => {
  if (prevState.domLayout !== this.state.domLayout) {
    if (this.state.domLayout === "print") {
      this.setState({ style: { height: "", width: "" } });
    } else if (this.state.domLayout === null) {
      this.setState({ style: { height: "600px", width: "600px" } });
    }
    this.gridApi.setDomLayout(this.state.domLayout);
  }
};

When you click the Print Friendly button, you should see that the scroll bars disappear from the grid and the entire grid is shown. Since we have 500 rows of data, though, this is kind of hard to see. Let's look at a smaller data set to make this easier to spot the difference. In our componentDidMount function, we can use just the first 50 rows to see this in action:

componentDidMount() {
  fetch("/api/accounts")
    .then((result) => result.json())
    .then((rowData) => this.setState({ rowData: rowData.slice(0, 50) }));
}

It should be easier to spot the difference between the print and normal layouts now. This gives us a hint that, just like with Auto Height, it's best not to use this technique if you are showing a large number of rows or columns. This is a limitation on browsers on how much data they can easily display in one web page. If you try to render lots of data into the web page, the web page will create lots of DOM elements and will either slow things down or simply hang the browser. Normally, ag-Grid gets around this problem by virtualizing the rows and columns, but the print layout prints the entire data set and thus bypasses that virtualization. If you want to allow printing large data sets it's best to get your users to export to CSV or Excel and then print from another non-web based application. You can read more about when to use the print layout and when not to in the ag-Grid docs.

And with that, you've reached the end of our section on Styling the grid! Congratulations! In the next tutorial, we'll learn about Selection. See you there!