React Wrapper

For users of the React framework who also use ag-Grid we have provided a React wrapper (adaptableblotter-react-aggrid) to make it easy to access the Adaptable Blotter (and ag-Grid) in a react-friendly manner.

Note

The React wrapper is available at the private Adaptable Blotter npm registry.

We have plans to add additional React wrappers using other supported vendor grids in the coming months.

Warning

The previous adaptableblotter-react package is now deprecated; this package should be used instead.

Sandbox Example

You can see an example of this wrapper here (this is the Sandbox).

It was created using create-react-app and is just a few lines of code.

Installation

To install the package simply type:

npm install @adaptabletools/adaptableblotter-react-aggrid

Tip

Only install the adaptableblotter-react-aggrid package - you don't need also to install the core adaptableblotter package.

You must install ag-Grid yourself (including the ag-Grid react wrapper - see below).

And you must, of course, have a valid ag-Grid licence.

Warning

The react wrapper has peer dependencies which you will need to install separately and additionally if they are not already present.  

At present the dependencies required are:

"peerDependencies": {
    "mathjs": "^5.1.1",
    "react": "=>16.8.6",
    "react-dom": ">=16.8.6",
    "ag-grid-community": ">=21.0.0",
    "ag-grid-enterprise": ">=21.0.0",
    "ag-grid-react": ">=21.0.0"
}

Creating the React Component

You create the AdaptableBlotterReact component the same way you would any other React component.

Mandatory Props

There are 2 props that you must include in the component. They are:

• gridOptions: The ag-Grid GridOptions object used for configuring the underlying vendor grid. You can populate this entirely how you wish though you must include columnDefs and rowData.

• blotterOptions: The AdaptableBlotterOptions object that contains all the settings required for managing the Adaptable Blotter. (See Blotter Options for more information).

  Note

  Unlike when using the vanilla version, you do not need to set the gridOptions object as the vendorGrid property in BlotterOptions as this is done automatically for you.

Optional Props

The AdaptableBlotterComponent additionally will accept the following optional props:

• onBlotterReady: (blotterApi: IBlotterApi) - gives you access to the Blotter API object

• render|children: ({ grid, blotter}) => ReactNode: can specify a custom render function that is called with the rendered grid and blotter, and can be used to change the layout of the component, and render additional elements or change blotter/grid order

• onThemeChanged: (blotter, arg: ThemeChangedEventArgs):

• onSearchChanged: (blotter, arg: SearchChangedEventArgs)

• onColumnStateChanged: (blotter, arg: ColumnStateChangedEventArgs)

• onAlertFired: (blotter, arg: AlertFiredEventArgs)

• onActionColumnClicked: (blotter, arg: ActionColumnClickedEventArgs)

• onSelectionChanged: (blotter, arg: SelectionChangedEventArgs)

Note

These last 6 props are react-friendly ways to access the corresponding events in the Event API.

Example 5. AdaptableBlotterReact Example

import React from 'react';
import { GridOptions } from 'ag-grid-community';
import AdaptableBlotterReact from '@adaptabletools/adaptableblotter-react-aggrid';
import { AdaptableBlotterOptions } from '@adaptabletools/adaptableblotter';
import '@adaptabletools/adaptableblotter-react-aggrid/index.scss';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-balham.css';

// create a GridOptions object, setting columnDefs and rowData
const gridOptions: GridOptions = {
    columnDefs: getColumnSchema(),
    rowData: getData(),
    // used to help Adaptable Blotter identify Column DataTypes
    columnTypes: {
        abColDefNumber: {},
        abColDefString: {},
        abColDefBoolean: {},
        abColDefDate: {},
        abColDefObject: {}
    }
};

// create an AdaptableBlotterOptions object
const adaptableBlotterOptions: AdaptableBlotterOptions = {
    primaryKey: 'tradeId',
    userName: 'demo user',
    blotterId: 'react demo'
};

export default () => (
    <AdaptableBlotterReact
        style={{ height: '100vh' }}
        gridOptions={gridOptions}
        blotterOptions={adaptableBlotterOptions}
    />
);