Custom AdapTable State

Summary

Bespoke data can be stored in AdapTable State by using the Application section

AdapTable provides the Application section of Initial Adaptable State for storing custom state.

Hint

Another, perhaps better, way of storing custom state is to use the saveState function (see below)

Application contains a simple set of key / value pairs designed for storing bespoke data.

A common use case is to store grid-related options which the User changed (e.g. Filter Bar visibility).

AdapTable takes care of the full persistence / retrieval of these objects as part of Adaptable State

Custom Data in Adaptable State

Fork Fork

This example shows how you can use Application section of Adaptable State to store custom data - using Supabase to persist data between sessions
2 properties are kept in Application State:
- the time when the button was clicked
- whether Filter bar is displayed
When the demo first loads the Grid shows with the Filter Bar hidden (as visibility was set to false in Filter Options) and with the Button showing loaded time
Each time Filter Bar Visibility is changed - either through Toolbar or via the Column Menu - an entry in Application State is updated
Likewise each time the Button is clicked the Application State is updated and the Button displays the time it was updated
Refreshing the grid will display the Grid with Filter bar as it was last set and the button showing the last time it was clicked

  stateOptions: {
    loadState: (config: AdaptableStateFunctionConfig) => {
      return supabaseService.loadAdaptableState(config.adaptableStateKey);
    },
            
    persistState: (
      state: Partial<AdaptableState>,
      config: AdaptableStateFunctionConfig
    ) => {
      return supabaseService.persistAdaptableState(
        state,
        config.adaptableStateKey,
        config.userName
      );
    }
  }

Try It Out

Refresh the page and note that the Filter Bar visibility is the same value to which it was last set and the Button time is not updated
Reset the persisted state and note that now the Filter Bar is hidden (as value from Filter Options is used) and the Button click count is reset

import {
  AdaptableApi,
  AdaptableButton,
  AdaptableOptions,
  AdaptableState,
  AdaptableStateFunctionConfig,
  ApplicationDataEntry,
  CustomToolbarButtonContext,
  DashboardButtonContext,
} from '@adaptabletools/adaptable';
import {SupabasePersistenceService} from './SupabasePersistenceService';

import {WebFramework} from './rowData';

const supabaseService = new SupabasePersistenceService();

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Application State Demo',
  adaptableStateKey: 'docs/ApplicationStateDemo',
  filterOptions: {
    columnFilterOptions: {
      showQuickFilter: false,
    },
  },
  dashboardOptions: {
    customDashboardButtons: [
      {
        label: 'Reset State',
        buttonStyle: {
          tone: 'neutral',
          variant: 'outlined',
        },
        onClick: (
          _button: AdaptableButton<DashboardButtonContext>,
          context: DashboardButtonContext
        ) => {
          supabaseService.clearAdaptableState(
            context.adaptableApi.optionsApi.getAdaptableStateKey(),
            context.userName
          );
          context.adaptableApi.applicationApi.editApplicationDataEntry({
            Key: 'TimesClicked',
            Value: 0,
          });
          context.adaptableApi.stateApi.reloadInitialState();
        },
      },
    ],
    customToolbars: [
      {
        name: 'TimesClickedButton',
        toolbarButtons: [
          {
            label: 'Click Me',
            buttonStyle: {
              tone: 'neutral',
              variant: 'outlined',
            },
            onClick: (
              button: AdaptableButton<CustomToolbarButtonContext>,
              context: CustomToolbarButtonContext
            ) => {
              let entry: ApplicationDataEntry | undefined =
                context.adaptableApi.applicationApi.getApplicationDataEntryByKey(
                  'TimesClicked'
                );
              if (entry) {
                entry.Value = entry.Value + 1;
                context.adaptableApi.applicationApi.editApplicationDataEntry(
                  entry
                );

                context.adaptableApi.systemStatusApi.setWarningSystemStatus(
                  'Times Clicked: ' + entry.Value
                );
              }
            },
          },
        ],
      },
    ],
  },
  stateOptions: {
    loadState: (config: AdaptableStateFunctionConfig) => {
      return supabaseService.loadAdaptableState(config.adaptableStateKey);
    },
    persistState: (
      state: Partial<AdaptableState>,
      config: AdaptableStateFunctionConfig
    ) => {
      return supabaseService.persistAdaptableState(
        state,
        config.adaptableStateKey,
        config.userName
      );
    },
  },

  initialState: {
    Dashboard: {
      Tabs: [
        {
          Name: 'Demo',
          Toolbars: ['ColumnFilter', 'TimesClickedButton', 'SystemStatus'],
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},

    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          Name: 'Standard Layout',
          TableColumns: [
            'name',
            'github_stars',
            'language',
            'github_watchers',
            'updated_at',
            'description',
            'created_at',
            'has_wiki',
            'pushed_at',
            'open_issues_count',
          ],
          AutoSizeColumns: true,
        },
      ],
    },
  },
};

Application State Config

The Application section of Adaptable State contains a collection of ApplicationDataEntries objects:

Property	Description
ApplicationDataEntries	Array of Key / Value pairs enabling custom data to be stored in Adaptable State.

ApplicationDataEntry

Each ApplicationDataEntry is a simple key / value pair:

Property	Description
Key	Key of Key / Value pair - always stored as a string
Value	Value of Key / Value pair (actual data being stored) - needs to stringifiable

Application API

The Application API section of Adaptable API contains functions for managing the Application section of AdapTable State:

Method	Description
addApplicationDataEntry(applicationDataEntry)	Adds new Application Data Entry
createApplicationDataEntry(key, value)	Creates new Application Data Entry with given Key and Value
deleteApplicationDataEntry(applicationDataEntry)	Deletes given Application Data Entry
editApplicationDataEntry(applicationDataEntry)	Edits given Application Data Entry
getApplicationDataEntries()	Retrieves all Key Value Pairs in Application state
getApplicationDataEntriesByValue(value)	Gets Application Data Entry with given value
getApplicationDataEntryByKey(key)	Gets Application Data Entry with given key
getApplicationState()	Retrieves Application section from Adaptable State

PreviousManaging AdapTable State NextSuspending AdapTable State

Framework: