Installing AdapTable for AG Grid

Summary

  • AdapTable for AG Grid is installed from a public npm registry
  • AdapTable supports ESM (preferred) and CJS formats

This page describes how to install the pure TypeScript (i.e. Framework agnostic) version of AdapTable 20.

Find Out More

Public npm Registry

AdapTable is installed from a public npm Registry.

Developer Guide

Installing AdapTable

To install AdapTable follow these steps:

Caution

These steps assume you are using ESM format and so they reference the ESM packages; see below to learn how to use CommonJS format

Terminal
npm install @adaptabletools/adaptable
1
Install AdapTable from npm

Use standard npm install commmand.

Terminal
npm install @adaptabletools/adaptable-plugin-master-detail-aggrid
2
Install any AdapTable Plugins that are required

For example to use Master-Detail functionality add:

Note

Plugins reduce download size by placing less frequently used functionality outside the main download

Terminal
npm install ag-grid-enterprise
3
Install AG Grid Enterprise

Install the AG Grid Enterprise package (v.35)

Terminal
npm install ag-charts-enterprise
4
Install AG Grid Charting (optional)

If you plan to use AG Grid Charts, or AdapTable's Sparkline Columns, additionally install the AG Charts package.

const adaptableOptions: AdaptableOptions = {
  licenseKey: '<ADAPTABLE_LICENSE_KEY_HERE>',
};
5
Set the AdapTable License

This is done via the licenseKey property in Adaptable Options

ESM and CJS formats

AdapTable ships with support for both ESM and CJS formats, using 2 parallel sets of packages.

Caution

AdapTable strongly recommends using ESM wherever possible

  • If using ESM, install the "normal" AdapTable packages (e.g. @adaptabletools/adaptable)
  • If using CommonJS, install the CJS packages (e.g. @adaptabletools/adaptable-cjs)

Note

All the CJS packages use the name of the ESM package plus the -cjs suffix

ESM PackageCJS Package
@adaptabletools/adaptable@adaptabletools/adaptable-cjs
@adaptabletools/adaptable-plugin-interopio@adaptabletools/adaptable-plugin-interopio-cjs
@adaptabletools/adaptable-plugin-ipushpull@adaptabletools/adaptable-plugin-ipushpull-cjs
@adaptabletools/adaptable-plugin-master-detail-aggrid@adaptabletools/adaptable-plugin-master-detail-aggrid-cjs
@adaptabletools/adaptable-plugin-nocode-aggrid@adaptabletools/adaptable-plugin-nocode-aggrid-cjs
@adaptabletools/adaptable-plugin-openfin@adaptabletools/adaptable-plugin-openfin-cjs

Find Out More

See Using AG Grid Modules & Packages for more detailed information

FAQ

If something isn't working, these questions and answers cover the issues we're most often asked about:

Runtime Behaviour

Why are some rows missing from my grid? Check that there are no Column Filters applied, or that the Grid Filter is not active.

Why can I not see some toolbars in my Dashboard that other users have? First check that they've not been closed; you can see available toolbars in the Dashboard section of the Settings Panel. If the toolbar is not listed there then the Module might be marked as Hidden in your Entitlements — which means you don't have access to see it.

Why are the edit and delete buttons disabled for some objects in the Settings Panel? This is likely because the Module Entitlement is ReadOnly. If so, users can access existing Adaptable Objects but cannot edit or delete them or create new ones. It might also be the case that the item in question can never be deleted (e.g. if it is the only Layout in State).

Why is my AG Grid ValueSetter not working? Check that you have not created a Validation Alert for that column. This will create an AG Grid Value Setter for the column in question, and will replace an existing Value Setter for the Column if one was set in GridOptions.

Can I remove the Loading Screen popup I see when AdapTable starts? Yes — set showLoadingScreen to false in the loadingScreenOptions section of User Interface Options.

Performance

Why is AG Grid slowing down?

  • Check if you are using Custom Cell Components (previously known as Cell Renderers) — these are the main culprit in slow scrolling performance.
  • Make sure that you are not re-filtering too often on ticking data. By default AdapTable will only re-filter on user edits, but you might have set this in Column Filter Options to also update when data ticks.
  • If you have multiple Value Getters consider using AG Grid's Value Cache.

Hint

This is worth trying also if you have multiple Calculated Columns that reference each other

Why is my grid starting up slowly? Ensure that your Initial Adaptable State is up to date. If you are using outdated Initial State (e.g. for Calculated Columns), then AdapTable will automatically update it to the correct syntax — which can take time as it will cause the grid to re-render.

Hint

AdapTable logs whenever Initial State is auto-updated, so turn on Logging to see these messages

PreviousKey ConceptsNextIntegration