Skip to content

Latest commit

 

History

History
249 lines (156 loc) · 8.61 KB

File metadata and controls

249 lines (156 loc) · 8.61 KB

adaptable-angular-aggrid

Repository for the AdapTable Angular ag-Grid Wrapper which allows you to install, instantiate and reference AdapTable (using ag-Grid) in an "Angular-friendly" manner.

Upgrade Guide

Version 6 of AdapTable has introduced many new functionality and upgrades and also some new, exciting, ways of interacting with the product.

For more information please see the Version 6 Upgrade Guide

Installation

The Angular wrapper of AdapTable is distributed via the private npm registry https://registry.adaptabletools.com.

To gain access to this registry please follow these steps:

  1. Acquire a commercial AdapTable License - you can email [email protected] who will provide you with your unique credentials.

  2. Acquire a commercial AdapTable License - you can email [email protected], who will provide you with your unique credentials.

  3. Point your npm client to the correct registry for packages under the @adaptabletools scope

npm config set @adaptabletools:registry https://registry.adaptabletools.com

if you're using yarn

yarn config set @adaptabletools:registry https://registry.adaptabletools.com

  1. Login to the Adaptable private registry:
npm login --registry=https://registry.adaptabletools.com --scope=@adaptabletools
  1. Enter your credentials that was provided to you by the AdapTable support team:
  • login name
  • email
  • password
  1. Check you are logged-in correctly by using whoami:
npm whoami --registry=https://registry.adaptabletools.com

This should display the username you received as the current login on the private registry

this does not affect your username/login session on the public npm registry

  1. Install the AdapTable Angular Wrapper

npm i @adaptabletools/adaptable-angular-aggrid

you do not need to install the core AdapTable package also

  1. Make sure that all the Peer Dependencies are installed. These are currently:
"peerDependencies": {
    "@ag-grid-community/all-modules": "^22.1.1",
    "@ag-grid-community/angular": "^22.1.1",
    "mathjs": "^5.1.1",
    "@angular/common": ">=7.0.0",
    "@angular/core": ">=7.0.0",
}

you must install @ag-grid-community/all-modules and @ag-grid-community/angular packages

Plugins

AdapTable now includes plugins to reduce the download size of the 'core' project and to allow you to select only the functionality you want.

There are currently two plugins:

  • Charts (@adaptabletools/adaptable-charts-finance)

courtesy of Infragistics - provides Category, Pie, Doughnut, Sparkline and Financial charts.

  • Finance (@adaptabletools/adaptable-plugin-finance)

adds additional functionality of benefit only to advanced financial users.

Plugins Example

To add a plugin you need to do the following 3 steps (using the charts plugin as an example):

  1. Install the plugin as a separate package:

npm i @adaptabletools/adaptable-plugin-charts

  1. Import it into your code:

import charts from '@adaptable/adaptable-plugins-charts'

  1. Add it to the plugins property of AdaptableOptions:
const adaptableOptions: AdaptableOptions = {
  primaryKey: 'tradeId',
  adaptableId: 'Adaptable demo',
  ....
  plugins: [charts()]
};

agGrid Enterprise Modules

AdapTable uses ag-Grid v.22. This included a big change by introducing modularization, giving users more control over which functionality they want to use. AdapTable fully supports this new way of working.

If using any ag-Grid Enterprise modules, please make sure you have a valid ag-Grid licence

Enterprise Modules Example

To add an ag-Grid Enterprise follow these 3 steps (using Menus and RangeSelection as an example):

  1. Install the modules in npm:
npm i @ag-grid-enterprise/menu
npm i @ag-grid-enterprise/range-selection
  1. Import them into your code:
import { MenuModule } from '@ag-grid-enterprise/menu';
import { RangeSelectionModule } from '@ag-grid-enterprise/range-selection';
  1. Add them to the modules prop of the Adaptable Angular Component:
@Component({
  selector: 'adaptable-root',
  template: `
    <adaptable-angular-aggrid
      style="width: 100vw; height: 100vh;"
      [adaptableOptions]="adaptableOptions"
      [gridOptions]="gridOptions"
      [modules]="agGridModules"
    >
    </adaptable-angular-aggrid>
  `
})

export class AppComponent {
  public gridApi: GridApi;
  public agGridModules: Module[] = [MenuModule, RangeSelectionModule];
  ....
}

Angular Attributes

Mandatory

  • gridOptions

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

Unlike in the 'vanilla' version, you do not need to set the modules property of GridOptions as you will provide this through the modules prop

  • adaptableOptions

The AdaptableOptions object that contains all the settings and options required for managing AdapTable. See Developer Documentation for more details.

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

Optional

  • onAdaptableReady: (adaptableApi: AdaptableApi, vendorGrid: GridOptions)

An Adaptable event giving you access to the AdaptableApi object.
The api contains hundreds of methods providing full, safe, runtime access to all the functionality in AdapTable.
Also gives access to the underlying ag-Grid instance object. See Developer Documentation for more details.

  • modules Any ag-Grid Enterprise modules that you wish to include (see above)

Usage

In your app module, import AdaptableAngularAgGridModule module

import { AdaptableAngularAgGridModule } from '@adaptabletools/adaptable-angular-aggrid';

After that, you can use the ecomponent in your app

<adaptable-angular-aggrid
  style="height: 100vh"
  [adaptableOptions]="..."
  [gridOptions]="..."
  [onAdaptableReady]="..."
  [modules]="..."
>
</adaptable-angular-aggrid>

Styling and Theming

AdapTable provides 2 default themes ('Light' and 'Dark') but you can easily create your own custom themes (by using CSS Variables).

You always have to import the index.css file. This contains the structural styles AdapTable requires and, also, the (default) Light theme:

import "@adaptabletools/adaptable-angular-aggrid/index.css"

If you want to use the Dark theme, you will need, also, to import:

import "@adaptabletools/adaptable-angular-aggrid/index.css" // always needed
import "@adaptabletools/adaptable-angular-aggrid/themes/dark.css"

To find out how to your write your custom themes, provide custom icons - and about AdapTable styling generally - please read the Adaptable Theming and Styling Guide

Demo

For a standalone working example app of the Angular Wrapper, see the Angular Demo

To see AdapTable, more generally, in action visit our Demo Site. Here you can see a large number of AdapTable demos each showing a different feature, function or option in AdapTable (using dummy data sets).

Licences

A licence for AdapTable provides access to all product features as well as quarterly updates and enhancements through the lifetime of the licence, comprehensive support, and access to all 3rd party libraries.

Licences can be purchased individually, for a team (minimum 30 end-users), for an organisation or for integration into software for onward sale.

We can make a trial licence available for a short period of time to allow you to try out AdapTable for yourself.

Please contact [email protected] for more information.

Help

Further information about AdapTable is available at our Website and our Help Site

Developers can learn how to access AdapTable programmatically at AdapTable Developer Documentation

Support

For all support enquiries please email [email protected] or raise a ticket.