AdapTable for AG Grid 22.0 Released
Command Buttons in Action Columns, saveable Pivot Result Columns, better support for Extended Layouts, 3 new React Hooks and a refactored UI (using Tailwind and Css layers)
Today we released AdapTable 22.0, the latest version of our market-leading AG Grid extension.
AdapTable 22.0 is a major release and supports AG Grid v.35.0
Breaking Change
- V.22 has breaking changes regarding importing types, root css file, and
Nameprop in Initial State - These are described in full in the Version 22.0 Developer Release Note
Like all releases, AdapTable 22.0 contains many new user-requested features including:
- Action Column Command Buttons
- Enhanced Layout Editor
- Support for Extended Layouts
- Saving Pivot Result Columns
- New 'Only' Aggregation Function
- DevTools Chrome Profiler
- Three Custom React Hooks
- Refactored and Improved AdapTable UI
The main focus in AdapTable 22 is a cleaner and more intuitive User Interface, which developers can enhance and extend with custom themes and colour schemes.
We've introduced Action Column Commands which hook into our Row Forms, enabling our users to edit data quickly, efficiently and safely.
And we now support saving the order of Pivot Result Columns - the most common request from our advanced financial clients and something not available in any competing product.
Danielle Nagler, CEO, AdapTable ToolsAction Column Commands
AdapTable Version 22 includes a convenient, new feature: Action Column Command Buttons.
Note
Action Column Buttons are essentially a time-saving combination of 2 existing AdapTable features:
- Action Columns - in which they are specialised buttons
- Row Forms - designed to safely and easily create, clone, edit and delete Rows
AdapTable provides 4 Action Column Commands:
| Command | Action when Clicked |
|---|---|
create | Opens the Create Row Form |
clone | Opens the Clone Row Form |
edit | Opens the Edit Row Form |
delete | Triggers the (non-visible) Delete Row Form |
Action Column Command Buttons can be created with just few lines of code:
actionColumnOptions: {
actionColumns: [
{
columnId: 'action',
friendlyName: 'Actions',
actionColumnButton: [{ command: 'edit' }, { command: 'delete' }],
},
],
},Like all AdapTable functionalities, Action Column Commands are highly configurable and can be:
- placed in any column in any position in the Grid
- given custom icons
- provided with an optional label
- pinned
- disabled (or hidden) on a per-row basis
Layouts
Version 22 contains a number of user-requested enhancements to Layouts.
Note
Layouts are central to AdapTable, managing Column behaviour and properties in Table and Pivot views
Layout Editor
The Layout Editor (the UI Component which creates Layouts) has been given a makeover.
In particular, it is much easier to see the properties of a Column, and make any required edits.

Extended Layouts
Extended Layouts allow users to associate other functionalities in AdapTable - typically styles, formats and custom sorts - to a given Layout.
We have added a range of functions to Layout API which enable Extended Layouts to be more easily shared, cloned and displayed.
Pivot Result Columns
It is now possible to save the order of Pivot Result Columns.
Note
- Pivot Result Columns are the unique combination of a Pivot Column Value and Aggregation Column
- AG Grid creates them dynamically when the Grid is Pivoted and their order is not normally saved
This was the most popular request from our advanced financial users.
only Aggregation Function
AdapTable 22 contains a new `only` aggregation function available in Grouped Layouts.
Note
This is in addition to the ONLY aggregation function in AdapTableQL, used in Calculated Columns
The function returns a value if there is one, and only one, result in the aggregated data.
Hint
- Layouts also support the aggFuncs provided by AG Grid (
sum,avg,min,max,count,first,last) - And additionally
WEIGHTwhich is provided by AdapTable to support Weighted Averages
DevTools Chrome Profiler
Profiling in AdapTable has improved dramatically with the new, custom Chrome DevTools profiler.
It provides a number of useful profiling tools, including stacktraces to give developerss a better sense of the timings of various operations in AdapTable.
Note
The profiler also shows correlations between user actions, browser events and the AdapTable instance

The following tracks are available:
Init- shows timing and performance for the init phaseRuntime- various actions that can happen at runtime (more to follow in due course)Redux- reflects everyReduxaction that AdapTable dispatches internally and long it tookLayoutManager- Layout specific updates - interactions with the underlying AG Grid instance

React Hooks
AdapTable React now provides custom React Hooks.
These are available for developers to leverage in their React components.
There are, currently, 3 React Hooks available:
useAdaptableState- provides access to whole of Adaptable StateuseCurrentLayout- used to get a handle on the Current Layout (with a setter function)useAdaptableApi- gets a reference to the Adaptable API
Hiding AdapTable UI
AdapTable 22 provides 2 companion functions to hide and show the AdapTable UI.
Hint
- These functions enable developers to create a single package containing AdapTable and AG Grid
- And then each individual application and DataGrid can hide / show AdapTable as required
These functions will hide / show all AdapTable UI components:
Note
The one exception is AdapTable's Column Filtering components, which remain in operation throughout
UI Changes
Version 22 includes many changes and improvements to the AdapTable UI including:
- the introduction of tailwind
- using CSS Layers
- changes to CSS Variables (primarily removable of redundant items)
Note
- These changes are primarily internal and won't directly affect the user experience
- But they make it easier for developers to extend the AdapTable UI and provide custom themes
Get Started
If you are an existing AdapTable user, simply download the latest version from npm.
Like all AdapTable releases, v.22 is available in 4 framework flavours:
- TypeScript (the default)
- AdapTable React
- AdapTable Angular
- AdapTable Vue
If you’re not yet using AdapTable, please get in touch to learn how AdapTable extends AG Grid to help you access, manage, edit and visualise your data in ways no other DataGrid solution allows.
You can also download a free no-obligation trial licence so you can try out AdapTable for yourself.