Feedback

Overview

This guide shows how to create a feedback editor cell using emoji buttons (👍, 👎, 🤷) with React’s EditorComponent. The example uses a feature-roadmap table with a Feedback column; the editor supports quick selection, keyboard navigation (Arrow keys, Tab), and per-column configuration via external CSS.

Difficulty: Beginner Time: ~15 minutes Libraries: None

What You’ll Build

A cell that:

Displays emoji feedback buttons (👍, 👎, 🤷) when editing
Shows the selected emoji when viewing
Supports keyboard navigation (Arrow Left/Right and Tab to cycle options)
Provides click-to-select and closes the editor on choice
Uses React’s EditorComponent with render prop and external CSS (e.g. feedback-editor class)
Reads per-column options from cellProperties.config in onPrepare

Prerequisites

1
npm install @handsontable/react-wrapper

What you need:

React 16.8+ (hooks support)
@handsontable/react-wrapper package
Basic React knowledge (hooks, JSX)

Import Dependencies

1
import { useState, useEffect, useCallback, ComponentProps } from 'react';
2
import { HotTable, HotColumn, EditorComponent } from '@handsontable/react-wrapper';
3
import { registerAllModules } from 'handsontable/registry';
4

5
registerAllModules();

What we’re importing:

EditorComponent - React component for creating custom editors
HotTable and HotColumn - React wrapper components
React hooks for state management
Handsontable styles

Create the Editor Component

Create a React component that uses EditorComponent with the render prop pattern.

1
type EditorComponentProps = ComponentProps<typeof EditorComponent<string>>;
2

3
const FeedbackEditor = () => {
4
  const [config, setConfig] = useState<string[]>(['👍', '👎', '🤷']);
5

6
  return (
7
    <EditorComponent<string>>
8
      {({ value, setValue, finishEditing }) => (
9
        <div className="editor">
10
          {config.map((item) => (
11
            <button
12
              key={item}
13
              className={`button ${value === item ? 'active' : ''}`}
14
              onClick={() => {
15
                setValue(item);
16
                finishEditing();
17
              }}
18
            >
19
              {item}
20
            </button>
21
          ))}
22
        </div>
23
      )}
24
    </EditorComponent>
25
  );
26
};

What’s happening:

EditorComponent wraps your editor UI
The children prop is a function that receives editor state
value - Current editor value
setValue - Function to update the value
finishEditing - Function to save and close the editor
Render buttons for each option in the config
Highlight the active button based on current value

Key concepts:

Render prop pattern: EditorComponent uses a function as children
State management: value and setValue are provided by EditorComponent
React components: Use standard React patterns (JSX, className, onClick)

Add Styling

Style the editor container and buttons using CSS or inline styles.

1
const FeedbackEditor = () => {
2
  const [config, setConfig] = useState<string[]>(['👍', '👎', '🤷']);
3

4
  return (
5
    <EditorComponent<string>>
6
      {({ value, setValue, finishEditing }) => (
7
        <>
8
          <style>{`
9
            .editor {
10
              box-sizing: border-box;
11
              display: flex;
12
              gap: 3px;
13
              padding: 3px;
14
              background: rgb(238, 238, 238);
15
              border: 1px solid rgb(204, 204, 204);
16
              border-radius: 4px;
17
              height: 100%;
18
              width: 100%;
19
            }
20
            .button.active {
21
              background: #007bff;
22
              color: white;
23
            }
24
            .button:hover {
25
              background: #f0f0f0;
26
            }
27
            .button {
28
              background: #fff;
29
              color: black;
30
              border: none;
31
              padding: 0;
32
              margin: 0;
33
              height: 100%;
34
              width: 100%;
35
              font-size: 16px;
36
              font-weight: bold;
37
              text-align: center;
38
              cursor: pointer;
39
            }
40
          `}</style>
41
          <div className="editor">
42
            {config.map((item, _index, _array) => (
43
              <button
44
                key={item}
45
                className={`button ${value === item ? 'active' : ''}`}
46
                onClick={() => {
47
                  setValue(item);
48
                  finishEditing();
49
                }}
50
                style={{
51
                  width: `${100 / _array.length}%`
52
                }}
53
              >
54
                {item}
55
              </button>
56
            ))}
57
          </div>
58
        </>
59
      )}
60
    </EditorComponent>
61
  );
62
};

What’s happening:

Container uses flexbox for horizontal button layout
Buttons dynamically size based on config length
Active button has blue background
Hover effects for better UX

Key styling:

display: flex - Horizontal button layout
gap: 3px - Space between buttons
width: ${100 / _array.length}% - Dynamic button width
.active class - Highlights selected button

Read Config from Cell Properties

Use onPrepare to read per-column configuration.

1
const FeedbackEditor = () => {
2
  const [config, setConfig] = useState<string[]>(['👍', '👎', '🤷']);
3

4
  const onPrepare: EditorComponentProps['onPrepare'] = (
5
    _row,
6
    _column,
7
    _prop,
8
    _TD,
9
    _originalValue,
10
    cellProperties
11
  ) => {
12
    // Read config from column definition
13
    if (cellProperties.config) {
14
      setConfig(cellProperties.config as string[]);
15
    }
16
  };
17

18
  return (
19
    <EditorComponent<string> onPrepare={onPrepare}>
20
      {({ value, setValue, finishEditing }) => (
21
        // ... editor UI
22
      )}
23
    </EditorComponent>
24
  );
25
};

What’s happening:

onPrepare is called before the editor opens
cellProperties contains column-specific configuration
Read config from cellProperties.config
Update state to reflect column-specific options

Why this matters:

Different columns can have different options
One editor component, multiple configurations
Dynamic options based on column settings

Add Keyboard Shortcuts

Add keyboard navigation using the shortcuts prop.

1
const FeedbackEditor = () => {
2
  const [config, setConfig] = useState<string[]>(['👍', '👎', '🤷']);
3
  const [shortcuts, setShortcuts] = useState<EditorComponentProps['shortcuts']>([]);
4

5
  const getNextValue = useCallback((value: string) => {
6
    const index = config.indexOf(value);
7
    return index === config.length - 1 ? config[0] : config[index + 1];
8
  }, [config]);
9

10
  const getPrevValue = useCallback((value: string) => {
11
    const index = config.indexOf(value);
12
    return index === 0 ? config[config.length - 1] : config[index - 1];
13
  }, [config]);
14

15
  useEffect(() => {
16
    setShortcuts([
17
      {
18
        keys: [['ArrowRight'], ['Tab']],
19
        callback: ({ value, setValue }, _event) => {
20
          setValue(getNextValue(value));
21
          return false; // Prevent default Tab behavior
22
        }
23
      },
24
      {
25
        keys: [['ArrowLeft']],
26
        callback: ({ value, setValue }, _event) => {
27
          setValue(getPrevValue(value));
28
        }
29
      }
30
    ]);
31
  }, [config, getNextValue, getPrevValue]);
32

33
  return (
34
    <EditorComponent<string> shortcuts={shortcuts}>
35
      {({ value, setValue, finishEditing }) => (
36
        // ... editor UI
37
      )}
38
    </EditorComponent>
39
  );
40
};

What’s happening:

ArrowRight/Tab: Move to next option (wraps to first if at end)
ArrowLeft: Move to previous option (wraps to last if at start)
callback receives { value, setValue, finishEditing } as first parameter
Return false to prevent default behavior (e.g., Tab moving to next cell)

Keyboard navigation benefits:

Fast selection without mouse
Accessible for keyboard-only users
Intuitive left/right navigation
Tab cycles through options instead of moving cells

Complete Editor Component

Put it all together:

1
type EditorComponentProps = ComponentProps<typeof EditorComponent<string>>;
2

3
const FeedbackEditor = () => {
4
  const [config, setConfig] = useState<string[]>(['👍', '👎', '🤷']);
5
  const [shortcuts, setShortcuts] = useState<EditorComponentProps['shortcuts']>([]);
6

7
  const onPrepare: EditorComponentProps['onPrepare'] = (
8
    _row,
9
    _column,
10
    _prop,
11
    _TD,
12
    _originalValue,
13
    cellProperties
14
  ) => {
15
    if (cellProperties.config) {
16
      setConfig(cellProperties.config as string[]);
17
    }
18
  };
19

20
  const getNextValue = useCallback((value: string) => {
21
    const index = config.indexOf(value);
22
    return index === config.length - 1 ? config[0] : config[index + 1];
23
  }, [config]);
24

25
  const getPrevValue = useCallback((value: string) => {
26
    const index = config.indexOf(value);
27
    return index === 0 ? config[config.length - 1] : config[index - 1];
28
  }, [config]);
29

30
  useEffect(() => {
31
    setShortcuts([
32
      {
33
        keys: [['ArrowRight'], ['Tab']],
34
        callback: ({ value, setValue }, _event) => {
35
          setValue(getNextValue(value));
36
          return false;
37
        }
38
      },
39
      {
40
        keys: [['ArrowLeft']],
41
        callback: ({ value, setValue }, _event) => {
42
          setValue(getPrevValue(value));
43
        }
44
      }
45
    ]);
46
  }, [config, getNextValue, getPrevValue]);
47

48
  return (
49
    <EditorComponent<string> onPrepare={onPrepare} shortcuts={shortcuts}>
50
      {({ value, setValue, finishEditing }) => (
51
        <>
52
          <style>{`
53
            .editor {
54
              box-sizing: border-box;
55
              display: flex;
56
              gap: 3px;
57
              padding: 3px;
58
              background: rgb(238, 238, 238);
59
              border: 1px solid rgb(204, 204, 204);
60
              border-radius: 4px;
61
              height: 100%;
62
              width: 100%;
63
            }
64
            .button.active:hover,
65
            .button.active {
66
              background: #007bff;
67
              color: white;
68
            }
69
            .button:hover {
70
              background: #f0f0f0;
71
            }
72
            .button {
73
              background: #fff;
74
              color: black;
75
              border: none;
76
              padding: 0;
77
              margin: 0;
78
              height: 100%;
79
              width: 100%;
80
              font-size: 16px;
81
              font-weight: bold;
82
              text-align: center;
83
              cursor: pointer;
84
            }
85
          `}</style>
86
          <div className="editor">
87
            {config.map((item, _index, _array) => (
88
              <button
89
                key={item}
90
                className={`button ${value === item ? 'active' : ''}`}
91
                onClick={() => {
92
                  setValue(item);
93
                  finishEditing();
94
                }}
95
                style={{
96
                  width: `${100 / _array.length}%`
97
                }}
98
              >
99
                {item}
100
              </button>
101
            ))}
102
          </div>
103
        </>
104
      )}
105
    </EditorComponent>
106
  );
107
};

What’s happening:

State management: config and shortcuts managed with React hooks
onPrepare: Reads column-specific config
shortcuts: Keyboard navigation handlers
Render prop: Renders buttons based on config
Styling: CSS-in-JS for editor appearance

Use in Handsontable

Use the editor component in your HotTable:

1
const ExampleComponent = () => {
2
  return (
3
    <HotTable
4
      autoRowSize={true}
5
      rowHeaders={true}
6
      autoWrapRow={true}
7
      licenseKey="non-commercial-and-evaluation"
8
      height="auto"
9
      data={data}
10
      colHeaders={true}
11
    >
12
      <HotColumn
13
        width={250}
14
        editor={FeedbackEditor}
15
        config={['👍', '👎', '🤷']}
16
        data="feedback"
17
        title="Feedback"
18
      />
19
      <HotColumn
20
        width={250}
21
        editor={FeedbackEditor}
22
        config={['1', '2', '3', '4', '5']}
23
        data="stars"
24
        title="Rating (1-5)"
25
      />
26
    </HotTable>
27
  );
28
};

What’s happening:

editor={FeedbackEditor} - Assigns the editor component to the column
config={['👍', '👎', '🤷']} - Column-specific options
Same editor component, different configurations per column

Key features:

Reusable editor component
Per-column configuration
Type-safe with TypeScript

How It Works - Complete Flow

Initial Render: Cell displays the emoji value (👍, 👎, or 🤷)
User Double-Clicks or Enter: Editor opens, onPrepare reads column config
Editor Opens: EditorComponent positions container over cell
Button Display: All options visible, current value highlighted
User Interaction:
- Click a button → setValue(item) and finishEditing() called
- Press ArrowLeft/Right → Shortcut callback updates value
- Press Tab → Cycles through options (prevents default cell navigation)
Visual Feedback: Selected button highlighted in blue
User Confirms: Press Enter, click button, or click away
Save: Value saved to cell
Editor Closes: Cell shows selected emoji

Enhancements

Custom Renderer with Styling

Add a custom renderer to style the emoji display:

1
import { rendererFactory } from 'handsontable/renderers';
2

3
const cellDefinition = {
4
  renderer: rendererFactory(({ td, value }) => {
5
    td.innerHTML = `
6
      <div style="text-align: center; font-size: 1.5em; padding: 4px;">
7
        ${value || '🤷'}
8
      </div>
9
    `;
10
  })
11
};
12

13
// Use in HotColumn
14
<HotColumn
15
  editor={FeedbackEditor}
16
  renderer={cellDefinition.renderer}
17
  config={['👍', '👎', '🤷']}
18
  data="feedback"
19
/>

What’s happening:

Center-aligns the emoji
Increases font size for better visibility
Adds padding for spacing

More Feedback Options

Add more emoji options:

1
<HotColumn
2
  editor={FeedbackEditor}
3
  config={['👍', '👎', '🤷', '❤️', '🔥', '⭐']}
4
  data="feedback"
5
/>

The editor automatically adjusts button widths based on config length.

Custom Button Styling

Enhanced button appearance with CSS:

1
<style>{`
2
  .button {
3
    padding: 8px;
4
    border: 2px solid #ddd;
5
    background: white;
6
    color: #333;
7
    border-radius: 4px;
8
    cursor: pointer;
9
    font-size: 1.2em;
10
    transition: all 0.2s;
11
  }
12
  .button.active {
13
    border-color: #007bff;
14
    background: #007bff;
15
    color: white;
16
  }
17
  .button:hover {
18
    transform: scale(1.05);
19
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
20
  }
21
`}</style>

Dynamic Config from Cell Properties

The onPrepare hook already handles this! Just pass different configs:

1
<HotColumn
2
  editor={FeedbackEditor}
3
  config={['👍', '👎', '❤️', '🔥']}
4
  data="feedback"
5
/>

Add tooltips to buttons:

1
{config.map((item) => {
2
  const tooltips: Record<string, string> = {
3
    '👍': 'Positive feedback',
4
    '👎': 'Negative feedback',
5
    '🤷': 'Neutral feedback'
6
  };
7

8
  return (
9
    <button
10
      key={item}
11
      className={`button ${value === item ? 'active' : ''}`}
12
      onClick={() => {
13
        setValue(item);
14
        finishEditing();
15
      }}
16
      title={tooltips[item] || ''}
17
    >
18
      {item}
19
    </button>
20
  );
21
})}

Text Labels Instead of Emojis

Use text buttons for clarity:
```
1
<HotColumn
2
  editor={FeedbackEditor}
3
  config={['Positive', 'Negative', 'Neutral']}
4
  data="feedback"
5
/>
```
The editor works with any string values, not just emojis.

Using External CSS File

Move styles to a separate CSS file:

1
.editor {
2
  box-sizing: border-box;
3
  display: flex;
4
  gap: 3px;
5
  padding: 3px;
6
  background: rgb(238, 238, 238);
7
  border: 1px solid rgb(204, 204, 204);
8
  border-radius: 4px;
9
  height: 100%;
10
  width: 100%;
11
}
12

13
.button.active {
14
  background: #007bff;
15
  color: white;
16
}
17

18
.button:hover {
19
  background: #f0f0f0;
20
}
21

22
.button {
23
  background: #fff;
24
  color: black;
25
  border: none;
26
  padding: 0;
27
  margin: 0;
28
  height: 100%;
29
  width: 100%;
30
  font-size: 16px;
31
  font-weight: bold;
32
  text-align: center;
33
  cursor: pointer;
34
}

1
import './feedback-editor.css';
2

3
const FeedbackEditor = () => {
4
  // ... component code without <style> tag
5
};

Accessibility

React buttons are inherently accessible, but you can enhance them:

1
{config.map((item, index) => (
2
  <button
3
    key={item}
4
    className={`button ${value === item ? 'active' : ''}`}
5
    onClick={() => {
6
      setValue(item);
7
      finishEditing();
8
    }}
9
    aria-label={`${item} feedback option`}
10
    aria-pressed={value === item}
11
    tabIndex={value === item ? 0 : -1}
12
  >
13
    {item}
14
  </button>
15
))}

Keyboard navigation:

Tab: Navigate to editor (focuses active button)
Arrow Left/Right: Cycle through options (via shortcuts)
Enter: Select current option and finish editing
Escape: Cancel editing
Click: Direct selection

ARIA attributes:

aria-label: Describes each button
aria-pressed: Indicates selected state
tabIndex: Controls keyboard focus order

Performance Considerations

Why This Is Fast

React Virtual DOM: Efficient updates only when value changes
No External Libraries: Zero overhead beyond React
Efficient Re-renders: Only re-renders when config or value changes
Native Events: Browser-optimized click handlers

React Hooks Optimization

The useCallback and useEffect hooks ensure shortcuts are only recreated when config changes:

1
const getNextValue = useCallback((value: string) => {
2
  const index = config.indexOf(value);
3
  return index === config.length - 1 ? config[0] : config[index + 1];
4
}, [config]); // Only recreate if config changes
5

6
useEffect(() => {
7
  setShortcuts([...]);
8
}, [config, getNextValue, getPrevValue]); // Only update when dependencies change

TypeScript Support

EditorComponent is fully typed. You can specify the value type:

1
<EditorComponent<string>>
2
  {({ value, setValue, finishEditing }) => {
3
    // TypeScript knows value is string | undefined
4
    // TypeScript knows setValue accepts string
5
    return (
6
      // ... editor UI
7
    );
8
  }}
9
</EditorComponent>

For number-based feedback:

1
<EditorComponent<number>>
2
  {({ value, setValue, finishEditing }) => {
3
    // TypeScript knows value is number | undefined
4
    return (
5
      // ... editor UI
6
    );
7
  }}
8
</EditorComponent>

Best Practices

Use onPrepare for per-cell configuration - Access cellProperties to read custom options
Handle keyboard events properly - Use shortcuts for navigation
Call finishEditing() appropriately - When user confirms changes (Enter, blur, button click)
Keep render prop function simple - Extract complex logic into separate components or hooks
Use useCallback for helper functions - Prevents unnecessary re-renders
Update shortcuts in useEffect - Ensures shortcuts match current config

Congratulations! You’ve created a simple feedback editor with emoji buttons using React’s EditorComponent, perfect for quick feedback selection in your data grid!

Feedback

Overview

What You’ll Build

Prerequisites

Import Dependencies

Create the Editor Component

Add Styling

Read Config from Cell Properties

Add Keyboard Shortcuts

Complete Editor Component

Use in Handsontable

How It Works - Complete Flow

Enhancements

Custom Renderer with Styling

More Feedback Options

Custom Button Styling

Dynamic Config from Cell Properties

Tooltip on Hover

Text Labels Instead of Emojis

Using External CSS File

Accessibility

Performance Considerations

Why This Is Fast

React Hooks Optimization

TypeScript Support

Best Practices