AdapTable Version:

Framework:

Shortcuts

Summary

Shortcuts ensure that numeric data is edited accurately and quicky into AG Grid
They allow users to avoid "fat finger" issues when editing data quickly
They consist of 4 main elements:
- Which Columns can accept the Shortcut
- What key will apply the Shortcut
- What Operation will be applied when the Key is pressed
- What Value will be applied
This allows users to provide a Shortcut where clicking 'M' in a Price column will multiply by 1000

Shortcuts ensure that numeric data is edited accurately and quicky into AG Grid.

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

Using Shortcuts

Fork Fork

This demo has 2 Shortcuts defined:
- All numeric columns will multiply by 1,000 when k is clicked
- The Github Stars column will increment by 1 when p is clicked

Expand to see the Shortcut Definitions

initialState: {
  Shortcut: {
    Shortcuts: [
      {
        Name: 'Shortcut-K-1',
        Scope: {DataTypes: ['number']},
        ShortcutKey: 'K',
        ShortcutOperation: 'Multiply',
        ShortcutValue: 1000,
      },
      {
        Name: 'Shortcut-P-1',
        Scope: {ColumnIds: ['github_stars']},
        ShortcutKey: 'P',
        ShortcutOperation: 'Add',
        ShortcutValue: 1,
      },
    ],
  },
},

Try It Out

Double-click any numeric cell to start editing it and then type k to multiply by 1.000
Double-click a cell in the GitHub Stars column to start editing it and then type p to add 1

Applying Shortcuts

Shortcuts are applied by pressing the key identified as the ShortcutKey in a Shortcut in a numeric cell editor.

AdapTable will check if the key press is a valid Shortcut and, if it is, perform the mathematical calculation.

For example, a Shortcut of k with an operation of Multiply by 1000 would convert an initial cell value of 5 into 5,000 if the k key is pressed on the keyboard.

Creating Shortcuts

Shortcuts can be managed at runtime via the Shortcut section of the Settings Panel.

This lists the details of all existing Shortcuts in Adaptable State together with options to:

create (via the Shortcut Wizard)
edit (via the Shortcut Wizard)
delete
suspend
share (if Team Sharing is running)

UI Step by Step Guide

Using the Shortcut Wizard

Shortcuts with an Entitlement of ReadOnly can be applied but Users cannot manage or suspend them.

Configuring Shortcuts

Shortcuts can be provided at design-time through Shortcut Initial Adaptable State.

Developer Guide

Providing a Shortcut in Initial Adaptable State

There are 5 stages to defining a Shortcut object:

const initialState: InitialState = {
 Shortcut: {
    Shortcuts: [
    {
      // 'k' multiplies all numeric cells by 1,000
      Name: 'Shortcut-M-1',
      Scope: { DataTypes: ['number'] },
      ShortcutKey: 'm',
      ShortcutValue: 1000,
      ShortcutOperation: 'Multiply',
    },
    {
      // 'v' adds 20% VAT to the price, amount columns
      Name: 'Shortcut-V-1',
      Scope: { ColumnIds: ['price', 'amount'] },
      ShortcutKey: 'v',
      ShortcutValue: 1.2,
      ShortcutOperation: 'Multiply',
    },
  ]
 },
};

Provide a Name for the Shortcut

Choose a unique name for the Shortuct

const initialState: InitialState = {
 Shortcut: {
    Shortcuts: [
    {
      // 'k' multiplies all numeric cells by 1,000
      Name: 'Shortcut-M-1',
      Scope: { DataTypes: ['number'] },
      ShortcutKey: 'm',
      ShortcutValue: 1000,
      ShortcutOperation: 'Multiply',
    },
    {
      // 'v' adds 20% VAT to the price, amount columns
      Name: 'Shortcut-V-1',
      Scope: { ColumnIds: ['price', 'amount'] },
      ShortcutKey: 'v',
      ShortcutValue: 1.2,
      ShortcutOperation: 'Multiply',
    },
  ]
 },
};

Provide Shortcut Scope

Specify which numeric columns can use the Shortcut.

Hint

Alternatively set a DataType of Number so that all numeric columns can use the Shortcut

Find Out More

See Guide to Column Scope for more on this commonly used object

const initialState: InitialState = {
 Shortcut: {
    Shortcuts: [
    {
      // 'k' multiplies all numeric cells by 1,000
      Name: 'Shortcut-M-1',
      Scope: { DataTypes: ['number'] },
      ShortcutKey: 'm',
      ShortcutValue: 1000,
      ShortcutOperation: 'Multiply',
    },
    {
      // 'v' adds 20% VAT to the price, amount columns
      Name: 'Shortcut-V-1',
      Scope: { ColumnIds: ['price', 'amount'] },
      ShortcutKey: 'v',
      ShortcutValue: 1.2,
      ShortcutOperation: 'Multiply',
    },
  ]
 },
};

Specify the Shortcut Key

Choose which keyboard key will trigger the Shortcut when it is entered into a (correctly scoped) numeric cell.

Caution

The specified value must be a letter of the alphabet.

const initialState: InitialState = {
 Shortcut: {
    Shortcuts: [
    {
      // 'k' multiplies all numeric cells by 1,000
      Name: 'Shortcut-M-1',
      Scope: { DataTypes: ['number'] },
      ShortcutKey: 'm',
      ShortcutValue: 1000,
      ShortcutOperation: 'Multiply',
    },
    {
      // 'v' adds 20% VAT to the price, amount columns
      Name: 'Shortcut-V-1',
      Scope: { ColumnIds: ['price', 'amount'] },
      ShortcutKey: 'v',
      ShortcutValue: 1.2,
      ShortcutOperation: 'Multiply',
    },
  ]
 },
};

Set the Value which will be applied by AdapTable

Set the value that will be used in conjunction with the current cell value and the mathematical operation to update the cell.

Caution

This property must be numeric

const initialState: InitialState = {
 Shortcut: {
    Shortcuts: [
    {
      // 'k' multiplies all numeric cells by 1,000
      Name: 'Shortcut-M-1',
      Scope: { DataTypes: ['number'] },
      ShortcutKey: 'm',
      ShortcutValue: 1000,
      ShortcutOperation: 'Multiply',
    },
    {
      // 'v' adds 20% VAT to the price, amount columns
      Name: 'Shortcut-V-1',
      Scope: { ColumnIds: ['price', 'amount'] },
      ShortcutKey: 'v',
      ShortcutValue: 1.2,
      ShortcutOperation: 'Multiply',
    },
  ]
 },
};

Choose a Mathematical Operation

Specify which mathematical operation will be used by AdapTable when the Shortcut is applied.

Available values are:

Add
Subtract
Multiply
Divide

Shortcuts in Row Forms

Row Forms are dynamically-created by AdapTable, designed for safe, controlled AG Grid data editing.

Any defined Shortcuts will also be operative in the numeric input in the Row Form.

Shortcuts in Row Forms

Fork Fork

This demo has a Shortcut defined for numeric columns - multiply by 1 Million when M is clicked
An Edit Action Colummn Command Button has been provided (which opens an Edit Row); the Shortcut is available in this form also

Try It Out

Click the Edit button to open the Edit Form
Type M into a numeric cell and not how it multiplies the input's value by 1 Million

FAQ

Can we apply shortcuts on non-numeric columns? No, Shortcuts only work for numeric columns.

Can we apply shortcuts on multiple columns simultaneously? No, Shortcuts work by intercepting a cell edit and only one cell in AG Grid can be edited at a time. Use Smart Edit or Bulk Update to update multiple cells.

Can I use Shortcut to bypass Data Validation? No, Shortcuts will not be allowed by AdapTable if the result breaks a Data Validation Rule.

Do Shortcuts operate in Row Forms? Yes you can use Shortcuts while editing data using a Row Form

PreviousTechnical Reference NextTechnical Reference

Framework: