Feature Examples
Interactive examples demonstrating Handsontable's features. Each example includes live code you can inspect and modify.
Data Binding
Bind data from arrays or objects. Changes in the grid are reflected in the source data.
Sorting
Click column headers to sort. Supports multi-column sorting with Cmd/Ctrl+click.
Filtering
Use the dropdown menu in column headers to filter data by conditions or values.
Pagination
Navigate large datasets page by page with custom pagination controls.
Server-side Data
New in 17.1: the DataProvider plugin loads rows page-by-page from a backend and pushes create/update/remove mutations back. Sort, filter, paginate, and edit — all server-side, with loading and error states wired through hooks.
Searching
Search through cell values and highlight matching results in real time.
Column Summary
Automatically calculate sum, average, min, max, or count for columns and display results in a designated row.
Autofill
Drag the fill handle at the corner of a selected cell to automatically fill adjacent cells with a series or pattern.
Cell Types
Built-in cell types: text, numeric, date, time, checkbox, select, dropdown, autocomplete, and password.
Validation
Validate cell values with built-in validators or custom validation functions. Invalid cells are highlighted.
Autocomplete
Autocomplete cells suggest values as the user types. Supports strict mode and custom data sources.
Dropdown
Dropdown cells provide a list of predefined options for the user to choose from.
Context Menu
Right-click for a customizable context menu with options like insert/remove rows, alignment, and read-only.
Dropdown Menu
Add dropdown menus to column headers with sorting, filtering, and column operations.
Selection
Select single cells, ranges, or multiple non-contiguous ranges. Supports mouse and keyboard selection.
Multi-select
Select multiple values per cell from a searchable dropdown with chip-based display and overflow indicators.
Frozen Columns & Rows
Fix columns and rows to keep them visible while scrolling through the rest of the data.
Column Resizing
Drag column borders to resize. Double-click to auto-fit column width to content.
Row Resizing
Drag row borders to resize row heights manually.
Column Hiding
Hide and show columns programmatically or via the context menu.
Row Hiding
Hide and show rows programmatically. Hidden rows are indicated by visual markers.
Column Moving
Drag and drop columns to reorder them. Grab a column header and move it to a new position.
Row Moving
Drag and drop rows to reorder them. Grab a row header and move it to a new position.
Nested Headers
Create multi-level column headers that span across multiple columns.
Nested Headers (Rowspan)
New in 17.1: column headers can also span multiple header rows. Combine rowspan and colspan to build complex header hierarchies.
Collapsible Headers
Nested column headers that can be collapsed and expanded to show or hide column groups.
Merge Cells
Merge cells across rows and columns to create grouped layouts.
Nested Rows
Display hierarchical data with parent-child row relationships. Expand and collapse row groups.
Conditional Formatting
Apply dynamic styles based on cell values using custom cell renderers.
Custom Renderers
Create custom cell renderers to display data with rich HTML content like progress bars or badges.
Custom Borders
Apply custom border styles to specific cells or ranges for visual emphasis.
Alignment
Align cell content horizontally and vertically using class names or the context menu.
Formulas
Use spreadsheet formulas powered by HyperFormula. Supports 400+ functions including SUM, AVERAGE, IF, and more.
Clipboard
Copy, cut, and paste cells using keyboard shortcuts or the context menu. Supports Excel-compatible clipboard.
Export to CSV
Export grid data to a CSV file with a single function call.
Export to XLSX
New in 17.1: export grid data straight to an Excel .xlsx file. Plug in ExcelJS as the rendering engine and call downloadFileAsync.
Toast Notifications
New in 17.1: the Notification plugin shows non-blocking toast messages. Four variants (info, success, warning, error) and four corner positions, with optional actions and auto-dismiss.
Undo/Redo
Use Ctrl+Z and Ctrl+Y to undo and redo changes. All cell edits, row/column operations are tracked.
Virtualization
Render only visible cells for blazing-fast performance with large datasets. This grid has 1 million cells.
Empty State
Show a custom dialog overlay when the grid has no data, using the dialog plugin.
Keyboard Shortcuts
Navigate and edit cells using keyboard shortcuts. Supports Excel-like navigation, selection, and editing shortcuts.