Adding custom drodpdown on column Header in ag-Grid

Question

I am trying to create a custom drodpdown on column Header that have UI elements as below (containing some input type text and buttons and unordered list)and this dropdown should get list of column defs inside it as list. Is there way to achieve this, to create custom dropdown div on column header in ag-Grid. How should I get a click event on column header when clicked?

https://www.ag-grid.com/javascript-grid-column-menu/

Here is the plunker link:-

https://plnkr.co/edit/hztm3jf5FDBK2unX

.jsx:-

<AgGridReact
  columnDefs={this.state.columnDefs}
  defaultColDef={this.state.defaultColDef}
  rowData={this.state.rowData}
  // frameworkComponents={this.state.frameworkComponents}
  onGridReady={this.onGridReady}            
/>

Answer 1

You can use getMainMenuItems callback to customize the column menu content. The example below demonstrates how you can add a list of user provided column settings in the generalMenuTab. You can also update the value of some of the column settings here using GridApi.setColumnDefs() and see the result immediately.

getMainMenuItems = (params: GetMainMenuItemsParams) => {
  const { api, columnApi } = params;
  const menuItems = [] as MenuItemDef[];
  const colDef = params.column.getColDef();
  const userProvidedColDefKeys = Object.keys(colDef);

  userProvidedColDefKeys.forEach((key) => {
    const value = colDef[key];
    const menuItem: MenuItemDef = { name: key };
    const updateColDef = (key: string, value: any) => {
      const colDefs = api?.getColumnDefs();
      const newColDefs = colDefs?.map((c) => {
        const newColDef = {};

        Object.keys(c).forEach((key) => {
          if (userProvidedColDefKeys.includes(key)) {
            newColDef[key] = c[key];
          }
        });
        if (c.field === colDef.field) {
          newColDef[key] = value;
        }
        return newColDef;
      });
      api?.setColumnDefs(newColDefs);
    };

    if (typeof value === "boolean") {
      menuItem.subMenu = [
        {
          name: "Yes",
          checked: value,
          action: () => updateColDef(key, true)
        },
        {
          name: "No",
          checked: !value,
          action: () => updateColDef(key, false)
        }
      ];
    } else if (typeof value === "number") {
      if (key === "flex") {
        menuItem.subMenu = [0, 1, 2, 3, 4].map((flex) => ({
          name: flex.toString(),
          checked: flex === value,
          action: () => updateColDef(key, flex)
        }));
      } else if (
        key === "width" ||
        key === "minWidth" ||
        key === "maxWidth"
      ) {
        menuItem.subMenu = [50, 100, 200, 300, 500].map((width) => ({
          name: width.toString(),
          checked: width === value,
          action: () => updateColDef(key, width)
        }));
      }
    }

    menuItems.push(menuItem);
  });

  return menuItems;
};

Usage

<AgGridReact
  getMainMenuItems={this.getMainMenuItems}
  {...}
/>

Live Demo