Feedback

This tutorial shows you how to build an emoji feedback cell using Handsontable’s editorFactory helper, with Handsontable CSS tokens for theme-aware styling and keyboard navigation.

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3
import { editorFactory } from 'handsontable/editors';
4
import { registerCellType } from 'handsontable/cellTypes';
5

6
// Register all Handsontable's modules.
7
registerAllModules();
8

9
/* start:skip-in-preview */
10
const data = [
11
  { feature: 'Dark Mode', category: 'UI', priority: 'High', feedback: '👍', votes: 124, status: 'Planned' },
12
  { feature: 'Bulk Edit', category: 'Core', priority: 'High', feedback: '👍', votes: 98, status: 'In Progress' },
13
  { feature: 'AI Suggestions', category: 'Beta', priority: 'Medium', feedback: '🤷', votes: 45, status: 'Research' },
14
  { feature: 'Offline Mode', category: 'Infra', priority: 'Low', feedback: '👎', votes: 12, status: 'Backlog' },
15
];
16
/* end:skip-in-preview */
17
// Get the DOM element with the ID 'example1' where the Handsontable will be rendered
18
const container = document.querySelector('#example1');
19
const cellDefinition = {
20
  editor: editorFactory({
21
    config: ['👍', '👎', '🤷'],
22
    value: '👍',
23
    shortcuts: [
24
      {
25
        keys: [['ArrowRight'], ['Tab']],
26
        callback: (editor, _event) => {
27
          let index = editor.config.indexOf(editor.value);
28

29
          index = index === editor.config.length - 1 ? 0 : index + 1;
30
          editor.setValue(editor.config[index]);
31

32
          return false; // Prevent default tabbing behavior
33
        },
34
      },
35
      {
36
        keys: [['ArrowLeft']],
37
        callback: (editor, _event) => {
38
          let index = editor.config.indexOf(editor.value);
39

40
          index = index === 0 ? editor.config.length - 1 : index - 1;
41
          editor.setValue(editor.config[index]);
42
        },
43
      },
44
    ],
45
    render: (editor) => {
46
      editor.input.innerHTML = editor.config
47
        .map((option) => `<button class="${editor.value === option ? 'active' : ''}">${option}</button>`)
48
        .join('');
49
    },
50
    init: (editor) => {
51
      editor.input = document.createElement('DIV');
52
      editor.input.classList.add('feedback-editor');
53
      editor._openedAt = 0;
54
      editor.input.addEventListener('click', (event) => {
55
        // Ignore synthetic click events that Android fires right after the editor
56
        // opens — they land on the button that just appeared at the touch position.
57
        if (Date.now() - editor._openedAt < 300) {
58
          return;
59
        }
60
        if (event.target instanceof HTMLButtonElement) {
61
          editor.setValue(event.target.innerText);
62
          editor.finishEditing();
63
        }
64
      });
65
      editor.render(editor);
66
    },
67
    afterOpen: (editor) => {
68
      editor._openedAt = Date.now();
69
    },
70
    beforeOpen: (editor, { originalValue, cellProperties }) => {
71
      editor.setValue(originalValue);
72
    },
73
  }),
74
};
75

76
registerCellType('feedback', cellDefinition);
77

78
// Define configuration options for the Handsontable
79
const hotOptions = {
80
  data,
81
  colHeaders: ['Feature', 'Category', 'Priority', 'Feedback', 'Votes', 'Status'],
82
  autoRowSize: true,
83
  rowHeaders: true,
84
  autoWrapRow: true,
85
  height: 'auto',
86
  width: '100%',
87
  headerClassName: 'htLeft',
88
  columns: [
89
    { data: 'feature', type: 'text', width: 200 },
90
    { data: 'category', type: 'text', width: 90 },
91
    { data: 'priority', type: 'text', width: 100 },
92
    { data: 'feedback', width: 100, type: 'feedback' },
93
    { data: 'votes', type: 'numeric', width: 60 },
94
    { data: 'status', type: 'text', width: 120 },
95
  ],
96
  licenseKey: 'non-commercial-and-evaluation',
97
};
98

99
// Initialize the Handsontable instance with the specified configuration options
100
// eslint-disable-next-line no-unused-vars
101
const hot = new Handsontable(container, hotOptions);

1
import Handsontable from "handsontable/base";
2
import { registerAllModules } from "handsontable/registry";
3
import { CellProperties } from "handsontable/settings";
4
import { BaseEditor } from "handsontable/editors/baseEditor";
5
import { editorFactory } from "handsontable/editors";
6
import { registerCellType } from 'handsontable/cellTypes';
7
// Register all Handsontable's modules.
8
registerAllModules();
9

10
/* start:skip-in-preview */
11

12
const data = [
13
  { feature: "Dark Mode", category: "UI", priority: "High", feedback: "👍", votes: 124, status: "Planned" },
14
  { feature: "Bulk Edit", category: "Core", priority: "High", feedback: "👍", votes: 98, status: "In Progress" },
15
  { feature: "AI Suggestions", category: "Beta", priority: "Medium", feedback: "🤷", votes: 45, status: "Research" },
16
  { feature: "Offline Mode", category: "Infra", priority: "Low", feedback: "👎", votes: 12, status: "Backlog" },
17
];
18

19
/* end:skip-in-preview */
20

21
// Get the DOM element with the ID 'example1' where the Handsontable will be rendered
22
const container = document.querySelector("#example1")!;
23

24
const cellDefinition: Pick<
25
  CellProperties,
26
  "renderer" | "validator" | "editor"
27
> = {
28
  editor: editorFactory<
29
    { input: HTMLDivElement; value: string; config: string[] }
30
  >({
31
    config: ["👍", "👎", "🤷"],
32
    value: "👍",
33
    shortcuts: [
34
      {
35
        keys: [["ArrowRight"], ["Tab"]],
36
        callback: (editor, _event) => {
37
          let index = editor.config.indexOf(editor.value);
38
          index = index === editor.config.length - 1 ? 0 : index + 1;
39
          editor.setValue(editor.config[index]);
40
          return false; // Prevent default tabbing behavior
41
        },
42
      },
43
      {
44
        keys: [["ArrowLeft"]],
45
        callback: (editor, _event) => {
46
          let index = editor.config.indexOf(editor.value);
47
          index = index === 0 ? editor.config.length - 1 : index - 1;
48
          editor.setValue(editor.config[index]);
49
        },
50
      },
51
    ],
52
    render: (editor) => {
53
      editor.input.innerHTML = editor.config
54
        .map(
55
          (option) =>
56
            `<button class="${editor.value === option ? "active" : ""}">${option}</button>`,
57
        )
58
        .join("");
59
    },
60
    init: (editor) => {
61
      editor.input = document.createElement("DIV") as HTMLDivElement;
62
      editor.input.classList.add("feedback-editor");
63
      editor._openedAt = 0;
64
      editor.input.addEventListener("click", (event) => {
65
        // Ignore synthetic click events that Android fires right after the editor
66
        // opens — they land on the button that just appeared at the touch position.
67
        if (Date.now() - editor._openedAt < 300) {
68
          return;
69
        }
70
        if (event.target instanceof HTMLButtonElement) {
71
          editor.setValue(event.target.innerText);
72
          editor.finishEditing();
73
        }
74
      });
75
      editor.render(editor);
76
    },
77
    afterOpen: (editor) => {
78
      editor._openedAt = Date.now();
79
    },
80
    beforeOpen: (editor, { originalValue, cellProperties }) => {
81
      editor.setValue(originalValue);
82
    },
83
  }),
84
};
85

86
registerCellType('feedback', cellDefinition as BaseEditor);
87

88
// Define configuration options for the Handsontable
89
const hotOptions: Handsontable.GridSettings = {
90
  data,
91
  colHeaders: ["Feature", "Category", "Priority", "Feedback", "Votes", "Status"],
92
  autoRowSize: true,
93
  rowHeaders: true,
94
  autoWrapRow: true,
95
  height: "auto",
96
  width: "100%",
97
  headerClassName: "htLeft",
98
  columns: [
99
    { data: "feature", type: "text", width: 200 },
100
    { data: "category", type: "text", width: 90 },
101
    { data: "priority", type: "text", width: 100 },
102
    { data: "feedback", width: 100, type: "feedback" },
103
    { data: "votes", type: "numeric", width: 60 },
104
    { data: "status", type: "text", width: 120 },
105
  ],
106
  licenseKey: "non-commercial-and-evaluation",
107
};
108

109
// Initialize the Handsontable instance with the specified configuration options
110
// eslint-disable-next-line no-unused-vars
111
const hot = new Handsontable(container, hotOptions);

1
.feedback-editor {
2
  display: flex;
3
  gap: var(--ht-gap, 4px);
4
  width: 100%;
5
  height: 100%;
6
  box-sizing: border-box !important;
7
  padding: var(--ht-cell-vertical-padding, 4px) var(--ht-cell-horizontal-padding, 8px);
8
  background-color: var(--ht-cell-editor-background-color, #ffffff);
9
  box-shadow: inset 0 0 0 var(--ht-cell-editor-border-width, 2px)
10
    var(--ht-cell-editor-border-color, #1a42e8),
11
    0 0 var(--ht-cell-editor-shadow-blur-radius, 0) 0
12
    var(--ht-cell-editor-shadow-color, transparent);
13
  border: none;
14
  border-radius: 0;
15
}
16

17
.feedback-editor button {
18
  display: block;
19
  background: var(--ht-background-color, #ffffff);
20
  color: var(--ht-foreground-color, #000000);
21
  border: 1px solid var(--ht-border-color, #e0e0e0);
22
  border-radius: var(--ht-border-radius, 4px);
23
  padding: 0;
24
  margin: 0;
25
  height: 100%;
26
  width: 33%;
27
  font-size: var(--ht-font-size, 14px);
28
  text-align: center;
29
  cursor: pointer;
30
}
31

32
.feedback-editor button:hover {
33
  background: var(--ht-border-color, #e0e0e0);
34
}
35

36
.feedback-editor button.active,
37
.feedback-editor button.active:hover {
38
  background: var(--ht-accent-color, #1a42e8);
39
  color: #ffffff;
40
  border-color: var(--ht-accent-color, #1a42e8);
41
}

Overview

This guide shows how to create a feedback editor cell using emoji buttons. Use it for status indicators or any scenario where users choose from a small set of visual options.

Difficulty: Beginner Time: ~15 minutes Libraries: None (pure HTML)

What You’ll Build

A cell that:

Displays emoji feedback buttons (rounded) when editing
Shows the selected emoji when viewing
Uses Handsontable CSS tokens for theme-aware styling
Supports keyboard navigation (arrow keys, Tab)
Provides click-to-select functionality
Works without any external libraries

Prerequisites

None! This uses only native HTML and JavaScript features.

Import Dependencies

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3
import { editorFactory } from 'handsontable/editors';
4
import { registerCellType } from 'handsontable/cellTypes';
5

6
registerAllModules();

What we’re NOT importing:

No date libraries
No UI component libraries
No external emoji libraries
Handsontable only.

Add CSS Styling

Create a separate CSS file for the editor styles. This uses Handsontable CSS custom properties (tokens) so the editor automatically adapts to custom themes and dark mode.

1
.feedback-editor {
2
  display: flex;
3
  gap: var(--ht-gap, 4px);
4
  width: 100%;
5
  height: 100%;
6
  box-sizing: border-box !important;
7
  padding: var(--ht-cell-vertical-padding, 4px) var(--ht-cell-horizontal-padding, 8px);
8
  background-color: var(--ht-cell-editor-background-color, #ffffff);
9
  box-shadow: inset 0 0 0 var(--ht-cell-editor-border-width, 2px)
10
    var(--ht-cell-editor-border-color, #1a42e8),
11
    0 0 var(--ht-cell-editor-shadow-blur-radius, 0) 0
12
    var(--ht-cell-editor-shadow-color, transparent);
13
  border: none;
14
  border-radius: 0;
15
}
16

17
.feedback-editor button {
18
  background: var(--ht-background-color, #ffffff);
19
  color: var(--ht-foreground-color, #000000);
20
  border: 1px solid var(--ht-border-color, #e0e0e0);
21
  border-radius: var(--ht-border-radius, 4px);
22
  padding: 0;
23
  margin: 0;
24
  height: 100%;
25
  width: 33%;
26
  font-size: var(--ht-font-size, 14px);
27
  text-align: center;
28
  cursor: pointer;
29
}
30

31
.feedback-editor button:hover {
32
  background: var(--ht-border-color, #e0e0e0);
33
}
34

35
.feedback-editor button.active,
36
.feedback-editor button.active:hover {
37
  background: var(--ht-accent-color, #1a42e8);
38
  color: #ffffff;
39
  border-color: var(--ht-accent-color, #1a42e8);
40
}

Handsontable tokens used:

--ht-cell-editor-border-color / --ht-cell-editor-border-width - blue border matching native editors
--ht-cell-editor-background-color - editor background
--ht-cell-vertical-padding / --ht-cell-horizontal-padding - consistent cell padding
--ht-background-color / --ht-foreground-color - base button colors
--ht-border-color - button borders and hover state
--ht-accent-color - active/selected button highlight
--ht-border-radius - button corner rounding
--ht-font-size / --ht-gap - consistent sizing

Editor - Initialize (`init`)

Create the DOM structure with emoji buttons, this function will be called only once.

1
init(editor) {
2
  editor.input = document.createElement('DIV') as HTMLDivElement;
3
  editor.input.classList.add('feedback-editor');
4
  editor._openedAt = 0;
5

6
  editor.input.addEventListener('click', (event) => {
7
    // Ignore synthetic click events that Android fires right after the editor
8
    // opens — they land on the button that just appeared at the touch position.
9
    if (Date.now() - editor._openedAt < 300) {
10
      return;
11
    }
12
    if (event.target instanceof HTMLButtonElement) {
13
      editor.setValue(event.target.innerText);
14
      editor.finishEditing();
15
    }
16
  });
17

18
  editor.render(editor);
19
}

What’s happening:

Create a div container for the buttons
Add the feedback-editor CSS class (all styling is in the CSS file)
Add click handler to detect button clicks
When a button is clicked, set the value and finish editing
Call render to create the initial button layout

Editor - Render Function

Create buttons dynamically based on the config, using CSS classes instead of inline styles.
```
1
render(editor) {
2
  editor.input.innerHTML = editor.config
3
    .map((option) =>
4
      `<button class="${editor.value === option ? 'active' : ''}">${option}</button>`
5
    )
6
    .join('');
7
}
```
What’s happening:
- Generate HTML for each button from config array
- Add active class to the currently selected button
- The .active CSS class applies --ht-accent-color as background
- Each button takes 33% width with rounded corners (--ht-border-radius)

Editor - Keyboard Shortcuts

Add arrow key navigation to cycle through options.

1
shortcuts: [
2
  {
3
    keys: [['ArrowRight']],
4
    callback: (editor, _event) => {
5
      let index = editor.config.indexOf(editor.value);
6

7
      index = index === editor.config.length - 1 ? 0 : index + 1;
8
      editor.setValue(editor.config[index]);
9
    }
10
  },
11
  {
12
    keys: [['ArrowLeft']],
13
    callback: (editor, _event) => {
14
      let index = editor.config.indexOf(editor.value);
15

16
      index = index === 0 ? editor.config.length - 1 : index - 1;
17
      editor.setValue(editor.config[index]);
18
    }
19
  }
20
]

What’s happening:

ArrowRight: Move to next option (wraps to first if at end)
ArrowLeft: Move to previous option (wraps to last if at start)
Finds current index in config array
Updates value and triggers render automatically

Keyboard navigation benefits:

Fast selection without mouse
Accessible for keyboard-only users
Intuitive left/right navigation

Editor – Custom Tab Key Behavior

By default, pressing Tab in Handsontable saves the cell and moves the selection horizontally, following your layout direction. In this example, Tab cycles through feedback options — the same as the arrow keys — without moving to another cell. The editor’s shortcuts option handles this by returning false in the callback to prevent the default action (saving and moving to the next cell).
```
1
shortcuts: [
2
  {
3
    keys: [['ArrowRight'], ['Tab']],
4
    callback: (editor, _event) => {
5
      let index = editor.config.indexOf(editor.value);
6

7
      index = index === editor.config.length - 1 ? 0 : index + 1;
8
      editor.setValue(editor.config[index]);
9

10
      return false; // Prevent default tabbing behavior
11
    },
12
  },
13
]
```
How it works:
- Listens for Tab when the editor is active
- Moves to the next option in config (wraps around at the end)
- Updates the editor’s value and button highlight
- Returning false blocks Handsontable’s built-in tab handler, so editing stays in place
Editor - Before Open Hook

Initialize the editor with the current cell value when editing starts.
```
1
beforeOpen(editor, { originalValue, cellProperties }) {
2
  editor.setValue(originalValue);
3
}
```
What’s happening:
- Called when editor is about to open
- Receives the current cell value as originalValue
- Sets the editor’s value to match the cell
- This ensures the correct button is highlighted when editing starts

Complete Cell Definition

1
const cellDefinition = {
2
  editor: editorFactory<{ input: HTMLDivElement; value: string; config: string[] }>({
3
    config: ['👍', '👎', '🤷'],
4
    value: '👍',
5
    shortcuts: [
6
      {
7
        keys: [['ArrowRight'], ['Tab']],
8
        callback: (editor, _event) => {
9
          let index = editor.config.indexOf(editor.value);
10

11
          index = index === editor.config.length - 1 ? 0 : index + 1;
12
          editor.setValue(editor.config[index]);
13

14
          return false;
15
        },
16
      },
17
      {
18
        keys: [['ArrowLeft']],
19
        callback: (editor, _event) => {
20
          let index = editor.config.indexOf(editor.value);
21

22
          index = index === 0 ? editor.config.length - 1 : index - 1;
23
          editor.setValue(editor.config[index]);
24
        },
25
      },
26
    ],
27
    render: (editor) => {
28
      editor.input.innerHTML = editor.config
29
        .map(
30
          (option) =>
31
            `<button class="${editor.value === option ? 'active' : ''}">${option}</button>`,
32
        )
33
        .join('');
34
    },
35
    init: (editor) => {
36
      editor.input = document.createElement('DIV') as HTMLDivElement;
37
      editor.input.classList.add('feedback-editor');
38
      editor._openedAt = 0;
39
      editor.input.addEventListener('click', (event) => {
40
        if (Date.now() - editor._openedAt < 300) {
41
          return;
42
        }
43
        if (event.target instanceof HTMLButtonElement) {
44
          editor.setValue(event.target.innerText);
45
          editor.finishEditing();
46
        }
47
      });
48
      editor.render(editor);
49
    },
50
    afterOpen: (editor) => {
51
      editor._openedAt = Date.now();
52
    },
53
    beforeOpen: (editor, { originalValue, cellProperties }) => {
54
      editor.setValue(originalValue);
55
    },
56
  }),
57
};

What’s happening:

config: Array of emoji options (👍, 👎, 🤷)
value: Default/initial value
shortcuts: Keyboard navigation (ArrowLeft/ArrowRight cycle options, Tab cycles and prevents default)
render: Creates button HTML with active CSS class for the selected option
init: Sets up the container with feedback-editor class and click handler
beforeOpen: Initializes editor with the current cell value

Note: No custom renderer needed! Handsontable’s default renderer will display the emoji value in the cell. All visual styling is handled by the CSS file using Handsontable tokens.

Register and Use in Handsontable

1
registerCellType('feedback', cellDefinition);
2

3
const container = document.querySelector('#example1')!;
4

5
const hotOptions: Handsontable.GridSettings = {
6
  data: [
7
    { feature: 'Dark Mode', category: 'UI', priority: 'High', feedback: '👍', votes: 124, status: 'Planned' },
8
    { feature: 'Bulk Edit', category: 'Core', priority: 'High', feedback: '👍', votes: 98, status: 'In Progress' },
9
    { feature: 'AI Suggestions', category: 'Beta', priority: 'Medium', feedback: '🤷', votes: 45, status: 'Research' },
10
    { feature: 'Offline Mode', category: 'Infra', priority: 'Low', feedback: '👎', votes: 12, status: 'Backlog' },
11
  ],
12
  colHeaders: ['Feature', 'Category', 'Priority', 'Feedback', 'Votes', 'Status'],
13
  autoRowSize: true,
14
  rowHeaders: true,
15
  autoWrapRow: true,
16
  height: 'auto',
17
  width: '100%',
18
  headerClassName: 'htLeft',
19
  columns: [
20
    { data: 'feature', type: 'text', width: 200 },
21
    { data: 'category', type: 'text', width: 90 },
22
    { data: 'priority', type: 'text', width: 100 },
23
    { data: 'feedback', width: 100, type: 'feedback' },
24
    { data: 'votes', type: 'numeric', width: 60 },
25
    { data: 'status', type: 'text', width: 120 },
26
  ],
27
  licenseKey: 'non-commercial-and-evaluation',
28
};
29

30
const hot = new Handsontable(container, hotOptions);

Key configuration:

registerCellType('feedback', cellDefinition) - Registers the editor as a reusable cell type
type: 'feedback' - Applies the cell type to the Feedback column
headerClassName: 'htLeft' - Left-aligns all column headers

How It Works - Complete Flow

Initial Render: Cell displays the emoji value (👍, 👎, or 🤷)
User Double-Clicks or Enter: Editor opens over cell showing three rounded buttons with the Handsontable blue border
Button Display: All options visible, current value highlighted using --ht-accent-color
User Interaction:
- Click a button: Selects value and closes editor
- Press ArrowLeft/ArrowRight: Cycles through options
- Press Tab: Cycles through options (stays in editor)
- Enter key saves value and closes editor
Visual Feedback: Selected button highlighted with accent color
Save: Value saved to cell
Editor Closes: Cell shows selected emoji

Enhancements

More Feedback Options

Add more emoji options by extending the config array and adjusting the button width in CSS:
```
1
config: ['👍', '👎', '🤷', '❤️', '🔥', '⭐'],
```

Dynamic Config from Cell Properties

Make options configurable per column:

1
beforeOpen: (editor, { cellProperties }) => {
2
  if (cellProperties.feedbackOptions) {
3
    editor.config = cellProperties.feedbackOptions;
4
  }
5

6
  editor.setValue(editor.originalValue || editor.value);
7
},
8

9
// Usage
10
columns: [{
11
  data: 'feedback',
12
  type: 'feedback',
13
  feedbackOptions: ['👍', '👎', '❤️', '🔥']
14
}]

Add tooltips to buttons:

1
render: (editor) => {
2
  const tooltips = { '👍': 'Positive', '👎': 'Negative', '🤷': 'Neutral' };
3

4
  editor.input.innerHTML = editor.config
5
    .map((option) =>
6
      `<button class="${editor.value === option ? 'active' : ''}" title="${tooltips[option] || ''}">${option}</button>`
7
    )
8
    .join('');
9
}

Text Labels Instead of Emojis

Use text buttons for clarity:
```
1
config: ['Positive', 'Negative', 'Neutral'],
```

Accessibility

Keyboard navigation:

Tab: Cycles through feedback options (stays in editor)
ArrowLeft / ArrowRight: Cycles through options
Enter: Saves value and closes editor
Escape: Cancels editing
Click: Direct selection

What you learned

You built an emoji feedback cell editor using Handsontable’s editorFactory helper. You used Handsontable CSS custom properties to style the editor in a theme-aware way, and registered the result as a reusable cell type with registerCellType.

Next steps

Feedback (React) - The same pattern using React’s EditorComponent.
Feedback Editor (Angular) - The Angular version using HotCellEditorAdvancedComponent.
Star Rating - Another custom editor built with editorFactory and SVG stars.

Feedback

Overview

What You’ll Build

Prerequisites

Import Dependencies

Add CSS Styling

Editor - Initialize (init)

Editor - Render Function

Editor - Keyboard Shortcuts

Editor – Custom Tab Key Behavior

Editor - Before Open Hook

Complete Cell Definition

Register and Use in Handsontable

How It Works - Complete Flow

Enhancements

More Feedback Options

Dynamic Config from Cell Properties

Tooltip on Hover

Text Labels Instead of Emojis

Accessibility

What you learned

Next steps

Editor - Initialize (`init`)