AdapTable Overview

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


For general info on Adaptable visit the website or try out the live demos

The main, Docs section contains bespoke guides to all that AdapTable provides grouped thematically.


The Classes section 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 functions and aggressive 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.

Predefined Config

Predefined Config is State created (by devs) at Design Time (using JSON) and shipped with Adaptable for first-time use.

It includes anything whch is required for initial use of the application e.g. Searches, Filters, Reports, Conditional Styles, Entitlements etc.

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

Adaptable Options

Adaptable Options is a large group of property options provided to developers to enable them 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, Audit etc.)

Adaptable API

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

This allows users to create, save and delete AdapTable objects in their our screens bypassing AdapTable's UI, and to access the Store in a 'safe' manner.

Fitting It All Together

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

AdaptableOptions is the only object which the async static constructor requires in order 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 = {
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 User State Management.

Changes made to user state at Run Time are automatically persisted AdapTable stores (either locally or remotely) for future use.

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 Functions.
  • 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: page dedicated to a Function; often includes 'wizards' to create Adaptable Objects step by step.

Adaptable Functions

Most of the functionality in AdapTable is organised through Functions.

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

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

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:

  • A Query is an Expression that returns true or false and is run against a whole row. It can contain multiple conditions and reference multiple columns (using AND / OR logic).

  • Column Filters are operations that are run against a single column (though you can have numerous Column Filters 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 (but will not 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 & Alerts: Configure AdapTable to inform users when something important has happened
  • System Status: Update run-time users on the overall state & health of the application

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 functions).

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

Audit Log

One powerful functionality offered by AdapTable is Audit Log.

This allows you to stream messages concerning activity in the Grid to destinations of your choice.

Browser Support

AdapTable is fully compatible with recent versions of Chrome, Edge, Opera, Firefox, Safari and many 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 3.9.7) and uses React internally.


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