Watch it work, then take the grid
Every demo plays itself once, then hands you the grid to edit. Pick a product, then a use case or a feature.
Handsontable DataGrid
The data grid: editing, sorting, filtering and formatting a spreadsheet user already knows, each feature a demo that plays itself and then hands you the grid.
7 use cases · 56 features · 4 fun demos
Open the galleryUse cases
- Bulk data entryAn orders sheet you fill the way you would in Excel: paste rows, drag the fill handle, pick from dropdowns and dates, and undo what you did. Bad rows are flagged as you go.
- Performance at scaleA million cells: 50,000 transactions generated in your browser, scrolled, sorted and filtered. The load, render, sort and filter times are measured live.
- Trade blotterA trader watches the day’s orders fill on a live blotter: prices tick, fills land, and custom cells show each company’s mark. Pause the feed or change its tempo.
- P&L forecastA finance lead reworks the second half of the year: six months closed, six forecast from drivers in HyperFormula. Raise growth, hire a team, close a month, and see the year against budget.
- Data classification with AIA model codes October’s journal lines to the chart of accounts, each with its confidence. Sure answers fill themselves in, the rest wait for one key or a person’s call.
- InvoiceA freelancer bills a client on a page-shaped grid: pick products, set quantities and discounts, add a line, and the totals work themselves out in HyperFormula.
- Theme showcaseAn orders book with filters, sorting, grouped headers, frozen columns and comments, restyled live by six example themes built on the Themes API. Pick one and only the look changes.
Data
- Data bindingBind an array of arrays or an array of objects, map a column to any property, and reach nested ones by path.
- Column sortingOrder rows by a column, ascending or descending, from its header.
- Multi-column sortingOrder by several columns at once, each with its own direction.
- Column filterNarrow the rows in view by value, by condition, or by searching inside the column.
- SearchFind matching cells across the grid and hand them to a renderer to mark.
- PaginationSplit a long dataset into pages, with a footer that walks them.
- Column summarySum, average, minimum, maximum, count or your own function under a column, recalculated as the data changes.
- Export to CSV and ExcelWrite the current data out as a CSV file, or as XLSX when your app supplies ExcelJS.
- Events and hooksOver two hundred hooks around every change the grid makes, so your app can see it, block it or act on it.
Editing
- Text cellThe default: a plain string, edited in place.
- Numeric cellNumbers formatted and aligned as numbers, and sorted as numbers rather than as text.
- Date cellA date with a calendar picker in the editor.
- Time cellA time of day, validated against its own format.
- Date-time cellA date and a time in one cell, formatted for the reader’s locale.
- Checkbox cellA boolean as a checkbox, toggled by click or by the space bar.
- Select cellA short, fixed list of values in a native select.
- Dropdown cellA longer list in the grid’s own dropdown, restricted to the values you allow.
- Autocomplete cellA dropdown that filters as you type, and can accept a value that is not on the list.
- Multi-select cellSeveral values from one list, held in a single cell.
- Password cellA value that is stored as typed and displayed masked.
- Handsontable cellA whole grid as the editor of one cell, for picking a row out of a reference table.
- Custom cell typesCompose your own type out of a renderer, an editor and a validator, and register it by name.
- Cell validationConstrain what a cell accepts, with your own check — synchronous or asynchronous — and say what happens when it fails.
- Read-only cellsLock a cell, column or range against editing while it stays selectable and copyable.
- AutofillDrag the fill handle to repeat a selection across a range, vertically, horizontally or both.
- Copy and pasteMove ranges between the grid, Excel and Google Sheets — with control over paste mode, range limits and whether headers travel.
- SelectionSelect cells, rows, columns or several ranges at once, and resize a selection by its handles.
- Move cellsDrag a selected range and drop it somewhere else.
- Adding and removing rows and columnsInsert and delete rows and columns, from the menu or from your own code.
Layout
- Frozen rows and columnsPin edges in place so headers and keys stay put while the rest scrolls — set in config, or frozen by the reader from the menu.
- Hidden rows and columnsTake rows or columns out of view without taking them out of the data.
- Row and column movingDrag a row or a column to a new position and keep the order.
- Manual resizingDrag a column or row edge to resize it, and keep the size that was chosen.
- Column stretchingSpread spare width across the columns so the grid fills its container.
- Column groupsGroup columns under shared headers, several levels deep, with headers that can span rows as well as columns.
- Collapsible headersCollapse a header group down to one column and open it again.
- Merge cellsJoin a range into one cell that spans the rows and columns it covers.
- Tree gridParent and child rows as a tree that collapses and expands, with the children moving with the parent.
- Row headersA header column down the left, which can stay bound to its row through sorting, hiding and moving.
Formatting
- Text alignmentDecide where content sits inside a cell or a range of cells, horizontally and vertically.
- Conditional formattingStyle a cell from its own value, through a function that runs per cell rather than a fixed rule list.
- Custom bordersDraw a border around any cell or range, on any side, in any weight and color.
- Custom renderersRender a cell as your own markup — a badge, a sparkline, a link, an icon.
- ThemesThree shipped themes, each with a light and a dark variant that can follow the system setting.
Interface & controls
- Context menuRight-click actions for rows, columns and selections, and your own entries beside them.
- Column menuThe same actions from a button in the column header, for a grid without right-click.
- Undo and redoStep back and forward through edits — and through inserts, deletes, moves, merges and sorts, not only cell values.
- CommentsAttach a note to a cell and show it when the cell is reached.
- NotificationsToasts the grid owns, with a variant, a position, a lifetime and buttons of your own.
- Loading stateThe grid’s own overlay while rows are still on their way, with its title and icon under your control.
- Empty stateSay something useful when there are no rows, instead of showing an empty frame.
Accessibility & internationalization
- Keyboard shortcutsThe shortcuts a spreadsheet user already knows, working out of the box.
- LocalizationThe grid’s own interface — menus, filters, validation — in 21 shipped languages.
- Locale-aware formattingDates, times and numbers entered and displayed the way the reader’s locale writes them.
- Right-to-left layoutLay the whole grid out right-to-left for Arabic, Hebrew and Farsi — headers, selection and scrollbar included.
Fun
- 20482048 on a Handsontable DataGrid board. Every slide, merge and score is a HyperFormula formula in the sheet under it.
- MinesweeperMinesweeper on a Handsontable DataGrid board. Each square is a cell its renderer paints; pick a size, open with a click or Enter, flag with a right click or F.
- Game of LifeConway’s Game of Life on a Handsontable DataGrid board of 960 cells. Draw with a click or a drag, place a glider gun, and watch each generation land as one render.
- Cell animationA cartoon played on a Handsontable DataGrid sheet: a pixel cat flies on a trail of cells, and each frame is one setDataAtCell of only the cells that changed. Up to 24 frames a second.
The engine, HyperFormula
The calculation engine: Excel-compatible formulas recalculating in your app, shown on live sheets you can edit.
1 use case · 6 features
Open the galleryFormulas
Internationalization
Make every data point count. Turn millions of them into actionable wisdom.
Let’s make it easier.
Smoother. Faster. All Handsontable.