Colorful Picker

This tutorial shows you how to build a color picker cell in React using the react-colorful library and Handsontable’s EditorComponent.

1
import { HotTable, HotColumn, EditorComponent } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3
import { rendererFactory } from 'handsontable/renderers';
4
import { HexColorPicker } from 'react-colorful';
5
import './example1.css';
6

7
registerAllModules();
8

9
/* start:skip-in-preview */
10
const inputData = [
11
  {
12
    id: 640329,
13
    itemName: 'Lunar Core',
14
    itemNo: 'XJ-12',
15
    leadEngineer: 'Ellen Ripley',
16
    cost: 350000,
17
    inStock: true,
18
    category: 'Lander',
19
    itemQuality: 87,
20
    origin: '🇺🇸 USA',
21
    quantity: 2,
22
    valueStock: 700000,
23
    repairable: false,
24
    supplierName: 'TechNova',
25
    restockDate: '2025-08-01',
26
    operationalStatus: 'Awaiting Parts',
27
  },
28
  {
29
    id: 863104,
30
    itemName: 'Zero Thrusters',
31
    itemNo: 'QL-54',
32
    leadEngineer: 'Sam Bell',
33
    cost: 450000,
34
    inStock: false,
35
    category: 'Propulsion',
36
    itemQuality: 0,
37
    origin: '🇩🇪 Germany',
38
    quantity: 0,
39
    valueStock: 0,
40
    repairable: true,
41
    supplierName: 'PropelMax',
42
    restockDate: '2025-09-15',
43
    operationalStatus: 'In Maintenance',
44
  },
45
  {
46
    id: 395603,
47
    itemName: 'EVA Suits',
48
    itemNo: 'PM-67',
49
    leadEngineer: 'Alex Rogan',
50
    cost: 150000,
51
    inStock: true,
52
    category: 'Equipment',
53
    itemQuality: 79,
54
    origin: '🇮🇹 Italy',
55
    quantity: 50,
56
    valueStock: 7500000,
57
    repairable: true,
58
    supplierName: 'SuitCraft',
59
    restockDate: '2025-10-05',
60
    operationalStatus: 'Ready for Testing',
61
  },
62
  {
63
    id: 679083,
64
    itemName: 'Solar Panels',
65
    itemNo: 'BW-09',
66
    leadEngineer: 'Dave Bowman',
67
    cost: 75000,
68
    inStock: true,
69
    category: 'Energy',
70
    itemQuality: 95,
71
    origin: '🇺🇸 USA',
72
    quantity: 10,
73
    valueStock: 750000,
74
    repairable: false,
75
    supplierName: 'SolarStream',
76
    restockDate: '2025-11-10',
77
    operationalStatus: 'Operational',
78
  },
79
  {
80
    id: 912663,
81
    itemName: 'Comm Array',
82
    itemNo: 'ZR-56',
83
    leadEngineer: 'Louise Banks',
84
    cost: 125000,
85
    inStock: false,
86
    category: 'Communication',
87
    itemQuality: 0,
88
    origin: '🇯🇵 Japan',
89
    quantity: 0,
90
    valueStock: 0,
91
    repairable: true,
92
    supplierName: 'CommTech',
93
    restockDate: '2025-12-20',
94
    operationalStatus: 'Decommissioned',
95
  },
96
  {
97
    id: 315806,
98
    itemName: 'Habitat Dome',
99
    itemNo: 'UJ-23',
100
    leadEngineer: 'Dr. Ryan Stone',
101
    cost: 1000000,
102
    inStock: true,
103
    category: 'Shelter',
104
    itemQuality: 93,
105
    origin: '🇨🇦 Canada',
106
    quantity: 3,
107
    valueStock: 3000000,
108
    repairable: false,
109
    supplierName: 'DomeInnovate',
110
    restockDate: '2026-01-25',
111
    operationalStatus: 'Operational',
112
  },
113
  {
114
    id: 954632,
115
    itemName: 'Oxygen Unit',
116
    itemNo: 'FK-87',
117
    leadEngineer: 'Dr. Grace Augustine',
118
    cost: 600000,
119
    inStock: true,
120
    category: 'Life Support',
121
    itemQuality: 85,
122
    origin: '🇺🇸 USA',
123
    quantity: 15,
124
    valueStock: 9000000,
125
    repairable: true,
126
    supplierName: 'OxyGenius',
127
    restockDate: '2026-03-02',
128
    operationalStatus: 'Awaiting Parts',
129
  },
130
  {
131
    id: 734944,
132
    itemName: 'Processing Rig',
133
    itemNo: 'LK-13',
134
    leadEngineer: 'Jake Sully',
135
    cost: 350000,
136
    inStock: true,
137
    category: 'Mining',
138
    itemQuality: 81,
139
    origin: '🇦🇺 Australia',
140
    quantity: 25,
141
    valueStock: 8750000,
142
    repairable: true,
143
    supplierName: 'RigTech',
144
    restockDate: '2026-04-15',
145
    operationalStatus: 'Ready for Testing',
146
  },
147
  {
148
    id: 834662,
149
    itemName: 'Navigation Module',
150
    itemNo: 'XP-24',
151
    leadEngineer: 'Dr. Ellie Arroway',
152
    cost: 450000,
153
    inStock: true,
154
    category: 'Navigation',
155
    itemQuality: 89,
156
    origin: '🇫🇷 France',
157
    quantity: 8,
158
    valueStock: 3600000,
159
    repairable: false,
160
    supplierName: 'NavSolutions',
161
    restockDate: '2026-05-30',
162
    operationalStatus: 'In Maintenance',
163
  },
164
  {
165
    id: 714329,
166
    itemName: 'Surveyor Arm',
167
    itemNo: 'QA-86',
168
    leadEngineer: 'Mark Watney',
169
    cost: 100000,
170
    inStock: true,
171
    category: 'Exploration',
172
    itemQuality: 78,
173
    origin: '🇺🇸 USA',
174
    quantity: 40,
175
    valueStock: 4000000,
176
    repairable: true,
177
    supplierName: 'ExploreTech',
178
    restockDate: '2026-07-12',
179
    operationalStatus: 'Decommissioned',
180
  },
181
];
182

183
export const data = inputData.map((el) => ({
184
  ...el,
185
  // eslint-disable-next-line no-mixed-operators
186
  color: `#${
187
    // eslint-disable-next-line no-mixed-operators
188
    Math.round(0x1000000 + 0xffffff * Math.random())
189
      .toString(16)
190
      .slice(1)
191
      .toUpperCase()
192
  }`,
193
}));
194
/* end:skip-in-preview */
195

196
const colorCellRenderer = rendererFactory(({ td, value }) => {
197
  td.innerHTML = `<span class="color-picker-cell"><span class="color-picker-swatch" style="background:${value}"></span></span>`;
198
});
199

200
const colorValidator = (value, callback) => {
201
  callback(value.length === 7 && value[0] === '#'); // validate color format
202
};
203

204
export const ColorPickerEditor = () => {
205
  return (
206
    <EditorComponent>
207
      {({ value, setValue }) => (
208
        <div className="color-picker-editor">
209
          <input className="color-picker-editor-input" value={value} readOnly />
210
          <div className="color-picker-editor-popover">
211
            <HexColorPicker color={value || '#000000'} onChange={(color) => setValue(color)} />
212
          </div>
213
        </div>
214
      )}
215
    </EditorComponent>
216
  );
217
};
218

219
const ExampleComponent = () => {
220
  return (
221
    <HotTable
222
      data={data}
223
      colHeaders={['ID', 'Item Name', 'Item Color', 'Item No.', 'Cost', 'Value in Stock']}
224
      autoRowSize={true}
225
      rowHeaders={true}
226
      height="auto"
227
      width="100%"
228
      licenseKey="non-commercial-and-evaluation"
229
    >
230
      <HotColumn data="id" type="numeric" width={80} className="htLeft" />
231
      <HotColumn data="itemName" type="text" width={200} className="htLeft" />
232
      <HotColumn
233
        data="color"
234
        width={120}
235
        editor={ColorPickerEditor}
236
        hotRenderer={colorCellRenderer}
237
        validator={colorValidator}
238
        className="htLeft"
239
      />
240
      <HotColumn data="itemNo" type="text" width={100} className="htLeft" />
241
      <HotColumn data="cost" type="numeric" width={70} className="htLeft" />
242
      <HotColumn data="valueStock" type="numeric" width={130} className="htRight" />
243
    </HotTable>
244
  );
245
};
246

247
export default ExampleComponent;

1
import { HotTable, HotColumn, EditorComponent } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3
import { rendererFactory } from 'handsontable/renderers';
4
import { HexColorPicker } from 'react-colorful';
5
import './example1.css';
6

7
registerAllModules();
8

9
/* start:skip-in-preview */
10
const inputData = [
11
  {
12
    id: 640329,
13
    itemName: 'Lunar Core',
14
    itemNo: 'XJ-12',
15
    leadEngineer: 'Ellen Ripley',
16
    cost: 350000,
17
    inStock: true,
18
    category: 'Lander',
19
    itemQuality: 87,
20
    origin: '🇺🇸 USA',
21
    quantity: 2,
22
    valueStock: 700000,
23
    repairable: false,
24
    supplierName: 'TechNova',
25
    restockDate: '2025-08-01',
26
    operationalStatus: 'Awaiting Parts',
27
  },
28
  {
29
    id: 863104,
30
    itemName: 'Zero Thrusters',
31
    itemNo: 'QL-54',
32
    leadEngineer: 'Sam Bell',
33
    cost: 450000,
34
    inStock: false,
35
    category: 'Propulsion',
36
    itemQuality: 0,
37
    origin: '🇩🇪 Germany',
38
    quantity: 0,
39
    valueStock: 0,
40
    repairable: true,
41
    supplierName: 'PropelMax',
42
    restockDate: '2025-09-15',
43
    operationalStatus: 'In Maintenance',
44
  },
45
  {
46
    id: 395603,
47
    itemName: 'EVA Suits',
48
    itemNo: 'PM-67',
49
    leadEngineer: 'Alex Rogan',
50
    cost: 150000,
51
    inStock: true,
52
    category: 'Equipment',
53
    itemQuality: 79,
54
    origin: '🇮🇹 Italy',
55
    quantity: 50,
56
    valueStock: 7500000,
57
    repairable: true,
58
    supplierName: 'SuitCraft',
59
    restockDate: '2025-10-05',
60
    operationalStatus: 'Ready for Testing',
61
  },
62
  {
63
    id: 679083,
64
    itemName: 'Solar Panels',
65
    itemNo: 'BW-09',
66
    leadEngineer: 'Dave Bowman',
67
    cost: 75000,
68
    inStock: true,
69
    category: 'Energy',
70
    itemQuality: 95,
71
    origin: '🇺🇸 USA',
72
    quantity: 10,
73
    valueStock: 750000,
74
    repairable: false,
75
    supplierName: 'SolarStream',
76
    restockDate: '2025-11-10',
77
    operationalStatus: 'Operational',
78
  },
79
  {
80
    id: 912663,
81
    itemName: 'Comm Array',
82
    itemNo: 'ZR-56',
83
    leadEngineer: 'Louise Banks',
84
    cost: 125000,
85
    inStock: false,
86
    category: 'Communication',
87
    itemQuality: 0,
88
    origin: '🇯🇵 Japan',
89
    quantity: 0,
90
    valueStock: 0,
91
    repairable: true,
92
    supplierName: 'CommTech',
93
    restockDate: '2025-12-20',
94
    operationalStatus: 'Decommissioned',
95
  },
96
  {
97
    id: 315806,
98
    itemName: 'Habitat Dome',
99
    itemNo: 'UJ-23',
100
    leadEngineer: 'Dr. Ryan Stone',
101
    cost: 1000000,
102
    inStock: true,
103
    category: 'Shelter',
104
    itemQuality: 93,
105
    origin: '🇨🇦 Canada',
106
    quantity: 3,
107
    valueStock: 3000000,
108
    repairable: false,
109
    supplierName: 'DomeInnovate',
110
    restockDate: '2026-01-25',
111
    operationalStatus: 'Operational',
112
  },
113
  {
114
    id: 954632,
115
    itemName: 'Oxygen Unit',
116
    itemNo: 'FK-87',
117
    leadEngineer: 'Dr. Grace Augustine',
118
    cost: 600000,
119
    inStock: true,
120
    category: 'Life Support',
121
    itemQuality: 85,
122
    origin: '🇺🇸 USA',
123
    quantity: 15,
124
    valueStock: 9000000,
125
    repairable: true,
126
    supplierName: 'OxyGenius',
127
    restockDate: '2026-03-02',
128
    operationalStatus: 'Awaiting Parts',
129
  },
130
  {
131
    id: 734944,
132
    itemName: 'Processing Rig',
133
    itemNo: 'LK-13',
134
    leadEngineer: 'Jake Sully',
135
    cost: 350000,
136
    inStock: true,
137
    category: 'Mining',
138
    itemQuality: 81,
139
    origin: '🇦🇺 Australia',
140
    quantity: 25,
141
    valueStock: 8750000,
142
    repairable: true,
143
    supplierName: 'RigTech',
144
    restockDate: '2026-04-15',
145
    operationalStatus: 'Ready for Testing',
146
  },
147
  {
148
    id: 834662,
149
    itemName: 'Navigation Module',
150
    itemNo: 'XP-24',
151
    leadEngineer: 'Dr. Ellie Arroway',
152
    cost: 450000,
153
    inStock: true,
154
    category: 'Navigation',
155
    itemQuality: 89,
156
    origin: '🇫🇷 France',
157
    quantity: 8,
158
    valueStock: 3600000,
159
    repairable: false,
160
    supplierName: 'NavSolutions',
161
    restockDate: '2026-05-30',
162
    operationalStatus: 'In Maintenance',
163
  },
164
  {
165
    id: 714329,
166
    itemName: 'Surveyor Arm',
167
    itemNo: 'QA-86',
168
    leadEngineer: 'Mark Watney',
169
    cost: 100000,
170
    inStock: true,
171
    category: 'Exploration',
172
    itemQuality: 78,
173
    origin: '🇺🇸 USA',
174
    quantity: 40,
175
    valueStock: 4000000,
176
    repairable: true,
177
    supplierName: 'ExploreTech',
178
    restockDate: '2026-07-12',
179
    operationalStatus: 'Decommissioned',
180
  },
181
];
182

183
export const data = inputData.map((el) => ({
184
  ...el,
185
  // eslint-disable-next-line no-mixed-operators
186
  color: `#${
187
    // eslint-disable-next-line no-mixed-operators
188
    Math.round(0x1000000 + 0xffffff * Math.random())
189
      .toString(16)
190
      .slice(1)
191
      .toUpperCase()
192
  }`,
193
}));
194
/* end:skip-in-preview */
195

196
const colorCellRenderer = rendererFactory(({ td, value }) => {
197
  td.innerHTML = `<span class="color-picker-cell"><span class="color-picker-swatch" style="background:${value}"></span></span>`;
198
});
199

200
const colorValidator = (value: string, callback: (valid: boolean) => void) => {
201
  callback(value.length === 7 && value[0] === '#'); // validate color format
202
};
203

204
export const ColorPickerEditor = () => {
205
  return (
206
    <EditorComponent>
207
      {({ value, setValue }) => (
208
        <div className="color-picker-editor">
209
         <input className="color-picker-editor-input" value={value} readOnly />
210
         <div className="color-picker-editor-popover">
211
           <HexColorPicker color={value || '#000000'} onChange={(color) => setValue(color)} />
212
         </div>
213
       </div>
214
      )}
215
    </EditorComponent>
216
  );
217
};
218

219
const ExampleComponent = () => {
220
  return (
221
    <HotTable
222
      data={data}
223
      colHeaders={['ID', 'Item Name', 'Item Color', 'Item No.', 'Cost', 'Value in Stock']}
224
      autoRowSize={true}
225
      rowHeaders={true}
226
      height="auto"
227
      width="100%"
228
      licenseKey="non-commercial-and-evaluation"
229
    >
230
      <HotColumn data="id" type="numeric" width={80} className="htLeft" />
231
      <HotColumn data="itemName" type="text" width={200} className="htLeft" />
232
      <HotColumn
233
        data="color"
234
        width={120}
235
        editor={ColorPickerEditor}
236
        hotRenderer={colorCellRenderer}
237
        validator={colorValidator}
238
        className="htLeft"
239
      />
240
      <HotColumn data="itemNo" type="text" width={100} className="htLeft" />
241
      <HotColumn data="cost" type="numeric" width={70} className="htLeft" />
242
      <HotColumn data="valueStock" type="numeric" width={130} className="htRight" />
243
    </HotTable>
244
  );
245
};
246

247
export default ExampleComponent;

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
  box-sizing: border-box !important;
19
  border: none;
20
  border-radius: 0;
21
  outline: none;
22
}
23

24
.color-picker-editor-popover {
25
  position: absolute;
26
  top: 100%;
27
  left: 0;
28
  padding-top: 8px;
29
}
30

31
.color-picker-editor:focus {
32
  outline: none;
33
}
34

35
.color-picker-editor-input {
36
  width: 100%;
37
  height: 100%;
38
  box-sizing: border-box !important;
39
  border: none;
40
  border-radius: 0;
41
  outline: none;
42
}

Overview

This guide shows how to create a color picker editor cell using react-colorful’s HexColorPicker with React’s EditorComponent. Perfect for selecting colors in design tools, theme builders, or any scenario where users need to choose hex color values.

Difficulty: Beginner Time: ~15 minutes Libraries: react-colorful

What You’ll Build

A cell that:

Displays an input showing the hex value and a popover with a color picker when editing
Shows the selected color as a swatch when viewing (custom renderer)
Stores values as hex color strings (e.g., #FF5733)
Validates input so only valid hex values (e.g. #RRGGBB) are accepted
Works with React’s component-based architecture
Uses hotRenderer to display color swatches in cells

Prerequisites

1
npm install @handsontable/react-wrapper react-colorful

What you need:

React 16.8+ (hooks support)
@handsontable/react-wrapper package
react-colorful package for the color picker UI
Basic React knowledge (hooks, JSX)

Import Dependencies

1
import { HotTable, HotColumn, EditorComponent } from '@handsontable/react-wrapper';
2
import { registerAllModules } from 'handsontable/registry';
3
import { rendererFactory } from 'handsontable/renderers';
4
import { HexColorPicker } from 'react-colorful';
5

6
registerAllModules();

What we’re importing:

EditorComponent - React component for creating custom editors
HotTable and HotColumn - React wrapper components
rendererFactory - For the custom cell renderer (color swatch)
HexColorPicker - Lightweight color picker from react-colorful

Create the Editor Component

Create a React component that uses EditorComponent with the render prop pattern. The editor shows an input with the current hex value and a popover containing the color picker.
```
1
export const ColorPickerEditor = () => {
2
  return (
3
    <EditorComponent>
4
      {({ value, setValue }) => (
5
        <div className="color-picker-editor">
6
          <input className="color-picker-editor-input" value={value} readOnly />
7
          <div className="color-picker-editor-popover">
8
            <HexColorPicker color={value || '#000000'} onChange={(color) => setValue(color)} />
9
          </div>
10
        </div>
11
      )}
12
    </EditorComponent>
13
  );
14
};
```
What’s happening:
1. EditorComponent wraps your editor UI
2. The children prop is a function that receives editor state
3. value - Current cell value (hex color string)
4. setValue - Function to update the value
5. The input displays the current hex value; the popover shows HexColorPicker for picking a color
6. When the user selects a color, setValue(color) updates the value; the editor closes on blur (e.g. clicking outside)
Key concepts:
- Render prop pattern: EditorComponent uses a function as children
- Controlled component: HexColorPicker receives color and onChange
- Input + popover: The input shows the hex code; the popover is positioned below and contains the picker

Add Styling

Style the cell (swatch display), the editor container, the input, and the popover. The popover is positioned below the editor so the color picker appears when the cell is in edit mode.

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
  box-sizing: border-box !important;
19
  border: none;
20
  border-radius: 0;
21
  outline: none;
22
}
23

24
.color-picker-editor-popover {
25
  position: absolute;
26
  top: 100%;
27
  left: 0;
28
  padding-top: 8px;
29
}
30

31
.color-picker-editor:focus {
32
  outline: none;
33
}
34

35
.color-picker-editor-input {
36
  width: 100%;
37
  height: 100%;
38
  box-sizing: border-box !important;
39
  border: none;
40
  border-radius: 0;
41
  outline: none;
42
}

What’s happening:

.color-picker-cell and .color-picker-swatch display a circular color swatch in the cell
.color-picker-editor is the editor wrapper; .color-picker-editor-input styles the hex value input
.color-picker-editor-popover positions the color picker below the editor (e.g. top: 100%, left: 0)
HexColorPicker has built-in styling from react-colorful

Prepare Sample Data

Use an array of row objects and add a color property with random hex values. The example uses an inventory-style dataset (with columns like id, itemName, itemNo, cost, valueStock, and optionally more); you can use any structure as long as each row has a color field.

1
const inputData = [
2
  { id: 640329, itemName: 'Lunar Core', itemNo: 'XJ-12', cost: 350000, valueStock: 700000 },
3
  { id: 863104, itemName: 'Zero Thrusters', itemNo: 'QL-54', cost: 450000, valueStock: 0 },
4
  // ... more rows
5
];
6

7
export const data = inputData.map((el) => ({
8
  ...el,
9
  color: `#${
10
    Math.round(0x1000000 + 0xffffff * Math.random())
11
      .toString(16)
12
      .slice(1)
13
      .toUpperCase()
14
  }`,
15
}));

What’s happening:

Each row is an object with columns such as id, itemName, itemNo, cost, valueStock
A color property is added with a random hex value in #RRGGBB format

Use in Handsontable

Use the editor, custom renderer, and validator on the color column. The example table has multiple columns; the color column uses hotRenderer and validator.

1
const colorCellRenderer = rendererFactory(({ td, value }) => {
2
  td.innerHTML = `<span class="color-picker-cell"><span class="color-picker-swatch" style="background:${value}"></span></span>`;
3
});
4

5
const colorValidator = (value, callback) => {
6
  callback(value.length === 7 && value[0] === '#'); // validate hex format
7
};
8

9
const ExampleComponent = () => {
10
  return (
11
    <HotTable
12
      data={data}
13
      colHeaders={['ID', 'Item Name', 'Item Color', 'Item No.', 'Cost', 'Value in Stock']}
14
      autoRowSize={true}
15
      rowHeaders={true}
16
      height="auto"
17
      width="100%"
18
      licenseKey="non-commercial-and-evaluation"
19
    >
20
      <HotColumn data="id" type="numeric" width={80} className="htLeft" />
21
      <HotColumn data="itemName" type="text" width={200} className="htLeft" />
22
      <HotColumn
23
        data="color"
24
        width={120}
25
        editor={ColorPickerEditor}
26
        hotRenderer={colorCellRenderer}
27
        validator={colorValidator}
28
        className="htLeft"
29
      />
30
      <HotColumn data="itemNo" type="text" width={100} className="htLeft" />
31
      <HotColumn data="cost" type="numeric" width={70} className="htLeft" />
32
      <HotColumn data="valueStock" type="numeric" width={130} className="htRight" />
33
    </HotTable>
34
  );
35
};

What’s happening:

editor={ColorPickerEditor} - Assigns the color picker editor to the column
hotRenderer={colorCellRenderer} - Renders a color swatch in the cell instead of the raw hex string
validator={colorValidator} - Ensures only valid hex values (e.g. #RRGGBB) are accepted
data="color" - Binds to the color property in each row; double-click opens the picker

Key features:

Swatch display via custom renderer, validation, and type-safe editor with TypeScript

How It Works - Complete Flow

Initial Render: Cell shows a color swatch (custom renderer); value is stored as hex (e.g. #FF5733)
User Double-Clicks or Enter: Editor opens
Editor Opens: EditorComponent positions container over cell; input shows current hex value; popover with HexColorPicker appears below
User Interaction: Drag sliders or click palette → setValue(color) updates the value; input and picker stay in sync
Close: User blurs the editor (e.g. clicks outside) → value is saved and editor closes
Validation: colorValidator ensures value is valid hex before saving
Save: Hex value saved to cell; cell renderer shows the new swatch

Enhancements

Custom Renderer with Color Swatch (and Optional Hex Label)

The example uses hotRenderer to show only a circular swatch. You can extend it to show the hex code next to the swatch:

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

3
// Swatch only (as in the example)
4
const colorCellRenderer = rendererFactory(({ td, value }) => {
5
  td.innerHTML = `<span class="color-picker-cell"><span class="color-picker-swatch" style="background:${value}"></span></span>`;
6
});
7

8
// Or swatch + hex label
9
const colorRendererWithHex = rendererFactory(({ td, value }) => {
10
  const hexColor = value || '#cccccc';
11
  td.innerHTML = `
12
    <div style="display: flex; align-items: center; gap: 8px; padding: 4px;">
13
      <div style="width: 24px; height: 24px; background: ${hexColor}; border: 1px solid #ddd; border-radius: 4px;"></div>
14
      <span style="font-family: monospace; font-size: 12px;">${hexColor}</span>
15
    </div>
16
  `;
17
});
18

19
// Use hotRenderer in HotColumn
20
<HotColumn
21
  data="color"
22
  editor={ColorPickerEditor}
23
  hotRenderer={colorCellRenderer}
24
  validator={colorValidator}
25
/>

What’s happening:

hotRenderer is used in the React wrapper for custom cell rendering
Swatch-only keeps the cell compact; adding the hex label improves readability when needed

Explicit “Apply” Button (Optional)

The example closes the editor on blur. If you prefer explicit confirmation, add a button and use finishEditing from the render props:

1
<EditorComponent>
2
  {({ value, setValue, finishEditing }) => (
3
    <div className="color-picker-editor">
4
      <input className="color-picker-editor-input" value={value} readOnly />
5
      <div className="color-picker-editor-popover">
6
        <HexColorPicker color={value || '#000000'} onChange={(color) => setValue(color)} />
7
      </div>
8
      <button className="button" type="button" onClick={() => finishEditing()}>
9
        Apply Colour
10
      </button>
11
    </div>
12
  )}
13
</EditorComponent>

Using External CSS File

The example uses a separate CSS file for cell and editor styles (e.g. example1.css). Import it in your component:
```
1
import './example1.css'; // or your color-picker-editor.css
2

3
const ColorPickerEditor = () => {
4
  // ... component code
5
};
```
Keep the .color-picker-cell, .color-picker-swatch, .color-picker-editor, .color-picker-editor-input, and .color-picker-editor-popover rules so the swatch and the editor look correct.

RGBA or HSL Variants

react-colorful also provides RgbaColorPicker and HslColorPicker. For RGBA:

1
import { RgbaColorPicker } from 'react-colorful';
2

3
// Note: value would need to be stored as rgba string or object
4
// and converted appropriately

Default Color

Handle empty cells with a sensible default:
```
1
<HexColorPicker
2
  color={value || '#000000'}
3
  onChange={(color) => setValue(color)}
4
/>
```
The || '#000000' ensures the picker always has a valid color.

Accessibility

The HexColorPicker from react-colorful provides keyboard support. For the editor input, you can add an aria-label so screen readers describe the field:

1
<input
2
  className="color-picker-editor-input"
3
  value={value}
4
  aria-label="Hex color value"
5
/>

Keyboard navigation:

Tab: Navigate to editor
Escape: Cancel editing
Click: Direct selection in color picker

Performance Considerations

Why This Is Fast

react-colorful: Lightweight (~2KB gzipped), no heavy dependencies
React Virtual DOM: Efficient updates only when value changes
Controlled updates: onChange only fires when user interacts
No unnecessary re-renders: Editor unmounts when closed

Bundle Size

react-colorful is tree-shakeable. If you only need hex:

1
import { HexColorPicker } from 'react-colorful';

TypeScript Support

EditorComponent is fully typed. For the color editor, the value is a string (hex). You can type the validator as well:

1
const colorValidator = (value: string, callback: (valid: boolean) => void) => {
2
  callback(value.length === 7 && value[0] === '#'); // validate color format
3
};
4

5
export const ColorPickerEditor = () => {
6
  return (
7
    <EditorComponent>
8
      {({ value, setValue }) => (
9
        <div className="color-picker-editor">
10
          <input className="color-picker-editor-input" value={value} readOnly />
11
          <div className="color-picker-editor-popover">
12
            <HexColorPicker color={value || '#000000'} onChange={(color) => setValue(color)} />
13
          </div>
14
        </div>
15
      )}
16
    </EditorComponent>
17
  );
18
};

Best Practices

Provide fallback for empty values - Use value || '#000000' for HexColorPicker
Use hotRenderer - Display color swatches in cells for better UX
Store as hex - Hex strings are portable and validate with a single regex
Input + popover - Showing the hex in an input with the picker in a popover keeps the cell compact and clear
Optional “Apply” button - For explicit confirmation, add a button that calls finishEditing() from the render props

What you learned

You integrated the react-colorful library as a Handsontable cell editor in React. You used EditorComponent with the render prop pattern to manage editor state, rendererFactory to display a color swatch, and CSS custom properties to style the editor.

Next steps

Color Picker (JavaScript) - The same pattern using editorFactory and the Pickr library.
Color Picker (Angular) - The Angular version using HotCellEditorAdvancedComponent and the native HTML5 color input.
Star Rating (React) - Another custom editor using EditorComponent in React.

Colorful Picker

Overview

What You’ll Build

Prerequisites

Import Dependencies

Create the Editor Component

Add Styling

Prepare Sample Data

Use in Handsontable

How It Works - Complete Flow

Enhancements

Custom Renderer with Color Swatch (and Optional Hex Label)

Explicit “Apply” Button (Optional)

Using External CSS File

RGBA or HSL Variants

Default Color

Accessibility

Performance Considerations

Why This Is Fast

Bundle Size

TypeScript Support

Best Practices

What you learned

Next steps