Excel-like CRUD Knowledge Grid Library – Handsontable

handsontable is a strong, versatile, feature-rich, Excel-like CRUD knowledge grid/desk library for JavaScript, Angular, React, and Vue.js.

Key options:

• Knowledge filtering.
• Knowledge sorting.
• Knowledge formatting.
• Insert/take away/edit/resize columns.
• Cell modifying.
• Fastened headers & columns.
• Customized context menu.
• Customized dropdown menu.
• Collapsible columns.
• Export to CSV.
• Calculations.
• Copy to clipboard.
• Keyboard navigation.
• And far more.

You may also like:

Set up:

# NPM
$ npm set up handsontable --save

Primary Utilization

1. Obtain and embody the Handsontable library on the web page.

<!-- from native -->
<script src="dist/handsontable.full.min.js"></script>
<hyperlink href="dist/handsontable.full.min.css" rel="stylesheet" />
<!-- from cdn -->
<script src="https://cdn.jsdelivr.web/npm/[email protected]/dist/handsontable.full.min.js"></script>
<hyperlink href="https://cdn.jsdelivr.web/npm/[email protected]/dist/handsontable.full.min.css" rel="stylesheet" />

2. Create a placeholder aspect to position the info grid.

<div id="dataTable"></div>

3. Outline the info to be offered within the knowledge grid.

const knowledge = [
      ["", "Kia", "Nissan", "Toyota", "Honda"],
      ["2008", 10, 11, 12, 13],
      ["2009", 20, 11, 14, 13],
      ["2010", 30, 15, 12, 13]
];

4. Initialize the library and render a fundamental knowledge grid on the web page.

var placeholder = doc.getElementById('dataTable');
var myDataGrid = new Handsontable(placeholder, {
    knowledge: knowledge,
});

5. Click on right here to see the complete choices to customise the info grid.

6. Handsontable gives a quick means to offer configuration choices for all the desk, together with its columns and explicit cells.

var placeholder = doc.getElementById('dataTable');
var myDataGrid = new Handsontable(placeholder, {
    columns: [
      {readOnly: false},
      {},
      {}
    ],
    cells: perform(row, col, prop) {
      var cellProperties = {};

      if (row === 0 && col === 0) {
        cellProperties.readOnly = true;
      }

      return cellProperties;
    }
});

Changelog:

v12.1.3 (2022-09-22)

• Eliminated a customized steady sorting implementation in favor of the built-in sorting algorithm.
• Eliminated kind definitions for non-existing strategies rowOffset and colOffset and a non-existing hook modifyRowSourceData.
• Bugfixed

v12.1.2 (2022-07-09)

• Modified the model of the Second.js dependency from 2.29.3 to 2.29.4, in response to a recently-found Second.js safety vulnerability. The vulnerability didn’t have an effect on an accurate configuration of Handsontable.
• Vue: Freezed the model of the Vue framework that’s utilized in our construct chain to ~2.6. This should not have an effect on apps that use Vue 2.7+.

v12.1.1 (2022-07-07)

• Angular: Fastened a problem the place the set up of @handsontable/angular package deal failed for variations of Angular apart from 9

v12.1.0 (2022-06-28)

• Added smoother row and column shifting when some row or columns are hidden.
• Added getNearestNotHiddenIndex(), a brand new technique that finds the visible index of the closest not-hidden row or column and works even with massive numbers of hidden rows or columns. The earlier technique, getFirstNotHiddenIndex(), nonetheless works, however is marked as deprecated.
• Added a Czech translation.
• Added a Serbian translation.
• Added new hooks: beforeColumnFreeze, afterColumnFreeze, beforeColumnUnfreeze, and afterColumnUnfreeze.
• Changed HTML entities showing in Handsontable’s license texts with canonical counterparts.
• Updated the Pikaday non-compulsory dependency to 1.8.2, to let Handsontable work with Parcel 2 with out errors.
• React: Modified the wrapper’s lifecycle strategies, to let Handsontable work with React 17+ with out warnings.
• Angular: Moved the @angular/core dependency to see dependencies.
• Bugs Fastened

v12.0.1 (2022-05-16)

v12.0.0 (2022-04-28)

• Added ShortcutManager, a brand new API for customizing keyboard shortcuts.
• Added assist for right-to-left (RTL) languages, introducing a brand new configuration possibility: layoutDirection.
• Added an Arabic translation.
• Added a brand new configuration possibility: fixedColumnsStart.
• Added a brand new keyboard shortcut (Ctrl/Cmd + Enter) for filling the chosen vary of cells with the worth of the energetic cell.
• Added assist for the Dwelling and Finish keys inside cell editors, for shifting the cursor to the start or finish of the textual content. 
• Added assist for the most recent Node LTS model.
• Breaking change: Modified how updateSettings() handles knowledge updates, to enhance efficiency and the consistency of person expertise. Now, when supplied with a brand new knowledge object, updateSettings() updates the info with out resetting any states.
• Breaking change: Modified how updatePlugin() reacts to updateSettings() calls, to enhance efficiency and the consistency of person expertise. Now, calls to updateSettings() replace a plugin’s state solely when the choices object comprises a configuration possibility that is related to that specific plugin.
• Breaking change: Modified the order of execution for 2 hooks: now, beforeKeyDown is correctly fired earlier than afterDocumentKeyDown. 
• Breaking change: Modified how default keyboard shortcuts are outlined, to enhance keyboard navigation consistency. A lot of the shortcuts didn’t change and are actually correctly documented within the keyboard shortcuts information. Nonetheless, some shortcuts that weren’t outlined explicitly, and weren’t listed within the documentation, do not work anymore (e.g., Enter opens a cell’s editor, however Ctrl + Enter does not). This modification does not have an effect on customized keyboard shortcuts.
• Breaking change: Break up a cross-platform modifier key (Ctrl/Cmd) into two separate keys, to enhance keyboard navigation consistency. Now, the Cmd key triggers actions on macOS the place the Ctrl key triggers actions on Home windows. For instance, on macOS, Ctrl + A does not work anymore: Cmd + A is used as a substitute. 
• Breaking change: Modified the actions of the next keyboard shortcuts, to match the standard spreadsheet software program habits, and supply a extra intuitive person expertise: Ctrl/Cmd + ↑, Ctrl/Cmd + Shift + ↑, Ctrl/Cmd + ↓, Ctrl/Cmd + Shift + ↓, Ctrl/Cmd + ←, Ctrl/Cmd + Shift + ←, Ctrl/Cmd + →, Ctrl/Cmd + Shift + →, Dwelling, Ctrl/Cmd + Dwelling, Finish, Ctrl/Cmd + Finish, Shift + Web page Up, and Shift + Web page Down. #9363 #9364 #9365
• Modified two scripts of the primary Handsontable workspace (./), to hurry up the construct course of: now, the npm run construct and npm run take a look at scripts do not construct or take a look at the Handsontable examples (./examples). 
• Modified the model of the Second.js dependency from 2.24.0 to 2.29.3, in response to a recently-found Second.js safety vulnerability that didn’t straight have an effect on Handsontable. 
• Modified the model of the HyperFormula non-compulsory dependency from ^1.2.0 to ^2.0.0.
• Fastened bugs.

v11.1.0 (2022-01-14)

• Added updateData(), a brand new technique that enables for changing Handsontable’s knowledge with out
• resetting the states of cells, rows and columns. 
• Vue: Added Vue 3 assist, by introducing a brand new wrapper.
• Up to date the TypeScript definition of the setDataAtCell() technique. 
• Prolonged Handsontable’s GitHub Actions workflow, to permit for deploying code examples to GitHub Pages.
• Fastened bugs.

v11.0.1 (2021-11-18)

v11.0.0 (2021-11-17)

• Added TypeScript definition information for Handsontable’s modularized model.
• Vue: Added assist for modularization to the Vue wrapper. 
• React: Added assist for modularization to the React wrapper.
• Angular: Added assist for modularization to the Angular wrapper. 
• Added a brand new package deal entry level that enables importing built-in modules in a single perform name:
• import { registerAllEditors, registerAllRenderers, registerAllValidators, registerAllCellTypes, registerAllPlugins } from ‘handsontable/registry’. 
• Added a brand new locale possibility, to correctly deal with locale-based knowledge.
• Added a GitHub Actions workflow that covers testing Handsontable and the wrappers.
• Added new path helpers (inside API) that lay floor for future RTL assist.
• Modified how the populateFromArray() technique works with its technique argument set to shift_down or shift_right. #888 (Breaking change)
• Moved all the Handsontable package deal to its personal, new subdirectory: ./handsontable. 
• Changed the license information with up to date variations. 
• Fastened bugs

v10.0.0 (2021-09-30)

• Unified the naming and outline of the fourth argument, controller, for choice manipulation within the beforeOnCellMouseDown and beforeOnCellMouseOver hooks.
• Modified what the beforeRender and afterRender hooks are, and when they’re triggered. Added two new hooks: beforeViewRender and afterViewRender. 
• Modified the non-compulsory HyperFormula dependency from 0.6.2 to ^1.1.0, which introduces breaking modifications for the Formulation plugin customers. 
• Modified the default values for the rowsLimit and columnsLimit choices of the CopyPaste plugin.
• Added a default font household, measurement, weight and coloration.
• Modified the autoWrapRow and autoWrapCol choices` default values from true to false. 
• Improved the efficiency of the getCellMeta() technique. 
• Improved the documentation and TypeScript definition of the selectOptions possibility. 
• Improved the arguments forwarding within the hooks
• Bugs Fastened

v9.0.2 (2021-07-28)

• Fastened a problem the place the validator perform was known as twice when the Formulation plugin was enabled.

v9.0.1 (2021-06-17)

• Fastened a problem the place the validator perform was known as twice when the Formulation plugin was enabled.
• Launched a brand new CSS type for cells of the checkbox kind to revive earlier behaviour. 

v9.0.0 (2021-06-01)

• Breaking change New Formulation plugin, with a wholly completely different API. See the migration information for a full listing of modifications. Eliminated the required hot-formula-parser dependency for the sake of an non-compulsory one, hyperformula.
• Breaking change Modified the afterAutofill and beforeAutofill hooks’ signatures. 
• Upgraded eslint and eslint-related modules.
• Added match & fdescribe to restricted globals in take a look at information.
• Fastened bugs

v8.4.0 (2021-05-11)

• Launched a separated attribute for the label choices (the label DOM aspect could wrap enter or be positioned subsequent to it).
• Launched the modifyAutoColumnSizeSeed hook to let builders overwrite the default behaviour of the AutoColumnSize sampling.
• Added assist for hiding columns for the NestedHeaders plugin. 
• Added capacity to skip stacking actions by the UndoRedo plugin and launched new hooks.
• Bugfixed.

v8.3.2 (2021-03-16)

v8.3.1 (2021-02-10)

• Fastened a problem the place the CSS information may very well be eradicated throughout tree-shaking

v8.3.0 (2021-01-28)

• Launched a brand new characteristic that enables suspending the desk render and inside knowledge cache replace. The desk rendering time may be diminished several-fold instances by batching (utilizing the batch technique), multi-line API calls, or manually suspending rendering utilizing the suspendRender and resumeRender strategies.
• Launched a risk to import: plugins, cell varieties, editors, renderers, validators.
• Fastened a bug with auto-execution of the primary merchandise within the ContextMenu plugin.
• Fastened a bug the place column sorting with multi column sorting crashed the desk.
• Added a lacking entry for the skipRowOnPaste possibility within the TypeScript definition file. 
• Added lacking exams to stop from resurfacing.
• Fastened a problem the place altering columns didn’t replace filters hooked up to columns.
• Fastened typos and mistaken return varieties within the TypeScript definition file.
• Up to date the dependencies inflicting potential safety points, in addition to Babel configuration wanted after the replace.

v8.2.0 (2020-11-12)

• Added a brand new kind of an Index Map named LinkedPhysicalIndexToValueMap.
• Added an exterior dependency, DOMPurify, so as to add HTML sanitization that ought to reduce the danger of inserting insecure code utilizing Handsontable built-in functionalities.
• Bugfixed

v8.1.0 (2020-10-01)

• Added assist for resizing non-contiguous chosen rows and columns.
• Improved efficiency for TrimRows, HiddenRows and HiddenColumns plugins for giant datasets with many trimmed/hidden indexes.
• Fastened bugs.

v8.0.0 (2020-08-05)

• Added modifySourceData hook and setSourceDataAtCell technique. 
• Added new argument to scrollViewportTo technique: non-compulsory considerHiddenIndexes which is a boolean.
• Added further info obtainable within the cell meta object – the language. 
• Added a risk to permit cancelling of autofill within the beforeAutofill hook.
• Added assist for newer variations of second, numbro and pikaday. 
• Added afterAutoFill hook.
• Added deprecated warning messages mechanism for plugin hooks.
• Added lacking varieties as an example.undoRedo. 
• Added countRenderableColumns technique to the TableView.
• Added lacking “conceal” property in CustomBorders typings.
• Added beforeSetCellMeta hook with a capability to cancel the modifications.
• Added further take a look at for autofill plugin.
• Modified how manualRowMove and manualColumnMove plugins work
• Click on on a row header will choose all cells (additionally hidden). 
• Extracted Cell-Meta logic from Core to separate module. 
• The CellMeta supervisor was refactored for future options and enhancements.
• Rows may be resized to lower than rowHeights.
• Left mouse button (LMB) click on on the nook will now choose all cells. 
• The fitting mouse button (RMB) click on on the nook, column and row headers will present just a few choices, outlined by newly created specification 
• Hidden indexes will now not be rendered, as a consequence afterRenderer, modifyColWidth, beforeStretchingColumnWidth shall be executable solely on seen (that means, rendered) rows and columns.
• The getColWidth for hidden index will return 0 – it used to return 0.1
• The modifyColWidth hook is not known as internally. Nonetheless, will probably be executed when the person will name the getColWidth.
• Hidden rows/columns will not rendered anymore. As a consequence hooks beforeValueRender, beforeRenderer, afterRenderer, modifyColWidth, beforeStretchingColumnWidth and so on. shall be executed only for among the columns (simply the renderable ones). 
• Choice habits modified when hiding cells from the ContextMenu, now it’s deciding on a column on the fitting when there’s house on proper to the final chosen column, deciding on a column on the left in any other case. 
• Developed a unified technique to determine HOT “enter” components. All enter components owned by HOT bought an attribute “data-hot-input” that are recognized by that key. 
• NestedHeaders plugin was rewritten, any further, solely a tree-like construction shall be allowed, that means, there shall be no risk to position nested headers in-between layers. 
• CustomBorders plugin was tailored to work with HiddenColumns correctly, any further hiding cells at the beginning or on the finish of a variety can even conceal their borders. Additionally, hiding a single cell with borders will conceal all of its borders.
• CollapsibleColumns will now not use HiddenColumns plugin to work.
• Modifying the desk’s knowledge by reference and calling render() won’t work correctly anymore. From this level onward, all of the data-related operations have to be carried out utilizing the API strategies, comparable to populateFromArray or setDataAtCell. 
• Eliminated dependencies between plugins: the manualColumnFreeze plugin does not use the manualColumnMove, the collapsibleColumns plugin does not use the hiddenColumns plugin, nestedRows plugin does not use the trimRows plugin, filters plugin does not use the trimRows plugin anymore. #5945 together with different changes
• The minSpareRows and minRows choices will make sure that the variety of seen rows corresponds to the worth supplied to them (for instance, the trimRows plugin will not have an effect on the variety of displayed rows). 
• toPhysicalRow and toVisualColumn now return null for non-existant rows/columns. 
• The afterLoadData hook receives a distinct set of arguments. It was once simply the initialLoad flag, now the primary argument is sourceData, adopted by initialLoad. 
• The manualColumnFreeze plugin unfreezes the column simply after the “line of freeze”.
• The RecordTranslator object and the t property obtainable within the plugins have been eliminated.
• After-prefixed hooks (afterLoadData, afterFilter, and so on.) are actually known as simply earlier than the render name. 
• Newly created rows and columns are actually positioned within the supply knowledge within the place calculated from its place within the visible context (they “stick” to their adjoining rows/columns). It additionally applies to moved rows and columns. 
• When the nestedRows plugin is enabled, shifting rows shall be attainable solely utilizing the UI or by calling the dragRows technique of the manualRowMove plugin. 
• The beforeRowResize, afterRowResize, beforeColumnResize, afterColumnResize hooks have the order of their arguments rearranged for the sake of consistency with different hooks.
• Modified the argument construction in collapsibleColumns’ toggleCollapsibleSection technique.
• Up to date the second, numbro and pikaday dependencies to their newest variations.
• Standardize the z-index properties between the overlays.
• Bugs fastened

v7.4.1 (2020-02-19)

• Fastened a problem the place the cell worth couldn’t be edited on cellular gadgets. 
• Fastened a problem the place white traces appeared on the backside of cell headers.
• Fastened a bug, the place resizing the window (whereas utilizing Angular) would end in Handsontable not stretching correctly and throwing an error. 

v7.4.0 (2020-02-12)

• Fastened the issue, the place the onCellMouseUp hook was fired for all mouse buttons besides the fitting one, which was not in keeping with the onCellMouseDown hook.
• To make the modifications extra in keeping with the native dblclick occasion (which is triggered just for the left mouse button), the onCellDblClick and onCellCornerDblClick hooks have been modified to additionally hearth just for the left mouse button.
• Up to date second, pikaday and numbro to their newest variations.
• Fastened a bug with numbers not being offered correctly with the pt_BR tradition setting.
• Prolonged the Babel config with the chance to make use of non-public strategies, non-compulsory chaining and nullish coalescing operator.

v7.3.0 (2019-10-23)

• Add a brand new choice to the Context Menu plugin – uiContainer. It permits declaring a DOM container, the place all of the Context Menu’s aspect shall be positioned. It could come espacially useful when utilizing Handsontable within an iframe or another content-trimming context.
• Bugs fastened.

v7.2.2 (2019-10-23)

2019-10-17

• Up to date to the most recent model
• Cleanup the change log
• Replace readme

This superior jQuery plugin is developed by handsontable. For extra Superior Usages, please test the demo web page or go to the official web site.