Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
@@ -1 +1 @@
{"framework":"javascript","displayName":"Accessories And Menus ▸ How to use icons in cells · Use a third-party icon set · 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 \"lucide\": \"1.50.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 id=\"example2\"></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';\nimport { createIcons, Flag, FlagOff } from 'lucide';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst data = [\n { task: 'Update API docs', assignee: 'Ana García', dueDate: '2025-06-30', flagged: true },\n { task: 'Deploy hotfix', assignee: 'James Okafor', dueDate: '2025-06-18', flagged: false },\n { task: 'Review pull request', assignee: 'Li Wei', dueDate: '2025-06-20', flagged: false },\n { task: 'Write release notes', assignee: 'Sara Nowak', dueDate: '2025-06-25', flagged: true },\n { task: 'Fix flaky test', assignee: 'Marco Rossi', dueDate: '2025-06-22', flagged: false },\n];\n// Lucide reads a `data-lucide` placeholder and replaces it with an inline\n// `<svg>`. The renderer writes the placeholder, then triggers the swap.\nconst flagRenderer = (instance, td, row, _col, _prop, value) => {\n const taskName = String(instance.getDataAtCell(row, 0));\n const button = document.createElement('button');\n button.type = 'button';\n button.style.cssText = 'background: none; border: none; cursor: pointer; padding: 0.25rem;';\n button.innerHTML = `<i data-lucide=\"${value ? 'flag' : 'flag-off'}\"></i>`;\n // The icon has no accessible name, so the button carries an `aria-label`\n // that describes what clicking it does.\n button.setAttribute('aria-label', value ? `Remove the follow-up flag from ${taskName}` : `Flag ${taskName} for follow-up`);\n button.addEventListener('click', () => {\n instance.setDataAtCell(row, 3, !value);\n });\n td.innerText = '';\n td.appendChild(button);\n // `root` scopes the scan to this cell. Without it, Lucide walks the whole\n // document on every cell render, which a grid does once per visible cell.\n // `currentColor` keeps the icon visible in both light and dark themes.\n createIcons({\n icons: { Flag, FlagOff },\n attrs: { width: '18', height: '18', stroke: 'currentColor' },\n root: td,\n });\n return td;\n};\nconst container = document.querySelector('#example2');\nnew Handsontable(container, {\n data,\n colHeaders: ['Task', 'Assignee', 'Due date', 'Flagged'],\n columns: [\n { data: 'task' },\n { data: 'assignee' },\n { data: 'dueDate', type: 'date', dateFormat: { year: 'numeric', month: '2-digit', day: '2-digit' } },\n { data: 'flagged', renderer: flagRenderer, className: 'htCenter' },\n ],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/use-icons-in-cells/javascript/example2.js","breadcrumb":["Accessories And Menus","How to use icons in cells"],"guide":"guides/accessories-and-menus/use-icons-in-cells/use-icons-in-cells.md","guideTitle":"How to use icons in cells","exampleId":"example2","exampleTitle":"Use a third-party icon set","docPermalink":"/use-icons-in-cells","lang":"JavaScript"}
{"framework":"javascript","displayName":"Accessories And Menus ▸ How to use icons in cells · Use a third-party icon set · 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 \"lucide\": \"1.52.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 id=\"example2\"></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';\nimport { createIcons, Flag, FlagOff } from 'lucide';\n// Register all Handsontable's modules.\nregisterAllModules();\nconst data = [\n { task: 'Update API docs', assignee: 'Ana García', dueDate: '2025-06-30', flagged: true },\n { task: 'Deploy hotfix', assignee: 'James Okafor', dueDate: '2025-06-18', flagged: false },\n { task: 'Review pull request', assignee: 'Li Wei', dueDate: '2025-06-20', flagged: false },\n { task: 'Write release notes', assignee: 'Sara Nowak', dueDate: '2025-06-25', flagged: true },\n { task: 'Fix flaky test', assignee: 'Marco Rossi', dueDate: '2025-06-22', flagged: false },\n];\n// Lucide reads a `data-lucide` placeholder and replaces it with an inline\n// `<svg>`. The renderer writes the placeholder, then triggers the swap.\nconst flagRenderer = (instance, td, row, _col, _prop, value) => {\n const taskName = String(instance.getDataAtCell(row, 0));\n const button = document.createElement('button');\n button.type = 'button';\n button.style.cssText = 'background: none; border: none; cursor: pointer; padding: 0.25rem;';\n button.innerHTML = `<i data-lucide=\"${value ? 'flag' : 'flag-off'}\"></i>`;\n // The icon has no accessible name, so the button carries an `aria-label`\n // that describes what clicking it does.\n button.setAttribute('aria-label', value ? `Remove the follow-up flag from ${taskName}` : `Flag ${taskName} for follow-up`);\n button.addEventListener('click', () => {\n instance.setDataAtCell(row, 3, !value);\n });\n td.innerText = '';\n td.appendChild(button);\n // `root` scopes the scan to this cell. Without it, Lucide walks the whole\n // document on every cell render, which a grid does once per visible cell.\n // `currentColor` keeps the icon visible in both light and dark themes.\n createIcons({\n icons: { Flag, FlagOff },\n attrs: { width: '18', height: '18', stroke: 'currentColor' },\n root: td,\n });\n return td;\n};\nconst container = document.querySelector('#example2');\nnew Handsontable(container, {\n data,\n colHeaders: ['Task', 'Assignee', 'Due date', 'Flagged'],\n columns: [\n { data: 'task' },\n { data: 'assignee' },\n { data: 'dueDate', type: 'date', dateFormat: { year: 'numeric', month: '2-digit', day: '2-digit' } },\n { data: 'flagged', renderer: flagRenderer, className: 'htCenter' },\n ],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.js":"import \"../index.js\";"},"docsPath":"guides/accessories-and-menus/use-icons-in-cells/javascript/example2.js","breadcrumb":["Accessories And Menus","How to use icons in cells"],"guide":"guides/accessories-and-menus/use-icons-in-cells/use-icons-in-cells.md","guideTitle":"How to use icons in cells","exampleId":"example2","exampleTitle":"Use a third-party icon set","docPermalink":"/use-icons-in-cells","lang":"JavaScript"}
Original file line number Diff line number Diff line change
@@ -1 +1 @@
{"framework":"typescript","displayName":"Accessories And Menus ▸ How to use icons in cells · Use a third-party icon set · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","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 \"typescript\": \"^5.4.0\",\n \"lucide\": \"1.50.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 id=\"example2\"></div>\n <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { BaseRenderer } from 'handsontable/renderers';\nimport { createIcons, Flag, FlagOff } from 'lucide';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\ninterface Task {\n task: string;\n assignee: string;\n dueDate: string;\n flagged: boolean;\n}\n\nconst data: Task[] = [\n { task: 'Update API docs', assignee: 'Ana García', dueDate: '2025-06-30', flagged: true },\n { task: 'Deploy hotfix', assignee: 'James Okafor', dueDate: '2025-06-18', flagged: false },\n { task: 'Review pull request', assignee: 'Li Wei', dueDate: '2025-06-20', flagged: false },\n { task: 'Write release notes', assignee: 'Sara Nowak', dueDate: '2025-06-25', flagged: true },\n { task: 'Fix flaky test', assignee: 'Marco Rossi', dueDate: '2025-06-22', flagged: false },\n];\n\n// Lucide reads a `data-lucide` placeholder and replaces it with an inline\n// `<svg>`. The renderer writes the placeholder, then triggers the swap.\nconst flagRenderer: BaseRenderer = (instance, td, row, _col, _prop, value) => {\n const taskName = String(instance.getDataAtCell(row, 0));\n const button = document.createElement('button');\n\n button.type = 'button';\n button.style.cssText = 'background: none; border: none; cursor: pointer; padding: 0.25rem;';\n button.innerHTML = `<i data-lucide=\"${value ? 'flag' : 'flag-off'}\"></i>`;\n // The icon has no accessible name, so the button carries an `aria-label`\n // that describes what clicking it does.\n button.setAttribute(\n 'aria-label',\n value ? `Remove the follow-up flag from ${taskName}` : `Flag ${taskName} for follow-up`\n );\n button.addEventListener('click', () => {\n instance.setDataAtCell(row, 3, !value);\n });\n\n td.innerText = '';\n td.appendChild(button);\n\n // `root` scopes the scan to this cell. Without it, Lucide walks the whole\n // document on every cell render, which a grid does once per visible cell.\n // `currentColor` keeps the icon visible in both light and dark themes.\n createIcons({\n icons: { Flag, FlagOff },\n attrs: { width: '18', height: '18', stroke: 'currentColor' },\n root: td,\n });\n\n return td;\n};\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n data,\n colHeaders: ['Task', 'Assignee', 'Due date', 'Flagged'],\n columns: [\n { data: 'task' },\n { data: 'assignee' },\n { data: 'dueDate', type: 'date', dateFormat: { year: 'numeric', month: '2-digit', day: '2-digit' } },\n { data: 'flagged', renderer: flagRenderer, className: 'htCenter' },\n ],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/use-icons-in-cells/javascript/example2.ts","breadcrumb":["Accessories And Menus","How to use icons in cells"],"guide":"guides/accessories-and-menus/use-icons-in-cells/use-icons-in-cells.md","guideTitle":"How to use icons in cells","exampleId":"example2","exampleTitle":"Use a third-party icon set","docPermalink":"/use-icons-in-cells","lang":"TypeScript"}
{"framework":"typescript","displayName":"Accessories And Menus ▸ How to use icons in cells · Use a third-party icon set · TypeScript","tier":1,"engine":"sandpack","sandpackTemplate":"vanilla-ts","sandpackEnvironment":"parcel","container":null,"htWrappers":[],"entry":"/src/main.ts","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 \"typescript\": \"^5.4.0\",\n \"lucide\": \"1.52.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 id=\"example2\"></div>\n <script type=\"module\" src=\"/src/main.ts\"></script>\n</body>\n</html>","/index.ts":"import Handsontable from 'handsontable/base';\nimport { registerAllModules } from 'handsontable/registry';\nimport type { BaseRenderer } from 'handsontable/renderers';\nimport { createIcons, Flag, FlagOff } from 'lucide';\n\n// Register all Handsontable's modules.\nregisterAllModules();\n\ninterface Task {\n task: string;\n assignee: string;\n dueDate: string;\n flagged: boolean;\n}\n\nconst data: Task[] = [\n { task: 'Update API docs', assignee: 'Ana García', dueDate: '2025-06-30', flagged: true },\n { task: 'Deploy hotfix', assignee: 'James Okafor', dueDate: '2025-06-18', flagged: false },\n { task: 'Review pull request', assignee: 'Li Wei', dueDate: '2025-06-20', flagged: false },\n { task: 'Write release notes', assignee: 'Sara Nowak', dueDate: '2025-06-25', flagged: true },\n { task: 'Fix flaky test', assignee: 'Marco Rossi', dueDate: '2025-06-22', flagged: false },\n];\n\n// Lucide reads a `data-lucide` placeholder and replaces it with an inline\n// `<svg>`. The renderer writes the placeholder, then triggers the swap.\nconst flagRenderer: BaseRenderer = (instance, td, row, _col, _prop, value) => {\n const taskName = String(instance.getDataAtCell(row, 0));\n const button = document.createElement('button');\n\n button.type = 'button';\n button.style.cssText = 'background: none; border: none; cursor: pointer; padding: 0.25rem;';\n button.innerHTML = `<i data-lucide=\"${value ? 'flag' : 'flag-off'}\"></i>`;\n // The icon has no accessible name, so the button carries an `aria-label`\n // that describes what clicking it does.\n button.setAttribute(\n 'aria-label',\n value ? `Remove the follow-up flag from ${taskName}` : `Flag ${taskName} for follow-up`\n );\n button.addEventListener('click', () => {\n instance.setDataAtCell(row, 3, !value);\n });\n\n td.innerText = '';\n td.appendChild(button);\n\n // `root` scopes the scan to this cell. Without it, Lucide walks the whole\n // document on every cell render, which a grid does once per visible cell.\n // `currentColor` keeps the icon visible in both light and dark themes.\n createIcons({\n icons: { Flag, FlagOff },\n attrs: { width: '18', height: '18', stroke: 'currentColor' },\n root: td,\n });\n\n return td;\n};\n\nconst container = document.querySelector('#example2')!;\n\nnew Handsontable(container, {\n data,\n colHeaders: ['Task', 'Assignee', 'Due date', 'Flagged'],\n columns: [\n { data: 'task' },\n { data: 'assignee' },\n { data: 'dueDate', type: 'date', dateFormat: { year: 'numeric', month: '2-digit', day: '2-digit' } },\n { data: 'flagged', renderer: flagRenderer, className: 'htCenter' },\n ],\n height: 'auto',\n autoWrapRow: true,\n autoWrapCol: true,\n licenseKey: 'non-commercial-and-evaluation',\n});","/src/main.ts":"import \"../index.ts\";"},"docsPath":"guides/accessories-and-menus/use-icons-in-cells/javascript/example2.ts","breadcrumb":["Accessories And Menus","How to use icons in cells"],"guide":"guides/accessories-and-menus/use-icons-in-cells/use-icons-in-cells.md","guideTitle":"How to use icons in cells","exampleId":"example2","exampleTitle":"Use a third-party icon set","docPermalink":"/use-icons-in-cells","lang":"TypeScript"}
Loading