Interactive examples demonstrating Handsontable's features. Each example includes live code you can inspect and modify.
Bind data from arrays or objects. Changes in the grid are reflected in the source data.
Click column headers to sort. Supports multi-column sorting with shift+click.
Use the dropdown menu in column headers to filter data by conditions or values.
Search through cell values and highlight matching results in real time.
Automatically calculate sum, average, min, max, or count for columns and display results in a designated row.
Drag the fill handle at the corner of a selected cell to automatically fill adjacent cells with a series or pattern.
Built-in cell types: text, numeric, date, time, checkbox, select, dropdown, autocomplete, and password.
Validate cell values with built-in validators or custom validation functions. Invalid cells are highlighted.
Autocomplete cells suggest values as the user types. Supports strict mode and custom data sources.
Dropdown cells provide a list of predefined options for the user to choose from.
Select single cells, ranges, or multiple non-contiguous ranges. Supports mouse and keyboard selection.
Select multiple values per cell from a searchable dropdown with chip-based display and overflow indicators.
Fix columns and rows to keep them visible while scrolling through the rest of the data.
Drag column borders to resize. Double-click to auto-fit column width to content.
Hide and show rows programmatically. Hidden rows are indicated by visual markers.
Drag and drop columns to reorder them. Grab a column header and move it to a new position.
Drag and drop rows to reorder them. Grab a row header and move it to a new position.
Create multi-level column headers that span across multiple columns.
Nested column headers that can be collapsed and expanded to show or hide column groups.
Display hierarchical data with parent-child row relationships. Expand and collapse row groups.
Apply dynamic styles based on cell values using custom cell renderers.
Create custom cell renderers to display data with rich HTML content like progress bars or badges.
Apply custom border styles to specific cells or ranges for visual emphasis.
Align cell content horizontally and vertically using class names or the context menu.
Use spreadsheet formulas powered by HyperFormula. Supports 400+ functions including SUM, AVERAGE, IF, and more.
Copy, cut, and paste cells using keyboard shortcuts or the context menu. Supports Excel-compatible clipboard.
Use Ctrl+Z and Ctrl+Y to undo and redo changes. All cell edits, row/column operations are tracked.
Render only visible cells for blazing-fast performance with large datasets. This grid has 1 million cells.
Show a custom dialog overlay when the grid has no data, using the dialog plugin.
Navigate and edit cells using keyboard shortcuts. Supports Excel-like navigation, selection, and editing shortcuts.
Comments
Add comments to cells. A small indicator appears in the corner of cells with comments.