AdapTable Angular

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

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 {}
1
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];
2
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)];
2
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...
];
2
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,
};
3
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 dell 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

import {
  type AdaptableOptions,
  type AdaptableApi,
  type InitialState,
  type AdaptableColumn
} from '@adaptabletools/adaptable-angular-aggrid';
4
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";
// if using dark theme then also import
import "@adaptabletools/adaptable-angular-aggrid/themes/dark.css";
5
Import AdapTable Styles

Import index.css which contains core styles

If using dark Theme, then import dark.css also

Find Out More

See AdapTable Theming Guide for full details on choosing Themes or creating Custom ones

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;
6
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 Export

  • 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:{
    persisteState:{}, // persist State remotely
    loadState:{} // load remotely persisted State
  }
};
7
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 purchasing 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) lable (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>
8
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>
9
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
10
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
11
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

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

PreviousInstallationNextDemo Apps