From 6052113191fa8954a0f746592fc868be1bd23745 Mon Sep 17 00:00:00 2001
From: "docs-examples-cross-repo-dispatch[bot]"
<318227308+docs-examples-cross-repo-dispatch[bot]@users.noreply.github.com>
Date: Wed, 2 Sep 2026 10:46:01 +0000
Subject: [PATCH] chore(docs): update versioned docs examples
---
...ides__getting-started__react-redux__react__example6.tsx.json | 2 +-
...cipes__cell-types__colorful-picker__react__example1.tsx.json | 2 +-
2 files changed, 2 insertions(+), 2 deletions(-)
diff --git a/runner/apps/authoring/public/docs-examples/18.1/guides__getting-started__react-redux__react__example6.tsx.json b/runner/apps/authoring/public/docs-examples/18.1/guides__getting-started__react-redux__react__example6.tsx.json
index 34bb3789d..e73c9aeb5 100644
--- a/runner/apps/authoring/public/docs-examples/18.1/guides__getting-started__react-redux__react__example6.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/18.1/guides__getting-started__react-redux__react__example6.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Getting Started ▸ Integration with Redux · Advanced example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.1.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.1.0\",\n \"@handsontable/react-wrapper\": \"18.1.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\",\n \"react-colorful\": \"5.8.0\",\n \"react-redux\": \"9.3.0\",\n \"redux\": \"5.0.1\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n\n\n \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example6\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useEffect, MouseEvent, KeyboardEvent, useRef, useState } from 'react';\nimport Handsontable from 'handsontable/base';\nimport { HexColorPicker } from 'react-colorful';\nimport { Provider, connect, useDispatch } from 'react-redux';\nimport { createStore, combineReducers } from 'redux';\nimport { HotTable, HotColumn, useHotEditor } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\ninterface StarRatingProps {\n name: string;\n value?: number;\n starCount?: number;\n starColor?: string;\n emptyStarColor?: string;\n}\n\nfunction StarRating({ name, value = 0, starCount = 5, starColor = '#ffb400', emptyStarColor = '#d3d3d3' }: StarRatingProps) {\n return (\n \n {Array.from({ length: starCount }, (_, i) => (\n \n ★\n \n ))}\n
\n );\n}\n\ntype RendererProps = {\n TD?: HTMLTableCellElement;\n value?: string | number;\n row?: number;\n col?: number;\n cellProperties?: Handsontable.CellProperties;\n};\n\nconst UnconnectedColorPickerEditor = () => {\n const dispatch = useDispatch();\n const editorRef = useRef(null);\n const [pickedColor, setPickedColor] = useState('');\n\n const { value, setValue, isOpen, finishEditing, col, row } = useHotEditor({\n onOpen: () => {\n if (editorRef.current) editorRef.current.style.display = 'block';\n (document.querySelector('.react-colorful__interactive') as HTMLDivElement)?.focus();\n },\n onClose: () => {\n if (editorRef.current) editorRef.current.style.display = 'none';\n\n setPickedColor('');\n },\n onPrepare: (_row, _column, _prop, TD, _originalValue, _cellProperties) => {\n const tdPosition = TD.getBoundingClientRect();\n\n if (!editorRef.current) return;\n\n editorRef.current.style.left = `${tdPosition.left + window.pageXOffset}px`;\n editorRef.current.style.top = `${tdPosition.top + window.pageYOffset}px`;\n },\n onFocus: () => {},\n });\n\n const onPickedColor = (color: string) => {\n setValue(color);\n };\n\n const applyColor = () => {\n if (col === 1) {\n dispatch({\n type: 'updateActiveStarColor',\n row,\n hexColor: value,\n });\n } else if (col === 2) {\n dispatch({\n type: 'updateInactiveStarColor',\n row,\n hexColor: value,\n });\n }\n\n finishEditing();\n };\n\n const stopMousedownPropagation = (e: MouseEvent) => {\n e.stopPropagation();\n };\n\n const stopKeyboardPropagation = (e: KeyboardEvent) => {\n e.stopPropagation();\n\n if (e.key === 'Escape') {\n applyColor();\n }\n };\n\n return (\n \n \n \n \n );\n};\n\nconst ColorPickerEditor = connect(function (state: RootState) {\n return {\n activeColors: state.appReducer.activeColors,\n inactiveColors: state.appReducer.inactiveColors,\n };\n})(UnconnectedColorPickerEditor);\n\nconst ColorPickerRenderer = ({ value }: RendererProps) => {\n return (\n <>\n \n {value}
\n \n );\n};\n\n// a Redux component\nconst initialReduxStoreState: {\n activeColors?: string[];\n inactiveColors?: string[];\n} = {\n activeColors: [],\n inactiveColors: [],\n};\n\nconst appReducer = (\n state = initialReduxStoreState,\n action: { type?: any; row?: any; hexColor?: any; hotData?: any }\n) => {\n switch (action.type) {\n case 'initRatingColors': {\n const { hotData } = action;\n\n const activeColors = hotData.map((data: string[]) => data[1]);\n const inactiveColors = hotData.map((data: string[]) => data[2]);\n\n return {\n ...state,\n activeColors,\n inactiveColors,\n };\n }\n\n case 'updateActiveStarColor': {\n const rowIndex = action.row;\n const newColor = action.hexColor;\n\n const activeColorArray = state.activeColors ? [...state.activeColors] : [];\n\n activeColorArray[rowIndex] = newColor;\n\n return {\n ...state,\n activeColors: activeColorArray,\n };\n }\n\n case 'updateInactiveStarColor': {\n const rowIndex = action.row;\n const newColor = action.hexColor;\n\n const inactiveColorArray = state.inactiveColors ? [...state.inactiveColors] : [];\n\n inactiveColorArray[rowIndex] = newColor;\n\n return {\n ...state,\n inactiveColors: inactiveColorArray,\n };\n }\n\n default:\n return state;\n }\n};\n\nconst actionReducers = combineReducers({ appReducer });\nconst reduxStore = createStore(actionReducers);\n\ntype RootState = ReturnType;\n\n// a custom renderer component\nconst UnconnectedStarRatingRenderer = ({\n row,\n col,\n value,\n activeColors,\n inactiveColors,\n}: {\n row?: number;\n col?: number;\n value?: number;\n activeColors?: string;\n inactiveColors?: string;\n}) => {\n return (\n \n );\n};\n\nconst StarRatingRenderer = connect((state: RootState) => ({\n activeColors: state.appReducer.activeColors,\n inactiveColors: state.appReducer.inactiveColors,\n}))(UnconnectedStarRatingRenderer);\n\nconst data = [\n [1, '#ff6900', '#fcb900'],\n [2, '#fcb900', '#7bdcb5'],\n [3, '#7bdcb5', '#8ed1fc'],\n [4, '#00d084', '#0693e3'],\n [5, '#eb144c', '#abb8c3'],\n];\n\nconst ExampleComponent = () => {\n useEffect(() => {\n reduxStore.dispatch({\n type: 'initRatingColors',\n hotData: data,\n });\n }, []);\n\n return (\n \n \n \n \n \n \n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/getting-started/react-redux/react/example6.tsx","breadcrumb":["Getting Started","Integration with Redux"],"guide":"guides/getting-started/react-redux/react-redux.md","guideTitle":"Integration with Redux","exampleId":"example6","exampleTitle":"Advanced example","docPermalink":"/redux","lang":"React (TS)"}
+{"framework":"react","displayName":"Getting Started ▸ Integration with Redux · Advanced example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.1.0","fileCount":5,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.1.0\",\n \"@handsontable/react-wrapper\": \"18.1.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\",\n \"react-colorful\": \"5.8.1\",\n \"react-redux\": \"9.3.0\",\n \"redux\": \"5.0.1\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n\n\n \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example6\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { useEffect, MouseEvent, KeyboardEvent, useRef, useState } from 'react';\nimport Handsontable from 'handsontable/base';\nimport { HexColorPicker } from 'react-colorful';\nimport { Provider, connect, useDispatch } from 'react-redux';\nimport { createStore, combineReducers } from 'redux';\nimport { HotTable, HotColumn, useHotEditor } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\n\n// register Handsontable's modules\nregisterAllModules();\n\ninterface StarRatingProps {\n name: string;\n value?: number;\n starCount?: number;\n starColor?: string;\n emptyStarColor?: string;\n}\n\nfunction StarRating({ name, value = 0, starCount = 5, starColor = '#ffb400', emptyStarColor = '#d3d3d3' }: StarRatingProps) {\n return (\n \n {Array.from({ length: starCount }, (_, i) => (\n \n ★\n \n ))}\n
\n );\n}\n\ntype RendererProps = {\n TD?: HTMLTableCellElement;\n value?: string | number;\n row?: number;\n col?: number;\n cellProperties?: Handsontable.CellProperties;\n};\n\nconst UnconnectedColorPickerEditor = () => {\n const dispatch = useDispatch();\n const editorRef = useRef(null);\n const [pickedColor, setPickedColor] = useState('');\n\n const { value, setValue, isOpen, finishEditing, col, row } = useHotEditor({\n onOpen: () => {\n if (editorRef.current) editorRef.current.style.display = 'block';\n (document.querySelector('.react-colorful__interactive') as HTMLDivElement)?.focus();\n },\n onClose: () => {\n if (editorRef.current) editorRef.current.style.display = 'none';\n\n setPickedColor('');\n },\n onPrepare: (_row, _column, _prop, TD, _originalValue, _cellProperties) => {\n const tdPosition = TD.getBoundingClientRect();\n\n if (!editorRef.current) return;\n\n editorRef.current.style.left = `${tdPosition.left + window.pageXOffset}px`;\n editorRef.current.style.top = `${tdPosition.top + window.pageYOffset}px`;\n },\n onFocus: () => {},\n });\n\n const onPickedColor = (color: string) => {\n setValue(color);\n };\n\n const applyColor = () => {\n if (col === 1) {\n dispatch({\n type: 'updateActiveStarColor',\n row,\n hexColor: value,\n });\n } else if (col === 2) {\n dispatch({\n type: 'updateInactiveStarColor',\n row,\n hexColor: value,\n });\n }\n\n finishEditing();\n };\n\n const stopMousedownPropagation = (e: MouseEvent) => {\n e.stopPropagation();\n };\n\n const stopKeyboardPropagation = (e: KeyboardEvent) => {\n e.stopPropagation();\n\n if (e.key === 'Escape') {\n applyColor();\n }\n };\n\n return (\n \n \n \n \n );\n};\n\nconst ColorPickerEditor = connect(function (state: RootState) {\n return {\n activeColors: state.appReducer.activeColors,\n inactiveColors: state.appReducer.inactiveColors,\n };\n})(UnconnectedColorPickerEditor);\n\nconst ColorPickerRenderer = ({ value }: RendererProps) => {\n return (\n <>\n \n {value}
\n \n );\n};\n\n// a Redux component\nconst initialReduxStoreState: {\n activeColors?: string[];\n inactiveColors?: string[];\n} = {\n activeColors: [],\n inactiveColors: [],\n};\n\nconst appReducer = (\n state = initialReduxStoreState,\n action: { type?: any; row?: any; hexColor?: any; hotData?: any }\n) => {\n switch (action.type) {\n case 'initRatingColors': {\n const { hotData } = action;\n\n const activeColors = hotData.map((data: string[]) => data[1]);\n const inactiveColors = hotData.map((data: string[]) => data[2]);\n\n return {\n ...state,\n activeColors,\n inactiveColors,\n };\n }\n\n case 'updateActiveStarColor': {\n const rowIndex = action.row;\n const newColor = action.hexColor;\n\n const activeColorArray = state.activeColors ? [...state.activeColors] : [];\n\n activeColorArray[rowIndex] = newColor;\n\n return {\n ...state,\n activeColors: activeColorArray,\n };\n }\n\n case 'updateInactiveStarColor': {\n const rowIndex = action.row;\n const newColor = action.hexColor;\n\n const inactiveColorArray = state.inactiveColors ? [...state.inactiveColors] : [];\n\n inactiveColorArray[rowIndex] = newColor;\n\n return {\n ...state,\n inactiveColors: inactiveColorArray,\n };\n }\n\n default:\n return state;\n }\n};\n\nconst actionReducers = combineReducers({ appReducer });\nconst reduxStore = createStore(actionReducers);\n\ntype RootState = ReturnType;\n\n// a custom renderer component\nconst UnconnectedStarRatingRenderer = ({\n row,\n col,\n value,\n activeColors,\n inactiveColors,\n}: {\n row?: number;\n col?: number;\n value?: number;\n activeColors?: string;\n inactiveColors?: string;\n}) => {\n return (\n \n );\n};\n\nconst StarRatingRenderer = connect((state: RootState) => ({\n activeColors: state.appReducer.activeColors,\n inactiveColors: state.appReducer.inactiveColors,\n}))(UnconnectedStarRatingRenderer);\n\nconst data = [\n [1, '#ff6900', '#fcb900'],\n [2, '#fcb900', '#7bdcb5'],\n [3, '#7bdcb5', '#8ed1fc'],\n [4, '#00d084', '#0693e3'],\n [5, '#eb144c', '#abb8c3'],\n];\n\nconst ExampleComponent = () => {\n useEffect(() => {\n reduxStore.dispatch({\n type: 'initRatingColors',\n hotData: data,\n });\n }, []);\n\n return (\n \n \n \n \n \n \n \n );\n};\n\nexport default ExampleComponent;"},"docsPath":"guides/getting-started/react-redux/react/example6.tsx","breadcrumb":["Getting Started","Integration with Redux"],"guide":"guides/getting-started/react-redux/react-redux.md","guideTitle":"Integration with Redux","exampleId":"example6","exampleTitle":"Advanced example","docPermalink":"/redux","lang":"React (TS)"}
diff --git a/runner/apps/authoring/public/docs-examples/18.1/recipes__cell-types__colorful-picker__react__example1.tsx.json b/runner/apps/authoring/public/docs-examples/18.1/recipes__cell-types__colorful-picker__react__example1.tsx.json
index 5e7d23091..bb5add314 100644
--- a/runner/apps/authoring/public/docs-examples/18.1/recipes__cell-types__colorful-picker__react__example1.tsx.json
+++ b/runner/apps/authoring/public/docs-examples/18.1/recipes__cell-types__colorful-picker__react__example1.tsx.json
@@ -1 +1 @@
-{"framework":"react","displayName":"Recipes ▸ Cell Types ▸ Colorful Picker · Standard example · React (TS)","tier":1,"engine":"sandpack","sandpackTemplate":"react-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":["@handsontable/react-wrapper"],"entry":"/src/main.tsx","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"18.1.0","fileCount":6,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-react-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"18.1.0\",\n \"@handsontable/react-wrapper\": \"18.1.0\",\n \"react\": \"18.x\",\n \"react-dom\": \"18.x\",\n \"vite\": \"^5.4.0\",\n \"@vitejs/plugin-react\": \"^4.0.0\",\n \"react-colorful\": \"5.8.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/vite.config.js":"import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({ plugins: [react()] });","/index.html":"\n\n\n \n \n Handsontable React Example\n \n\n\n \n \n\n","/src/main.tsx":"import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport App from \"./App\";\nconst root = createRoot(document.getElementById(\"example1\"));\nroot.render(React.createElement(App));","/src/App.tsx":"import { HotTable, HotColumn, EditorComponent } from '@handsontable/react-wrapper';\nimport { registerAllModules } from 'handsontable/registry';\nimport { rendererFactory } from 'handsontable/renderers';\nimport { HexColorPicker } from 'react-colorful';\nimport './example1.css';\n\nregisterAllModules();\n\n/* start:skip-in-preview */\nconst inputData = [\n {\n id: 640329,\n itemName: 'Lunar Core',\n itemNo: 'XJ-12',\n leadEngineer: 'Ellen Ripley',\n cost: 350000,\n inStock: true,\n category: 'Lander',\n itemQuality: 87,\n origin: '🇺🇸 USA',\n quantity: 2,\n valueStock: 700000,\n repairable: false,\n supplierName: 'TechNova',\n restockDate: '2025-08-01',\n operationalStatus: 'Awaiting Parts',\n },\n {\n id: 863104,\n itemName: 'Zero Thrusters',\n itemNo: 'QL-54',\n leadEngineer: 'Sam Bell',\n cost: 450000,\n inStock: false,\n category: 'Propulsion',\n itemQuality: 0,\n origin: '🇩🇪 Germany',\n quantity: 0,\n valueStock: 0,\n repairable: true,\n supplierName: 'PropelMax',\n restockDate: '2025-09-15',\n operationalStatus: 'In Maintenance',\n },\n {\n id: 395603,\n itemName: 'EVA Suits',\n itemNo: 'PM-67',\n leadEngineer: 'Alex Rogan',\n cost: 150000,\n inStock: true,\n category: 'Equipment',\n itemQuality: 79,\n origin: '🇮🇹 Italy',\n quantity: 50,\n valueStock: 7500000,\n repairable: true,\n supplierName: 'SuitCraft',\n restockDate: '2025-10-05',\n operationalStatus: 'Ready for Testing',\n },\n {\n id: 679083,\n itemName: 'Solar Panels',\n itemNo: 'BW-09',\n leadEngineer: 'Dave Bowman',\n cost: 75000,\n inStock: true,\n category: 'Energy',\n itemQuality: 95,\n origin: '🇺🇸 USA',\n quantity: 10,\n valueStock: 750000,\n repairable: false,\n supplierName: 'SolarStream',\n restockDate: '2025-11-10',\n operationalStatus: 'Operational',\n },\n {\n id: 912663,\n itemName: 'Comm Array',\n itemNo: 'ZR-56',\n leadEngineer: 'Louise Banks',\n cost: 125000,\n inStock: false,\n category: 'Communication',\n itemQuality: 0,\n origin: '🇯🇵 Japan',\n quantity: 0,\n valueStock: 0,\n repairable: true,\n supplierName: 'CommTech',\n restockDate: '2025-12-20',\n operationalStatus: 'Decommissioned',\n },\n {\n id: 315806,\n itemName: 'Habitat Dome',\n itemNo: 'UJ-23',\n leadEngineer: 'Dr. Ryan Stone',\n cost: 1000000,\n inStock: true,\n category: 'Shelter',\n itemQuality: 93,\n origin: '🇨🇦 Canada',\n quantity: 3,\n valueStock: 3000000,\n repairable: false,\n supplierName: 'DomeInnovate',\n restockDate: '2026-01-25',\n operationalStatus: 'Operational',\n },\n {\n id: 954632,\n itemName: 'Oxygen Unit',\n itemNo: 'FK-87',\n leadEngineer: 'Dr. Grace Augustine',\n cost: 600000,\n inStock: true,\n category: 'Life Support',\n itemQuality: 85,\n origin: '🇺🇸 USA',\n quantity: 15,\n valueStock: 9000000,\n repairable: true,\n supplierName: 'OxyGenius',\n restockDate: '2026-03-02',\n operationalStatus: 'Awaiting Parts',\n },\n {\n id: 734944,\n itemName: 'Processing Rig',\n itemNo: 'LK-13',\n leadEngineer: 'Jake Sully',\n cost: 350000,\n inStock: true,\n category: 'Mining',\n itemQuality: 81,\n origin: '🇦🇺 Australia',\n quantity: 25,\n valueStock: 8750000,\n repairable: true,\n supplierName: 'RigTech',\n restockDate: '2026-04-15',\n operationalStatus: 'Ready for Testing',\n },\n {\n id: 834662,\n itemName: 'Navigation Module',\n itemNo: 'XP-24',\n leadEngineer: 'Dr. Ellie Arroway',\n cost: 450000,\n inStock: true,\n category: 'Navigation',\n itemQuality: 89,\n origin: '🇫🇷 France',\n quantity: 8,\n valueStock: 3600000,\n repairable: false,\n supplierName: 'NavSolutions',\n restockDate: '2026-05-30',\n operationalStatus: 'In Maintenance',\n },\n {\n id: 714329,\n itemName: 'Surveyor Arm',\n itemNo: 'QA-86',\n leadEngineer: 'Mark Watney',\n cost: 100000,\n inStock: true,\n category: 'Exploration',\n itemQuality: 78,\n origin: '🇺🇸 USA',\n quantity: 40,\n valueStock: 4000000,\n repairable: true,\n supplierName: 'ExploreTech',\n restockDate: '2026-07-12',\n operationalStatus: 'Decommissioned',\n },\n];\n\nexport const data = inputData.map((el) => ({\n ...el,\n // eslint-disable-next-line no-mixed-operators\n color: `#${\n // eslint-disable-next-line no-mixed-operators\n Math.round(0x1000000 + 0xffffff * Math.random())\n .toString(16)\n .slice(1)\n .toUpperCase()\n }`,\n}));\n/* end:skip-in-preview */\n\nconst colorCellRenderer = rendererFactory(({ td, value }) => {\n td.innerHTML = ``;\n});\n\nconst colorValidator = (value: string, callback: (valid: boolean) => void) => {\n callback(value.length === 7 && value[0] === '#'); // validate color format\n};\n\nexport const ColorPickerEditor = () => {\n return (\n \n {({ value, setValue }) => (\n \n
\n
\n setValue(color)} />\n
\n
\n
\n
\n setValue(color)} />\n
\n