Color picker

This tutorial shows you how to integrate the Pickr color picker library as a custom Handsontable cell editor, with a swatch renderer and hex validation.

1
/* file: app.component.ts */
2
import { Component, ChangeDetectionStrategy, ElementRef, ViewChild } from '@angular/core';
3
import {
4
  GridSettings,
5
  HotCellEditorAdvancedComponent,
6
  HotCellRendererAdvancedComponent,
7
  HotTableModule
8
} from '@handsontable/angular-wrapper';
9
import Pickr from '@simonwep/pickr';
10
import '@simonwep/pickr/dist/themes/nano.min.css';
11

12
/* start:skip-in-preview */
13
const inputData = [
14
  { id: 640329, itemName: 'Lunar Core', itemNo: 'XJ-12', cost: 350000, valueStock: 700000 },
15
  { id: 863104, itemName: 'Zero Thrusters', itemNo: 'QL-54', cost: 450000, valueStock: 0 },
16
  { id: 395603, itemName: 'EVA Suits', itemNo: 'PM-67', cost: 150000, valueStock: 7500000 },
17
  { id: 679083, itemName: 'Solar Panels', itemNo: 'BW-09', cost: 75000, valueStock: 750000 },
18
  { id: 912663, itemName: 'Comm Array', itemNo: 'ZR-56', cost: 125000, valueStock: 0 },
19
  { id: 315806, itemName: 'Habitat Dome', itemNo: 'UJ-23', cost: 1000000, valueStock: 3000000 },
20
  { id: 954632, itemName: 'Oxygen Unit', itemNo: 'FK-87', cost: 600000, valueStock: 9000000 },
21
  { id: 734944, itemName: 'Processing Rig', itemNo: 'LK-13', cost: 350000, valueStock: 8750000 },
22
];
23
/* end:skip-in-preview */
24

25
const colorValidator = (value: string): boolean => /^#[0-9A-Fa-f]{6}$/.test(value);
26

27
@Component({
28
  standalone: true,
29
  selector: 'example1-color-renderer',
30
  changeDetection: ChangeDetectionStrategy.OnPush,
31
  template: `
32
    <div class="color-picker-cell">
33
      <span class="color-picker-swatch" [style.background]="value"></span>
34
    </div>`,
35
  styles: `
36
  :host { height: 100%; width: 100%; }
37
  .color-picker-cell { display: flex; align-items: center; justify-content: center; }
38
  .color-picker-swatch { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(0,0,0,0.15); }
39
  `,
40
})
41
export class ColorRendererComponent extends HotCellRendererAdvancedComponent<string> {}
42

43
@Component({
44
  standalone: true,
45
  selector: 'example1-color-picker-editor',
46
  template: `
47
    <div #editorContainer style="width:100%;height:100%;position:relative;">
48
      <input #colorInput class="color-picker-editor" type="text" readonly />
49
    </div>
50
  `,
51
  styles: `
52
  :host { width: 100%; height: 100%; }
53
  .color-picker-editor { width: 100%; height: 100%; border: none; outline: none; box-sizing: border-box !important; cursor: pointer; }
54
  `,
55
})
56
export class ColorPickerEditorComponent extends HotCellEditorAdvancedComponent<string> {
57
  @ViewChild('colorInput', { static: true }) colorInput!: ElementRef<HTMLInputElement>;
58
  @ViewChild('editorContainer', { static: true }) editorContainer!: ElementRef<HTMLElement>;
59

60
  private pickrInstance: Pickr | null = null;
61
  private pickrButton: HTMLButtonElement | null = null;
62
  private openedAt = 0;
63

64
  override afterOpen(): void {
65
    this.openedAt = Date.now();
66
    this.colorInput.nativeElement.value = this.value || '#000000';
67

68
    this.pickrButton = document.createElement('button');
69
    this.pickrButton.textContent = 'Open color picker';
70
    this.pickrButton.style.cssText = 'position:absolute;opacity:0;pointer-events:none;';
71
    this.editorContainer.nativeElement.appendChild(this.pickrButton);
72
    const button = this.pickrButton;
73

74
    this.pickrInstance = Pickr.create({
75
      el: button,
76
      theme: 'nano',
77
      default: this.value || '#000000',
78
      autoReposition: false,
79
      padding: 0,
80
      components: { preview: true, hue: true },
81
    });
82

83
    (this.pickrInstance as any)._root.root.style.height = '0';
84
    (this.pickrInstance as any)._root.root.style.overflow = 'hidden';
85

86
    this.pickrInstance.on('change', (color: { toHEXA: () => { toString: () => string } } | null) => {
87
      if (color) {
88
        const hex = color.toHEXA().toString();
89
        this.colorInput.nativeElement.value = hex;
90
        this.setValue(hex);
91
      }
92
    });
93

94
    this.pickrInstance.on('hide', () => {
95
      if (Date.now() - this.openedAt < 400) {
96
        this.pickrInstance?.show();
97
        return;
98
      }
99
      this.finishEdit.emit();
100
    });
101

102
    this.pickrInstance.show();
103

104
    requestAnimationFrame(() => {
105
      requestAnimationFrame(() => {
106
        const cellRect = this.editorContainer.nativeElement.getBoundingClientRect();
107

108
        if (cellRect && this.pickrInstance) {
109
          (this.pickrInstance as any)._root.app.style.top = `${cellRect.bottom}px`;
110
        }
111
      });
112
    });
113
  }
114

115
  override afterClose(): void {
116
    (this.pickrInstance as any)?._root.app.classList.remove('visible');
117
    this.pickrInstance?.hide();
118
    this.pickrInstance?.destroy();
119
    this.pickrInstance = null;
120
    this.pickrButton?.remove();
121
    this.pickrButton = null;
122
  }
123

124
  override onFocus(): void {
125
    this.colorInput.nativeElement.focus();
126
  }
127
}
128

129
@Component({
130
  standalone: true,
131
  imports: [HotTableModule],
132
  selector: 'example1-color-picker',
133
  template: `<div><hot-table [data]="data" [settings]="gridSettings"></hot-table></div>`,
134
})
135
export class AppComponent {
136
  readonly data = inputData.map((el) => ({
137
    ...el,
138
    color: `#${Math.round(0x1000000 + 0xffffff * Math.random()).toString(16).slice(1).toUpperCase()}`,
139
  }));
140

141
  readonly gridSettings: GridSettings = {
142
    autoRowSize: true,
143
    rowHeaders: true,
144
    autoWrapRow: true,
145
    height: 'auto',
146
    width: '100%',
147
    colHeaders: ['ID', 'Item Name', 'Item Color', 'Item No.', 'Cost', 'Value in Stock'],
148
    columns: [
149
      { data: 'id', type: 'numeric', width: 80, headerClassName: 'htLeft' },
150
      { data: 'itemName', type: 'text', width: 200, headerClassName: 'htLeft' },
151
      {
152
        data: 'color',
153
        headerClassName: 'htLeft',
154
        editor: ColorPickerEditorComponent,
155
        renderer: ColorRendererComponent,
156
        validator: colorValidator,
157
      } as any,
158
      { data: 'itemNo', type: 'text', width: 100, headerClassName: 'htLeft' },
159
      { data: 'cost', type: 'numeric', width: 70, headerClassName: 'htLeft' },
160
      { data: 'valueStock', type: 'numeric', width: 130, headerClassName: 'htRight' },
161
    ],
162
  };
163
}
164
/* end-file */
165

166
/* file: app.config.ts */
167
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
168
import { registerAllModules } from 'handsontable/registry';
169
import { HOT_GLOBAL_CONFIG, HotGlobalConfig, NON_COMMERCIAL_LICENSE } from '@handsontable/angular-wrapper';
170

171
registerAllModules();
172

173
export const appConfig: ApplicationConfig = {
174
  providers: [
175
    provideZoneChangeDetection({ eventCoalescing: true }),
176
    {
177
      provide: HOT_GLOBAL_CONFIG,
178
      useValue: { license: NON_COMMERCIAL_LICENSE } as HotGlobalConfig,
179
    },
180
  ],
181
};
182
/* end-file */

1
<div>
2
  <example1-color-picker></example1-color-picker>
3
</div>

Overview

This guide shows how to create a custom color picker cell using the Pickr library. Users can click a cell to open a color picker, select a color, and see it rendered with a colored background.

Difficulty: Beginner Time: ~15 minutes Libraries: @simonwep/pickr

What You’ll Build

A cell that:

Displays a colored circle swatch in the cell
Opens a color picker when edited via an “Open color picker” button
Shows a styled editor input with Handsontable’s native blue border
Validates hex color format
Updates the value as you pick a color; closing the picker saves and finishes editing
Closes the picker on Tab or Escape

Prerequisites

1
npm install @simonwep/pickr

Import Dependencies

1
import Handsontable from 'handsontable/base';
2
import { registerAllModules } from 'handsontable/registry';
3
import { editorFactory } from 'handsontable/editors';
4
import { rendererFactory } from 'handsontable/renderers';
5
import Pickr from '@simonwep/pickr';
6
import '@simonwep/pickr/dist/themes/nano.min.css';
7

8
registerAllModules();

Why this matters:

editorFactory and rendererFactory are Handsontable helpers for creating custom editors and renderers
Pickr is created per-editor in the afterInit hook and attached to a button
Import Pickr theme CSS (e.g. nano.min.css) for the color picker UI styling

Add CSS Styling

Create a separate CSS file for the cell and editor styles. This uses Handsontable CSS custom properties (tokens) to match the native editor appearance.

1
.color-picker-cell {
2
  display: flex;
3
  align-items: center;
4
  justify-content: center;
5
}
6

7
.color-picker-swatch {
8
  width: 18px;
9
  height: 18px;
10
  border-radius: 50%;
11
  flex-shrink: 0;
12
  border: 1px solid rgba(0, 0, 0, 0.15);
13
}
14

15
.color-picker-editor {
16
  width: 100%;
17
  height: 100%;
18
  border: none;
19
  outline: none;
20
  box-sizing: border-box !important;
21
  cursor: pointer;
22
  -webkit-appearance: none;
23
  appearance: none;
24
}
25

26
.pickr {
27
  position: absolute;
28
  top: 0;
29
  left: 0;
30
  opacity: 0;
31
  pointer-events: none;
32
}

What’s happening:

.color-picker-cell centers the circle swatch inside the cell
.color-picker-swatch renders a small circle with border-radius: 50%
.color-picker-editor removes default input borders and appearance so the editor can be styled as needed

Create the Renderer

The renderer controls how the cell looks when not being edited. The renderer displays a colored circle swatch.
```
1
renderer: rendererFactory(({ td, value }) => {
2
  td.innerHTML = `<span class="color-picker-cell"><span class="color-picker-swatch" style="background:${value}"></span></span>`;
3
})
```
What’s happening:
- td is the table cell DOM element
- value is the cell’s current value (e.g., “#ff0000”)
- The renderer displays a circle swatch with the color as its background
- The swatch is centered inside the cell via CSS flexbox
Create the Validator

The validator ensures only valid hex colors are saved.
```
1
validator: (value, callback) => {
2
  callback(value.length === 7 && value[0] == '#');
3
}
```
What’s happening:
- Check if value is exactly 7 characters
- Check if it starts with ’#’
- Call callback(true) for valid, callback(false) for invalid
Improvements for production:
- Use regex: /^#[0-9A-Fa-f]{6}$/
- Support short format: #fff
- Support RGB/RGBA values
Editor - Initialize (init)

Create the input element that will hold the hex value, and apply the editor CSS class. A separate button for opening the picker is added in afterInit.
```
1
init(editor) {
2
  editor.input = editor.hot.rootDocument.createElement('INPUT') as HTMLInputElement;
3
  editor.input.setAttribute('aria-label', 'Open color picker');
4
  editor.input.classList.add('color-picker-editor');
5
}
```
What’s happening:
1. Create an input element using editor.hot.rootDocument.createElement()
2. Set an aria-label for accessibility
3. Add the color-picker-editor CSS class for the blue border styling
4. The editorFactory helper will handle container creation and DOM insertion
Key points:
- Use editor.hot.rootDocument.createElement() (not document.createElement()) for iframe/shadow DOM compatibility
- The input stores the current hex value; a button added in afterInit will open the Pickr popup
- The CSS class styles the editor (no border, full size) so the picker button is the main control

Editor - After Init Hook (`afterInit`)

Create a button, attach Pickr to it, and set up the change and hide event handlers. Setting preventCloseElement keeps the editor open when the user clicks inside the Pickr popup.

1
afterInit(editor) {
2
  const button = editor.hot.rootDocument.createElement('button');
3
  button.textContent = 'Open color picker';
4
  button.classList.add('color-picker-button');
5
  editor.input.after(button);
6

7
  editor.pickr = Pickr.create({
8
    el: button,
9
    theme: 'nano',
10
    default: editor.input.value || '#000000',
11
    autoReposition: false,
12
    padding: 0,
13
    components: {
14
      preview: true,
15
      hue: true,
16
    }
17
  });
18

19
  // Collapse the Pickr trigger button so it doesn't add vertical space
20
  // between the cell editor and the popup.
21
  editor.pickr._root.root.style.height = '0';
22
  editor.pickr._root.root.style.overflow = 'hidden';
23

24
  editor.preventCloseElement = editor.pickr._root.app;
25

26
  editor.pickr.on('change', (color) => {
27
    if (color) {
28
      const hex = color.toHEXA().toString();
29
      editor.input.value = hex;
30
    }
31
  });
32

33
  editor.pickr.on('hide', () => {
34
    if (Date.now() - editor._openedAt < 400) {
35
      editor.pickr.show();
36

37
      return;
38
    }
39
    editor.finishEditing();
40
  });
41
}

What’s happening:

Create a button and insert it after the input so users can open the picker
Create a Pickr instance with theme nano and preview + hue components
Set editor.preventCloseElement to the Pickr root so clicking inside the popup doesn’t close the editor
On change, update the input value from the selected color (using color.toHEXA().toString())
On hide, call editor.finishEditing() so closing the picker saves the value and closes the editor

Why afterInit instead of init?

afterInit runs after the input is added to the DOM
Pickr needs the button to be in the DOM to attach properly

Editor - After Open Hook (`afterOpen`)

Set the current color and show the Pickr picker.

1
afterOpen(editor) {
2
  editor._openedAt = Date.now();
3
  editor.pickr.setColor(editor.input.value || '#000000');
4
  editor.pickr.show();
5

6
  // Pickr positions its popup relative to the trigger button with an
7
  // internal offset. Use double-rAF to ensure Pickr's own positioning
8
  // is complete before overriding the top to sit flush below the cell.
9
  requestAnimationFrame(() => {
10
    requestAnimationFrame(() => {
11
      const cellRect = editor.TD.getBoundingClientRect();
12

13
      editor.pickr._root.app.style.top = `${cellRect.bottom}px`;
14
    });
15
  });
16
}

What’s happening:

Sets the picker to the cell’s current color
Calls show() to open the Pickr popup

Why afterOpen instead of open?

afterOpen runs after positioning is complete
The editorFactory helper handles positioning in open

Editor - After Close Hook (afterClose)

Ensure the Pickr popup is hidden when the editor closes.
```
1
afterClose(editor) {
2
  editor.pickr._root.app.classList.remove('visible');
3
  editor.pickr.hide();
4
}
```
What’s happening:
- Called when the editor is closed (by Tab, Escape, clicking outside, etc.)
- Hides the Pickr picker via editor.pickr.hide()
- Without this, the picker popup could remain visible after the editor closes
Editor - Get Value / Set Value

Standard value management hooks.
```
1
getValue(editor) {
2
  return editor.input.value;
3
}
```
```
1
setValue(editor, value) {
2
  editor.input.value = value;
3
}
```
What’s happening:
- getValue returns the input’s current value (hex color code) when Handsontable saves the cell
- setValue initializes the editor with the cell’s current color value
- On Pickr’s change event, editor.input.value is set from the selected color; when the user closes the picker, hide fires and editor.finishEditing() is called
Editor - Keyboard Shortcuts

Add a Tab shortcut to hide the picker (which triggers the hide event and then finishEditing()).
```
1
shortcuts: [
2
  {
3
    keys: [['Tab']],
4
    callback: (editor) => {
5
      editor.pickr.hide();
6
    },
7
  },
8
]
```
What’s happening:
- Pressing Tab hides the Pickr popup, which fires the hide event and calls editor.finishEditing()
- Uses the editorFactory shortcuts API to register key bindings
- afterClose also calls editor.pickr.hide() when the editor closes by other means

Complete Cell Definition

Put it all together. The editor uses a hidden input for the value and a button that opens the Pickr popup; color is updated on change and editing finishes when the picker is closed (hide).

1
type ColorPickerEditor = {
2
  input: HTMLInputElement;
3
  pickr: ReturnType<typeof Pickr.create>;
4
  preventCloseElement: HTMLElement;
5
};
6

7
const cellDefinition = {
8
  renderer: rendererFactory(({ td, value }) => {
9
    td.innerHTML = `<span class="color-picker-cell"><span class="color-picker-swatch" style="background:${value}"></span></span>`;
10
  }),
11
  validator: (value, callback) => {
12
    callback(value.length === 7 && value[0] == '#');
13
  },
14
  editor: editorFactory<ColorPickerEditor>({
15
    init(editor) {
16
      editor.input = editor.hot.rootDocument.createElement('INPUT') as HTMLInputElement;
17
      editor.input.setAttribute('aria-label', 'Open color picker');
18
      editor.input.classList.add('color-picker-editor');
19
    },
20
    afterInit(editor) {
21
      const button = editor.hot.rootDocument.createElement('button');
22
      button.textContent = 'Open color picker';
23
      button.classList.add('color-picker-button');
24
      editor.input.after(button);
25

26
      editor.pickr = Pickr.create({
27
        el: button,
28
        theme: 'nano',
29
        default: editor.input.value || '#000000',
30
        autoReposition: false,
31
        padding: 0,
32
        components: { preview: true, hue: true },
33
      });
34

35
      // Collapse the Pickr trigger button so it doesn't add vertical space
36
      // between the cell editor and the popup.
37
      editor.pickr._root.root.style.height = '0';
38
      editor.pickr._root.root.style.overflow = 'hidden';
39

40
      editor.preventCloseElement = editor.pickr._root.app;
41

42
      editor.pickr.on('change', (color) => {
43
        if (color) editor.input.value = color.toHEXA().toString();
44
      });
45
      editor.pickr.on('hide', () => {
46
        if (Date.now() - editor._openedAt < 400) {
47
          editor.pickr.show();
48

49
          return;
50
        }
51
        editor.finishEditing();
52
      });
53
    },
54
    afterOpen(editor) {
55
      editor._openedAt = Date.now();
56
      editor.pickr.setColor(editor.input.value || '#000000');
57
      editor.pickr.show();
58

59
      // Pickr positions its popup relative to the trigger button with an
60
      // internal offset. Override the top to sit flush below the cell.
61
      requestAnimationFrame(() => {
62
        requestAnimationFrame(() => {
63
          const cellRect = editor.TD.getBoundingClientRect();
64

65
          editor.pickr._root.app.style.top = `${cellRect.bottom}px`;
66
        });
67
      });
68
    },
69
    afterClose(editor) {
70
      editor.pickr._root.app.classList.remove('visible');
71
      editor.pickr.hide();
72
    },
73
    getValue(editor) {
74
      return editor.input.value;
75
    },
76
    setValue(editor, value) {
77
      editor.input.value = value;
78
    },
79
    shortcuts: [
80
      {
81
        keys: [['Tab']],
82
        callback: (editor) => editor.pickr.hide(),
83
      },
84
    ],
85
  }),
86
};

What’s happening:

renderer: Displays a colored circle swatch centered in the cell
validator: Ensures hex color format (# followed by 6 characters)
editor: Uses editorFactory helper with:
- init: Creates styled input element and aria-label
- afterInit: Creates button, Pickr on the button (nano theme), preventCloseElement, and change / hide handlers
- afterOpen: Sets current color and shows the picker
- afterClose: Hides the Pickr popup when editor closes
- shortcuts: Tab key hides the picker (which triggers hide and then finishEditing)
- getValue / setValue: Standard value management via the input

Note: The editorFactory helper handles container creation, positioning, and lifecycle management automatically.

Use in Handsontable

1
const container = document.querySelector('#example1')!;
2

3
const hotOptions: Handsontable.GridSettings = {
4
  data: [
5
    { id: 1, itemName: 'Lunar Core', color: '#FF5733', itemNo: 'XJ-12', cost: 350000, valueStock: 700000 },
6
    { id: 2, itemName: 'Zero Thrusters', color: '#33FF57', itemNo: 'QL-54', cost: 450000, valueStock: 0 },
7
    { id: 3, itemName: 'EVA Suits', color: '#3357FF', itemNo: 'PM-67', cost: 150000, valueStock: 7500000 },
8
  ],
9
  colHeaders: ['ID', 'Item Name', 'Item Color', 'Item No.', 'Cost', 'Value in Stock'],
10
  autoRowSize: true,
11
  rowHeaders: true,
12
  height: 'auto',
13
  width: '100%',
14
  columns: [
15
    { data: 'id', type: 'numeric', width: 80, headerClassName: 'htLeft' },
16
    { data: 'itemName', type: 'text', width: 200, headerClassName: 'htLeft' },
17
    { data: 'color', headerClassName: 'htLeft', ...cellDefinition },
18
    { data: 'itemNo', type: 'text', width: 100, headerClassName: 'htLeft' },
19
    { data: 'cost', type: 'numeric', width: 70, headerClassName: 'htLeft' },
20
    { data: 'valueStock', type: 'numeric', width: 130, headerClassName: 'htRight' },
21
  ],
22
  licenseKey: 'non-commercial-and-evaluation',
23
};
24

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

Key configuration:

...cellDefinition - Spreads renderer, validator, and editor into the color column config
The validator ensures only valid hex colors are saved
The live example uses more rows and random hex colors; you can use any data that includes a color field

How It Works - Complete Flow

Initial Render: Cell displays a colored circle swatch
User Double-Clicks or F2: Editor opens with a styled input and an “Open color picker” button
Color Picker Opens: afterOpen sets the current color and calls pickr.show()
User Selects Color: Pickr updates the preview; the change event updates editor.input.value with the hex from color.toHEXA().toString()
User Closes Picker (or presses Tab): The hide event fires (or Tab triggers pickr.hide()), then editor.finishEditing() is called
Validation: Validator checks hex format (# followed by 6 characters)
Save: If valid, value is saved to cell; if invalid, editor may stay open
Editor Closes: afterClose calls editor.pickr.hide(), cell renderer shows updated swatch

Enhancements

Add Color Swatches

Provide preset colors:

1
editor.pickr = Pickr.create({
2
  el: button,
3
  // ...other options
4
  swatches: [
5
    '#ff0000',
6
    '#00ff00',
7
    '#0000ff',
8
    '#ffff00',
9
    '#ff00ff',
10
    '#00ffff'
11
  ],
12
});

Support Alpha Channel

Allow transparency by setting lockOpacity: false and enabling the opacity component:

1
Pickr.create({
2
  // ...
3
  lockOpacity: false,
4
  components: {
5
    preview: true,
6
    opacity: true,
7
    hue: true,
8
    // ...
9
  },
10
});
11

12
// Update validator for rgba
13
validator: (value, callback) => {
14
  const rgbaRegex = /^rgba?\(\d+,\s*\d+,\s*\d+(?:,\s*[\d.]+)?\)$/;
15
  callback(rgbaRegex.test(value));
16
}

Use a Different Theme

This recipe uses the nano theme. Pickr also offers classic and monolith. To switch, change the CSS import and the theme option:
```
1
import '@simonwep/pickr/dist/themes/classic.min.css';
2

3
// In Pickr.create():
4
theme: 'classic',
```

What you learned

You integrated the Pickr color picker library as a Handsontable cell editor. You used editorFactory to manage the editor lifecycle, rendererFactory to display a color swatch, and Handsontable’s CSS tokens to style the editor consistently with the rest of the grid.

Next steps

Colorful Picker (React) - The same pattern using react-colorful and React’s EditorComponent.
Color Picker (Angular) - The same pattern using Angular components and the native HTML5 color input.
Star Rating - Another custom editor built with editorFactory and SVG.

Color picker

Overview

What You’ll Build

Prerequisites

Import Dependencies

Add CSS Styling

Create the Renderer

Create the Validator

Editor - Initialize (`init`)

Editor - After Init Hook (`afterInit`)

Editor - After Open Hook (`afterOpen`)

Editor - After Close Hook (`afterClose`)

Editor - Get Value / Set Value

Editor - Keyboard Shortcuts

Complete Cell Definition

Use in Handsontable

How It Works - Complete Flow

Enhancements

Add Color Swatches

Support Alpha Channel

Use a Different Theme

What you learned

Next steps

Color picker

Overview

What You’ll Build

Prerequisites

Import Dependencies

Add CSS Styling

Create the Renderer

Create the Validator

Editor - Initialize (init)

Editor - After Init Hook (afterInit)

Editor - After Open Hook (afterOpen)

Editor - After Close Hook (afterClose)

Editor - Get Value / Set Value

Editor - Keyboard Shortcuts

Complete Cell Definition

Use in Handsontable

How It Works - Complete Flow

Enhancements

Add Color Swatches

Support Alpha Channel

Use a Different Theme

What you learned

Next steps

Editor - Initialize (`init`)

Editor - After Init Hook (`afterInit`)

Editor - After Open Hook (`afterOpen`)

Editor - After Close Hook (`afterClose`)