AdapTable for AG Grid 24.0

AdapTable 24.0 is the latest version of our market-leading AG Grid extension.

It is a major release and supports AG Grid v.36.2

AdapTable 24 has a three-pronged central focus:

• less custom Grid code for developers to write
• more of the workflow sitting on the row for run-time users
• an even more powerful expression library and query language for advanced users

One Language for the Grid

Every serious AG Grid user ends up asking the same kinds of question: which rows matter, when should I be told, and what should this cell look like?

In AdapTable 24 those questions share one, powerful engine: AdapTable Query Language.

This has been signficantly enhanced and fully replaces the (previously used) Predicates.

Filters, Format Columns, Flashing Cells, Alerts, Reports and Calculated Columns all speak it.

Users learn the language once and then apply it in multiple places.

Scope

• A new Scope function is the manager-friendly version of "do this to every column of this type".

• One simple rule can include columns in scope, including those added later which match.

// Create a Format Column which paints all Positive Numbers as Green
FormatColumn: {
  FormatColumns: [{
    Scope: { DataTypes: ['number'] },
    Style: { ForeColor: 'Green' },
    Rule: 'IS_POSITIVE($SCOPE)',
  }],
}

Named Queries

• Named Queries can now return any value, not only true / false.

• AdapTableQL uses the QUERY keyword to reference these Named Queries in Expressions

// Define 3 Named Queries - which are then reused in a Calculated Column, Layout & Conditional Style
// Note: One of the Named Queries references another (chaining is allowed)
const initialState: InitialState = {
  NamedQuery: {
    NamedQueries: [
      { Name: 'US Banks', Expression: "[cpty] IN ('BAML', 'Citi') AND [bid] > 3" },
      { Name: 'Big US Orders', Expression: "QUERY('US Banks') AND [orderSize] > 100" },
      { Name: 'Popularity Score', Expression: 'PRODUCT([price], [vat], [extras])' },
  ]},
  Layout: {
    Layouts: [{
      Name: 'Simple Layout',
      TableColumns: ['price', 'change', 'packageCost', 'popularity-score'],
      GridFilter: { Expression: "QUERY('Big US Orders')" },
    }]},
  FormatColumn: {
    FormatColumns: [{
      Name: 'US Banks Style',
      Scope: { All: true },
      Style: { FontWeight: 'Bold' },
      Rule: "QUERY('US Banks')",
    }]},
  CalculatedColumn: {
    CalculatedColumns: [{
      ColumnId: 'popularity-score',
      Expression: "QUERY('Popularity Score')",
    }]},
}

Custom Functions

• AdapTable 24 makes it easier for developers to provide Custom Expression Functions

• They will be added to the many functions provided by AdapTable and made available to end users

• Additionally Custom Aggregation Expression Functions have been enhanced to allow power users to create very complex multi-row functions

UI Editors

• AdapTable 24 provides major improvements to the 2 UI editors used to create Expressions:

• Query Builder - for users who do not want to write syntax - has a much cleaner interface

• Expression Editor — for power users - has autocomplete, hover help, 1-click fixes and examples

Watch How Data Changes

A snapshot of the Grid tells you what a cell is.

Trading, ops and risk teams also need to know what it did.

Which is why v.24 includes improved Observable Expressions and new Relative Change Alerts.

Observable Expressions read change history (and time) and return a live value.

In v.24 they are no longer limited to Alerts and can now drive:

Relative Change Alerts sit beside that and add further richness.

These Alerts fire on the nature of a move — any change, a percent move, or an absolute move.

This means that the desk can be told when price jumps 5%, not only when it crosses a static level.

Calculated Columns

Calculated Columns are how AdapTable turns a Grid into a model.

They are derived values that stay in sync as the row ticks.

Version 24 extends the set of Calculated Column Expressions.

Window and Observable join the existing Standard, Aggregation, Cumulative & Quantile types.

So a column can be "this row", "this row over time", or "this row compared to its neighbours".

Window Calculated Columns do that last job: they order the rows and look up a value from another row in that series — the previous trade, the next one, the first or last, or this row's rank.

Thus the Grid can show "change versus previous row" or "rank in book" without a custom renderer.

Just as important for the people who inherit the Grid: they can now see the working:

• Formula Trace shows how each value was derived

• The Compact Expression Editor allows users to edit Calculated Columns via a popup

• The cell tooltip lists the formula and the run-time inputs
• AdapTable stops you deleting a Calculated Column that something else still uses

Action Columns

Action Columns are a good example of what AdapTable does best: help developers and end users design complex, powerful AG Grid functionality with a minimum of effort and custom code.

They are design-time columns that host interactive Controls on every row.

This allows users to act on the data they are looking at — flip a flag, open a record, pick a status, jump to a URL — without hunting in a toolbar or leaving AG Grid.

Version 24 redesigns them around 8 Control types:

Each Control receives the row, the node and the Adaptable API.

Labels, icons, styles & visibility can all be functions, so the same Column can look different per row.

Improved User Experience

AdapTable v.24 includes UX enhancements to Grid Settings, Notes and Layouts.

Grid Settings

• The Settings Panel is now presented to users as Grid Settings
• The button to open it (the icon can be custom) now lives on left hand side of Dashboard header
• The navigation can search, collapse to an icon rail, and show a one-line description per module
• Cell Summary, Smart Edit and Bulk Update now live in Grid Settings (no more popups)
• More grid and column related information added to Grid Info and Column Info panels

Notes

• Notes now builds on AG Grid's Cell Notes (in place of the previous custom implementation)
• AdapTable adds the extras that teams already expect (types, defaults, the rest of the workflow)

Layouts

• In v.24 Developers can ask AdapTable to create a Default Layout using AG Grid properties

• Another user-requested enhancement is improved Layout Extensions.

• Developers can now more easily pair a Column Format, Filter or Alert with a Layout

• And an added benefit is that Team Sharing takes that pairing with it

AdapTable DevTools

AdapTable 24 formally launches AdapTable DevTools — a Chrome Developer Tools extension for every page that runs AdapTable.

Developers and support can, without writing diagnostic code:

• inspect a live instance
• restore State snapshots
• read logs
• design themes

Get Started

If you are an existing AdapTable user, download the latest version from npm.

Like all AdapTable releases, v.24 is available in 4 framework flavours:

• TypeScript (the default)
• AdapTable React
• AdapTable Angular
• AdapTable Vue

If you are 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.