AdapTable 22.0

AdapTable 22.0, the latest version of our market-leading AG Grid extension, contains many powerful, cutting-edge features, all requested by our growing user base. AdapTable is used by many of the world’s largest companies to power vital, business-critical applications.

Action Column Commands

AdapTable 22 includes a convenient, new feature: Action Column Command Buttons, 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:

• 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 very little code:

  actionColumnOptions: {
    actionColumns: [
      {
        columnId: 'action',
        actionColumnButton: [
          { command: 'edit' }, 
          { command: 'delete' }
        ]},
    ],
  },        

However, like all AdapTable functionalities, Action Column Command Buttons are also highly configurable and they can be:

• placed in any column, in any position, in AG Grid
• given default, or 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.

Layouts are used in AdapTable to manage AG Grid Column behaviour and properties, and are available in both Table and Pivot views

Layout Editor

The Layout Editor (the UI Component which creates Layouts) has been given a makeover.

It is now much easier to see the properties of a Column, and make any required changes.

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.

Pivot Result Columns are the unique combination of a Pivot Column Value and Aggregation Column, which AG Grid creates dynamically when the Grid is Pivoted.

Pivot Result Column order is not normally saved, and 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.

This is in addition to the ONLY aggregation function already available in AdapTableQL, that is often used in Calculated Columns.

The function returns a value if there is one, and only one, result in the aggregated data.

DevTools Chrome Profiler

Profiling in AdapTable has improved with the new, custom Chrome DevTools profiler.

It includes a number of useful profiling tools, including stacktraces to give developers a better sense of the timings of various operations in AdapTable.

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 phase
• Runtime - various actions that can happen at runtime (more to follow in due course)
• Redux - reflects every Redux action (with time taken) that AdapTable dispatches
• LayoutManager - Layout specific updates & interactions with underlying AG Grid

React Hooks

AdapTable React now provides 3 custom React Hooks, which are available for developers to leverage in their React components:

• useAdaptableState - provides access to whole of Adaptable State
• useCurrentLayout - 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.

These functions enable developers to create a single package containing AdapTable and AG Grid, and then each individual application can hide / show AdapTable as required;

These functions will hide / show all AdapTable UI components:

• Dashboard
• Tool Panel
• AdapTable Status Bar
• Settings Panel
• Column Menu
• Context Menu

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)

These changes are designed to make it easier for developers to extend the AdapTable UI and provide custom themes.

The main focus in AdapTable 22 is a cleaner, 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 Tools

Get Started

If you are an existing AdapTable user, 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 more about our powerful AG Grid extension, or download a free no-obligation trial licence so you can try out AdapTable for yourself.