Skip to content

chore(docs): update versioned docs examples #411

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
Oct 5, 2026
Merged

chore(docs): update versioned docs examples #411

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 ...ocs-examples/next/guides__getting-started__events-and-hooks__javascript__example1.js.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1 @@
{"framework":"javascript","displayName":"Getting Started ▸ Events and hooks · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 Example</title>\n <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n <div class=\"example-container\">\n <div class=\"example-table-container\">\n <div id=\"example1\"></div>\n </div>\n <div id=\"example1_events\"></div>\n <aside aria-label=\"Tip\" class=\"starlight-aside starlight-aside--tip\">\n <p class=\"starlight-aside__title\" aria-hidden=\"true\">Tip</p>\n <div class=\"starlight-aside__content\"><p>Open the Developer Tools Console tab to see each event details object.</p></div>\n </aside>\n <strong> Choose events to be logged:</strong>\n <ul id=\"hooksList\">\n <li>\n <label><input type=\"checkbox\" id=\"check_select_all\" />Select all</label>\n </li>\n </ul>\n </div>\n <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst config = {\n data: [\n ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n ],\n minRows: 5,\n minCols: 5,\n height: 'auto',\n stretchH: 'all',\n minSpareRows: 1,\n autoWrapRow: true,\n colHeaders: ['SKU', 'Product', 'Supplier', 'Category', 'Warehouse'],\n contextMenu: true,\n autoWrapCol: true,\n dropdownMenu: true,\n filters: true,\n columnSorting: true,\n mergeCells: true,\n comments: true,\n manualColumnMove: true,\n manualRowMove: true,\n moveCells: true,\n licenseKey: 'non-commercial-and-evaluation',\n};\n\nconst example1Events = document.getElementById('example1_events');\nconst hooksList = document.getElementById('hooksList');\nconst hooks = Handsontable.hooks.getRegistered();\n\nhooks.forEach((hook) => {\n let checked = '';\n\n if (\n hook === 'afterChange' ||\n hook === 'afterSelection' ||\n hook === 'afterCreateRow' ||\n hook === 'afterRemoveRow' ||\n hook === 'afterCreateCol' ||\n hook === 'afterRemoveCol'\n ) {\n checked = 'checked';\n }\n\n hooksList.innerHTML += `<li><label><input type=\"checkbox\" ${checked} id=\"check_${hook}\"> ${hook}</label></li>`;\n config[hook] = function () {\n log_events(hook, arguments);\n };\n});\n\nconst start = new Date().getTime();\nlet i = 0;\nlet timer;\n\n/**\n * @param event\n * @param data\n */\nfunction log_events(event, data) {\n if (document.getElementById(`check_${event}`).checked) {\n const now = new Date().getTime();\n const diff = now - start;\n let str;\n const vals = [i, `@${(diff / 1000).toFixed(3)}`, `[${event}]`];\n\n for (let d = 0; d < data.length; d++) {\n try {\n str = JSON.stringify(data[d]);\n } catch (e) {\n str = data[d].toString();\n }\n\n if (str === void 0) {\n continue;\n }\n\n if (str.length > 20) {\n str = typeof data[d] === 'object' ? `object: ${str.substr(0, 20)}...}` : str.toString();\n }\n\n if (d < data.length - 1) {\n str += ',';\n }\n\n vals.push(str);\n }\n\n if (window.console) {\n console.log(i, `@${(diff / 1000).toFixed(3)}`, `[${event}]`, data);\n }\n\n const div = document.createElement('div');\n const text = document.createTextNode(vals.join(' '));\n\n div.appendChild(text);\n\n example1Events.appendChild(div);\n\n clearTimeout(timer);\n\n timer = setTimeout(() => {\n example1Events.scrollTop = example1Events.scrollHeight;\n }, 10);\n\n i++;\n }\n}\n\nconst example1 = document.querySelector('#example1');\n\nnew Handsontable(example1, config);\n\ndocument.querySelector('#check_select_all').addEventListener('click', function () {\n const state = this.checked;\n const inputs = document.querySelectorAll('#hooksList input[type=checkbox]');\n\n Array.prototype.forEach.call(inputs, (input) => {\n input.checked = state;\n });\n});\n\ndocument.querySelector('#hooksList input[type=checkbox]').addEventListener('click', function () {\n if (!this.checked) {\n document.getElementById('check_select_all').checked = false;\n }\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/getting-started/events-and-hooks/javascript/example1.js","breadcrumb":["Getting Started","Events and hooks"],"guide":"guides/getting-started/events-and-hooks/events-and-hooks.md","guideTitle":"Events and hooks","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/events-and-hooks","lang":"JavaScript"}
{"framework":"javascript","displayName":"Getting Started ▸ Events and hooks · Standard example · JavaScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.js","htmlEntry":"/index.html","devCommand":null,"buildCommand":"vite build","outputDir":"dist","outputGlob":null,"staticExport":false,"spaMode":false,"port":null,"installCommand":"pnpm install","htCoreRange":"0.0.0-next-b0dc2e1-20261002","fileCount":4,"assets":[],"skipped":[],"files":{"/package.json":"{\n \"name\": \"handsontable-example\",\n \"version\": \"1.0.0\",\n \"private\": true,\n \"packageManager\": \"pnpm@10.34.5\",\n \"dependencies\": {\n \"handsontable\": \"0.0.0-next-b0dc2e1-20261002\",\n \"vite\": \"^5.4.0\"\n },\n \"scripts\": {\n \"start\": \"vite\",\n \"build\": \"vite build\"\n }\n}","/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 Example</title>\n <style>body { padding: 1rem; font-family: sans-serif; }</style>\n</head>\n<body>\n <div class=\"example-container\">\n <div class=\"example-table-container\">\n <div id=\"example1\"></div>\n </div>\n <div id=\"example1_events\"></div>\n <aside aria-label=\"Tip\" class=\"starlight-aside starlight-aside--tip\">\n <p class=\"starlight-aside__title\" aria-hidden=\"true\">Tip</p>\n <div class=\"starlight-aside__content\"><p>Open the Developer Tools Console tab to see each event details object.</p></div>\n </aside>\n <strong> Choose events to be logged:</strong>\n <ul id=\"hooksList\">\n <li>\n <label><input type=\"checkbox\" id=\"check_select_all\" />Select all</label>\n </li>\n </ul>\n </div>\n <script type=\"module\" src=\"/src/main.js\"></script>\n</body>\n</html>","/index.js":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\nconst config = {\n data: [\n ['SKU-4821', 'Stainless Steel Water Bottle', 'Harbor Goods', 'Drinkware', 'Seattle'],\n ['SKU-0093', 'Wireless Mouse', 'Alpine Supply Co.', 'Electronics', 'Denver'],\n ['SKU-1170', 'Ergonomic Office Chair', 'Cascade Distributors', 'Furniture', 'Portland'],\n ['SKU-2208', 'USB-C Charging Cable', 'Summit Trading', 'Electronics', 'Austin'],\n ['SKU-3341', 'Aluminum Water Filter', 'Northgate Wholesale', 'Drinkware', 'Minneapolis'],\n ],\n minRows: 5,\n minCols: 5,\n height: 'auto',\n stretchH: 'all',\n minSpareRows: 1,\n autoWrapRow: true,\n colHeaders: ['SKU', 'Product', 'Supplier', 'Category', 'Warehouse'],\n contextMenu: true,\n autoWrapCol: true,\n dropdownMenu: true,\n filters: true,\n columnSorting: true,\n mergeCells: true,\n comments: true,\n manualColumnMove: true,\n manualRowMove: true,\n moveCells: true,\n licenseKey: 'non-commercial-and-evaluation',\n};\n\nconst example1Events = document.getElementById('example1_events');\nconst hooksList = document.getElementById('hooksList');\nconst hooks = Handsontable.hooks.getRegistered();\n\nhooks.forEach((hook) => {\n let checked = '';\n\n if (\n hook === 'afterChange' ||\n hook === 'afterSelection' ||\n hook === 'afterCreateRow' ||\n hook === 'afterRemoveRow' ||\n hook === 'afterCreateCol' ||\n hook === 'afterRemoveCol'\n ) {\n checked = 'checked';\n }\n\n hooksList.innerHTML += `<li><label><input type=\"checkbox\" ${checked} id=\"check_${hook}\"> ${hook}</label></li>`;\n config[hook] = function () {\n log_events(hook, arguments);\n };\n});\n\nconst start = new Date().getTime();\nlet i = 0;\nlet timer;\n\n/**\n * @param event\n * @param data\n */\nfunction log_events(event, data) {\n if (document.getElementById(`check_${event}`).checked) {\n const now = new Date().getTime();\n const diff = now - start;\n let str;\n const vals = [i, `@${(diff / 1000).toFixed(3)}`, `[${event}]`];\n\n for (let d = 0; d < data.length; d++) {\n try {\n str = JSON.stringify(data[d]);\n } catch (e) {\n str = data[d].toString();\n }\n\n if (str === undefined) {\n continue;\n }\n\n if (str.length > 20) {\n str = typeof data[d] === 'object' ? `object: ${str.substr(0, 20)}...}` : str.toString();\n }\n\n if (d < data.length - 1) {\n str += ',';\n }\n\n vals.push(str);\n }\n\n if (window.console) {\n console.log(i, `@${(diff / 1000).toFixed(3)}`, `[${event}]`, data);\n }\n\n const div = document.createElement('div');\n const text = document.createTextNode(vals.join(' '));\n\n div.appendChild(text);\n\n example1Events.appendChild(div);\n\n clearTimeout(timer);\n\n timer = setTimeout(() => {\n example1Events.scrollTop = example1Events.scrollHeight;\n }, 10);\n\n i++;\n }\n}\n\nconst example1 = document.querySelector('#example1');\n\nnew Handsontable(example1, config);\n\ndocument.querySelector('#check_select_all').addEventListener('click', function () {\n const state = this.checked;\n const inputs = document.querySelectorAll('#hooksList input[type=checkbox]');\n\n Array.prototype.forEach.call(inputs, (input) => {\n input.checked = state;\n });\n});\n\ndocument.querySelector('#hooksList input[type=checkbox]').addEventListener('click', function () {\n if (!this.checked) {\n document.getElementById('check_select_all').checked = false;\n }\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/getting-started/events-and-hooks/javascript/example1.js","breadcrumb":["Getting Started","Events and hooks"],"guide":"guides/getting-started/events-and-hooks/events-and-hooks.md","guideTitle":"Events and hooks","exampleId":"example1","exampleTitle":"Standard example","docPermalink":"/events-and-hooks","lang":"JavaScript"}