Setting up Hotkeys

Summary

This page show how it is possible to use Hotkeys in AdapTable

It is easy to set up 'Hot Key's in Adaptable - whereby you can define actions to be taken in reaction to a given set of keystrokes.

This can be accomplished in 2 ways:

through a third party library (like Mousetrap)
by listening to the native 'keydown' event

Hot Keys

Fork Fork

In this demo we have set 4 Hot Keys - 2 using mousetrap (a 3rd party library which is not shipped with AdapTable) and 2 using the native keydown event
Each key press combination is tied to a different method in the Adaptable API to perform an action:
- 'alt+shift+s'- opens the Schedule popup (using Mousetrap)
- 'alt+shift+c'- opens the Calculated Column popup (using Mousetrap)
- 'metaKey+shiftKey+l'- opens the Layout popup (using keydown event)
- 'metaKey+shiftKey+s'- opens the Quick Search in Floating Mode (using keydown event)

Expand to see the key bindings

// Define 2 Hotkeys using mousetrap - a 3rd party library (which is not shipped with AdapTable))
Mousetrap.bind('alt+shift+s', () =>
  adaptableApi.scheduleApi.showSchedulePopup()
);
Mousetrap.bind('alt+shift+c', () =>
  adaptableApi.calculatedColumnApi.showCalculatedColumnPopup()
);

// Define 2 hotkeys using NO dependency - just the native 'keydown' event
document.addEventListener('keydown', event => {
  const {key, shiftKey, metaKey} = event;

  // metaKey is 'command key' on Mac and 'windows key' on PC
  if (key === 'l' && metaKey && shiftKey) {
    event.preventDefault();
    adaptableApi.layoutApi.showLayoutPopup();
  }
  if (key === 'q' && metaKey && shiftKey) {
    event.preventDefault();
    adaptableApi.quickSearchApi.showQuickSearchPopup();
  }

Try It Out

Try the different HotKey combinations or fork the project to add some of your own

PreviousProviding Containers NextSupporting AdapTable