ag-grid-angular
Version:
AG Grid Angular Component
975 lines (971 loc) • 180 kB
JavaScript
import * as i0 from '@angular/core';
import { inject, ViewContainerRef, Component, Injectable, NgZone, EventEmitter, booleanAttribute, ViewEncapsulation, Input, Output, NgModule } from '@angular/core';
import { _removeFromParent, BaseComponentWrapper, VanillaFrameworkOverrides, _combineAttributesAndGridOptions, createGrid, _processOnChange, _BOOLEAN_MIXED_GRID_OPTIONS } from 'ag-grid-community';
// 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: "17.3.12", ngImport: i0, type: AgComponentContainer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: AgComponentContainer, selector: "ag-component-container", ngImport: i0, template: '', isInline: true }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", 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: "17.3.12", ngImport: i0, type: AngularFrameworkComponentWrapper, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AngularFrameworkComponentWrapper }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", 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: "17.3.12", ngImport: i0, type: AngularFrameworkOverrides, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AngularFrameworkOverrides }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AngularFrameworkOverrides, decorators: [{
type: Injectable
}], ctorParameters: () => [{ type: i0.NgZone }] });
// 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 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 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;
/** 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;
/** 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;
/** 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;
/** 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;
/** @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 need to be implemented using handlers.
* @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;
/** 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.
*/
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.
*/
this.overlayLoadingTemplate = undefined;
/** Provide a custom loading overlay component.
* @initial
*/
this.loadingOverlayComponent = undefined;
/** Customise the parameters provided to the loading overlay component.
*/
this.loadingOverlayComponentParams = undefined;
/** Disables the 'loading' overlay.
* @deprecated v32 - Deprecated. Use `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.
*/
this.overlayNoRowsTemplate = undefined;
/** Provide a custom no-rows overlay component.
* @initial
*/
this.noRowsOverlayComponent = undefined;
/** Customise the parameters provided to the no-rows overlay component.
*/
this.noRowsOverlayComponentParams = undefined;
/** Set to `true` to prevent the no-rows overlay being shown when there is no row data.
* @default false
* @initial
*/
this.suppressNoRowsOverlay = 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 the page size selector is shown in the pagination panel or not.
* Set to an array of values to show the page size selector with custom list of possible page sizes.
* Set to `true` to show the page size selector with the default page sizes `[20, 50, 100]`.
* Set to `false` to hide the page size selector.
* @default true
* @initial
* @agModule `PaginationModule`
*/
this.paginationPageSizeSelector = undefined;
/** Set to `true` so that the number of rows to load per page is automatically adjusted by the grid so each page shows enough rows to just fill the area designated for the grid. If `false`, `paginationPageSize` is used.
* @default false
* @agModule `PaginationModule`
*/
this.paginationAutoPageSize = undefined;
/** Set to `true` to have pages split children of groups when using Row Grouping or detail rows with Master Detail.
* @default false
* @initial
* @agModule `PaginationModule`
*/
this.paginateChildRows = undefined;
/** If `true`, the default grid controls for navigation are hidden.
* This is useful if `pagination=true` and you want to provide your own pagination controls.
* Otherwise, when `pagination=true` the grid automatically shows the necessary controls at the bottom so that the user can navigate through the different pages.
* @default false
* @agModule `PaginationModule`
*/
this.suppressPaginationPanel = undefined;
/** Set to `true` to enable pivot mode.
* @default false
* @agModule `PivotModule`
*/
this.pivotMode = undefined;
/** When to show the 'pivot panel' (where you drag rows to pivot) at the top. Note that the pivot panel will never show if `pivotMode` is off.
* @default 'never'
* @initial
* @agModule `RowGroupingPanelModule`
*/
this.pivotPanelShow = undefined;
/** The maximum number of generated columns before the grid halts execution. Upon reaching this number, the grid halts generation of columns
* and triggers a `pivotMaxColumnsExceeded` event. `-1` for no limit.
* @default -1
* @agModule `PivotModule`
*/
this.pivotMaxGeneratedColumns = undefined;
/** If pivoting, set to the number of column group levels to expand by default, e.g. `0` for none, `1` for first level only, etc. Set to `-1` to expand everything.
* @default 0
* @agModule `PivotModule`
*/
this.pivotDefaultExpanded = undefined;
/** When set and the grid is in pivot mode, automatically calculated totals will appear within the Pivot Column Groups, in the position specified.
* @agModule `PivotModule`
*/
this.pivotColumnGroupTotals = undefined;
/** When set and the grid is in pivot mode, automatically calculated totals will appear for each value column in the position specified.
* @agModule `PivotModule`
*/
this.pivotRowTotals = undefined;
/** If `true`, the grid will not swap in the grouping column when pivoting. Useful if pivoting using Server Side Row Model or Viewport Row Model and you want full control of all columns including the group column.
* @default false
* @initial
* @agModule `PivotModule`
*/
this.pivotSuppressAutoColumn = undefined;
/** When enabled, pivot column groups will appear 'fixed', without the ability to expand and collapse the column groups.
* @default false
* @initial
* @agModule `PivotModule`
*/
this.suppressExpandablePivotGroups = undefined;
/** If `true`, then row group, pivot and value aggregation will be read-only from the GUI. The grid will display what values are used for each, but will not allow the user to change the selection.
* @default false
* @agModule `RowGroupingModule` / `PivotModule` / `TreeDataModule` / `ServerSideRowModelModule`
*/
this.functionsReadOnly = undefined;
/** A map of 'function name' to 'function' for custom aggregation functions.
* @initial
* @agModule `RowGroupingModule` / `PivotModule` / `TreeDataModule` / `ServerSideRowModelModule`
*/
this.aggFuncs = undefined;
/** When `true`, column headers won't include the `aggFunc` name, e.g. `'sum(Bank Balance)`' will just be `'Bank Balance'`.
* @default false
* @agModule `RowGroupingModule` / `PivotModule` / `TreeDataModule` / `ServerSideRowModelModule`
*/
this.suppressAggFuncInHeader = undefined;
/** When using aggregations, the grid will always calculate the root level aggregation value.
* @default false
* @agModule `RowGroupingModule` / `PivotModule` / `TreeDataModule` / `ServerSideRowModelModule`
*/
this.alwaysAggregateAtRootLevel = undefined;
/** When using change detection, only the updated column will be re-aggregated.
* @default false
* @agModule `RowGroupingModule` / `PivotModule` / `TreeDataModule` / `ServerSideRowModelModule`