Creating Column Groups

In our grid, we've got a number of columns that it would make sense to group together. We can create column groups pretty easily by adjusting some settings.

To create groups, you'll just create a new children array in a column definition and move nested column definitions underneath. For example the Personal Information group will look like this:

// src/App.js
{
   headerName: "Personal Information",
   groupId: "PersonalGroup",
   children: [
      {
      headerName: "ID",
      field: "id",
      width: 60,
      },
      {
      headerName: "First",
      field: "firstName"
      },
      {
      headerName: "Last",
      field: "lastName",
       colId: "lastName"
      },
    ]
}

We can also control whether a column is shown or hidden when the column is collapsed or expanded by adding a property called columnGroupShow. For example, in the video we do this with the company column:

// src/App.js
{
  headerName: "Company",
  field: "company",
  columnGroupShow: "open"
  },

Now, the company column only shows when the Personal Information group is expanded.

We can also progrmatically expand and collapse columns. We'll learn how to do that in the next video.