AdapTable React

Integrating AdapTable React

Summary

  • To use AdapTable React, you need to:
    • Import { Adaptable } from @adaptabletools/adaptable-react-aggrid
    • Provide and configure 3 components: Adaptable.Provider, Adaptable.UI and Adaptable.AgGridReact

Creating applications that use AdapTable React 20 is straightforward.

Find Out More

See Previous Documentation Versions for instructions on integrating older versions of AdapTable React

React Components

There are 3 key React components that need to be provided:

  • Adaptable.Provider - manages Adaptable State and orchestrates the AdapTable and AG Grid components
  • Adaptable.UI - renders AdapTable's UI Components including the Dashboard
  • Adaptable.AgGridReact - thin AdapTable wrapper around the AG Grid React component
Developer Guide

Defining the 3 React Components

// Import AG Grid Enterprise Modules
import { Module, AllEnterpriseModule } from 'ag-grid-enterprise';

// Create Modules array (to be passed later to Adaptable Initializer)
export const agGridModules: Module[] = [AllEnterpriseModule];
1
Either: Import and Define AG Grid Enterprise Modules

Import the AG Grid Enterprise Modules.

Import them into your application and place in an array.

This will be passed to <Adaptable.Provider /> component in Step 6.

// Import AG Grid Enterprise Modules
import { Module, AllEnterpriseModule } from 'ag-grid-enterprise';

// Import AG Grid Charts
import { AgChartsEnterpriseModule } from 'ag-charts-enterprise';

// Provide both in the Modules array
export const agGridModules: Module[] = [AllEnterpriseModule.with(AgChartsEnterpriseModule)];
1
Or: Import and Define AG Grid Enterprise Modules with Charts

Import the AG Grid Enterprise Modules including Charts.

Do this if using AG Grid Charts or AdapTable Sparkline Columns.

Import them into your application and place in an array.

This will be passed to <Adaptable.Provider /> component in Step 6.

// Import AG Grid Community and Enterprise Modules
import { ClientSideRowModelModule, CsvExportModule } from 'ag-grid-community';
import {  Module, ExcelExportModule, MasterDetailModule } from 'ag-grid-enterprise';

// Create Modules array (passed later to Adaptable Initializer)
export const agGridModules: Module[] = [ 
  ClientSideRowModelModule,
  CsvExportModule,
  ExcelExportModule,
  MasterDetailModule
  // and many more...
];
1
Or: Import and Define the required subset of AG Grid Modules

Another alternative is to import just the subset of AG Grid Modules that you need to use in your application (given your feature set).

Find Out More

The AG Grid Modules Reference contains the minimum list of AG Grid Modules required by AdapTable (and those needed by key features)

const gridOptions: GridOptions = {
  theme: themeQuartz,
  columnDefs: [
    {headerName: 'Make', field: 'make', filter: true, cellDataType: 'text'},
    {headerName: 'Model', field: 'model', editable: true, cellDataType: 'text'},
  ],
  rowData: [
    {make: 'Toyota', model: 'Yaris', price: 40000},
    {make: 'Toyota', model: 'Corolla', price: 28000},
    {make: 'Ford', model: 'Mondeo', price: 32000},
  ],
  cellSelection: true,
  sideBar: true,
  suppressAggFuncInHeader: true,
  suppressMenuHide: true,
};
2
Create an AG Grid GridOptions object

Define and populate a standard AG Grid GridOptions object.

Provide all required AG Grid related information including:

  • AG Grid theme
  • column schema (including correct dell data types)
  • initial data (if not lazy loading)
  • AG Grid events
  • additional, required properties

Caution

import {
  Adaptable,

  AdaptableApi,
  AdaptableDateEditor,

  type AdaptableColumn,
  type AdaptableOptions,
  type InitialState,  
} from '@adaptabletools/adaptable-react-aggrid';
3
Import AdapTable

Import everything from @adaptabletools/adaptable-react-aggrid (e.g. Adaptable, AdaptableApi, AdaptableOptions, InitialState etc.).

import "@adaptabletools/adaptable-react-aggrid/index.css";
// if using dark theme then also import
import "@adaptabletools/adaptable-react-aggrid/themes/dark.css";
4
Import AdapTable Styles

Import index.css which contains core styles

If using dark Theme, then import dark.css also

Find Out More

See AdapTable Theming Guide for full details on choosing Themes or creating Custom ones

const initialState: InitialState = {
  Dashboard: {
    PinnedToolbars: ['Layout', 'Pricing'],
  },
  Layout: {
    CurrentLayout: 'Cars',
    Layouts: [
      {
        TableColumns: ['Model', 'Price', 'Make'],
        RowGroupedColumns: ['Make'],
        Name: 'Cars',
      },
    ],
  },
  CustomSort: {
    CustomSorts: [{Name: 'CustomSort-Rating-1', ColumnId: 'Rating', SortedValues: ['AAA', 'AA+']}],
  },
} as InitialState;
5
Supply Initial Adaptable State

Add the Initial Adaptable State that is required to ship AdapTable with the objects you require for initial use.

This will later get merged into Adaptable State, together with any changes made by the run-time user.

It must include a Layouts section, containing at least one Layout.

In this example we do the following:

  • Add 2 Pinned Toolbars to the Dashboard: Layout and Export
  • Created a Layout called Cars with 3 columns and Row Grouping for the Make column
  • Set a Custom Sort for the 'Rating' Column so it will sort more intuitively for the users
const adaptableOptions: AdaptableOptions = {
  licenseKey: '<ADAPTABLE_LICENSE_KEY_HERE>',
  primaryKey: 'model',
  userName: 'Demo User',
  adaptableId: 'Basic Setup',
  filterOptions: {
    columnFilterOptions: {
      manuallyApplyColumnFilter: false
    },
  }
  initialState: initialState,
  plugins: [nocode()],
  stateOptions:{
    persisteState:{}, // persist State remotely
    loadState:{} // load remotely persisted State
  }
};
6
Create an Adaptable Options object

Adaptable Options AdapTable should work.

You should populate this object with:

  • a Primary Key by defining a Unique Column
  • an AdaptableId which will uniquely identify the Grid
  • the License Key provided when purchasing AdapTable
  • a User Name to identify the current user
  • the initialState created in Step 5
  • implementations of State Options functions to persist (and reload) Adaptable State remotely
  • any Plugins required (e.g. the No Code Plugin)
  • any of the other many properties and objects available (where the default values are not appropriate)
  • any Entitlements (Permissions) required for the User

Hint

Adaptable Options supports Typescript Generics which ensures a better developer experience by providing the row data type

Important

If the licenseKey property is not present, AdapTable will display a watermark and run with reduced functionality

import {Adaptable} from '@adaptabletools/adaptable-react-aggrid';
<Adaptable.Provider
  style={{flex: 'none'}}
  gridOptions={gridOptions}
  modules={agGridModules}
  adaptableOptions={adaptableOptions}
/>
  /* CHILDREN WILL COME HERE */

</Adaptable.Provider>
7
Render the Adaptable.Provider Component

First import the Adaptable named import.

Then render the Adaptable.Provider component in your application.

Provide these 3 mandatory props:

  • gridOptions - provide GridOptions object created in Step 2
  • modules - provide AG Grid Modules array created in Step 1
  • adaptableOptions - provide AdapTableOptions created in Step 6
<Adaptable.Provider
  style={{flex: 'none'}}
  gridOptions={gridOptions}
  modules={agGridModules}
  adaptableOptions={adaptableOptions}
  adaptableReady = ({ adaptableApi, agGridApi }: AdaptableReadyInfo) => {
    // use AdaptableApi for runtime access to AdapTable
    this.adaptableApi = adaptableApi;
    this.adaptableApi.quickSearchApi.runQuickSearch('toy');

    // use AG Grid's Api for runtime access to AG Grid if needed
    this.agGridApi = agGridApi;
    this.agGridApi.autoSizeAllColumns();
  };
/>
  /* CHILDREN WILL COME HERE */

</Adaptable.Provider>
8
Subscribe to Adaptable Ready Event (optional)

Add a listener to Adaptable Ready Event in the Adaptable.Provider component.

This Event is fired when AdapTable is initialised, and should be used to perform any setup related actions required.

The AdaptableReadyInfo object provided by the Event, contains two key objects:

  • adaptableApi which gives access to the Adaptable API
  • agGridApi which gives access to AG Grid's Api

<Adaptable.Provider
  style={{flex: 'none'}}
  gridOptions={gridOptions}
  modules={agGridModules}
  adaptableOptions={adaptableOptions}
/>
  <Adaptable.UI />
  /* Additional props here */
9
Render the Adaptable.UI Component

Render the <Adaptable.UI /> component inside the <Adaptable.Provider />.

This provides access to AdapTable's UI and Dashboard


<Adaptable.Provider
  style={{flex: 'none'}}
  gridOptions={gridOptions}
  modules={agGridModules}
  adaptableOptions={adaptableOptions}
/>
  <Adaptable.UI />
  <div style={{flex: 1}}>
    <Adaptable.AgGridReact
      // AG Grid props - but NOT `gridOptions` or `modules`
    />
  </div>
</Adaptable.Provider>
10
Render the Adaptable.AgGridReact Component

Also render the Adaptable.AgGridReact component inside the <Adaptable.Provider />

Note

Render <Adaptable.AgGridReact /> and not the <AgGridReact /> component directly

Caution

The Adaptable.AgGridReact component should not receive a gridOptions prop; instead pass this to Adaptable.Provider component

Find Out More

See the Integration section in Getting Started for related articles on:

PreviousInstallationNextDemo Apps