JavaScript Data GridCustomising Menus & Popups
javascript logo

Style UI elements that float above the main UI, including menus.

Rounding corners

  • --ag-border-radius sets the radius of most rectangular elements within the grid, including the grid itself.
  • --ag-wrapper-border-radius sets the radius of the grid wrapper, if you want it to be different from --ag-border-radius.
  • --ag-card-radius sets the radius of floating elements (cards and popups) and defaults to the value of --ag-border-radius.
  • ag-root-wrapper is the class name applied to the grid's outer element. Apply a border radius using a CSS selector: .ag-root-wrapper { border-radius: 2px }.

Drop shadows

Elements that float above the user interface are called cards or popups. Internally there is an implementation difference between the two, but they are the same from the user's point of view, so it is appropriate to style them in the same way. To set a drop shadow on all floating elements, set the --ag-card-shadow and --ag-popup-shadow variables to a CSS box shadow value:

.ag-theme-quartz {
    --ag-card-shadow: 0 3px 4px black;
    --ag-popup-shadow: 0 3px 4px black;
}

Styling menus

Menus such as the column menu and context menu are cards and so respond to the instructions above for rounded corners and shadows. Additionally:

  • the minimum width of the Column Menu can be set by the following variables. If the content is larger the menu will expand to fit.

    • --ag-menu-min-width controls the filter menu used in AG Grid Community.
    • --ag-tab-min-width controls the legacy tabbed menu used in AG Grid Enterprise.
  • the ag-tabs and ag-tabs-header classes can be used to style the body and header of tabbed menus. There are many more classes that can target specific elements in the menu, use your browser developer tools to find them.

  • the ag-menu class can be used to style the body of all menus - tabbed and non-tabbed.

  • In the Alpine and Material themes, tabs expand to fit the full width of the available space. To reproduce this in your own custom themes, use the CSS .ag-tab { flex: 1 1 auto; }.

Example

This example combines all of the above techniques to style the column menus. Click on the menu icon in a column header to see a tabbed menu, or right click on the grid for a non-tabbed menu:

.ag-theme-quartz {
    --ag-card-radius: 10px;
    --ag-card-shadow: 0 10px 40px rgb(83, 0, 106);
    --ag-popup-shadow: var(--ag-card-shadow);
    --ag-tab-min-width: 350px;
}

.ag-theme-quartz .ag-menu {
    background-color: #55AA77;
}

.ag-theme-quartz .ag-tabs-header {
    background-color: #AA5577;
}