Skip to content

chore(docs): update versioned docs examples #296

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
demtario merged 1 commit into from
Sep 2, 2026
+2 −2
Merged

chore(docs): update versioned docs examples #296

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .../public/docs-examples/18.1/guides__getting-started__react-redux__react__example6.tsx.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>Handsontable React Example</title>\n <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n <div id=\"example6\"></div>\n <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/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 <div style={{ display: 'inline-flex', gap: '1px' }}>\n {Array.from({ length: starCount }, (_, i) => (\n <span\n key={`${name}-${i + 1}`}\n style={{ fontSize: '18px', color: i + 1 <= value ? starColor : emptyStarColor, lineHeight: 1 }}\n >\n ★\n </span>\n ))}\n </div>\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<HTMLDivElement>(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 <div\n style={{\n display: 'none',\n position: 'absolute',\n left: 0,\n top: 0,\n zIndex: 999,\n background: '#fff',\n padding: '15px',\n border: '1px solid #cecece',\n }}\n ref={editorRef}\n onMouseDown={stopMousedownPropagation}\n onKeyDown={stopKeyboardPropagation}\n >\n <HexColorPicker color={pickedColor || value} onChange={onPickedColor} />\n <button style={{ width: '100%', height: '33px', marginTop: '10px' }} onClick={applyColor}>\n Apply\n </button>\n </div>\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 <div\n style={{\n background: value,\n width: '21px',\n height: '21px',\n float: 'left',\n marginRight: '5px',\n }}\n />\n <div>{value}</div>\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<typeof actionReducers>;\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 <StarRating\n name={`${row}-${col}`}\n value={value}\n starCount={5}\n starColor={activeColors?.[row || 0]}\n emptyStarColor={inactiveColors?.[row || 0]}\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 <Provider store={reduxStore}>\n <HotTable\n data={data}\n rowHeaders={true}\n rowHeights={30}\n colHeaders={['Rating', 'Active star color', 'Inactive star color']}\n height=\"auto\"\n autoWrapRow={true}\n autoWrapCol={true}\n licenseKey=\"non-commercial-and-evaluation\"\n >\n <HotColumn width={100} type=\"numeric\" renderer={StarRatingRenderer} />\n <HotColumn width={150} renderer={ColorPickerRenderer} editor={ColorPickerEditor} />\n <HotColumn width={150} renderer={ColorPickerRenderer} editor={ColorPickerEditor} />\n </HotTable>\n </Provider>\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":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>Handsontable React Example</title>\n <style>body { padding: 1rem; font-family: system-ui, -apple-system, sans-serif; }</style>\n</head>\n<body>\n <div id=\"example6\"></div>\n <script type=\"module\" src=\"/src/main.tsx\"></script>\n</body>\n</html>","/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 <div style={{ display: 'inline-flex', gap: '1px' }}>\n {Array.from({ length: starCount }, (_, i) => (\n <span\n key={`${name}-${i + 1}`}\n style={{ fontSize: '18px', color: i + 1 <= value ? starColor : emptyStarColor, lineHeight: 1 }}\n >\n ★\n </span>\n ))}\n </div>\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<HTMLDivElement>(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 <div\n style={{\n display: 'none',\n position: 'absolute',\n left: 0,\n top: 0,\n zIndex: 999,\n background: '#fff',\n padding: '15px',\n border: '1px solid #cecece',\n }}\n ref={editorRef}\n onMouseDown={stopMousedownPropagation}\n onKeyDown={stopKeyboardPropagation}\n >\n <HexColorPicker color={pickedColor || value} onChange={onPickedColor} />\n <button style={{ width: '100%', height: '33px', marginTop: '10px' }} onClick={applyColor}>\n Apply\n </button>\n </div>\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 <div\n style={{\n background: value,\n width: '21px',\n height: '21px',\n float: 'left',\n marginRight: '5px',\n }}\n />\n <div>{value}</div>\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<typeof actionReducers>;\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 <StarRating\n name={`${row}-${col}`}\n value={value}\n starCount={5}\n starColor={activeColors?.[row || 0]}\n emptyStarColor={inactiveColors?.[row || 0]}\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 <Provider store={reduxStore}>\n <HotTable\n data={data}\n rowHeaders={true}\n rowHeights={30}\n colHeaders={['Rating', 'Active star color', 'Inactive star color']}\n height=\"auto\"\n autoWrapRow={true}\n autoWrapCol={true}\n licenseKey=\"non-commercial-and-evaluation\"\n >\n <HotColumn width={100} type=\"numeric\" renderer={StarRatingRenderer} />\n <HotColumn width={150} renderer={ColorPickerRenderer} editor={ColorPickerEditor} />\n <HotColumn width={150} renderer={ColorPickerRenderer} editor={ColorPickerEditor} />\n </HotTable>\n </Provider>\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)"}
Loading