Using the React Wrapper

Instantiation of the React Wrapper is straightforward.

There are 2 components that are required:

AgGridReact

Create the standard AG Grid Grid Options object and pass it in to the component.

tip

Unlike in the Core version, you do not need to set the modules property of GridOptions as you will pass that directly to the component instead.

Also add any AG Grid modules you require (see below for more details)

<div className="ag-theme-alpine" style={{ flex: 1 }}>
<AgGridReact
gridOptions={gridOptions}
modules={[...RangeSelectionModule, MenuModule, ClientSideRowModelModule]}
/>
</div>

AdapTableReact

In your app, import the AdaptableReact component

import { AdaptableReact } from '@adaptabletools/adaptable-react-aggrid';

There are 4 AdapTableReact props of particular interest.

gridOptions

This is the standard AG Grid GridOptions object which is used for building column schema, providing data and setting key grid properties.

caution

This is a mandatory property

important

This must be the same AG Grid GridOptions object that you pass into the AgGridReact component

tip

It is advisable to set the AdapTable ColumnType property when defining each Column in the schema

adaptableOptions

This is the standard AdapTable Options object that contains all the settings and options required for configuring and managing AdapTable.

caution

This is a mandatory property

tip

Make sure to set a PrimaryKey property and also provide the adaptableId and licenseKey properties

warning

Do not set the vendorGrid property of AdaptableOptions as this is provided in the gridOptions prop.

modules

The modules property receives an array of ag-grid Enterprise Modules.

caution

This is a mandatory property

important

This must be the same object that is passed into the modules property of AgGridReact component - see below for more details

onAdapTableReady

The AdaptableReadyEvent fires as soon as AdapTable has finished initialising.

caution

This is an optional property

The AdaptableReadyEvent is defined as follows:

onAdaptableReady?: (adaptableReadyInfo: AdaptableReadyInfo) => void;

The callback function provides access to 2 important objects:

  1. The AdapTable API object. The api contains hundreds of methods providing full, safe, runtime access to all the functionality in AdapTable.

  2. The underlying Vendor DataGrid instance being used - in this case GridOptions from AG Grid.

tip

AdapTable enriches the 'gridOptions' it receives with modules and other properties, so if you want access to the underlying gridOptions instance that you created, then you should use this object.

<AdaptableReact
style={{ flex: "none" }}
gridOptions={gridOptions}
adaptableOptions={adaptableOptions}
onAdaptableReady={({ adaptableApi, vendorGrid }) => {
// use adaptable Api if needed
adaptableApi.eventApi.on("SelectionChanged", (args) => {
// do something..
});
// use vendor grid if needed
vendorGrid.onColumnPivotChanged = function (event: ColumnPivotChangedEvent) {
// do something
};
}}
/>

Adaptable Plugins

Plugins are referenced the same way as for 'Core' AdapTable - via the Plugins section of AdapTable Options:

const adaptableOptions: AdaptableOptions = {
primaryKey: 'OrderId',
adaptableId: 'react demo',
....
plugins: [finance()]
};

agGrid Enterprise Modules

AdapTable allows you to choose which AG Grid Enterprise modules you want use in your project.

To make sure that everything is properly wired together please follow these steps:

note

We are using Menus and RangeSelection in this example but they can be any AG Grid Modules

  1. Install the modules in npm:

    npm i @ag-grid-enterprise/menu
    npm i @ag-grid-enterprise/range-selection
  2. Import them into your code:

    import { MenuModule } from '@ag-grid-enterprise/menu';
    import { RangeSelectionModule } from '@ag-grid-enterprise/range-selection';
  3. Create a Modules array

    const modules = [MenuModule, RangeSelectionModule];
  4. Add the array to the modules prop of the AdaptableReact Component:

    <AdaptableReact
    ....
    modules={modules}
    .....
    />
  5. Add the same array to the modules prop of the AgGridReact Component:

    <AgGridReact
    gridOptions={gridOptions}
    modules={modules}
    />

AdapTable Tool Panel Component

To use the AdapTable ToolPanel Component while using the React Wrapper follow these 3 steps:

  1. Explicitly import it in your code, e.g.:

    import { AdaptableToolPanelAgGridComponent } from '@adaptabletools/adaptable/src/AdaptableComponents';
  2. Add it to the components section of GridOptions

    const options: GridOptions = {
    ....
    sideBar: true,
    components: {
    AdaptableToolPanel: AdaptableToolPanelAgGridComponent,
    },
    ....
    }
  3. Ensure the showAdaptableToolPanel property is set to true in the userInterfaceOptions section of AdaptableOptions (which is the default value so no need actually to set it)

    const adaptableOptions = {
    userInterfaceOptions: {
    showAdaptableToolPanel: true
    },
    };

Putting It All Together

import AdaptableReact from '@adaptabletools/adaptable-react-aggrid';
import { AdaptableToolPanelAgGridComponent } from '@adaptabletools/adaptable/src/AdaptableComponents';
// import adaptable styles - first import includes light theme
import '@adaptabletools/adaptable-react-aggrid/index.css';
import '@adaptabletools/adaptable-react-aggrid/themes/dark.css'
// import AG Grid styles
import '@ag-grid-community/all-modules/dist/styles/ag-grid.css';
import "@ag-grid-community/all-modules/dist/styles/ag-theme-alpine.css";
import "@ag-grid-community/all-modules/dist/styles/ag-theme-alpine-dark.css";
// import any AdapTable plugins you require
import finance from '@adaptable/adaptable-plugins-finance'
// import any ag-grid enterprise modules you want to use
import { RangeSelectionModule } from '@ag-grid-enterprise/range-selection';
import { MenuModule } from '@ag-grid-enterprise/menu';
/// Create the AG Grid GridOptions object
const gridOptions: GridOptions = {
columnDefs: [
{ field: 'OrderId', type: 'abColDefNumber', resizable: true },
{ field: 'CompanyName', type: 'abColDefString' },
{ field: 'ContactName', type: 'abColDefString' },
{ field: 'Employee', type: 'abColDefString' },
{ field: 'OrderCost', type: 'abColDefNumber' },
{ field: 'ItemCost', type: 'abColDefNumber' },
{ field: 'PackageCost', type: 'abColDefNumber' }
].map((c: ColDef) => {
c.filter = true;
c.floatingFilter = true;
return c;
});,
getRowData(),
enableRangeSelection: true,
sideBar: true,
components: {
AdaptableToolPanel: AdaptableToolPanelAgGridComponent,
},
};
// create an Array containing any AG Grid Modules
const modules = [MenuModule, RangeSelectionModule];
// create the AdapTable Options object including any plugins
// ensure to include the licenseKey and adaptableId properties
const adaptableOptions: AdaptableOptions = {
licenseKey: '<ADAPTABLE_LICENSE_KEY_HERE>',
primaryKey: 'OrderId',
userName: 'demo user',
adaptableId: 'react demo',
plugins: [finance()] // adaptable plugins
};
// Instantiate BOTH the AdaptableReact and the AgGridReact Components
// Make sure they both receive as props the SAME gridOptions (and modules) objects
const App: React.FC = () => (
<div style={{ display: "flex", flexFlow: "column", height: "100vh" }}>
<AdaptableReact
style={{ flex: "none" }}
gridOptions={gridOptions}
adaptableOptions={adaptableOptions}
onAdaptableReady={({ adaptableApi, vendorGrid }) => {
// use adaptable Api if needed
adaptableApi.eventApi.on("SelectionChanged", (args) => {
// do something..
});
// use vendor grid if needed
vendorGrid.onColumnPivotChanged = function (event: ColumnPivotChangedEvent) {
// do something
};
}}
modules={modules}
/>
<div className="ag-theme-alpine" style={{ flex: 1 }}>
<AgGridReact
gridOptions={gridOptions}
modules={modules}
/>
</div>
</div>
);