Providing Adaptable Context

Summary

The adaptableContext property in Adaptable Options allows individual context to be passed into AdapTable
This can then be leveraged at runtime as required

The adaptableContext property allows developers to provide application-specific "context".

Note

This object is very similar in intention to the AG Grid Context object

The property is set by developers in the root of Adaptable Options.

It is subsequently passed by AdapTable into the BaseContext object.

Note

BaseContext is the base object supplied to most functions / callbacks in Adaptable Options
It is also in the xxxEventInfo object included in all Adaptable Events

This allows developers to provide data or services which they can subsequently leverage elsewhere in AdapTable, e.g. in Custom Predicates or Display Formats.

Hint

This demo illustrates using Adaptable Context by providing a TimeZone Service leveraged by Custom Predicates

adaptableContext

Record<string, any>

Custom Context for the Application

Set this property to provide custom context in your application.

// Provide a Date Time Service to access in other callbacks
const adaptableOptions: AdaptableOptions = {
  adaptableContext: {
    dateTimeService: dateTimeService
  }
}

Demo

The demo below shows the typical pattern for using adaptableContext:

Build an application object — here a currentUser plus a tiny userService that answers permission questions
Put that object on adaptableContext once, alongside the rest of AdaptableOptions
Retrieve it from any AdapTable callback that needs it

Providing Adaptable Context

Fork Fork

The userService.ts file exports a currentUser object and a tiny userService with a canPerform() permission helper — both are plain TypeScript, with no framework dependencies
adaptableOptions.ts then exposes them through adaptableContext and reads them back in three different places:
- Config-time — the userName option is set from currentUser.name and is displayed at the top-right of AdapTable
- Runtime — the Edit action button's hidden callback asks the userService whether the current user is allowed to edit
- Runtime — the Delete action button's hidden callback does the same for deleting
The default user has the Manager role, so Edit is visible but Delete is hidden

Try It Out

Edit userService.ts and change currentUser.role to 'Trader' (both buttons disappear) or 'Admin' (both buttons appear)
Add another consumer — for example, a Custom Predicate handler — and access currentUser / userService exactly the same way via adaptableContext

import {
  ActionColumnContext,
  AdaptableButton,
  AdaptableOptions,
} from '@adaptabletools/adaptable';
import {WebFramework} from './rowData';
import {currentUser, userService} from './userService';

/**
 * Three places consume the same `currentUser` + `userService` object:
 *
 *   1. `userName`            — config-time string, read directly
 *   2. `actionColumn['edit']` — runtime callback, reads from adaptableContext
 *   3. `actionColumn['delete']` — runtime callback, reads from adaptableContext
 *
 * Nothing here is framework-specific — exactly the same file runs in the
 * React, Vue, Angular and Vanilla Sandpack tabs.
 */
export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Adaptable Context Demo',

  // (1) Config-time usage — shown in the top-right of AdapTable
  userName: currentUser.name,

  // Single source of truth made available to every AdapTable callback
  adaptableContext: {
    currentUser,
    userService,
  },

  actionColumnOptions: {
    actionColumns: [
      {
        columnId: 'action',
        friendlyName: 'Actions',
        actionColumnButton: [
          // (2) Runtime usage — Edit is hidden for Traders
          {
            command: 'edit',
            tooltip: 'Edit row (Managers and Admins only)',
            hidden: (
              _button: AdaptableButton<ActionColumnContext>,
              {adaptableContext}: ActionColumnContext
            ) =>
              !adaptableContext.userService.canPerform(
                adaptableContext.currentUser,
                'edit'
              ),
          },
          // (3) Runtime usage — Delete is shown only to Admins
          {
            command: 'delete',
            tooltip: 'Delete row (Admins only)',
            hidden: (
              _button: AdaptableButton<ActionColumnContext>,
              {adaptableContext}: ActionColumnContext
            ) =>
              !adaptableContext.userService.canPerform(
                adaptableContext.currentUser,
                'delete'
              ),
          },
        ],
      },
    ],
  },

  initialState: {
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          Name: 'Standard Layout',
          TableColumns: [
            'action',
            'name',
            'language',
            'github_stars',
            'license',
            'created_at',
          ],
          AutoSizeColumns: true,
        },
      ],
    },
  },
};

PreviousAdding Holiday Calendars NextProviding Containers