I have an AgGrid configured with the following column definitions:

const colDefs = ref([
  {
    field: "make"
  },
  { field: "model" },
  {
    headerName: "Col Group",
    columnGroupShow: "open",
    children: [{ field: "price" }, { field: "electric" }],
  },
]);

As you can see, I have configured a column group named "Col Group" and according to AgGrid documentation, there should be an option to collapse and expand the group, but I don't see it in my grid.

Here's a working example

Am I missing something or doing something wrong? How can I have the collapse/expand options working for this column group?

I have an AgGrid configured with the following column definitions:

const colDefs = ref([
  {
    field: "make"
  },
  { field: "model" },
  {
    headerName: "Col Group",
    columnGroupShow: "open",
    children: [{ field: "price" }, { field: "electric" }],
  },
]);

As you can see, I have configured a column group named "Col Group" and according to AgGrid documentation, there should be an option to collapse and expand the group, but I don't see it in my grid.

Here's a working example

Am I missing something or doing something wrong? How can I have the collapse/expand options working for this column group?

• javascript
• ag-grid

1 Answer 1

You need to set the columnGroupShow field on the children, not on the column def itself. Here is your updated code:

const colDefs = ref([
  {
    field: "make",
  },
  { field: "model" },
  {
    headerName: "Col Group",
    children: [{ columnGroupShow: "open", field: "price" }, { columnGroupShow: "closed", field: "electric" }],
  },
]);