Using the React Wrapper

Instantiation of the React Wrapper is straightforward.

There are 2 components that are required:

  • AgGridReact - the ag-Grid React component

  • AdapTableReact - the AdapTable React component

caution

Version 7 of AdapTable introduced a change to how the React Wrapper is instantiated, in particular by requiring both components to be provided.

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 3 AdapTableReact props of interest:

  • gridOptions (mandatory)

    The standard ag-Grid GridOptions object used for building column schema and setting key grid properties.

    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 (mandatory)

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

    warning

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

  • onAdapTableReady: ({ adapTableApi: AdapTableApi, vendorGrid: GridOptions }) (optional)

    The AdaptableReadyEvent fires as soon as AdapTable is ready.

    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.

    caution

    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
};
}}
/>

Plugins

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

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

agGrid Enterprise Modules

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

However 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 = [...AllEnterpriseModules, ClientSideRowModelModule];
  1. Add the array to the modules prop of the AdaptableReact Component:

    <AdaptableReact
    ....
    modules={modules}
    .....
    />
  1. 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 Tool Panel 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 charts from '@adaptable/adaptable-plugins-charts'
// 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 = [...AllEnterpriseModules, ClientSideRowModelModule];
// create the AdapTable Options object including any plugins
const adaptableOptions: AdaptableOptions = {
primaryKey: 'tradeId',
userName: 'demo user',
adaptableId: 'react demo',
plugins: [charts()] // 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>
);