AdapTable Overview

This documentation is designed to help developers using AdapTable to get up and running quickly with some of the key concepts and objects.


This documentation has been updated to include full support for AdapTable Version 10 released in October 2021


For general info on AdapTable visit the AdapTable Tools website or try out the Live Demos

This documentation comprises 2 sections:

  • Docs (this section) - contains bespoke guides to all that AdapTable provides grouped thematically.

  • Classes - provides automated documentation for all the objects exposed by AdapTable

What is AdapTable?

AdapTable is a sophisticated HTML5 DataGrid add-on.

It sits on top of - and integrates with - 'vendor' DataGrids and provides, out of the box, all the cutting-edge data-related functionalilty that advanced users require and expect.

This functionality provided by AdapTable would otherwise need to be developed in a completely bespoke and unique fashion for each and every application containing a DataGrid.

So using AdapTable provides 4 key benefits:

  • saves development time: typically upwards of 3 months on a standard project
  • radically reduces costs: offers huge dev savings and frees up developers to write business logic
  • enables desktop standardisation: all applications will share common look & feel and workflows
  • future proofs applications: AdapTable's wealth of functionality and frequent release schedule covers all current and future use cases

Vendor Grid

AdapTable does not provide a DataGrid control of its own; its purpose is to extend, enhance and supplement existing DataGrid controls supplied by 3rd party vendors.

AdapTable is most commonly used together with AG Grid as the 2 products complement each other very well.


If using a commercial DataGrid you must purchase a licence for it separately to AdapTable

Framework Wrappers

AdapTable provides 3 modes of access:

  • Core: This requires native JavaScript or TypeScript (most of the examples and demos we provide use Core)
  • React Wrapper: Allows AdapTable to be instantianted and accessed via a React Component
  • Angular Wrapper: Allows AdapTable to be instantianted and accessed via an Angular Component

The last 2 options are only available if using AG Grid as the underlying DataGrid.

Adaptable Options

Adaptable Options is a large group of property options provided to enable developers to set up AdapTable at design time so that it fits their requirements.

The available properties include the underlying Vendor Grid, Predefined Config (see above), the Adaptable Id and many groups of related options (e.g. Layout, Search, Edit etc.)

Predefined Config

Predefined Config is State created (by developers) at Design Time (written in JSON) and shipped with AdapTable for first-time application use.

It includes those objects required for initial use of the hosted application e.g. Searches, Filters, Reports, Alerts, Conditional Styles etc.

Predefined Config is then stored in Adaptable State together with any run-time changes effected by the user.


Predefined Config deals with objects which can change during Application run-time

Adaptable Options contains behaviour and functionality that will never change post-creation

Adaptable API

The Adaptable Api provides full, rich, programmatic access to all the functionality and state inside AdapTable.

This allows users to access the AdapTable Store in a 'safe' manner.


It also allows you, if you wish, to create, save and delete AdapTable objects in your custom screens bypassing AdapTable's UI altogether

Fitting It All Together

These concepts are linked together as follows when AdapTable is instantiated:

AdaptableOptions is the only object required by the async static constructor to initialise and prepare AdapTable.


Setting up Adaptable Options is identical whether you use Adaptable 'Core' or a Framework Wrapper

2 mandatory properties in AdapTable Options are

  • predefinedConfig - the Predefined Configuration which AdapTable will contain at start-up
  • vendorGrid - the underlying DataGrid (e.g. AG Grid GridOptions) which will need to be instantiated and populated separately

The constructor returns the AdaptableApi object (via a Promise) to provide run-time access to AdapTable.

// Create an AdaptableOptions object to pass in to the constructor
const adaptableOptions: AdaptableOptions = {
licenseKey: '<ADAPTABLE_LICENSE_KEY_HERE>', // the license key you were given
primaryKey: 'tradeId', // a unique column
vendorGrid: { // the underlying vendor DataGrid
...gridOptions, // in this example its an AG Grid GridOptions
modules: AllEnterpriseModules, // pass in any AG Grid Modules that are required
predefinedConfig: applicationJSON, // the predefined config we created
// The AdapTable constructor returns a promise containing an Api object
// This can be used for programmatic run-time access to all AdapTable functionality
const adaptableApi: AdaptableApi = await Adaptable.init(adaptableOptions);

Adaptable State

A key functionality offered by AdapTable is State Management.

Changes made to user state at Run Time are automatically persisted by AdapTable, and stored - either locally or remotely - for future use.

There are also options to allow you to enrich the State or manage it in multiple custom ways.

UI Elements

There are a number of key UI elements in AdapTable:

  • Dashboard: the configurable area above the Grid designed to give quick access to commonly used AdapTable Modules
  • ToolPanel: the collapsible area to the right of the Grid which provides an alternative to the Dashboard
  • Column Menu: accessed by clicking on the image in the right corner of a column header
  • Context Menu: accessed by right-clicking in any cell inside the Grid
  • Popups: a page dedicated to a Module showing all relvant objects with buttons to create, edit and delete
  • Wizards: a special form with multiple steps enabling easy creating and editing of AdapTable objects

Adaptable Modules

Most of the functionality in AdapTable is organised through Modules.

These are essentially sets of discrete functionality e.g. 'CustomSort', 'Filter', 'SmartEdit' etc.

Each Module has its own Popup page, and some commonly used Modules (e.g. Export, Cell Summary) also have their own Dashboard Toolbars and ToolPanels (see above).

Access to Modules is managed by Entitlements.

Managing Columns

The primary way to manage which columns are visible is through Layouts.

A Layout includes a great deal of information including column visibility, order,sorting, aggregations, grouping, pivoting, widths, pinning and much else.

Managing Rows

AdapTable provides a many different ways for you to control which rows you see at any one time:

  • The Query Module wraps a Boolean Expression (i.e. true / false) which is evaluated by AdapTableQL against a whole row. It can contain multiple conditions and reference multiple columns (using AND / OR logic).


    AdapTableQL is a powerful custom-built query language which supports the creation of many types of Expressions, including Observable and Aggregation based

  • Column Filters operate against a single column (though numerous Column Filters can be active at the same time). They use a Predicate to resolve if the current cell value should be displayed or not.

  • Quick Search will highlight all cells in the grid that contain the inputted text (and can also filter those rows).

  • Data Source provides a means to request a particular DataSet from the Server which will replace the data currently in the Grid.

Accessing AdapTable at Runtime

There are a number of ways that you can have programmatic access to AdapTable at run-time:

  • Adaptable API: the primary way to access an AdapTable instance programmatically
  • Adaptable Events: subscribe to Events fired by AdapTable as required
  • Notifications: Configure AdapTable to inform users when something important has happened

Theming and Styling

AdapTable ships with 2 themes - Light and Dark - but it is easy for users to add their own custon themes.

All themes use CSS variables and semantic classnames to allow developers to provide custom styling.


AdapTable contains a lot of functionality, not all of which be applicable to every use case (e.g. a Read-Only grid won't require the Editing Modules).

To help you to restrict what your users can see and do, AdapTable provides a rich Entitlements function.


AdapTable fires a number of Events enabling run-time users to react to changes of interest.

Each event is useful in its own way but perhaps the 3 most commonly used are:

Team Sharing

AdapTable provides a Team Sharing capability so that objects created in AdapTable can be easily shared - and kept 'live' - between colleagues.


AdapTable logs many messages to the console.

Critical messages are always visible, but you can set up logging to specify that all messages (or just certain types of messages) are visible.


AdapTable provides context-friendly links to these Help Pages from within the hosting Application in 2 places:


This can be turned off by setting showDocumentationLinks to false in User Interface Options

Browser Compatibility

AdapTable is compatible with recent versions of Chrome, Edge, Opera, Firefox, Safari and other modern browsers.


Adaptable does not support Internet Explorer.

AdapTable also works inside Electron and other Chromium-based frameworks.

AdapTable is fully compatible with OpenFin (and includes extra OpenFin specific functionaity when running in the OpenFin container).


To use AdapTable inside OpenFin, make sure to install the OpenFin plugin

AdapTable Code

AdapTable is written in TypeScript (version 4.0.7) and uses React internally.


The current minimum required version of React is 16.8.0, so avoid using other imports / libraries which require a lower version of React than this (higher versions are fine).

AdapTable Support

AdapTable Support is available in 2 ways:


AdapTable release regular new versions containing enhancements, new features and bug fixes.

There are a minimum of 4 releases a year, but in practice many more.

Change Log and Releases

We provide a Change Log showing all items on the work slate not scheduled for the next release.

Please contact us if you would like to add an item to that list.