AdapTable Version:

Framework:

AdapTable Containers

Summary

Developers can configure custom Div elements that will be used by AdapTable
These are configured using the ContainerOptions section of AdapTable Options

The Container Options section of Adaptable Options contains a series of properties allowing developers to specify various Div elements that can be used in Adaptable.

These include DIVs for Alerts and System Status Messages, Popups and Transposed Grids.

Important

2 containers are also available allowing developers to provide custom div names for AdapTable and AG Grid
These are only required if using AdapTable vanilla - see Setting AdapTable & AG Grid Containers for more details

AdapTable provides properties in Container Options.

All properties allow the container to be provided in one 4 ways:

string — an element ID
AdaptableCssSelector — a CSS selector
HTMLElement — a direct reference to a DOM element
a JavaScript function which returns any one of the above

Deep Dive

Providing the Container Value

Each container property returns an object of type AdaptableContainerValue.

This can return one of 3 values:

string: an element ID - which isresolved via document.getElementById
AdaptableCssSelector: a CSS selector - resolved via document.querySelector
HTMLElement: a direct reference to a DOM element

If the property uses a function it receives an object of type ContainerContext and returns an AdaptableContainerValue.

The ContainerContext is defined as follows:

Property	Description
adaptableApi	Adaptable Api object
adaptableContext	Custom application Context provided in `AdaptableOptions.adaptableContext`
adaptableId	Id of current AdapTable instance
adaptableStateKey	Current Adaptable State Key
clientTimestamp	Time on user's computer
userName	Name of Current User

CSS Selector

The AdaptableCSSSelector object is used to locate a DOM element.

It contains a single selector property which is designed to target elements by CSS selectors (e.g. class, attribute, etc.) rather than elementID:

Property	Description
selector	CSS Selector that locates DOM element

The property can be used in multiple different ways, e.g.

selector: '#my-container'
selector: '.dashboard-panel'
selector: '[data-container="alerts"]' }

Alert Container

Alerts in AdapTable can be given a number of Alert behaviours.

One behaviour is to display details of the Alert in a Div elmement configured in the alertContainer property.

alertContainer

Default: undefined

AdaptableContainerValue

Div where Alerts can appear

AdaptableContainerValue

Name of the Div where Alerts can be displayed.

The property can be either the Id (string) of the Div or the HTMLElement itself.

And it can either be returned directly:

const adaptableOptions: AdaptableOptions = {
  containerOptions: {
    alertContainer: 'myAlertContainer',
  },
};

or via a function:

const adaptableOptions: AdaptableOptions = {
  containerOptions: {
    alertContainer: (context: ContainerContext) => {
      return document.getElementById('myAlertContainer');
    },
  },
};

AdapTable, by default, will display the Settings Panel and popups in the centre of the screen above the Grid.

If this is not required behaviour, the modalContainer property can specify an alternative location.

modalContainer

Default: undefined (middle of screen used)

AdaptableContainerValue

Div which contains AdapTable popups

AdaptableContainerValue

Name of the Div which contains the Settings Panel - and any other AdapTable popups.

The property can be either the Id (string) of the Div or the HTMLElement itself.

And it can either be returned directly:

const adaptableOptions: AdaptableOptions = {
  containerOptions: {
    modalContainer: 'myModalContainer',
  },
};

or via a function:

const adaptableOptions: AdaptableOptions = {
  containerOptions: {
    modalContainer: (context: ContainerContext) => {
      return document.getElementById('myModalContainer');
    },
  },
};

System Status Container

AdapTable offers System Status Messages which will display important messages to run time users.

These can be displayed in various locations in the AdapTable UI, including in a custom div specified by using the systemStatusContainer property.

systemStatusContainer

Default: undefined

AdaptableContainerValue

Div where System Status messages can appear

AdaptableContainerValue

Name of the Div where System Status messages can be displayed.

The property can be either the Id (string) of the Div or the HTMLElement itself.

And it can either be returned directly:

const adaptableOptions: AdaptableOptions = {
  containerOptions: {
    systemStatusContainer: 'mySystemStatusContainer',
  },
};

or via a function:

const adaptableOptions: AdaptableOptions = {
  containerOptions: {
    systemStatusContainer: (context: ContainerContext) => {
      return document.getElementById('mySystemStatusContainer');
    },
  },
};

Transposed View Container

AdapTable supports displaying a transposed view of AG Grid data.

By default AdapTable displays the transposed content (grid and column selector) in a popup above AG Grid.

However developers can choose to display the Transposed View in any container of their choice by using the transposedViewContainer property.

Note

Transposed View content is rendered directly into this container without the default popup window chrome
This means that, by default, no header or close button are displayed, and the window is not draggable

Caution

The container is responsible for its own lifecycle; removing it from the DOM will cleanly unmount the Transposed View

transposedViewContainer

Default: undefined

AdaptableContainerValue

Div where Transposed Views are displayed

AdaptableContainerValue

The property can be either the Id (string) of the Div or the HTMLElement itself.

And it can either be returned directly:

const adaptableOptions: AdaptableOptions = {
  containerOptions: {
    transposedViewContainer: 'myTransposedViewContainer',
  },
};

or via a function:

const adaptableOptions: AdaptableOptions = {
  containerOptions: {
    transposedViewContainer: (context: ContainerContext) => {
      return document.getElementById('myTransposedViewContainer');
    },
  },
};

Container Options Reference

This is the full list of properties available in Container Options:

Property	Description	Default
adaptableContainer	Div containing AdapTable; element Id, CSS Selector, HTMLElement, or function returning one of these	"adaptable"
agGridContainer	Div containing AG Grid instance; element Id, CSS Selector, HTMLElement, or function returning one of these.	"grid"
alertContainer	Div to display Alerts; elementId, CSS Selector, HTMLElement, or function returning one of these	undefined
modalContainer	Name of div where popups appear;element Id, CSS Selector, HTMLElement, or function returning one of these	undefined (centre of screen)
systemStatusContainer	Div to show System Status Messages; elementId, CSS Selector, HTMLElement, or function returning one of these	undefined
transposedViewContainer	Div to render a Transposed View; elementId, CSS Selector, HTMLElement, or function returning one of these	undefined (rendered in a draggable popup window)

PreviousProviding Adaptable Context NextUsing Hotkeys

Framework:

AdapTable Containers

Summary

Important

Deep Dive

Providing the Container Value

CSS Selector

Alert Container

alertContainer

Modal Container

modalContainer

System Status Container

systemStatusContainer

Transposed View Container

Note

Caution

transposedViewContainer

Container Options Reference