Column Spanning

Note: this video switches to the aggr-column-span project.

In this video, we take a look at merging and centering columns using column spanning. I first walk you through the way the project is set up, as there are some styling rules and helper functions already supplied.

To achieve the effect we want, we need to add some conditional column spans. We first do this with the January column:

{
  headerName: "Jan",
  field: "jan",
  cellClassRules: this.cellClassRules,
  colSpan: params => {
     if (this.isHeaderRow(params)) {
       return 6;
     } else if (this.isQuarterRow(params)) {
       return 3;
     } else {
       return 1;
   }
 }
},

We can do something similar in the April column:

{
  headerName: "Apr",
  field: "apr",
  cellClassRules: this.cellClassRules,
  colSpan: params => {
     if (this.isQuarterRow(params)) {
       return 3;
     } else {
        return 1;
     }
   }
},

Now, when you run npm start and navigate to localhost:3000, you'll see some nicer formatting as the titles and quarters are merged and centered correctly.

Let's close this tutorial out by learning how to manipulate column definitions in Redux.