Integrating AdapTable Angular

Summary

To use AdapTable Angular, you need to:
- Import AdaptableAngularAgGridModule into your application
- Provide and configure 3 components: <adaptable-provider>, <adaptable-ui> and <ag-grid-angular>

Creating applications that use AdapTable Angular 20 is straightforward.

Find Out More

See Previous Documentation Versions for instructions on integrating older versions of AdapTable Angular

Defining the Key Components

There are 3 key Angular components that need to be provided:

<adaptable-provider>: manages Adaptable State and orchestrates the AdapTable and AG Grid components
<adaptable-ui>: renders AdapTable's UI including the Dashboard
<ag-grid-angular>: standard AG Grid Angular component with the *adaptable structural directive applied

Developer Guide

Defining the 3 Angular Components

import { AdaptableAngularAgGridModule } from '@adaptabletools/adaptable-angular-aggrid';
import {AgGridModule} from 'ag-grid-angular';
@NgModule({
  imports: [
    AgGridModule,
    AdaptableAngularAgGridModule,
    // ...
  ],
  // ...
})
export class AppModule {}

Import the AdapTable and AG Grid Angular Modules

Import 2 modules into your application:

AdaptableAngularAgGridModule from Adaptable Tools
AgGridModule from AG Grid

// Import AG Grid Enterprise Modules
import { Module, AllEnterpriseModule } from 'ag-grid-enterprise';

// Create Modules array (to be passed later to Adaptable Initializer)
export const agGridModules: Module[] = [AllEnterpriseModule];

Either: Import and Define AG Grid Enterprise Modules

Import the AG Grid Enterprise Modules.

Place this in an array - which will later be passed to the component.

// Import AG Grid Enterprise Modules
import { Module, AllEnterpriseModule } from 'ag-grid-enterprise';

// Import AG Grid Charts
import { AgChartsEnterpriseModule } from 'ag-charts-enterprise';

// Provide both in the Modules array
export const agGridModules: Module[] = [AllEnterpriseModule.with(AgChartsEnterpriseModule)];

Or: Import and Define AG Grid Enterprise Modules with Charts

Import the AG Grid Enterprise Modules including Charts.

Do this if using AG Grid Charts or AdapTable Sparkline Columns.

Place in an array - which will later be passed to the component.

// Import AG Grid Modules
import { 
  Module, 
  ClientSideRowModelModule, 
  CsvExportModule, 
  ExcelExportModule, 
  MasterDetailModule 
} from 'ag-grid-enterprise';

// Create Modules array (passed later to Adaptable Initializer)
export const agGridModules: Module[] = [ 
  ClientSideRowModelModule,
  CsvExportModule,
  ExcelExportModule,
  MasterDetailModule
  // and many more...
];

Or: Import and Define the required subset of AG Grid Modules

Another alternative is to import just the subset of AG Grid Modules that you need to use in your application (given your feature set).

Find Out More

The AG Grid Modules Reference contains the minimum list of AG Grid Modules required by AdapTable (and those needed by key features)

Place in an array - which will later be passed to the component.

const gridOptions: GridOptions = {
  theme: themeQuartz,
  columnDefs: [
    { headerName: 'Make', field: 'make', filter: true, cellDataType: 'text' },
    { headerName: 'Model', field: 'model', editable: true, cellDataType: 'text' }
  ],
  rowData: [
    {make: 'Toyota', model: 'Yaris', price: 40000},
    {make: 'Toyota', model: 'Corolla', price: 28000},
    {make: 'Ford', model: 'Mondeo', price: 32000},
  ],
  cellSelection: true,
  sideBar: true,
  suppressAggFuncInHeader: true,
  suppressMenuHide: true,
};

Create an AG Grid GridOptions object

Define and populate a standard AG Grid GridOptions object.

Provide all required AG Grid related information including:

AG Grid theme
column schema (including correct cell data types)
initial data (if not lazy loading)
AG Grid events
additional, required properties

Caution

All GridOptions properties should be included in the gridOptions Input (not as direct Inputs on the <ag-grid-angular> component)
This approach ensures a consistent and streamlined interface for grid configuration in all scenarios (lazy loading, server-side data, etc.)

Note

The rowData prop is the only exception and has flexibility to be passed as separate input to <ag-grid-angular> component
However, this is not mandatory, and it can also be included within the gridOptions Input, with the other props

Caution

Always set the appropriate cellDataType property in ColumnDefs for every Column, to enable AdapTable to use the correct Filters and related properties
Many ColDef properties are ignored by AdapTable and replaced by Layout props - see full details in Guide to Layouts and ColDefs

import {
  type AdaptableOptions,
  type AdaptableApi,
  type InitialState,
  type AdaptableColumn
} from '@adaptabletools/adaptable-angular-aggrid';

Import AdapTable's types

Import AdapTable Types from @adaptabletools/adaptable-angular-aggrid (e.g. AdaptableApi, AdaptableOptions, InitialState etc.)

import "@adaptabletools/adaptable-angular-aggrid/index.css";

Import AdapTable Styles via index.css

index.css contains core styles (and supports both light and dark themes)

Hint

AdapTable's styles use the adaptable CSS layer - so you can access that to control specificity
If your app is using Tailwind, we recommend using this CSS layer order: @layer theme, base, components, adaptable, utilities
See AdapTable Theming Guide for full details on choosing and extending AdapTable Themes

const initialState: InitialState = {
  Dashboard: {
    PinnedToolbars: ['Layout', 'Pricing'],
  },
  Layout: {
    CurrentLayout: 'Cars',
    Layouts: [
      {
        TableColumns: [ 'Model', 'Price', 'Make'],
        RowGroupedColumns: ['Make'],
        Name: 'Cars',
      },
    ],
  },
  CustomSort: {
    CustomSorts: [ { Name: 'CustomSort-Rating', ColumnId: 'Rating', SortedValues: ['AAA', 'AA+'] }],
  },
} as InitialState;

Provide Initial Adaptable State

Add the Initial Adaptable State that is required to ship AdapTable with the objects you require for initial use.

This will later get merged into Adaptable State, together with any changes made by the run-time user.

It must include a Layouts section, containing at least one Layout.

In this example we do the following:

Add 2 Pinned Toolbars to the Dashboard: Layout and Pricing
Created a Layout called Cars with 3 columns and Row Grouping for the Make column
Set a Custom Sort for the 'Rating' Column so it will sort more intuitively for the users

const adaptableOptions: AdaptableOptions = {
  licenseKey: '<ADAPTABLE_LICENSE_KEY_HERE>',
  primaryKey: 'model',
  userName: 'Demo User',
  adaptableId: 'Basic Setup',
  filterOptions: {
    columnFilterOptions: {
      manuallyApplyColumnFilter: false,
    },
  },
  initialState: initialState,
  plugins: [nocode()],
  stateOptions: {
    persistState: () => Promise.resolve(), // implement remote persistence
    loadState: () => Promise.resolve(null), // load remotely persisted State
  },
};

Create an Adaptable Options object

Adaptable Options defines exactly how AdapTable should work.

You should populate this object with:

a Primary Key by defining a Unique Column
an AdaptableId which will uniquely identify the Grid
the License Key provided when you purchase AdapTable
a User Name to identify the current user
implementations of State Options functions to persist (and reload) Adaptable State remotely
the initialState created in Step 6
any Plugins required (e.g. the No Code Plugin)
any of the other many properties and objects available (where the default values are not appropriate)
any Entitlements (Permissions) required for the User

Hint

Adaptable Options supports Typescript Generics which ensures a better developer experience by providing the row data type

Important

If the licenseKey property is not present, AdapTable will display a watermark and run with reduced functionality

<adaptable-provider
  [adaptableOptions]="adaptableOptions"
  [gridOptions]="gridOptions"
  [modules]="agGridModules"
  (adaptableReady)="adaptableReady($event)"
>
  <!-- content projection  -->
</adaptable-provider>

Render the <adaptable-provider> Component

Render the <adaptable-provider> component in your application.

Following input properties are mandatory:

adaptableOptions - provide the object created in step 7
gridOptions - pass in GridOptions object created in step 3
modules - pass in Modules object created in step 2

Optionally you can also subscribe to the AdapTable Ready Event which is emitted when AdapTable has initialised (see Step 10).

<adaptable-provider
  [adaptableOptions]="adaptableOptions"
  [gridOptions]="gridOptions"
  [modules]="agGridModules"
  (adaptableReady)="adaptableReady($event)"
>
  <adaptable-ui style="flex: none"></adaptable-ui>
</adaptable-provider>

Render the <adaptable-ui> Component

Render the <adaptable-ui> component inside <adaptable-provider>.

This component manages AdapTable's UI & Dashboard

<adaptable-provider
  [adaptableOptions]="adaptableOptions"
  [gridOptions]="gridOptions"
  [modules]="agGridModules"
  (adaptableReady)="adaptableReady($event)"
>
  <adaptable-ui style="flex: none"></adaptable-ui>
  <ag-grid-angular
    <!-- Define the adaptable context -->
    *adaptable="let adaptable"
    <!-- Bind the gridOptions input to the adaptable context -->
    [gridOptions]="adaptable.gridOptions"
    <!-- Bind the modules input to the adaptable context -->
    [modules]="adaptable.modules" 
    style="flex: 1"
  >
  </ag-grid-angular>
</adaptable-provider

Render the <ag-grid-angular> Component

Also render the <ag-grid-angular> component (AG Grid's Angular component) inside <adaptable-provider>.

This should include AdapTable's structural directive - *adaptable - which defines the AdapTable context.

It should also include bindings to:

the gridOptions object defined in Step 3
the modules objects defined in Step 2

Caution

The <ag-grid-angular> component should get its gridOptions and modules Inputs from the Adaptable context
They should not be given directly from the parent component

Hint

Always use a single gridOptions Input for all grid related props, not as direct Inputs on the <ag-grid-angular> component
This ensures a consistent and streamlined grid configuration in all scenarios (lazy loading, server-side data, etc.)

    <adaptable-provider
        [adaptableOptions]="adaptableOptions"
        [gridOptions]="gridOptions"
        [modules]="agGridModules"
        (adaptableReady)="adaptableReady($event)"
    >
    </adaptable-provider>

  export class AppComponent {
   <!-- other code here  -->

  adaptableReady = ({ adaptableApi, agGridApi }: AdaptableReadyInfo) => {
    // use AdaptableApi for runtime access to AdapTable
    this.adaptableApi = adaptableApi

Listen to the AdaptableReady Event (optional)

The Adaptable Ready Event is fired when AdapTable is initialised, and should be used to perform any setup related actions required.

The AdaptableReadyInfo object provided by the Event, contains 2 important objects:

adaptableApi which gives access to the Adaptable API
agGridApi which gives access to AG Grid's Api

Caution

AG Grid's gridReady event should not be used - because it will fire before AdapTable has initialised
Instead, you should always use AdapTable's adaptableReady event

Find Out More

See the Integration section in Getting Started for related articles on:

FAQ

AG Grid is not instantiating even though I passed in Grid Options? Make sure that you also provide AG Grid Modules; since AG Grid v.30 they are mandatory for AG Grid to instantiate.

Why am I seeing a warning that AdapTable doesn't know the type of the column? This happens because AG Grid has no means of setting the DataType of the column, so AdapTable has to guess it by looking at the first row in the grid. You can avoid this by providing each Column with a Cell Data Type property when configuring GridOptions.

Why is AdapTable not showing up in my browser? I'm using Internet Explorer. AdapTable no longer supports Internet Explorer. It is guaranteed to work in Chromium browsers (e.g. Chrome, Edge, Opera etc.). AdapTable is compatible with other browsers like Firefox, Safari etc. but we cannot guarantee every part of every feature will be fully available to the same extent as in Chromium browsers.

I get an error message: Uncaught TypeError: Cannot read properties of undefined (reading 'api') Make sure that you are passing in all GridOptions properties directly on the GridOptions object itself, and not as direct Inputs on the <ag-grid-angular> component

PreviousInstallation NextAdaptable Id