AdapTable Version:

Framework:

AdapTable and AG Grid Div Elements

Summary

By default AdapTable assumes that developers will provide Divs of 'adaptable' and 'grid'
However, developers can configure custom Div elements to display AdapTable and AG Grid
These are only required when using AdapTable vanilla (i.e. not a framework version)
These are configured using the ContainerOptions section of AdapTable Options

The ContainerOptions section of Adaptable Options contains a series of properties relating to various Div elements that can be used in Adaptable.

Two of these are of particular importance when initialising AdapTable (in the vanilla / TypeScript version):

adaptableContainer
agGridContainer

Note

These are not required if using AdapTable React, AdapTable Angular or AdapTable Vue as they each work differently

Both these properties allow the associated container to be provided in one of 4 ways:

string — an element ID (resolved via document.getElementById)
AdaptableCssSelector — a CSS selector (resolved via document.querySelector)
HTMLElement — a direct reference to a DOM element
a JavaScript function which returns any one of the above

AdapTable Container

By default AdapTable should be provided in a Div with the Id of 'adaptable'.

If the default value is not used for this Div, then the bespoke Id of the div needs to be supplied using the adaptableContainer property.

Caution

Make sure if you provide an implementation for this property to supply a Div with the same name
If not supplied, you will see this error: There is no DIV with id=[Name] so cannot render Adaptable

adaptableContainer

Default: adaptable

AdaptableContainerValue

Div which contains AdapTable instance (AdapTable vanilla only)

AdaptableContainerValue

Name of the Div which contains the AdapTable instance (used in AdapTable vanilla version only).

The property returns an AdaptableContainerValue value either directly or via a function:

adaptableContainer?: | AdaptableContainerValue | ((context: InitContainerContext) => AdaptableContainerValue);

The AdaptableContainerValue can be one of the 3 values:

string — an element ID (resolved via document.getElementById)
AdaptableCSSSelector — a CSS selector (resolved via document.querySelector)
HTMLElement — a direct reference to a DOM element

If using a function, the property receives context of type InitContainerContext which is defined as follows:

Property	Description
adaptableContext	Custom application Context provided in `AdaptableOptions.adaptableContext`
adaptableId	Id of current AdapTable instance
adaptableStateKey	Current Adaptable State Key

Note

This is invoked before AdapTable initialises, so unlike most Context classes it does not contain the AdapTable API

const adaptableOptions: AdaptableOptions = {
    containerOptions: {
        adaptableContainer: 'myAdapTableContainer'
    }
}

AG Grid Container

By default AG Grid should be provided in a Div with the Id of 'grid'.

If the default value is not used for this Div, then the bespoke Id of the Div needs to be supplied using the agGridContainer property.

agGridContainer

Default: grid

AdaptableContainerValue

Div which contains AG Grid instance (AdapTable vanilla only)

AdaptableContainerValue

Name of the Div which contains the AG Grid instance (used in AdapTable vanilla version only).

The property returns an AdaptableContainerValue value either directly or via a function:

agGridContainer?: | AdaptableContainerValue | ((context: InitContainerContext) => AdaptableContainerValue);

The AdaptableContainerValue can be one of the 3 values:

string — an element ID (resolved via document.getElementById)
AdaptableCSSSelector — a CSS selector (resolved via document.querySelector)
HTMLElement — a direct reference to a DOM element

If using a function, the property receives context of type InitContainerContext which is defined as follows:

Property	Description
adaptableContext	Custom application Context provided in `AdaptableOptions.adaptableContext`
adaptableId	Id of current AdapTable instance
adaptableStateKey	Current Adaptable State Key

Note

This is invoked before AdapTable initialises, so unlike most Context classes it does not contain the AdapTable API

const adaptableOptions: AdaptableOptions = {
    containerOptions: {
        agGridContainer: 'myAGGridContainer'
    }
}

Deep Dive

Using a Shadow DOM

If using a package like stencil which uses a shadow DOM, agGridContainer and adaptableContainer should be specified as elements, rather than strings.

If scoped: true is set, then to retrieve references to vendor grid and adaptable container elements, use:

this.el.shadowRoot.querySelector(...)

If scoped: false is set, then it should be:

this.el.querySelector(...)

So the resulting code might look like this:

containerOptions.agGridContainer = this.el.querySelector('#grid')
containerOptions.adaptableContainer = this.el.querySelector('#adaptable')

PreviousUser Name NextLatest Version

Framework: