This Overview is designed to help new users get up and running quickly with some of the key concepts and objects in AdapTable.
What is Adaptable?
AdapTable is a sophisticated 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 currently needs to be provided in a completely bespoke and unique fashion for each and every application containing a DataGrid so using AdapTable not only saves development time and budget but enables the standardisation of the desktop.
AdapTable does not provide a DataGrid control of its own; its purpose is to extend, enhance and supplement existing DataGrid controls.
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 compatible with OpenFin.
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 (version 16.9.0)