This help site is designed to help developers using AdapTable to get up and running quickly with some of the key concepts and objects.
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
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.
If using a commercial DataGrid you must purchase a licence for it separately to AdapTable.
AdapTable provides 3 modes of access:
- 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 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 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 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.
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.
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.
Most of the functionality in AdapTable is organised through Functions.
These are essentially sets of discrete functionality e.g. 'CustomSort', 'Filter', 'SmartEdit' etc.
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.
AdapTable provides a many different ways for you to control which rows you see at any one time:
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.
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.
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 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).