{"name":"Handsontable: JavaScript Data Grid with Spreadsheet Features","description":"Handsontable is a powerful JavaScript Data Grid that offers a familiar spreadsheet-like look and feel, making data entry and management intuitive. It seamlessly integrates with popular frameworks like React, Angular, and Vue, providing a robust solution for building data-rich applications. This versatile component is ideal for various use cases, from ERP to data modeling systems.","github":"https://github.com/handsontable/handsontable","url":"https://osrepos.com/repo/handsontable-handsontable","source":"osrepos.com","sourceDescription":"This repository profile is provided by osrepos.com, an open source repository discovery platform.","repositoryProfile":"https://osrepos.com/repo/handsontable-handsontable","generatedFor":"open source discovery and AI-assisted research","markdown":"https://osrepos.com/repo/handsontable-handsontable.md","json":"https://osrepos.com/repo/handsontable-handsontable.json","topics":["JavaScript","Data Grid","Spreadsheet","React","Angular","Vue","Data Table","UI Component"],"keywords":["JavaScript","Data Grid","Spreadsheet","React","Angular","Vue","Data Table","UI Component"],"stars":null,"summary":"Handsontable is a powerful JavaScript Data Grid that offers a familiar spreadsheet-like look and feel, making data entry and management intuitive. It seamlessly integrates with popular frameworks like React, Angular, and Vue, providing a robust solution for building data-rich applications. This versatile component is ideal for various use cases, from ERP to data modeling systems.","content":"## Introduction\n\nHandsontable is a highly popular and versatile JavaScript Data Grid component, boasting over 21,700 stars on GitHub. Developed by the Handsontable team, it provides a robust solution for displaying and managing tabular data with a user experience akin to a spreadsheet. Built primarily with JavaScript, it offers seamless integration with modern frameworks such as React, Angular, and Vue. This makes it an excellent choice for developers looking to create interactive, data-rich applications, including resource planning software, inventory management systems, and data modeling tools.\n\n## Installation\n\nGetting started with Handsontable is straightforward. You can install it via npm, Yarn, NuGet, or load it directly from a CDN. For framework-specific installations, refer to the dedicated wrappers for React, Angular, and Vue.\n\n### Install with npm\n\nbash\nnpm install handsontable\n\n\n### Provide an HTML container\n\nhtml\n<!-- Set the container's ID -->\n<div id=\"handsontable-grid\"></div>\n\n\n### Setup\n\njs\nimport Handsontable from 'handsontable';\n// Base CSS rules\nimport 'handsontable/styles/handsontable.min.css';\n// Main theme variables\nimport 'handsontable/styles/ht-theme-main.min.css';\n\nconst element = document.getElementById('handsontable-grid');\n\nnew Handsontable(element, {\n  // theme name with obligatory ht-theme-* prefix\n  themeName: 'ht-theme-main-dark-auto',\n  // other options\n  data: [\n    { company: 'Tagcat', country: 'United Kingdom', rating: 4.4 },\n    { company: 'Zoomzone', country: 'Japan', rating: 4.5 },\n    { company: 'Meeveo', country: 'United States', rating: 4.6 },\n  ],\n  columns: [\n    { data: 'company', title: 'Company', width: 100 },\n    { data: 'country', title: 'Country', width: 170, type: 'dropdown', source: ['United Kingdom', 'Japan', 'United States'] },\n    { data: 'rating', title: 'Rating', width: 100, type: 'numeric' },\n  ],\n  rowHeaders: true,\n  navigableHeaders: true,\n  tabNavigation: true,\n  multiColumnSorting: true,\n  headerClassName: 'htLeft',\n  licenseKey: 'non-commercial-and-evaluation',\n});\n\n\n## Examples\n\nHandsontable provides a live demo on StackBlitz to quickly see it in action. This example showcases a basic setup with data, columns, and several common features like sorting and dropdowns.\n\n[![Live demo on StackBlitz](https://img.shields.io/badge/Live%20demo%20on%20StackBlitz-1a42e8?style=for-the-badge)](https://stackblitz.com/edit/handsontable-readme-example?file=src%2Fmain.js){target=\"_blank\"}\n\nFor a quick CDN-based setup without imports, you can use the following HTML structure:\n\nhtml\n<!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 - JavaScript Data Grid Example</title>\n    <link\n      rel=\"stylesheet\"\n      href=\"https://cdn.jsdelivr.net/npm/handsontable/styles/handsontable.min.css\"\n    />\n    <link\n      rel=\"stylesheet\"\n      href=\"https://cdn.jsdelivr.net/npm/handsontable/styles/ht-theme-main.min.css\"\n    />\n  </head>\n  <body>\n    <div id=\"handsontable-grid\"></div>\n    <script src=\"https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js\"></script>\n    <script>\n      const element = document.getElementById(\"handsontable-grid\");\n  \n      new Handsontable(element, {\n        // theme name with obligatory ht-theme-* prefix\n        themeName: 'ht-theme-main-dark-auto',\n        // other options\n        data: [\n          { company: \"Tagcat\", country: \"United Kingdom\", rating: 4.4 },\n          { company: \"Zoomzone\", country: \"Japan\", rating: 4.5 },\n          { company: \"Meeveo\", country: \"United States\", rating: 4.6 },\n        ],\n        columns: [\n          { data: \"company\", title: \"Company\", width: 100 },\n          { data: \"country\", title: \"Country\", width: 170, type: \"dropdown\", source: [\"United Kingdom\", \"Japan\", \"United States\"] },\n          { data: \"rating\", title: \"Rating\", width: 100, type: \"numeric\" },\n        ],\n        rowHeaders: true,\n        navigableHeaders: true,\n        tabNavigation: true,\n        multiColumnSorting: true,\n        headerClassName: \"htLeft\",\n        licenseKey: \"non-commercial-and-evaluation\",\n      });\n    </script>\n  </body>\n</html>\n\n\n## Why Use It\n\nHandsontable stands out by combining the power of a data grid with the intuitive usability of a spreadsheet. While it's a data grid component, it incorporates many features typically found in spreadsheet software, making data entry and management highly user-friendly.\n\nKey features include:\n\n*   Built-in themes and a flexible API\n*   Virtualization for handling large datasets efficiently\n*   IME support, internationalization, and RTL support\n*   Accessibility and extensive keyboard shortcuts\n*   Advanced data manipulation: sorting, filtering, and 400 built-in formulas via HyperFormula\n*   Configurable selection, data validation, and conditional formatting\n*   Support for merged cells, frozen rows and columns, and hiding rows/columns\n*   Right-click context menu for enhanced user interaction\n*   Powerful clipboard capabilities for copy-paste operations\n*   Built-in undo-redo functionality\n\nThese features make Handsontable an ideal choice for building applications that require robust data handling with an familiar and efficient user interface.\n\n## Links\n\nExplore Handsontable further using these official resources:\n\n*   [Website](https://handsontable.com){target=\"_blank\"}\n*   [Demo](https://handsontable.com/demo){target=\"_blank\"}\n*   [Documentation](https://handsontable.com/docs){target=\"_blank\"}\n*   [npm Package](https://www.npmjs.com/package/handsontable){target=\"_blank\"}\n*   [CDN](https://www.jsdelivr.com/package/npm/handsontable){target=\"_blank\"}\n*   [Community Forum](https://forum.handsontable.com/){target=\"_blank\"}\n*   [Official Blog](https://handsontable.com/blog){target=\"_blank\"}","metrics":{"detailViews":2,"githubClicks":2},"dates":{"published":null,"modified":"2026-01-18T20:01:27.000Z"}}