ag-grid-angular
Version:
AG Grid Angular Component
979 lines (975 loc) • 202 kB
JavaScript
import * as i0 from '@angular/core';
import { inject, ViewContainerRef, Component, Injectable, NgZone, EventEmitter, booleanAttribute, Output, Input, ViewEncapsulation, NgModule } from '@angular/core';
import { BaseComponentWrapper, VanillaFrameworkOverrides, _combineAttributesAndGridOptions, createGrid, _processOnChange, _BOOLEAN_MIXED_GRID_OPTIONS } from 'ag-grid-community';
import { _removeFromParent } from 'ag-stack';
// To speed up the removal of custom components we create a number of shards to contain them.
// Removing a single component calls a function within Angular called removeFromArray.
// This is a lot faster if the array is smaller.
class AgComponentContainer {
constructor() {
this.vcr = inject(ViewContainerRef);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AgComponentContainer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: AgComponentContainer, isStandalone: true, selector: "ag-component-container", ngImport: i0, template: '', isInline: true }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AgComponentContainer, decorators: [{
type: Component,
args: [{
selector: 'ag-component-container',
template: '',
}]
}] });
const NUM_SHARDS = 16;
let shardIdx = 0;
function createComponentContainers(vcr) {
const containerMap = new Map();
for (let i = 0; i < NUM_SHARDS; i++) {
const container = vcr.createComponent(AgComponentContainer);
containerMap.set(i, container);
_removeFromParent(container.location.nativeElement);
}
return containerMap;
}
/**
* These methods are called on a hot path for every row so we do not want to enter / exit NgZone each time.
* Also these methods should not be used to update the UI, so we don't need to run them inside Angular.
*/
const runOutsideMethods = new Set(['doesFilterPass', 'isFilterActive']);
class AngularFrameworkComponentWrapper extends BaseComponentWrapper {
setViewContainerRef(viewContainerRef, angularFrameworkOverrides) {
this.viewContainerRef = viewContainerRef;
this.angularFrameworkOverrides = angularFrameworkOverrides;
}
createWrapper(OriginalConstructor) {
const angularFrameworkOverrides = this.angularFrameworkOverrides;
const that = this;
that.compShards ??= createComponentContainers(this.viewContainerRef);
class DynamicAgNg2Component extends BaseGuiComponent {
init(params) {
angularFrameworkOverrides.runInsideAngular(() => {
super.init(params);
this._componentRef.changeDetectorRef.detectChanges();
});
}
createComponent() {
return that.createComponent(OriginalConstructor);
}
hasMethod(name) {
return wrapper.getFrameworkComponentInstance()[name] != null;
}
callMethod(name, args) {
const componentRef = this.getFrameworkComponentInstance();
const methodCall = componentRef[name];
if (runOutsideMethods.has(name)) {
return methodCall.apply(componentRef, args);
}
return angularFrameworkOverrides.runInsideAngular(() => methodCall.apply(componentRef, args));
}
addMethod(name, callback) {
wrapper[name] = callback;
}
}
const wrapper = new DynamicAgNg2Component();
return wrapper;
}
createComponent(componentType) {
shardIdx = (shardIdx + 1) % NUM_SHARDS;
const container = this.compShards.get(shardIdx);
return container.instance.vcr.createComponent(componentType);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AngularFrameworkComponentWrapper, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AngularFrameworkComponentWrapper }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AngularFrameworkComponentWrapper, decorators: [{
type: Injectable
}] });
class BaseGuiComponent {
init(params) {
this._params = params;
this._componentRef = this.createComponent();
this._agAwareComponent = this._componentRef.instance;
this._frameworkComponentInstance = this._componentRef.instance;
this._eGui = this._componentRef.location.nativeElement;
// Angular appends the component to the DOM, so remove it
_removeFromParent(this._eGui);
this._agAwareComponent.agInit(this._params);
}
getGui() {
return this._eGui;
}
/** `getGui()` returns the `ng-component` element. This returns the actual root element. */
getRootElement() {
const firstChild = this._eGui.firstChild;
return firstChild;
}
destroy() {
if (this._frameworkComponentInstance && typeof this._frameworkComponentInstance.destroy === 'function') {
this._frameworkComponentInstance.destroy();
}
this._componentRef?.destroy();
}
getFrameworkComponentInstance() {
return this._frameworkComponentInstance;
}
}
class AngularFrameworkEventListenerService {
constructor(frameworkOverrides) {
this.frameworkOverrides = frameworkOverrides;
// Map from user listener to wrapped listener so we can remove listener provided by user
this.wrappedListeners = new Map();
this.wrappedGlobalListeners = new Map();
}
wrap(eventType, userListener) {
const { frameworkOverrides, wrappedListeners } = this;
let listener = userListener;
if (frameworkOverrides.shouldWrapOutgoing) {
listener = (event) => {
frameworkOverrides.wrapOutgoing(() => userListener(event));
};
let eventListeners = wrappedListeners.get(eventType);
if (!eventListeners) {
eventListeners = new Map();
wrappedListeners.set(eventType, eventListeners);
}
eventListeners.set(userListener, listener);
}
return listener;
}
wrapGlobal(userListener) {
const { frameworkOverrides, wrappedGlobalListeners } = this;
let listener = userListener;
if (frameworkOverrides.shouldWrapOutgoing) {
listener = (eventType, event) => {
frameworkOverrides.wrapOutgoing(() => userListener(eventType, event));
};
wrappedGlobalListeners.set(userListener, listener);
}
return listener;
}
unwrap(eventType, userListener) {
const { wrappedListeners } = this;
const eventListeners = wrappedListeners.get(eventType);
if (eventListeners) {
const wrapped = eventListeners.get(userListener);
if (wrapped) {
eventListeners.delete(userListener);
if (eventListeners.size === 0) {
wrappedListeners.delete(eventType);
}
return wrapped;
}
}
return userListener;
}
unwrapGlobal(userListener) {
const { wrappedGlobalListeners } = this;
const wrapped = wrappedGlobalListeners.get(userListener);
if (wrapped) {
wrappedGlobalListeners.delete(userListener);
return wrapped;
}
return userListener;
}
}
class AngularFrameworkOverrides extends VanillaFrameworkOverrides {
constructor(_ngZone) {
super('angular');
this._ngZone = _ngZone;
this.batchFrameworkComps = true;
// Flag used to control Zone behaviour when running tests as many test features rely on Zone.
this.isRunningWithinTestZone = false;
// Make all events run outside Angular as they often trigger the setup of event listeners
// By having the event listeners outside Angular we can avoid triggering change detection
// This also means that if a user calls an AG Grid API method from within their component
// the internal side effects will not trigger change detection. Without this the events would
// run inside Angular and trigger change detection as the source of the event was within the angular zone.
this.wrapIncoming = (callback, source) => this.runOutside(callback, source);
/**
* Make sure that any code that is executed outside of AG Grid is running within the Angular zone.
* This means users can update templates and use binding without having to do anything extra.
*/
this.wrapOutgoing = (callback) => this.runInsideAngular(callback);
this.isRunningWithinTestZone =
window?.AG_GRID_UNDER_TEST ?? !!window?.Zone?.AsyncTestZoneSpec;
if (!this._ngZone) {
this.runOutside = (callback) => callback();
}
else if (this.isRunningWithinTestZone) {
this.runOutside = (callback, source) => {
if (source === 'resize-observer' || source === 'popupPositioning') {
// ensure resize observer callbacks are run outside of Angular even under test due to Jest not supporting ResizeObserver
// which means it just loops continuously with a setTimeout with no way to flush the queue or have fixture.whenStable() resolve.
return this._ngZone.runOutsideAngular(callback);
}
// When under test run inside Angular so that tests can use fixture.whenStable() to wait for async operations to complete.
return callback();
};
}
else {
this.runOutside = (callback) => this._ngZone.runOutsideAngular(callback);
}
}
/**
* The shouldWrapOutgoing property is used to determine if events should be run outside of Angular or not.
* If an event handler is registered outside of Angular then we should not wrap the event handler
* with runInsideAngular() as the user may not have wanted this.
* This is also used to not wrap internal event listeners that are registered with RowNodes and Columns.
*/
get shouldWrapOutgoing() {
return this._ngZone && NgZone.isInAngularZone();
}
createLocalEventListenerWrapper(existingFrameworkEventListenerService, localEventService) {
if (this.shouldWrapOutgoing) {
return (existingFrameworkEventListenerService ??
(() => {
localEventService.setFrameworkOverrides(this);
return new AngularFrameworkEventListenerService(this);
})());
}
return undefined;
}
createGlobalEventListenerWrapper() {
return new AngularFrameworkEventListenerService(this);
}
isFrameworkComponent(comp) {
if (!comp) {
return false;
}
const prototype = comp.prototype;
return prototype && 'agInit' in prototype;
}
runInsideAngular(callback) {
if (!this._ngZone || NgZone.isInAngularZone()) {
return callback();
}
// Check for _ngZone existence as it is not present when Zoneless
return this._ngZone.run(callback);
}
runOutsideAngular(callback, source) {
return this.runOutside(callback, source);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AngularFrameworkOverrides, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AngularFrameworkOverrides }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: AngularFrameworkOverrides, decorators: [{
type: Injectable
}], ctorParameters: () => [{ type: i0.NgZone }] });
/* eslint-disable no-duplicate-imports */
// False positive lint error, ElementRef and co can't be type imports
// eslint-disable-next-line @typescript-eslint/consistent-type-imports
class AgGridAngular {
constructor(elementDef, _viewContainerRef, _angularFrameworkOverrides, _frameworkCompWrapper) {
this._viewContainerRef = _viewContainerRef;
this._angularFrameworkOverrides = _angularFrameworkOverrides;
this._frameworkCompWrapper = _frameworkCompWrapper;
this._initialised = false;
this._destroyed = false;
// in order to ensure firing of gridReady is deterministic
this._holdEvents = true;
this._fullyReady = new Promise((resolve) => {
this._resolveFullyReady = resolve;
});
// @START@
/** Specifies the toolbar items to use in the toolbar.
* @agModule `ToolbarModule`
*/
this.toolbar = undefined;
/** Specifies the status bar components to use in the status bar.
* @agModule `StatusBarModule`
*/
this.statusBar = undefined;
/** Specifies the side bar components.
* @agModule `SideBarModule`
*/
this.sideBar = undefined;
/** Set to `true` to not show the context menu. Use if you don't want to use the default 'right click' context menu.
* @default false
*/
this.suppressContextMenu = undefined;
/** When using `suppressContextMenu`, you can use the `onCellContextMenu` function to provide your own code to handle cell `contextmenu` events.
* This flag is useful to prevent the browser from showing its default context menu.
* @default false
*/
this.preventDefaultOnContextMenu = undefined;
/** Allows context menu to show, even when `Ctrl` key is held down.
* @default false
* @agModule `ContextMenuModule`
*/
this.allowContextMenuWithControlKey = undefined;
/** Changes the display type of the column menu.
* `'new'` just displays the main list of menu items. `'legacy'` displays a tabbed menu.
* @default 'new'
* @initial
*/
this.columnMenu = undefined;
/** Only recommended for use if `columnMenu = 'legacy'`.
* When `true`, the column menu button will always be shown.
* When `false`, the column menu button will only show when the mouse is over the column header.
* When using `columnMenu = 'legacy'`, this will default to `false` instead of `true`.
* @default true
*/
this.suppressMenuHide = undefined;
/** Set to `true` to use the browser's default tooltip instead of using the grid's Tooltip Component.
* @default false
* @initial
* @agModule `TooltipModule`
*/
this.enableBrowserTooltips = undefined;
/** The trigger that will cause tooltips to show and hide.
* - `hover` - The tooltip will show/hide when a cell/header is hovered.
* - `focus` - The tooltip will show/hide when a cell/header is focused.
* @default 'hover'
* @initial
* @agModule `TooltipModule`
*/
this.tooltipTrigger = undefined;
/** The delay in milliseconds that it takes for tooltips to show up once an element is hovered over.
* **Note:** This property does not work if `enableBrowserTooltips` is `true`.
* @default 2000
* @agModule `TooltipModule`
*/
this.tooltipShowDelay = undefined;
/** The delay in milliseconds before a tooltip is shown when moving the pointer from one tooltip-enabled element to
* another while the previous tooltip is still visible or pending hide.
* **Note:** This property does not work if `enableBrowserTooltips` is `true`.
* @default 200
* @agModule `TooltipModule`
*/
this.tooltipSwitchShowDelay = undefined;
/** The delay in milliseconds that it takes for tooltips to hide once they have been displayed.
* **Note:** This property does not work if `enableBrowserTooltips` is `true` and `tooltipHideTriggers` includes `timeout`.
* @default 10000
* @agModule `TooltipModule`
*/
this.tooltipHideDelay = undefined;
/** Set to `true` to have tooltips follow the cursor once they are displayed.
* @default false
* @initial
* @agModule `TooltipModule`
*/
this.tooltipMouseTrack = undefined;
/** This defines when tooltip will show up for Cells, Headers and SetFilter Items.
* - `standard` - The tooltip always shows up when the items configured with Tooltips are hovered.
* - `whenTruncated` - The tooltip will only be displayed when the items hovered have truncated (showing ellipsis) values. This property does not work when `enableBrowserTooltips={true}`.
* @default `standard`
* @agModule `TooltipModule`
*/
this.tooltipShowMode = undefined;
/** Set to `true` to enable tooltip interaction. When this option is enabled, the tooltip will not hide while the
* tooltip itself it being hovered or has focus.
* @default false
* @initial
* @agModule `TooltipModule`
*/
this.tooltipInteraction = undefined;
/** DOM element to use as the popup parent for grid popups (context menu, column menu etc).
*/
this.popupParent = undefined;
/** Set to `true` to also include headers when copying to clipboard using `Ctrl + C` clipboard.
* @default false
* @agModule `ClipboardModule`
*/
this.copyHeadersToClipboard = undefined;
/** Set to `true` to also include group headers when copying to clipboard using `Ctrl + C` clipboard.
* @default false
* @agModule `ClipboardModule`
*/
this.copyGroupHeadersToClipboard = undefined;
/** Specify the delimiter to use when copying to clipboard.
* @default '\t'
* @agModule `ClipboardModule`
*/
this.clipboardDelimiter = undefined;
/** Set to `true` to copy the cell range or focused cell to the clipboard and never the selected rows.
* @default false
* @deprecated v32.2 Use `rowSelection.copySelectedRows` instead.
*/
this.suppressCopyRowsToClipboard = undefined;
/** Set to `true` to copy rows instead of ranges when a range with only a single cell is selected.
* @default false
* @deprecated v32.2 Use `rowSelection.copySelectedRows` instead.
*/
this.suppressCopySingleCellRanges = undefined;
/** Set to `true` to work around a bug with Excel (Windows) that adds an extra empty line at the end of ranges copied to the clipboard.
* @default false
* @agModule `ClipboardModule`
*/
this.suppressLastEmptyLineOnPaste = undefined;
/** Set to `true` to turn off paste operations within the grid.
* @default false
* @agModule `ClipboardModule`
*/
this.suppressClipboardPaste = undefined;
/** Set to `true` to stop the grid trying to use the Clipboard API, if it is blocked, and immediately fallback to the workaround.
* @default false
* @agModule `ClipboardModule`
*/
this.suppressClipboardApi = undefined;
/** Set to `true` to block **cut** operations within the grid.
* @default false
* @agModule `ClipboardModule`
*/
this.suppressCutToClipboard = undefined;
/** Array of Column / Column Group definitions.
*/
this.columnDefs = undefined;
/** A default column definition. Items defined in the actual column definitions get precedence.
*/
this.defaultColDef = undefined;
/** A default column group definition. All column group definitions will use these properties. Items defined in the actual column group definition get precedence.
* @initial
*/
this.defaultColGroupDef = undefined;
/** An object map of custom column types which contain groups of properties that column definitions can reuse by referencing in their `type` property.
*/
this.columnTypes = undefined;
/** An object map of cell data types to their definitions.
* Cell data types can either override/update the pre-defined data types
* (`'text'`, `'number'`, `'boolean'`, `'date'`, `'dateString'`, `'dateTime'`, `'dateTimeString'` or `'object'`),
* or can be custom data types.
*/
this.dataTypeDefinitions = undefined;
/** Enables and configures Calculated Columns.
* @agModule `CalculatedColumnsModule`
*/
this.calculatedColumns = undefined;
/** Configures editing of column and column group header names via the UI. Requires
* `headerNameEditable` on the relevant Column or Column Group Definitions.
* @agModule `ColumnHeaderEditModule`
*/
this.columnHeaderEdit = undefined;
/** Keeps the order of Columns maintained after new Column Definitions are updated.
*
* @default false
*/
this.maintainColumnOrder = undefined;
/** Resets pivot column order when impacted by filters, data or configuration changes
*
* @default false
* @agModule `PivotModule`
*/
this.enableStrictPivotColumnOrder = undefined;
/** If `true`, then dots in field names (e.g. `'address.firstLine'`) are not treated as deep references. Allows you to use dots in your field name if you prefer.
* @default false
*/
this.suppressFieldDotNotation = undefined;
/** The height in pixels for the row containing the column label header. If not specified, it uses the theme value of `header-height`.
*/
this.headerHeight = undefined;
/** The height in pixels for the rows containing header column groups. If not specified, it uses `headerHeight`.
*/
this.groupHeaderHeight = undefined;
/** The height in pixels for the row containing the floating filters. If not specified, it uses the theme value of `header-height`.
*/
this.floatingFiltersHeight = undefined;
/** The height in pixels for the row containing the columns when in pivot mode. If not specified, it uses `headerHeight`.
*/
this.pivotHeaderHeight = undefined;
/** The height in pixels for the row containing header column groups when in pivot mode. If not specified, it uses `groupHeaderHeight`.
*/
this.pivotGroupHeaderHeight = undefined;
/** Hide any column header rows that would only contain padded groups.
*/
this.hidePaddedHeaderRows = undefined;
/** Allow reordering and pinning columns by dragging columns from the Columns Tool Panel to the grid.
* @default false
* @agModule `ColumnsToolPanelModule`
*/
this.allowDragFromColumnsToolPanel = undefined;
/** Set to `true` to suppress column moving, i.e. to make the columns fixed position.
* @default false
*/
this.suppressMovableColumns = undefined;
/** If `true`, the `ag-column-moving` class is not added to the grid while columns are moving. In the default themes, this results in no animation when moving columns.
* @default false
*/
this.suppressColumnMoveAnimation = undefined;
/** Set to `true` to suppress moving columns while dragging the Column Header. This option highlights the position where the column will be placed and it will only move it on mouse up.
* @default false
*/
this.suppressMoveWhenColumnDragging = undefined;
/** If `true`, when you drag a column out of the grid (e.g. to the group zone) the column is not hidden.
* @default false
*/
this.suppressDragLeaveHidesColumns = undefined;
/** Enable to prevent column visibility changing when grouped columns are changed.
* @default false
*/
this.suppressGroupChangesColumnVisibility = undefined;
/** By default, when a column is un-grouped, i.e. using the Row Group Panel, it is made visible in the grid. This property stops the column becoming visible again when un-grouping.
* @default false
* @deprecated v33.0.0 - Use `suppressGroupChangesColumnVisibility: 'suppressShowOnUngroup'` instead.
*/
this.suppressMakeColumnVisibleAfterUnGroup = undefined;
/** If `true`, when you drag a column into a row group panel the column is not hidden.
* @default false
* @deprecated v33.0.0 - Use `suppressGroupChangesColumnVisibility: 'suppressHideOnGroup'` instead.
*/
this.suppressRowGroupHidesColumns = undefined;
/** Set to `'shift'` to have shift-resize as the default resize operation (same as user holding down `Shift` while resizing).
*/
this.colResizeDefault = undefined;
/** Suppresses auto-sizing columns for columns. In other words, double clicking a column's header's edge will not auto-size.
* @default false
* @initial
*/
this.suppressAutoSize = undefined;
/** Number of pixels to add to a column width after the [auto-sizing](./column-sizing/#auto-size-columns-to-fit-cell-contents) calculation.
* Set this if you want to add extra room to accommodate (for example) sort icons, or some other dynamic nature of the header.
* @default 20
*/
this.autoSizePadding = undefined;
/** Set this to `true` to skip the `headerName` when `autoSize` is called by default.
* @default false
* @initial
* @agModule `ColumnAutoSizeModule`
*/
this.skipHeaderOnAutoSize = undefined;
/** Auto-size the columns when the grid is loaded. Can size to fit the grid width, fit a provided width, or fit the cell contents.
* @initial
* @agModule `ColumnAutoSizeModule`
*/
this.autoSizeStrategy = undefined;
/** Set to `true` to animate changes to column width when auto-sizing the columns.
* @default false
*/
this.animateColumnResizing = undefined;
/** A map of component names to components.
* @initial
*/
this.components = undefined;
/** Set to `'fullRow'` to enable Full Row Editing. Otherwise leave blank to edit one cell at a time.
* @agModule `TextEditorModule` / `LargeTextEditorModule` / `NumberEditorModule` / `DateEditorModule` / `CheckboxEditorModule` / `CustomEditorModule` / `SelectEditorModule` / `RichSelectModule`
*/
this.editType = undefined;
/** Determine the behavior when navigating to the next/previous editable cell. Default is to begin editing the cell.
*/
this.suppressStartEditOnTab = undefined;
/** Validates the Full Row Edit. Only relevant when `editType="fullRow"`.
* @agModule `TextEditorModule` / `LargeTextEditorModule` / `NumberEditorModule` / `DateEditorModule` / `CheckboxEditorModule` / `CustomEditorModule` / `SelectEditorModule` / `RichSelectModule`
*/
this.getFullRowEditValidationErrors = undefined;
/** Set to `block` to block the commit of invalid cell edits, keeping editors open.
*/
this.invalidEditValueMode = undefined;
/** Set to `true` to enable Single Click Editing for cells, to start editing with a single click.
* @default false
* @agModule `TextEditorModule` / `LargeTextEditorModule` / `NumberEditorModule` / `DateEditorModule` / `CheckboxEditorModule` / `CustomEditorModule` / `SelectEditorModule` / `RichSelectModule`
*/
this.singleClickEdit = undefined;
/** Set to `true` so that neither single nor double click starts editing.
* @default false
* @agModule `TextEditorModule` / `LargeTextEditorModule` / `NumberEditorModule` / `DateEditorModule` / `CheckboxEditorModule` / `CustomEditorModule` / `SelectEditorModule` / `RichSelectModule`
*/
this.suppressClickEdit = undefined;
/** Set to `true` to stop the grid updating data after `Edit`, `Clipboard` and `Fill Handle` operations. When this is set, it is intended the application will update the data, eg in an external immutable store, and then pass the new dataset to the grid. <br />**Note:** `rowNode.setDataValue()` does not update the value of the cell when this is `True`, it fires `onCellEditRequest` instead.
* @default false
* @agModule `TextEditorModule` / `LargeTextEditorModule` / `NumberEditorModule` / `DateEditorModule` / `CheckboxEditorModule` / `CustomEditorModule` / `SelectEditorModule` / `RichSelectModule`
*/
this.readOnlyEdit = undefined;
/** Set this to `true` to stop cell editing when grid loses focus.
* The default is that the grid stays editing until focus goes onto another cell.
* @default false
* @initial
* @agModule `TextEditorModule` / `LargeTextEditorModule` / `NumberEditorModule` / `DateEditorModule` / `CheckboxEditorModule` / `CustomEditorModule` / `SelectEditorModule` / `RichSelectModule`
*/
this.stopEditingWhenCellsLoseFocus = undefined;
/** Set to `true` along with `enterNavigatesVerticallyAfterEdit` to have Excel-style behaviour for the `Enter` key.
* i.e. pressing the `Enter` key will move down to the cell beneath and `Shift+Enter` will move up to the cell above.
* @default false
* @agModule `TextEditorModule` / `LargeTextEditorModule` / `NumberEditorModule` / `DateEditorModule` / `CheckboxEditorModule` / `CustomEditorModule` / `SelectEditorModule` / `RichSelectModule`
*/
this.enterNavigatesVertically = undefined;
/** Set to `true` along with `enterNavigatesVertically` to have Excel-style behaviour for the 'Enter' key.
* i.e. pressing the Enter key will move down to the cell beneath and Shift+Enter key will move up to the cell above.
* @default false
* @agModule `TextEditorModule` / `LargeTextEditorModule` / `NumberEditorModule` / `DateEditorModule` / `CheckboxEditorModule` / `CustomEditorModule` / `SelectEditorModule` / `RichSelectModule`
*/
this.enterNavigatesVerticallyAfterEdit = undefined;
/** Forces Cell Editing to start when backspace is pressed. This is only relevant for MacOS users.
* @agModule `TextEditorModule` / `LargeTextEditorModule` / `NumberEditorModule` / `DateEditorModule` / `CheckboxEditorModule` / `CustomEditorModule` / `SelectEditorModule` / `RichSelectModule`
*/
this.enableCellEditingOnBackspace = undefined;
/** Set to `true` to enable Undo / Redo while editing.
* @initial
* @agModule `UndoRedoEditModule`
*/
this.undoRedoCellEditing = undefined;
/** Set the size of the undo / redo stack.
* @default 10
* @initial
* @agModule `UndoRedoEditModule`
*/
this.undoRedoCellEditingLimit = undefined;
/** A default configuration object used to export to CSV.
* @agModule `CsvExportModule`
*/
this.defaultCsvExportParams = undefined;
/** Prevents the user from exporting the grid to CSV.
* @default false
*/
this.suppressCsvExport = undefined;
/** A default configuration object used to export to Excel.
* @agModule `ExcelExportModule`
*/
this.defaultExcelExportParams = undefined;
/** Prevents the user from exporting the grid to Excel.
* @default false
*/
this.suppressExcelExport = undefined;
/** A list (array) of Excel styles to be used when exporting to Excel with styles.
* @initial
* @agModule `ExcelExportModule`
*/
this.excelStyles = undefined;
/** Text to find within the grid.
* @agModule `FindModule`
*/
this.findSearchValue = undefined;
/** Options for the Find feature.
* @agModule `FindModule`
*/
this.findOptions = undefined;
/** Rows are filtered using this text as a Quick Filter.
* Only supported for Client-Side Row Model.
* @agModule `QuickFilterModule`
*/
this.quickFilterText = undefined;
/** Set to `true` to turn on the Quick Filter cache, used to improve performance when using the Quick Filter.
* @default false
* @initial
* @agModule `QuickFilterModule`
*/
this.cacheQuickFilter = undefined;
/** Hidden columns are excluded from the Quick Filter by default.
* To include hidden columns, set to `true`.
* @default false
* @agModule `QuickFilterModule`
*/
this.includeHiddenColumnsInQuickFilter = undefined;
/** Changes how the Quick Filter splits the Quick Filter text into search terms.
* @agModule `QuickFilterModule`
*/
this.quickFilterParser = undefined;
/** Changes the matching logic for whether a row passes the Quick Filter.
* @agModule `QuickFilterModule`
*/
this.quickFilterMatcher = undefined;
/** When pivoting, Quick Filter is only applied on the pivoted data
* (or aggregated data if `groupAggFiltering = true`).
* Set to `true` to apply Quick Filter before pivoting (/aggregating) instead.
* @default false
* @agModule `QuickFilterModule`
*/
this.applyQuickFilterBeforePivotOrAgg = undefined;
/** Set to `true` to override the default tree data filtering behaviour to instead exclude child nodes from filter results.
* @default false
* @agModule `TreeDataModule`
*/
this.excludeChildrenWhenTreeDataFiltering = undefined;
/** Set to true to enable the Advanced Filter.
* @default false
* @agModule `AdvancedFilterModule`
*/
this.enableAdvancedFilter = undefined;
/** Allows rows to always be displayed, even if they don't match the applied filtering.
* Return `true` for the provided row to always be displayed.
* Only works with the Client-Side Row Model.
* @agModule `TextFilterModule` / `NumberFilterModule` / `DateFilterModule` / `SetFilterModule` / `MultiFilterModule` / `CustomFilterModule` / `QuickFilterModule` / `ExternalFilterModule` / `AdvancedFilterModule`
*/
this.alwaysPassFilter = undefined;
/** Hidden columns are excluded from the Advanced Filter by default.
* To include hidden columns, set to `true`.
* @default false
* @agModule `AdvancedFilterModule`
*/
this.includeHiddenColumnsInAdvancedFilter = undefined;
/** DOM element to use as the parent for the Advanced Filter to allow it to appear outside of the grid.
* Set to `null` or `undefined` to appear inside the grid.
* @agModule `AdvancedFilterModule`
*/
this.advancedFilterParent = undefined;
/** Customise the parameters passed to the Advanced Filter Builder.
* @agModule `AdvancedFilterModule`
*/
this.advancedFilterBuilderParams = undefined;
/** Customise the parameters passed to the Advanced Filter
* @agModule `AdvancedFilterModule`
*/
this.advancedFilterParams = undefined;
/** @deprecated As of v34, advanced filter no longer uses function evaluation, so this option has no effect.
* @default true
* @agModule `AdvancedFilterModule`
*/
this.suppressAdvancedFilterEval = undefined;
/** When using AG Grid Enterprise, the Set Filter is used by default when `filter: true` is set on column definitions.
* Set to `true` to prevent this and instead use the Text Filter, Number Filter or Date Filter based on the cell data type,
* the same as when using AG Grid Community.
* @default false
* @initial
* @agModule TextFilterModule / NumberFilterModule / DateFilterModule / MultiFilterModule / CustomFilterModule
*/
this.suppressSetFilterByDefault = undefined;
/** Enable filter handlers for custom filter components.
* Requires all custom filters to be implemented using handlers.
*
* Note that grid-provided filters (except for the Multi Filter) always use filter handlers.
* The Multi Filter will also use a filter handler if this is enabled.
* @initial
*/
this.enableFilterHandlers = undefined;
/** A map of filter handler key to filter handler function.
* Allows for filter handler keys to be used in `colDef.filter.handler`.
* @initial
*/
this.filterHandlers = undefined;
/** Set to `true` to Enable Charts.
* @default false
* @agModule `IntegratedChartsModule`
*/
this.enableCharts = undefined;
/** Hidden columns are included in charts by default, and remain in a chart if hidden after being added.
* Set to `false` to exclude hidden columns from charts, and to remove a column from a chart when it is hidden.
* Does not apply to Pivot Charts, whose columns always mirror the grid's displayed columns.
* @default true
* @agModule `IntegratedChartsModule`
*/
this.includeHiddenColumnsInCharts = undefined;
/** The list of chart themes that a user can choose from in the chart panel.
* @default ['ag-default', 'ag-material', 'ag-sheets', 'ag-polychroma', 'ag-vivid'];
* @initial
* @agModule `IntegratedChartsModule`
*/
this.chartThemes = undefined;
/** A map containing custom chart themes.
* @initial
* @agModule `IntegratedChartsModule`
*/
this.customChartThemes = undefined;
/** Chart theme overrides applied to all themes.
* @initial
* @agModule `IntegratedChartsModule`
*/
this.chartThemeOverrides = undefined;
/** Allows customisation of the Chart Tool Panels, such as changing the tool panels visibility and order, as well as choosing which charts should be displayed in the chart panel.
* @initial
* @agModule `IntegratedChartsModule`
*/
this.chartToolPanelsDef = undefined;
/** Get chart menu items. Only applies when using AG Charts Enterprise.
* @agModule `IntegratedChartsModule`
*/
this.chartMenuItems = undefined;
/** Provide your own loading cell renderer to use when data is loading via a DataSource or when a cell renderer is deferred.
* See [Loading Cell Renderer](https://www.ag-grid.com/javascript-data-grid/component-loading-cell-renderer/) for framework specific implementation details.
*/
this.loadingCellRenderer = undefined;
/** Params to be passed to the `loadingCellRenderer` component.
*/
this.loadingCellRendererParams = undefined;
/** Callback to select which loading cell renderer to be used when data is loading via a DataSource or when a cell renderer is deferred.
* @initial
*/
this.loadingCellRendererSelector = undefined;
/** A map of key->value pairs for localising text within the grid.
* @initial
* @agModule `LocaleModule`
*/
this.localeText = undefined;
/** Set to `true` to enable Master Detail.
* @default false
* @agModule `MasterDetailModule`
*/
this.masterDetail = undefined;
/** Set to `true` to keep detail rows for when they are displayed again.
* @default false
* @initial
* @agModule `MasterDetailModule`
*/
this.keepDetailRows = undefined;
/** Sets the number of details rows to keep.
* @default 10
* @initial
* @agModule `MasterDetailModule`
*/
this.keepDetailRowsCount = undefined;
/** Provide a custom `detailCellRenderer` to use when a master row is expanded.
* See [Detail Cell Renderer](https://www.ag-grid.com/javascript-data-grid/master-detail-custom-detail/) for framework specific implementation details.
* @agModule `MasterDetailModule`
*/
this.detailCellRenderer = undefined;
/** Specifies the params to be used by the Detail Cell Renderer. Can also be a function that provides the params to enable dynamic definitions of the params.
* @agModule `MasterDetailModule`
*/
this.detailCellRendererParams = undefined;
/** Set fixed height in pixels for each detail row.
* @initial
* @agModule `MasterDetailModule`
*/
this.detailRowHeight = undefined;
/** Set to `true` to have the detail grid dynamically change it's height to fit it's rows.
* @initial
* @agModule `MasterDetailModule`
*/
this.detailRowAutoHeight = undefined;
/** Provides a context object that is provided to different callbacks the grid uses. Used for passing additional information to the callbacks used by your application.
* @initial
*/
this.context = undefined;
/**
* A list of grids to treat as Aligned Grids.
* Provide a list if the grids / apis already exist or return via a callback to allow the aligned grids to be retrieved asynchronously.
* If grids are aligned then the columns and horizontal scrolling will be kept in sync.
* @agModule `AlignedGridsModule`
*/
this.alignedGrids = undefined;
/** Change this value to set the tabIndex order of the Grid within your application.
* @default 0
* @initial
*/
this.tabIndex = undefined;
/** The number of rows rendered outside the viewable area the grid renders.
* Having a buffer means the grid will have rows ready to show as the user slowly scrolls vertically.
* @default 10
*/
this.rowBuffer = undefined;
/** Set to `true` to turn on the value cache.
* @default false
* @initial
* @agModule `ValueCacheModule`
*/
this.valueCache = undefined;
/** Set to `true` to configure the value cache to not expire after data updates.
* @default false
* @initial
* @agModule `ValueCacheModule`
*/
this.valueCacheNeverExpires = undefined;
/** Set to `true` to allow cell expressions.
* @default false
* @initial
*/
this.enableCellExpressions = undefined;
/** Disables touch support (but does not remove the browser's efforts to simulate mouse events on touch).
* @default false
* @initial
*/
this.suppressTouch = undefined;
/** Set to `true` to not set focus back on the grid after a refresh. This can avoid issues where you want to keep the focus on another part of the browser.
* @default false
*/
this.suppressFocusAfterRefresh = undefined;
/** @deprecated As of v32.2 the grid always uses the browser's ResizeObserver, this grid option has no effect
* @default false
* @initial
*/
this.suppressBrowserResizeObserver = undefined;
/** @deprecated As of v33 `gridOptions` and `columnDefs` both have a `context` property that should be used for arbitrary user data. This means that column definitions and gridOptions should only contain valid properties making this property redundant.
* @default false
* @initial
*/
this.suppressPropertyNamesCheck = undefined;
/** Disables change detection.
* @default false
*/
this.suppressChangeDetection = undefined;
/** Set this to `true` to enable debug information from the grid and related components. Will result in additional logging being output, but very useful when investigating problems.
* It is also recommended to register the `ValidationModule` to identify any misconfigurations.
* @default false
* @initial
*/
this.debug = undefined;
/** Show or hide the loading overlay.
* - `true`: the loading overlay is shown.
* - `false`: the loading overlay is hidden.
* - `undefined`: the grid will automatically show the loading overlay until `rowData` and `columnDefs` are provided. (Client Side Row Model only)
* @default undefined
*/
this.loading = undefined;
/** Provide a HTML string to override the default loading overlay. Supports non-empty plain text or HTML with a single root element.
*
* - **Prefer `overlayComponent` / `overlayComponentSelector`**
*/
this.overlayLoadingTemplate = undefined;
/** Provide a custom loading overlay component.
*
* - **Prefer `overlayComponent` / `overlayComponentSelector`**
*/
this.loadingOverlayComponent = undefined;
/** Customise the parameters provided to the loading overlay component.
*
* - **Prefer using `overlayComponentParams`**
*/
this.loadingOverlayComponentParams = undefined;
/** Disables the 'loading' overlay.
* @deprecated v32 - Deprecated. Use `suppressOverlays=['loading']` or `loading=false` instead.
* @default false
* @initial
*/
this.suppressLoadingOverlay = undefined;
/** Provide a HTML string to override the default no-rows overlay. Supports non-empty plain text or HTML with a single root element.
*
* - **Prefer `overlayComponent` / `overlayComponentSelector`**
*/
this.overlayNoRowsTemplate = undefined;
/** Provide a custom no-rows overlay component.
*
* - **Prefer `overlayComponent` / `overlayComponentSelector`**
*/
this.noRowsOverlayComponent = undefined;
/** Customise the parameters provided to the no-rows overlay component.
*
* - **Prefer using `overlayComponentParams`**
*/
this.noRowsOverlayComponentParams = undefined;
/** Set to `true` to prevent the no-rows overlay being shown when there is no row data.
*
* - **Prefer `suppressOverlays=['noRows']`**
*
* @default false
* @initial
*/
this.suppressNoRowsOverlay = undefined;
/** List of provided overlay names to suppress. One of `loading`, `noRows`, `noMatchingRows`, `exporting`, `fileInput`.
*/
this.suppressOverlays = undefined;
/** Provide a custom overlay component to be used for all grid provided overlays (loading, no rows, no matching rows, exporting etc).
* @initial
*/
this.overlayComponent = undefined;
/** Customise the parameters provided to the `overlayComponent`.
* Provided overlays accept parameters specified on the `OverlayComponentUserParams` interface.
* Any custom parameters can also be provided for custom overlay components.
*/
this.overlayComponentParams = undefined;
/** Callback to dynamically provide a custom overlay component complete with custom params based on the selector params.
* @initial
*/
this.overlayComponentSelector = undefined;
/** Display an overlay on demand. If provided takes precedence over the grid provided overlays.
* - name of a provided overlay, i.e `agLoadingOverlay`, `agNoRowsOverlay`, `agNoMatchingRowsOverlay`, `agExportingOverlay`
* - component class/function.
* - key of a custom component registered in the `components` map.
* - `undefined` to clear.
*/
this.activeOverlay = undefined;
/** Custom parameters to be supplied to the `activeOverlay` component in addition to `IOverlayParams`. Updating the params will trigger a refresh of the active overlay.
*/
this.activeOverlayParams = undefined;
/** Callback to handle files received via the file input overlay (drag-and-drop or file browser).
* When provided, the file input overlay is shown when there is no row data.
* Call `params.success(rowData)` to load parsed data into the grid, or `params.fail(message)` to show an error.
* @agModule `FileInputOverlayModule`
*/
this.processFileInput = undefined;
/** Set whether pagination is enabled.
* @default false
* @agModule `PaginationModule`
*/
this.pagination = undefined;
/** How many rows to load per page. If `paginationAutoPageSize` is specified, this property is ignored.
* @default 100
* @agModule `PaginationModule`
*/
this.paginationPageSize = undefined;
/** Determines if