Fast Data Edits (e.g. Marking to Market)

Summary

Shows how to use Action Columns and Plus / Minus to edit data very quickly

This example illustrates 3 features in AdapTable that aid swift data entry:

Plus Minus - allows users to configure "Nudge Rules" for when + or - are pressed on the keyboard
Action Column - special columns that contain buttons (which can be used for data entry)
Shortcut - enable mathematical operations when shortcut key is clicked

Super fast Data edit

Fork Fork

In this demo we update the Github Stars column in 2 ways:
- Action Columns - the Update Stars column contains Up and Down buttons that update the Github Stars column
- Plus Minus - the Nudge Rules are attached directly to the Github Stars column
- Note: both Modules use same bespoke rules: we increment / decrement Github Stars column by 2, unless Language is TypeScript when we increment / decrement by 10 instead
We also added a Shortcut rule for the the Github Watchers column where tying in 'K' will multiply current cell value by 1,000

Expand to see Initial State and Options

We set the increments to use for the Plus Minus and Action Column rules

const normalIncremenentValue: number = 2;
const typeScriptIncremenentValue: number = 10;

We create the 2 Action Columns in Action Column Options:

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'
                ? typeScriptIncremenentValue
                : normalIncremenentValue;
            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'
                ? typeScriptIncremenentValue
                : normalIncremenentValue;
            const cellUpdateRequest: CellUpdateRequest = {
              columnId: 'github_stars',
              newValue: rowData.github_stars - increment,
              primaryKeyValue: context.primaryKeyValue,
              rowNode: context.rowNode,
            };
            context.adaptableApi.gridApi.setCellValue(cellUpdateRequest);
          },
        },
      ],
    },
  ],
},

We define the 2 Plus Minus Rules in Plus Minus section of Initial State:

PlusMinus: {
  PlusMinusNudges: [
    {
      Name: 'PlusMinus-1',
      Scope: {
        ColumnIds: ['github_stars'],
      },
      Rule: {
        BooleanExpression: '[language] = "TypeScript"',
      },
      NudgeValue: typeScriptIncremenentValue,
    },
    {
      Name: 'PlusMinus-2',
      Scope: {
        ColumnIds: ['github_stars'],
      },
      NudgeValue: normalIncremenentValue,
    },
  ],
},

And we define the Shortcut rule in Shortcut section of Initial State:

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

Try It Out

Press Up or Down buttons in Update Stars in first row and see Github Stars change by 2; do the same in 2nd row and note the change is 10
Press + or - keys in Github Stars in first row and see the cell value change by 2; do the same in 2nd row and note the change is 10
Type "5" and then "K" into an cell in the the Github Watchers column and see how the cell value changes to 5,000

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

const normalIncremenentValue: number = 2;
const typeScriptIncremenentValue: number = 10;
export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Fast Data Edit',
  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'
                  ? typeScriptIncremenentValue
                  : normalIncremenentValue;
              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'
                  ? typeScriptIncremenentValue
                  : normalIncremenentValue;
              const cellUpdateRequest: CellUpdateRequest = {
                columnId: 'github_stars',
                newValue: rowData.github_stars - increment,
                primaryKeyValue: context.primaryKeyValue,
                rowNode: context.rowNode,
              };
              context.adaptableApi.gridApi.setCellValue(cellUpdateRequest);
            },
          },
        ],
      },
    ],
  },
  initialState: {
    Theme: {CurrentTheme: 'dark'},
    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: typeScriptIncremenentValue,
        },
        {
          Name: 'plusMinus-github_stars-Normal',
          Scope: {
            ColumnIds: ['github_stars'],
          },
          NudgeValue: normalIncremenentValue,
        },
      ],
    },
    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: [
            'name',
            'language',
            'github_stars',
            'update_stars',
            'week_issue_change',
            'github_watchers',
            'license',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
          ],
          AutoSizeColumns: true,
        },
      ],
    },
  },
};

PreviousIntegrated Examples NextUndoing Data Edits

Framework: