handsontable

Website   —   Documentation   —   Themes   —   API   —   Community

✨ Key Features

  ✅  Built-in themes   ✅  Flexible API   ✅  Virtualization   ✅  IME support   ✅  Internationalization   ✅  RTL support   ✅  Accessibility (targets WCAG 2.2 AA)   ✅  Keyboard shortcuts   ✅  Sorting data   ✅  Filtering data   ✅  400 built-in formulas   ✅  Configurable selection   ✅  Data validation   ✅  Conditional formatting   ✅  Merged cells   ✅  Frozen rows and columns   ✅  Hiding rows and columns   ✅  Right-click context menu   ✅  Row pagination   ✅  Server-side data   ✅  Notifications   ✅  Export to Excel   ✅  Date and time editing   ✅  Shadow DOM / Web Components support

🪄 Installation

Below, you'll find the installation guide for the JavaScript component. If you're using a specific framework, refer to its dedicated wrapper for installation instructions:

• React
• Angular
• Vue

---

Install with npm

You can also use Yarn, NuGet or load the package from CDN.

npm install handsontable

Provide an HTML container

<!-- Set the container's ID -->
<div id="handsontable-grid"></div>

Setup

import Handsontable from 'handsontable';

const element = document.getElementById('handsontable-grid');

new Handsontable(element, {
  data: [
    { company: 'Tagcat', country: 'United Kingdom', rating: 4.4 },
    { company: 'Zoomzone', country: 'Japan', rating: 4.5 },
    { company: 'Meeveo', country: 'United States', rating: 4.6 },
  ],
  columns: [
    { data: 'company', title: 'Company', width: 100 },
    { data: 'country', title: 'Country', width: 170, type: 'dropdown', source: ['United Kingdom', 'Japan', 'United States'] },
    { data: 'rating', title: 'Rating', width: 100, type: 'numeric' },
  ],
  rowHeaders: true,
  navigableHeaders: true,
  tabNavigation: true,
  multiColumnSorting: true,
  headerClassName: 'htLeft',
  // licenseKey: 'your-license-key', // get a key at https://handsontable.com/pricing/
});

This is the beginning of the README. Read the rest at the original. Read the full README ↗