{"_id":"@craftthingy-digital-innovation/cty-keyboard-navigation-table-web","_rev":"3-1bef536b0b151c6e59c7d8366c479bbd","name":"@craftthingy-digital-innovation/cty-keyboard-navigation-table-web","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.1":{"name":"@craftthingy-digital-innovation/cty-keyboard-navigation-table-web","version":"1.0.1","_id":"@craftthingy-digital-innovation/cty-keyboard-navigation-table-web@1.0.1","maintainers":[{"name":"killerking69","email":"alifnurhidayatwork@gmail.com"}],"homepage":"https://github.com/CraftThingy-Digital-Innovation/cty-keyboard-navigation-table-web#readme","bugs":{"url":"https://github.com/CraftThingy-Digital-Innovation/cty-keyboard-navigation-table-web/issues"},"dist":{"shasum":"ad23172bc8189ba1c22b80056fbd80444baded8f","tarball":"https://registry.npmjs.org/@craftthingy-digital-innovation/cty-keyboard-navigation-table-web/-/cty-keyboard-navigation-table-web-1.0.1.tgz","fileCount":6,"integrity":"sha512-p6ZdqRNribcwrjUP8ao3vPtxigJzbcGsefOT18PO8I0JR1j673U1uScvfH2egPYyU6LNtsssESIz2REutvKfPA==","signatures":[{"sig":"MEYCIQDAisNwsfnlUSVlcyxpfg0Zam/1Y8VFscVwasZ7ey2X/QIhAMiDT93QtDp60cRac7RyHKPc+rlcB+4pXiAuvfZ6GgbN","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":11998},"main":"./dist/cty-keyboard-navigation-table.umd.js","type":"module","module":"./dist/cty-keyboard-navigation-table.es.js","exports":{".":{"import":"./dist/cty-keyboard-navigation-table.es.js","require":"./dist/cty-keyboard-navigation-table.umd.js"}},"gitHead":"9a5fb67ac672fe5350a0ae711cdc3b8cb4472747","scripts":{"build":"vite build"},"_npmUser":{"name":"killerking69","email":"alifnurhidayatwork@gmail.com"},"repository":{"url":"git+https://github.com/CraftThingy-Digital-Innovation/cty-keyboard-navigation-table-web.git","type":"git"},"_npmVersion":"11.6.1","description":"Interactive responsive table cell keyboard navigation manager for custom web forms.","directories":{},"_nodeVersion":"23.11.0","dependencies":{},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.2.0"},"_npmOperationalInternal":{"tmp":"tmp/cty-keyboard-navigation-table-web_1.0.1_1783087280013_0.17867523058926582","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@craftthingy-digital-innovation/cty-keyboard-navigation-table-web","version":"1.0.2","_id":"@craftthingy-digital-innovation/cty-keyboard-navigation-table-web@1.0.2","maintainers":[{"name":"killerking69","email":"alifnurhidayatwork@gmail.com"}],"homepage":"https://github.com/CraftThingy-Digital-Innovation/cty-keyboard-navigation-table-web#readme","bugs":{"url":"https://github.com/CraftThingy-Digital-Innovation/cty-keyboard-navigation-table-web/issues"},"dist":{"shasum":"1b2ebec68231e8b5efb5016a5fb9d7866a092e60","tarball":"https://registry.npmjs.org/@craftthingy-digital-innovation/cty-keyboard-navigation-table-web/-/cty-keyboard-navigation-table-web-1.0.2.tgz","fileCount":6,"integrity":"sha512-8fywH2EEvkSknKhYEue96sNPvJBOuGcfBoNu1j3qxmZnP+FkzuKwgYfot8FXitZKufKD1SV7wjZd3BH2HSaG1g==","signatures":[{"sig":"MEUCIQDquccTX3aR9p3vKDzWqY+pTP5RmFta1lYKibjtE+mwIAIgML9f9nv4JS2MFDCsc+Mp7jlfTbRiTQjblAFOjQ/7k14=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":12224},"main":"./dist/cty-keyboard-navigation-table.umd.js","type":"module","module":"./dist/cty-keyboard-navigation-table.es.js","exports":{".":{"import":"./dist/cty-keyboard-navigation-table.es.js","require":"./dist/cty-keyboard-navigation-table.umd.js"}},"gitHead":"4f50870767556b8ec53062f945cd584e28c4c36b","scripts":{"build":"vite build"},"_npmUser":{"name":"killerking69","email":"alifnurhidayatwork@gmail.com"},"repository":{"url":"git+https://github.com/CraftThingy-Digital-Innovation/cty-keyboard-navigation-table-web.git","type":"git"},"_npmVersion":"11.6.1","description":"Interactive responsive table cell keyboard navigation manager for custom web forms.","directories":{},"_nodeVersion":"23.11.0","dependencies":{},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.2.0"},"_npmOperationalInternal":{"tmp":"tmp/cty-keyboard-navigation-table-web_1.0.2_1783089355553_0.11670899010847813","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@craftthingy-digital-innovation/cty-keyboard-navigation-table-web","description":"Interactive responsive table cell keyboard navigation manager for custom web forms.","version":"1.0.3","license":"SEE LICENSE IN LICENSE","type":"module","repository":{"type":"git","url":"git+https://github.com/CraftThingy-Digital-Innovation/cty-keyboard-navigation-table-web.git"},"bugs":{"url":"https://github.com/CraftThingy-Digital-Innovation/cty-keyboard-navigation-table-web/issues"},"homepage":"https://github.com/CraftThingy-Digital-Innovation/cty-keyboard-navigation-table-web#readme","main":"./dist/cty-keyboard-navigation-table.umd.js","module":"./dist/cty-keyboard-navigation-table.es.js","exports":{".":{"import":"./dist/cty-keyboard-navigation-table.es.js","require":"./dist/cty-keyboard-navigation-table.umd.js"}},"scripts":{"build":"vite build"},"publishConfig":{"access":"public"},"dependencies":{},"devDependencies":{"vite":"^5.2.0"},"_id":"@craftthingy-digital-innovation/cty-keyboard-navigation-table-web@1.0.3","gitHead":"c766f7172a4a475aa2b2a68ba19c67c4c07b4f7a","_nodeVersion":"20.20.2","_npmVersion":"10.8.2","dist":{"integrity":"sha512-DZDMtkEKkB9iBg4GKWBMvS8oEn5izL/2E5V52AIM2yWP3Pz9Wk3yf+r80yUARi8Qh002uisJ7OFH1EBUNKYKrw==","shasum":"32afcffeea944c4bedffa01d9928132db327b71a","tarball":"https://registry.npmjs.org/@craftthingy-digital-innovation/cty-keyboard-navigation-table-web/-/cty-keyboard-navigation-table-web-1.0.3.tgz","fileCount":6,"unpackedSize":12227,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIGURE+XnwhdHpgr1AM0oeGdVR5ATYqs50agwRAdp0S6SAiEAzLp/LVm9gS/NFHwuvWJCr5uydhGqSoOta9V4qEp5qqo="}]},"_npmUser":{"name":"killerking69","email":"alifnurhidayatwork@gmail.com"},"directories":{},"maintainers":[{"name":"killerking69","email":"alifnurhidayatwork@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/cty-keyboard-navigation-table-web_1.0.3_1783146789658_0.21383105371861544"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-03T14:01:19.890Z","modified":"2026-07-04T06:33:09.950Z","1.0.1":"2026-07-03T14:01:20.166Z","1.0.2":"2026-07-03T14:35:55.695Z","1.0.3":"2026-07-04T06:33:09.816Z"},"bugs":{"url":"https://github.com/CraftThingy-Digital-Innovation/cty-keyboard-navigation-table-web/issues"},"homepage":"https://github.com/CraftThingy-Digital-Innovation/cty-keyboard-navigation-table-web#readme","repository":{"type":"git","url":"git+https://github.com/CraftThingy-Digital-Innovation/cty-keyboard-navigation-table-web.git"},"description":"Interactive responsive table cell keyboard navigation manager for custom web forms.","maintainers":[{"name":"killerking69","email":"alifnurhidayatwork@gmail.com"}],"readme":"# @craftthingy-digital-innovation/cty-keyboard-navigation-table-web\n\nBilingual documentation: [Bahasa Indonesia](#bahasa-indonesia) | [English](#english)\n\n---\n\n## Bahasa Indonesia\n\nLibrary client-side JavaScript modular untuk menangani navigasi sel tabel inline-cell editor menggunakan tombol panah keyboard (ArrowUp, ArrowDown), Tab, dan Enter (gaya spreadsheet Excel).\n\nMenggunakan metode **event delegation** di elemen parent `<table>` sehingga secara otomatis mendukung baris dinamis yang baru ditambahkan/dihapus tanpa memerlukan inisialisasi ulang.\n\n### Fitur Utama\n- ⌨️ **Navigasi Keyboard Excel:** Mendukung ArrowUp, ArrowDown, Tab, dan Enter untuk perpindahan sel fokus secara efisien.\n- ⚡ **Event Delegation:** Ringan dan kompatibel dengan penambahan baris DOM asinkron.\n- 🛠 **Custom Callback Hooks:** Callback saat Enter ditekan di baris terakhir untuk membuat baris baru secara otomatis.\n\n### Instalasi\n```bash\nnpm install @craftthingy-digital-innovation/cty-keyboard-navigation-table-web\n```\n\n### Cara Penggunaan\n```javascript\nimport { KeyboardNavTable } from '@craftthingy-digital-innovation/cty-keyboard-navigation-table-web';\n\nconst navTable = new KeyboardNavTable({\n  tableElement: document.getElementById('my-table'),\n  inputSelector: '.cell-input', // Selector input sel tabel\n  onEnterKey: (e, { colIdx, rowEl, nextRow }) => {\n    e.preventDefault();\n    if (nextRow) {\n      const nextInput = nextRow.querySelectorAll('.cell-input')[colIdx];\n      if (nextInput) nextInput.focus();\n    } else {\n      // Tambah baris baru jika menekan Enter di baris terakhir\n      addNewRow(colIdx);\n    }\n  },\n  onTabLast: (e, { rowEl, nextRow }) => {\n    if (!nextRow) {\n      e.preventDefault();\n      // Tambah baris baru jika Tab ditekan di sel paling pojok kanan bawah\n      addNewRow(0);\n    }\n  }\n});\n\n// Inisialisasi listener\nnavTable.initialize();\n\n// Hancurkan listener jika komponen dilepas\nnavTable.destroy();\n```\n\n---\n\n## English\n\nA modular client-side JavaScript library to manage inline-cell table editors via keyboard navigation (ArrowUp, ArrowDown, Tab, Enter - Excel style).\n\nEmploys **event delegation** on the parent `<table>` element, meaning it automatically supports dynamically added or deleted table rows without requiring listener reinstantiation.\n\n### Key Features\n- ⌨️ **Spreadsheet-style Navigation:** Seamless support for Enter, ArrowUp, ArrowDown, and Tab focus shifts.\n- ⚡ **Event Delegation:** High-performance, lightweight listener footprint compatible with dynamic DOM bindings.\n- 🛠 **Custom Callback Hooks:** Hook in new row creation when Tab or Enter is pressed on the final columns.\n\n### Installation\n```bash\nnpm install @craftthingy-digital-innovation/cty-keyboard-navigation-table-web\n```\n\n### Usage\n```javascript\nimport { KeyboardNavTable } from '@craftthingy-digital-innovation/cty-keyboard-navigation-table-web';\n\nconst navTable = new KeyboardNavTable({\n  tableElement: document.getElementById('my-table'),\n  inputSelector: '.cell-input',\n  onEnterKey: (e, { colIdx, nextRow }) => {\n    e.preventDefault();\n    if (nextRow) {\n      nextRow.querySelectorAll('.cell-input')[colIdx].focus();\n    } else {\n      addNewRow();\n    }\n  }\n});\n\nnavTable.initialize();\nnavTable.destroy();\n```\n\n## License\nLicensed under Public-Source Corporate Royalty License (PSCRL). See [LICENSE](./LICENSE) for details.\n","readmeFilename":"README.md","license":"SEE LICENSE IN LICENSE"}