@ag-grid-enterprise/menu

What is @ag-grid-enterprise/menu?

@ag-grid-enterprise/menu is a package that provides advanced menu functionalities for ag-Grid, a popular JavaScript data grid. It allows users to create custom context menus, column menus, and other interactive menu elements within the grid.

What are @ag-grid-enterprise/menu's main functionalities?

Custom Context Menu

This feature allows you to create a custom context menu that appears when a user right-clicks on a cell. The `onCellContextMenu` event is used to show the popup menu.

const gridOptions = {
  onCellContextMenu: (params) => {
    params.api.showPopupMenu(params.node, params.column, params.event);
  },
  popupParent: document.body,
  columnDefs: [
    { field: 'make' },
    { field: 'model' },
    { field: 'price' }
  ],
  rowData: [
    { make: 'Toyota', model: 'Celica', price: 35000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Porsche', model: 'Boxster', price: 72000 }
  ]
};

new agGrid.Grid(document.getElementById('myGrid'), gridOptions);

Column Menu

This feature allows you to add a column menu with tabs for filtering, general options, and column management. The `menuTabs` property in `defaultColDef` is used to specify which tabs to include.

const gridOptions = {
  defaultColDef: {
    menuTabs: ['filterMenuTab', 'generalMenuTab', 'columnsMenuTab']
  },
  columnDefs: [
    { field: 'make' },
    { field: 'model' },
    { field: 'price' }
  ],
  rowData: [
    { make: 'Toyota', model: 'Celica', price: 35000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Porsche', model: 'Boxster', price: 72000 }
  ]
};

new agGrid.Grid(document.getElementById('myGrid'), gridOptions);

Custom Menu Items

This feature allows you to add custom items to the context menu. The `getContextMenuItems` function is used to define the items, including built-in options and custom actions.

const gridOptions = {
  getContextMenuItems: (params) => {
    return [
      'copy',
      'copyWithHeaders',
      'paste',
      'separator',
      {
        name: 'Custom Menu Item',
        action: () => { console.log('Custom Menu Item Clicked'); }
      }
    ];
  },
  columnDefs: [
    { field: 'make' },
    { field: 'model' },
    { field: 'price' }
  ],
  rowData: [
    { make: 'Toyota', model: 'Celica', price: 35000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Porsche', model: 'Boxster', price: 72000 }
  ]
};

new agGrid.Grid(document.getElementById('myGrid'), gridOptions);

Other packages similar to @ag-grid-enterprise/menu

handsontable

Handsontable is a JavaScript data grid component with similar functionalities to ag-Grid, including context menus and column menus. It is known for its Excel-like appearance and behavior, making it a good alternative for users looking for spreadsheet-like features.

slickgrid

SlickGrid is another JavaScript grid component that offers advanced features like custom menus, column management, and data manipulation. It is highly customizable and performs well with large datasets, making it a strong competitor to ag-Grid.

tabulator

Tabulator is a JavaScript library that provides interactive tables with features like custom context menus, column menus, and data filtering. It is easy to set up and offers a wide range of customization options, making it a versatile choice for data grid implementations.

README

ag-Grid-Enterprise

This project contains ag-Grid-Enterprise features.

See www.ag-grid.com for an overview and full documentation.

Frameworks Supported

Framework specific Getting Started guides:

Angular 1 | Angular 2 | Javascript | Polymer | React | TypeScript | VueJS | Web Components | Aurelia

This is not free software, this software is covered by copyright and to use you need a commercial license.

Please see files: LICENSE.md SUPPORT_AND_MAINTENANCE.md

Issue Reporting

If you are an Enterprise customer (or are Evaluating ag-Grid Enterprise) and wish to report a Bug or raise a new Feature Request please do so on our Members Forum.

To Sign Up: Send an email to [e-mail] with your license key

Building

To build:

• npm install
• npm install gulp -g
• gulp or gulp release