Adding custom drodpdown on column Header in ag-Grid

Viewed 1238

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}            
/>

enter image description here

1 Answers

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

Edit 64059440/adding-custom-drodpdown-on-column-header-in-ag-grid

Related