Action Column Selects

Summary

A select Control is a dropdown that writes a value back to the row
It leverages the Select control provided by Adaptable Forms
options can be a static list or a function of the row (e.g. distinct values from the Grid)

The Action Column select Control is designed to allow run-time users to choose one value from a list — status, license, owner etc. — without needing to open a Form.

It uses the Select Control that is provided by the Adaptable Form.

Options

The options in the Select Control are provided by the options property.

The object is of type AdaptableFormFieldOption (label / value) and can be 2 types:

A hardcoded list can include values that are not currently in the Grid (e.g. 'Other')
A dynamic list (often calls getDistinctColumnValues in Grid API to fetch existing values)

Value & OnChange

The value and onChange properties work together:

valueis the current selection
onChange(value, context) writes it back

Hint

You can use placeholder to set what is shown when nothing is selected

Developer Guide

Defining a Select Control

actionColumnOptions: {
  actionColumns: [
    {
      columnId: 'license_select',
      friendlyName: 'Set License',
      controls: [
        {
          type: 'select',
          placeholder: 'License',
          options: [
            {label: 'MIT License', value: 'MIT License'},
            {label: 'BSD 3-Clause', value: 'BSD 3-Clause'},
            {label: 'Other', value: 'Other'},
          ],
          value: (context) => context.data.license,
          onChange: (value, context) => {
            context.rowNode.setDataValue('license', value);
          },
        },
      ],
    },
    {
      columnId: 'language_select',
      friendlyName: 'Set Language',
      controls: [
        {
          type: 'select',
          placeholder: 'Language',
          options: (context) =>
            context.adaptableApi.gridApi
              .getDistinctColumnValues('language')
              .filter((v) => v != null && v !== '')
              .map((v) => ({ label: String(v), value: String(v) })),
          value: (context) => context.data.language,
          onChange: (value, context) => {
            context.rowNode.setDataValue('language', value);
          },
        },
      ],
    },
  ],
},

Add Action Column Options

Put the Columns in actionColumnOptions.actionColumns.

Identify the Columns

Supply columnId and an optional friendlyName for each.

Set the Control type

Set type to 'select'.

An optional placeholder is shown when there is no value.

Provide the options

Each option is { label, value } — same shape as Adaptable Form field.

The return values can be:

hardcoded array - see License in 1st example (includes 'Other' which doesn't appear in thedata)
a function - see Language in 2nd example, which builds options from gridApi.getDistinctColumnValues

Bind the current value

value reads the current selection from the row.

Handle the change

onChange receives the chosen value and the Action Column context, and writes it back.

Action Columns: Select

Fork Fork

Set License uses a hardcoded options list (including Other, which may not appear in the data yet)
Set Language builds options dynamically from gridApi.getDistinctColumnValues('language')

import {AdaptableOptions} from '@adaptabletools/adaptable';
import {WebFramework} from './rowData';

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Action Column Select',
  actionColumnOptions: {
    actionColumns: [
      {
        columnId: 'license_select',
        friendlyName: 'Set License',
        settings: {width: 160, suppressMenu: true},
        controls: [
          {
            type: 'select',
            placeholder: 'License',
            value: context => context.data?.license ?? '',
            // Static list — can include values not currently in the Grid (e.g. Other)
            options: [
              {label: 'MIT License', value: 'MIT License'},
              {label: 'BSD 3-Clause', value: 'BSD 3-Clause'},
              {label: 'Other', value: 'Other'},
            ],
            onChange: (value, context) => {
              context.rowNode?.setDataValue('license', value);
            },
          },
        ],
      },
      {
        columnId: 'language_select',
        friendlyName: 'Set Language',
        settings: {width: 150, suppressMenu: true},
        controls: [
          {
            type: 'select',
            placeholder: 'Language',
            value: context => context.data?.language ?? '',
            // Function — options from distinct values currently in the language Column
            options: context =>
              context.adaptableApi.gridApi
                .getDistinctColumnValues('language')
                .filter(v => v != null && v !== '')
                .map(v => ({label: String(v), value: String(v)})),
            onChange: (value, context) => {
              context.rowNode?.setDataValue('language', value);
            },
          },
        ],
      },
    ],
  },
  initialState: {
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          Name: 'Standard Layout',
          TableColumns: [
            'name',
            'language',
            'language_select',
            'license',
            'license_select',
            'github_stars',
          ],
          AutoSizeColumns: true,
        },
      ],
    },
  },
};

Read-only

Loading demo…

AdapTable Resources

PreviousLinks NextCommands