This documentation is designed to help developers using AdapTable to get up and running quickly with some of the key concepts and objects.
This site provides support for AdapTable Rx, which was released in July 2021.
This documentation has been updated to include full support for AdapTable Rx released in July 2021
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
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.
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.
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
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.
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.
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
Most of the functionality in AdapTable is organised through Modules.
These are essentially sets of discrete functionality e.g. 'CustomSort', 'Filter', 'SmartEdit' etc.
Access to Modules is managed by Entitlements.
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:
The Query uses the Adaptable Parser which allows for the creation of many types of queries, including Observable and Aggregation expressions.
Column Filters are operations which run 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 & 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 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:
- AdaptableReady - fired when AdapTable is instantiated and ready for use
- AdaptableStateChanged - fired when any changes are made in Adaptable State
- SearchChanged - fired when a Search or Filter Module has run (useful for Server Searching)
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:
- Each Module Popup has an info button which, when clicked, opens the associated Module page on this site
- The Expression Editor provides help links for each type of Query
This can be turned off by setting
showDocumentationLinks to false in User Interface Options
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 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).