Editing in AdapTable | AdapTable Blog

Super fast Data edit

import {
  AdaptableOptions,
  ActionColumnContext,
  AdaptableButton,
  CellUpdateRequest,
  ActionColumnButton,
  SmartEditOperationContext,
  RowFormColumnContext,
  AdaptableColumn,
  CellEditableContext,
  GridCell,
  CustomEditColumnValuesContext,
} from '@adaptabletools/adaptable';
import {WebFramework} from './rowData';

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Editing in AdapTable',
  rowFormOptions: {
    autoHandle: true,
    disableInlineEditing: false,
    includeColumnInRowForm: (rowFormColumnContext: RowFormColumnContext) => {
      const column: AdaptableColumn = rowFormColumnContext.adaptableColumn;
      return column.columnId == 'id' ? false : true;
    },
  },
  actionColumnOptions: {
    actionColumns: [
      {
        columnId: 'edit',
        friendlyName: 'Actions',
        actionColumnButton: [
          {
            command: 'edit',
            label: ' Edit',
            buttonStyle: {
              variant: 'text',
              tone: 'success',
            },
          },
        ],
      },
      {
        columnId: 'update_stars',
        friendlyName: 'Update Stars',
        actionColumnButton: [
          {
            label: 'Up',
            buttonStyle: {
              variant: 'outlined',
              tone: 'info',
            },
            onClick: (
              button: ActionColumnButton<ActionColumnContext>,
              context: ActionColumnContext
            ) => {
              const rowData: WebFramework = context.rowNode?.data;
              const increment = rowData.language == 'TypeScript' ? 10 : 2;
              const cellUpdateRequest: CellUpdateRequest = {
                columnId: 'github_stars',
                newValue: rowData.github_stars + increment,
                primaryKeyValue: context.primaryKeyValue,
                rowNode: context.rowNode,
              };
              context.adaptableApi.gridApi.setCellValue(cellUpdateRequest);
            },
          },
          {
            label: 'Down',
            buttonStyle: {
              variant: 'outlined',
              tone: 'warning',
            },
            onClick: (
              button: ActionColumnButton<ActionColumnContext>,
              context: ActionColumnContext
            ) => {
              const rowData: WebFramework = context.rowNode?.data;
              const increment = rowData.language == 'TypeScript' ? 10 : 2;
              const cellUpdateRequest: CellUpdateRequest = {
                columnId: 'github_stars',
                newValue: rowData.github_stars - increment,
                primaryKeyValue: context.primaryKeyValue,
                rowNode: context.rowNode,
              };
              context.adaptableApi.gridApi.setCellValue(cellUpdateRequest);
            },
          },
        ],
      },
    ],
  },
  dataChangeHistoryOptions: {
    activeByDefault: true,
  },
  editOptions: {
    showSelectCellEditor: context => {
      return (
        context.column.columnId === 'language' ||
        context.column.columnId === 'license'
      );
    },
    isCellEditable: (cellEditableContext: CellEditableContext) => {
      const gridCell: GridCell = cellEditableContext.gridCell;
      if (!gridCell || !gridCell.column) {
        return false;
      }
      if (
        gridCell.column.columnId === 'language' &&
        gridCell.displayValue !== 'HTML'
      ) {
        return true;
      }
      if (
        gridCell.column.columnId === 'week_issue_change' &&
        gridCell.rawValue > 0
      ) {
        return true;
      }
      return cellEditableContext.defaultColDefEditableValue;
    },
    customEditColumnValues: (
      customEditColumnValuesContext: CustomEditColumnValuesContext
    ) => {
      if (customEditColumnValuesContext.column.columnId === 'language') {
        return [
          ...customEditColumnValuesContext.defaultValues,
          {label: 'Python', value: 'Python'},
          {label: 'XML', value: 'XML'},
          {label: 'CSS', value: 'CSS'},
        ];
      }
      return customEditColumnValuesContext.defaultValues;
    },
    smartEditCustomOperations: [
      {
        name: 'Power',
        operation: (context: SmartEditOperationContext) => {
          return Math.pow(context.currentCell.rawValue, context.smartEditValue);
        },
      },
    ],
  },
  userInterfaceOptions: {
    editableCellStyle: {
      BorderColor: 'LightYellow',
      BorderRadius: 6,
    },
    editedCellStyle: {
      BackColor: 'LightYellow',
      ForeColor: 'Brown',
    },
  },
  initialState: {
    Theme: {CurrentTheme: 'dark'},
    Dashboard: {
      Tabs: [
        {
          Name: 'Edit',
          Toolbars: ['SmartEdit', 'BulkUpdate', 'DataChangeHistory'],
        },
      ],
    },
    FlashingCell: {
      FlashingCellDefinitions: [
        {
          Name: 'flashingCell-numeric-anyChange',
          Scope: {
            DataTypes: ['number'],
          },
          Rule: {
            BooleanExpression: 'ANY_CHANGE()',
          },
        },
      ],
    },
    PlusMinus: {
      PlusMinusNudges: [
        {
          Name: 'plusMinus-github_stars-TypeScript',
          Scope: {
            ColumnIds: ['github_stars'],
          },
          Rule: {
            BooleanExpression: '[language] = "TypeScript"',
          },
          NudgeValue: 10,
        },
        {
          Name: 'plusMinus-github_stars-Normal',
          Scope: {
            ColumnIds: ['github_stars'],
          },
          NudgeValue: 2,
        },
      ],
    },
    Shortcut: {
      Shortcuts: [
        {
          Name: 'shortcut-K-multiply-1000',
          Scope: {
            ColumnIds: ['github_watchers'],
          },
          ShortcutKey: 'K',
          ShortcutOperation: 'Multiply',
          ShortcutValue: 1000,
        },
      ],
    },
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          Name: 'Standard Layout',
          TableColumns: [
            'edit',
            'name',
            'language',
            'github_stars',
            'update_stars',
            'week_issue_change',
            'github_watchers',
            'license',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
          ],
          AutoSizeColumns: true,
        },
      ],
    },
  },
};

This blog post illustrates how AdapTable facilitates swift and safe data entry.

It is based around a small demo that contains many of the editing-related features and functionalities provided in AdapTable including:

Important

The demo uses only existing AdapTable functionality, UI components and API methods

Smart Edit
Bulk Update
Shortcut - enable mathematical operations when shortcut key is clicked
Plus Minus - allows users to configure "Nudge Rules" for when + or - are pressed on the keyboard
Select Editor
Action Column - special columns that contain buttons (which can be used for data entry)
Row Forms
Data Change History

Smart Edit

The Smart Edit module allows users to apply a single edit to multiple, numeric cells, using a mathematical operation.

There are four Smart Edit Operations supplied by AdapTable:

Addition
Subtraction
Multiplication
Division

In addition developers are able to provide Custom Smart Edit Operations if required.

We do that in this demo by providing a Power operation:

editOptions: {
  smartEditCustomOperations: [
  {
    name: 'Power',
    operation: (context: SmartEditOperationContext) => {
      return Math.pow(context.currentCell.rawValue, context.smartEditValue);
    },
  }],
}

We leverage the Adaptable Ready Event - which is fired when AdapTable has initialised - to make Power the current operation and set the smart edit value to 2:

export const onAdaptableReady = ({adaptableApi}: AdaptableReadyInfo) => {
  adaptableApi.smartEditApi.setCustomSmartEditOperation('Power');
  adaptableApi.smartEditApi.setSmartEditValue(2);
};

Bulk Update

AdapTable also provides a Bulk Update module which facilitates updating multiple cells in one step to the same value.

Note

Bullk Update controls display a dropdown listing all distinct column values to facilitate quick editing
Alternatively, users can provide a new value which is not currently in the Grid

Shortcut

Another data entry Module provided by AdapTable is Shortcuts.

Hint

Shortcuts help to avoid "fat finger" issues by providing an easy way to accurately edit numeric data

A Shortcut consists of an alphabet keystroke which when entered into a numeric cell automatically converts into a mathemetical operation using the existing cell contents.

In our Demo we added a Shortcut of 'K' multiplying values in Github Watchers column by 1000:

Shortcut: {
  Shortcuts: [
    {
      Name: 'shortcut-K-multiply-1000',
      Scope: { ColumnIds: ['github_watchers'] },
      ShortcutKey: 'K',
      ShortcutOperation: 'Multiply',
      ShortcutValue: 1000,
    }],
},

Plus Minus

The Plus Minus module is used to update numeric cells in response to keyboard input:

the plus keyboard key causes an increment of the cell's value
the minus keyboard key causes a decrement of the cell's value

Hint

This is ideal for situations where data needs to be edited incredibly quickly (e.g. if marking to market)

In our demo we have applied 2 Plus Minus Nudge Rules to the Github Stars column:

Note

One Plus Minus Nudge contains a condition, so the Nudge only applies where the rule returns true
The other Nudge has no condition so is applied in all rows where the Conditional Nudge is inactive

PlusMinus: {
  PlusMinusNudges: [
    {
      Name: 'plusMinus-github_stars-TypeScript',
      Scope: { ColumnIds: ['github_stars'] },
      Rule: { BooleanExpression: '[language] = "TypeScript"' },
      NudgeValue: 10,
    },
    {
      Name: 'plusMinus-github_stars-Normal',
      Scope: { ColumnIds: ['github_stars'] },
      NudgeValue: 2,
    }],
},

Action Column

The functionality we provide in the Plus Minus rules for the Github Stars can also be achieved using Action Columns.

Action Columns are special columns which display a Button(s) with a user-defined action.

Hint

The buttons can do anything but one frequent use case is to edit a cell in an adjacent Column

Our demo contains an Update Stars Action Column which contains Up and Down buttons that update the Github Stars column (using same rules as provided for Plus Minus Nudges above).

actionColumnOptions: {
  actionColumns: [
    {
      columnId: 'update_stars',
      friendlyName: 'Update Stars',
      actionColumnButton: [
        {
          label: 'Up',
          buttonStyle: { variant: 'outlined', tone: 'info' },
          onClick: (button: ActionColumnButton<ActionColumnContext>, context: ActionColumnContext) => {
            const rowData: WebFramework = context.rowNode?.data;
            const increment = rowData.language == 'TypeScript' ? 10 : 2;
            const cellUpdateRequest: CellUpdateRequest = {
              columnId: 'github_stars',
              newValue: rowData.github_stars + increment,
              primaryKeyValue: context.primaryKeyValue,
              rowNode: context.rowNode,
            };
            context.adaptableApi.gridApi.setCellValue(cellUpdateRequest);
          },
        },
        {
          label: 'Down',
          buttonStyle: { variant: 'outlined', tone: 'warning' },
          onClick: ( button: ActionColumnButton<ActionColumnContext>, context: ActionColumnContext) => {
            const rowData: WebFramework = context.rowNode?.data;
            const increment = rowData.language == 'TypeScript' ? 10 : 2;
            const cellUpdateRequest: CellUpdateRequest = {
              columnId: 'github_stars',
              newValue: rowData.github_stars - increment,
              primaryKeyValue: context.primaryKeyValue,
              rowNode: context.rowNode,
            };
            context.adaptableApi.gridApi.setCellValue(cellUpdateRequest);
          },
        }],
    },],
},

Cell Editors

AdapTable provides 4 Cell Editors so that data can can be quickly and safely entered into AG Grid:

Editor	Which Columns	When Used
Select (Dropdown) Editor	All	If configured
Numeric Cell Editor	Numeric	Always
Date Picker	Date	Always
Percentage Cell Editor	Numeric	With % Rendering

In the demo we choose to display the Select Editor when editing the Language and License columns:

editOptions: {
  showSelectCellEditor: context => {
    return (context.column.columnId === 'language' || context.column.columnId === 'license');
  },
}

Custom Edit Values

By default the Select Editor will display all the distinct values in the Column, and the run-time simply needs to select the required value from the list that automatically appears.

However it is possible to provide a different set of values to display in the select editor if required.

In the demo we provide extra options to display in the Language Column's Select Editor:

editOptions: {
  customEditColumnValues: (customEditColumnValuesContext: CustomEditColumnValuesContext) => {
    if (customEditColumnValuesContext.column.columnId === 'language') {
      return [
        ...customEditColumnValuesContext.defaultValues,
        {label: 'Python', value: 'Python'},
        {label: 'XML', value: 'XML'},
        {label: 'CSS', value: 'CSS'},
      ];
    }
    return customEditColumnValuesContext.defaultValues;
  },
}

Note

The additional Language Column options are also available when using Bulk Update components
Likewise, you will see these values when editing the Column in a Row Form (see below)

Row Forms

AdapTable provides Row Forms as an alternative to inline data editing.

Setting Editable Cells

AdapTable respects the AG Grid ColDef editable property to set if cells are editable or readonly.

But it also allows developers to override this, and set editability at Column or Cell level.

In this demo we set the Language and Issue Change Columns to be readonly but provide exceptions where Language is not "HTML" and Issue Change is positive.

editOptions: {
  isCellEditable: (cellEditableContext: CellEditableContext) => {
    const gridCell: GridCell = cellEditableContext.gridCell;
    if (gridCell.column.columnId === 'language' && gridCell.displayValue !== 'HTML') {
      return true;
    }
    if (gridCell.column.columnId === 'week_issue_change' && gridCell.rawValue > 0) {
      return true;
    }
    return cellEditableContext.defaultColDefEditableValue;
  },
},

Styling Editable Cells

AdapTable allows developers to visually indicate cell editability information to runtime users.

There are 3 similar functions which allow styles to be provided for:

editable Cells
readonly Cells
edited Cells

In this demo we provide 2 Styles one for editable Cells and one for edited Cells:

  userInterfaceOptions: {
    editableCellStyle: {
      BorderColor: 'LightYellow',
      BorderRadius: 6,
    },
    editedCellStyle: {
      BackColor: 'LightYellow',
      ForeColor: 'Brown',
    },
  },

Data Change History

AdapTable Resources

To Do