Action Column Forms

Summary

A form Control opens an Adaptable Form in a popover
It is the same Form used in Alerts, Export Destinations, Data Sets and Custom Toolbars
getInitialData seeds the fields from the row
Form buttons receive context.formData plus the Action Column context

A form Control is for editing a few related fields without leaving the grid — counts, a status change, a short comment.

The form property is a standard AdaptableForm — the same object used for Alert messages, Custom Export Destinations, Data Sets and Custom Toolbar forms. See Adaptable Forms for full details on titles, fields, validation and buttons.

Use getInitialData to seed those fields from the row. Form buttons receive context.formData plus the Action Column context, so they can write back to the row.

Developer Guide

Defining a Form Control

actionColumnOptions: {
  actionColumns: [
    {
      columnId: 'edit_counts',
      friendlyName: 'Counts',
      controls: [
        {
          type: 'form',
          label: 'Edit',
          icon: {name: 'edit'},
          getInitialData: (context) => ({
            open_issues_count: context.data.open_issues_count,
            closed_issues_count: context.data.closed_issues_count,
            open_pr_count: context.data.open_pr_count,
            closed_pr_count: context.data.closed_pr_count,
          }),
          form: {
            title: 'Edit counts',
            fields: [
              {name: 'open_issues_count', label: 'Open Issues', fieldType: 'number'},
              {name: 'closed_issues_count', label: 'Closed Issues', fieldType: 'number'},
              {name: 'open_pr_count', label: 'Open PRs', fieldType: 'number'},
              {name: 'closed_pr_count', label: 'Closed PRs', fieldType: 'number'},
            ],
            buttons: [
              {
                label: 'Save',
                onClick: (_button, context) => {
                  [
                    'open_issues_count',
                    'closed_issues_count',
                    'open_pr_count',
                    'closed_pr_count',
                  ].forEach((field) => {
                    context.rowNode.setDataValue(
                      field,
                      Number(context.formData[field])
                    );
                  });
                },
              },
            ],
          },
        },
      ],
    },
  ],
},

Add Action Column Options

Put the Column in actionColumnOptions.actionColumns.

Identify the Column

Supply columnId and an optional friendlyName.

Set the Control type

Set type to 'form'. label and icon become the trigger that opens the popover.

Seed the Form

getInitialData copies values from the current row into the Form fields.

Define the fields

form.fields is a standard AdaptableForm field list.

Handle Save

Form buttons receive context.formData and can write back to the row.

Action Columns: Form

Fork Fork

Counts opens a Form seeded from Open / Closed Issues and Open / Closed PRs
Save writes the four values back to the row

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

const COUNT_FIELDS = [
  'open_issues_count',
  'closed_issues_count',
  'open_pr_count',
  'closed_pr_count',
] as const;

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Action Column Form',
  actionColumnOptions: {
    actionColumns: [
      {
        columnId: 'edit_counts',
        friendlyName: 'Counts',
        settings: {width: 100, suppressMenu: true},
        controls: [
          {
            type: 'form',
            label: 'Edit',
            icon: {name: 'edit'},
            getInitialData: context => ({
              open_issues_count: context.data?.open_issues_count ?? 0,
              closed_issues_count: context.data?.closed_issues_count ?? 0,
              open_pr_count: context.data?.open_pr_count ?? 0,
              closed_pr_count: context.data?.closed_pr_count ?? 0,
            }),
            form: {
              title: 'Edit counts',
              fields: [
                {
                  name: 'open_issues_count',
                  label: 'Open Issues',
                  fieldType: 'number',
                },
                {
                  name: 'closed_issues_count',
                  label: 'Closed Issues',
                  fieldType: 'number',
                },
                {
                  name: 'open_pr_count',
                  label: 'Open PRs',
                  fieldType: 'number',
                },
                {
                  name: 'closed_pr_count',
                  label: 'Closed PRs',
                  fieldType: 'number',
                },
              ],
              buttons: [
                {
                  label: 'Save',
                  buttonStyle: {variant: 'raised', tone: 'success'},
                  onClick: (_button, context: any) => {
                    COUNT_FIELDS.forEach(field => {
                      context.rowNode?.setDataValue(
                        field,
                        Number(context.formData[field])
                      );
                    });
                  },
                },
              ],
            },
          },
        ],
      },
    ],
  },
  initialState: {
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          Name: 'Standard Layout',
          TableColumns: [
            'name',
            'language',
            'open_issues_count',
            'closed_issues_count',
            'open_pr_count',
            'closed_pr_count',
            'edit_counts',
          ],
          AutoSizeColumns: true,
        },
      ],
    },
  },
};

Read-only

Loading demo…

AdapTable Resources

PreviousMenus NextCustom Action Columns