AdapTable Version:

Framework:

Integrating AdapTable with AG Grid

Summary

Integrating a non-Framework AdapTable (ie. TypeScript) instance with AG Grid is straightforward
This page describes the steps required

Creating an AdapTable Instance

This page shows how to create a "vanilla" AdapTable instance, i.e one that doesn't leverage a Framework.

Like all the demos on this site, the example is in TypeScript (used by most developers using AdapTable).

Find Out More

For Framework-based instructions see React Integration, Angular Integration and Vue Integration
See Previous Documentation Versions for instructions on integrating older versions of AdapTable
For a pure JavaScript example showing how to set up AdapTable see the vanilla JavaScript AdapTable Template

Developer Guide

Detailed Guide to Creating a non-Framework AdapTable Instance (TypeScript)

These are the steps involved in creating a new (vanilla) AdapTable instance:

<body>
  {/* div for adaptable - always name this 'adaptable' */}
  <div id="adaptable"></div>

  {/* AG Grid container div - use id='grid' */}
  <div id="grid" style="height:500px"></div>
</body>

Create Two Div Elements in your HTML

These 2 div elements should be named (ideally in this order):

adaptable - contains the AdapTable instance
grid - contains the AG Grid instance (name this 'grid')

Note

Its possible to name the Divs containing AG Grid and AdapTable differently (in place of default values: grid and adaptable)
In this case, provide these names in ContainerOptions - see Providing bespoke AdapTable and AG Grid div Ids for more details (also if using a Shadow DOM)

import '@adaptabletools/adaptable/index.css';
// if using dark theme then also import
import '@adaptabletools/adaptable/themes/dark.css';

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

import {
  Adaptable,
  AdaptableDateEditor,
  AdaptableOptions,
  AdaptableApi,
  InitialState,
  AdaptableColumn,
} from '@adaptabletools/adaptable';

Import AdapTable's types

Import main Adaptable object and any Cell Editors or other required utilities from @adaptabletools/adaptable.

Everything is a named export.

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

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

Either: Import and Define AG Grid Enterprise Modules

Import the AG Grid Enterprise Modules.

// 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 reqdModules: 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.

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

// Create Modules array (to be passed later to Adaptable Initializer)
export const reqdModules: 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)

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 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 via ColDefs (including correct dell data types)
initial data (if not lazy loading)
AG Grid events
any additional, required properties

Caution

Many ColDef properties are ignored by AdapTable and replaced by Layout props - see full details in Guide to Layouts and ColDefs
Do not instantiate AG Grid; AdapTable will do that itself, together with any required wiring up of objects

Hint

Ensure to always set the appropriate cellDataType property in ColumnDefs for each Column that is defined
This will enable AdapTable to use the correct set of Filters and related properties - see Setting Cell Data Types for more information

const initialState: InitialState = {
  Dashboard: {
    PinnedToolbars: ['Layout', 'Pricing'],
  },
  Layout: {
    CurrentLayout: 'Cars',
    Layouts: [
      {
        TableColumns: ['Model', 'Price', 'Make'],
        RowGroupedColumns: ['Make'],
        Name: 'Cars',
      },
    ],
  },
  FormatColumn: {
    FormatColumns: [
      {
        Name: 'FormatColumn-Price-262',
        Scope: {ColumnIds: ['Price']},
        DisplayFormat: {
          Formatter: 'NumberFormatter',
          Options: {FractionDigits: 0, Prefix: '$'},
        },
      },
    ],
  },
  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 Export
Created a Layout called Cars with 3 columns and Row Grouping for the Make column
Provided Display Format for 'Price' column of 2 fraction digits and $ sign
Set a Custom Sort to sort the 'Rating' Column more intuitively

const adaptableOptions: AdaptableOptions = {
  licenseKey: '<ADAPTABLE_LICENSE_KEY_HERE>',
  primaryKey: 'model',
  userName: 'Demo User',
  adaptableId: 'Basic Setup',
  filterOptions: {
    columnFilterOptions: {
      manuallyApplyColumnFilter: true,
    },
  },
  initialState: initialState,
  plugins: [nocode()],
  stateOptions: {
    persisteState: {}, // persist State remotely
    loadState: {}, // 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 Adaptable Id which will uniquely identify the Grid
the License Key provided when 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 above
any Plugins required (e.g. the No Code Plugin)
any of the other many options and properties 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

const agGridConfig: AgGridConfig = {
  gridOptions: gridOptions,
  agGridModules: reqdModules,
};

const adaptableApi: AdaptableApi = await Adaptable.init(
  adaptableOptions,
  agGridConfig
);

Instantiate AdapTable using static async contstructor

The static asnyc AdapTable constructor receives 2 objects:

the Adaptable Options created in Step 7
an AgGridConfig object which contains two properties:
- the Grid Options object created in Step 5
- the AG Grid Modules defined in Step 4

It returns (via a Promise) an Adaptable API object - which gives run time access to all AdapTable functionality.

// Subscribe to the Adaptable Ready Event
api.eventApi.on('AdaptableReady', (adaptableReadyInfo: AdaptableReadyInfo) => {
  // Use AdapTable API to run a Quick Search
  adaptableReadyInfo.adaptableApi.quickSearchApi.runQuickSearch('toy');

  // Use AG Grid api to auto size all columns
  adaptableReadyInfo.agGridApi.autoSizeAllColumns();
});

Subscribe to Adaptable Ready Event (optional)

Add a listener to Adaptable Ready Event which is fired when AdapTable is initialised.

This should be used to perform any required setup-related actions.

The AdaptableReadyInfo object provided by the Event, contains two key objects:

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

Caution

If you are using TypeScript then you must use version 5.4.5 or higher

Find Out More

See the related articles in this documentation for more detailed instructions on:

Accessing AdapTable at Run-Time

The Adaptable API has many hundreds of methods to allow full, programmatic access to all AdapTable functionality and state at run-time.

It also includes an eventApi section for listening to Adaptable Events.

FAQ

Why do I see an error message saying there There is no DIV with id=[Name] so cannot render Adaptable? You have likely supplied a bespoke value for the adaptableContainer property in Container Options but not provided a Div with the same name.

Can I remove the loading message that appears? Yes, this is possible by setting showLoadingScreen to false in loadingScreenOptions section of User Interface Options

AdapTable Resources

All the demos on this site can be run in TypeScript by clicking the TypeScript button in the top corner
They can also be forked to Sandbox and run independently (with full code visible)
For a pure JavaScript example showing how to set up AdapTable see the vanilla JavaScript AdapTable Template

PreviousInstallation NextAdaptable Id

Framework: