Excel-like CRUD Data Grid Library - Handsontable

Excel-like CRUD Data Grid Library - Handsontable
File Size: 10.5 MB
Views Total: 65038
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

handsontable is a powerful, flexible, feature-rich, Excel-like CRUD data grid/table library for JavaScript, Angular, React, and Vue.js.

Key features:

  • Data filtering.
  • Data sorting.
  • Data formatting.
  • Insert/remove/edit/resize columns.
  • Cell editing.
  • Fixed headers & columns.
  • Custom context menu.
  • Custom dropdown menu.
  • Collapsible columns.
  • Export to CSV.
  • Calculations.
  • Copy to clipboard.
  • Keyboard navigation.
  • And much more.

You might also like:

Installation:

# NPM
$ npm install handsontable --save

Basic Usage

1. Download and include the Handsontable library on the page.

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

2. Create a placeholder element to place the data grid.

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

3. Define the data to be presented in the data grid.

const data = [
      ["", "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 basic data grid on the page.

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

5. Click here to see the full options to customize the data grid.

6. Handsontable provides a fast way to provide configuration options for the entire table, including its columns and particular cells.

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

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

      return cellProperties;
    }
});

Changelog:

v9.0.1 (2021-06-17)

  • Fixed an issue where the validator function was called twice when the Formulas plugin was enabled.
  • Introduced a new CSS style for cells of the checkbox type to restore previous behaviour. 

v9.0.0 (2021-06-01)

  • Breaking change New Formulas plugin, with an entirely different API. See the migration guide for a full list of changes. Removed the required hot-formula-parser dependency for the sake of an optional one, hyperformula.
  • Breaking change Changed the afterAutofill and beforeAutofill hooks' signatures. 
  • Upgraded eslint and eslint-related modules.
  • Added fit & fdescribe to restricted globals in test files.
  • Fixed bugs

v8.4.0 (2021-05-11)

  • Introduced a separated attribute for the label options (the label DOM element may wrap input or be placed next to it).
  • Introduced the modifyAutoColumnSizeSeed hook to let developers overwrite the default behaviour of the AutoColumnSize sampling.
  • Added support for hiding columns for the NestedHeaders plugin. 
  • Added ability to skip stacking actions by the UndoRedo plugin and introduced new hooks.
  • Bugfixed.

v8.3.2 (2021-03-16)

  • Lots of bugs fixed

v8.3.1 (2021-02-10)

  • Fixed an issue where the CSS files could be eliminated during tree-shaking

v8.3.0 (2021-01-28)

  • Introduced a new feature that allows postponing the table render and internal data cache update. The table rendering time can be reduced several-fold times by batching (using the batch method), multi-line API calls, or manually suspending rendering using the suspendRender and resumeRender methods.
  • Introduced a possibility to import: plugins, cell types, editors, renderers, validators.
  • Fixed a bug with auto-execution of the first item in the ContextMenu plugin.
  • Fixed a bug where column sorting with multi column sorting crashed the table.
  • Added a missing entry for the skipRowOnPaste option in the TypeScript definition file. 
  • Added missing tests to prevent from resurfacing.
  • Fixed an issue where altering columns did not update filters attached to columns.
  • Fixed typos and wrong return types in the TypeScript definition file.
  • Updated the dependencies causing potential security issues, as well as Babel configuration needed after the update.

v8.2.0 (2020-11-12)

  • Added a new type of an Index Map named LinkedPhysicalIndexToValueMap.
  • Added an external dependency, DOMPurify, to add HTML sanitization that should minimize the risk of inserting insecure code using Handsontable built-in functionalities.
  • Bugfixed

v8.1.0 (2020-10-01)

  • Added support for resizing non-contiguous selected rows and columns.
  • Improved performance for TrimRows, HiddenRows and HiddenColumns plugins for big datasets with many trimmed/hidden indexes.
  • Fixed bugs.

v8.0.0 (2020-08-05)

  • Added modifySourceData hook and setSourceDataAtCell method. 
  • Added new argument to scrollViewportTo method: optional considerHiddenIndexes which is a boolean.
  • Added additional information available in the cell meta object - the language. 
  • Added a possibility to allow cancelling of autofill in the beforeAutofill hook.
  • Added support for newer versions of moment, numbro and pikaday. 
  • Added afterAutoFill hook.
  • Added deprecated warning messages mechanism for plugin hooks.
  • Added missing types for instance.undoRedo. 
  • Added countRenderableColumns method to the TableView.
  • Added missing "hide" property in CustomBorders typings.
  • Added beforeSetCellMeta hook with an ability to cancel the changes.
  • Added additional test for autofill plugin.
  • Changed how manualRowMove and manualColumnMove plugins work
  • Click on a row header will select all cells (also hidden). 
  • Extracted Cell-Meta logic from Core to separate module. 
  • The CellMeta manager was refactored for future features and improvements.
  • Rows can be resized to less than rowHeights.
  • Left mouse button (LMB) click on the corner will now select all cells. 
  • The right mouse button (RMB) click on the corner, column and row headers will show just some options, defined by newly created specification 
  • Hidden indexes will no longer be rendered, as a consequence afterRenderer, modifyColWidth, beforeStretchingColumnWidth will be executable only on visible (meaning, rendered) rows and columns.
  • The getColWidth for hidden index will return 0 - it used to return 0.1
  • The modifyColWidth hook isn't called internally. However, it will be executed when the user will call the getColWidth.
  • Hidden rows/columns won't rendered anymore. As a consequence hooks beforeValueRender, beforeRenderer, afterRenderer, modifyColWidth, beforeStretchingColumnWidth etc. will be executed just for some of the columns (just the renderable ones). 
  • Selection behavior changed when hiding cells from the ContextMenu, now it is selecting a column on the right when there is space on right to the last selected column, selecting a column on the left otherwise. 
  • Developed a unified way to identify HOT "input" elements. All input elements owned by HOT got an attribute "data-hot-input" which are identified by that key. 
  • NestedHeaders plugin was rewritten, from now on, only a tree-like structure will be allowed, meaning, there will be no possibility to place nested headers in-between layers. 
  • CustomBorders plugin was adapted to work with HiddenColumns properly, from now on hiding cells at the start or at the end of a range will also hide their borders. Also, hiding a single cell with borders will hide all of its borders.
  • CollapsibleColumns will no longer use HiddenColumns plugin to work.
  • Modifying the table's data by reference and calling render() will not work properly anymore. From this point onward, all the data-related operations need to be performed using the API methods, such as populateFromArray or setDataAtCell. 
  • Removed dependencies between plugins: the manualColumnFreeze plugin doesn't use the manualColumnMove, the collapsibleColumns plugin doesn't use the hiddenColumns plugin, nestedRows plugin doesn't use the trimRows plugin, filters plugin doesn't use the trimRows plugin anymore. #5945 along with other adjustments
  • The minSpareRows and minRows options will ensure that the number of visible rows corresponds to the value provided to them (for example, the trimRows plugin won't have an impact on the number of displayed rows). 
  • toPhysicalRow and toVisualColumn now return null for non-existant rows/columns. 
  • The afterLoadData hook receives a different set of arguments. It used to be just the initialLoad flag, now the first argument is sourceData, followed by initialLoad. 
  • The manualColumnFreeze plugin unfreezes the column just after the "line of freeze".
  • The RecordTranslator object and the t property available in the plugins were removed.
  • After-prefixed hooks (afterLoadData, afterFilter, etc.) are now called just before the render call. 
  • Newly created rows and columns are now placed in the source data in the place calculated from its position in the visual context (they "stick" to their adjacent rows/columns). It also applies to moved rows and columns. 
  • When the nestedRows plugin is enabled, moving rows will be possible only using the UI or by calling the dragRows method of the manualRowMove plugin. 
  • The beforeRowResize, afterRowResize, beforeColumnResize, afterColumnResize hooks have the order of their arguments rearranged for the sake of consistency with other hooks.
  • Changed the argument structure in collapsibleColumns' toggleCollapsibleSection method.
  • Updated the moment, numbro and pikaday dependencies to their latest versions.
  • Standardize the z-index properties between the overlays.
  • Bugs fixed

v7.4.1 (2020-02-19)

  • Fixed an issue where the cell value could not be edited on mobile devices. 
  • Fixed an issue where white lines appeared at the bottom of cell headers.
  • Fixed a bug, where resizing the window (while using Angular) would result in Handsontable not stretching properly and throwing an error. 

v7.4.0 (2020-02-12)

  • Fixed the problem, where the onCellMouseUp hook was fired for all mouse buttons except the right one, which was not consistent with the onCellMouseDown hook.
  • To make the changes more consistent with the native dblclick event (which is triggered only for the left mouse button), the onCellDblClick and onCellCornerDblClick hooks were modified to also fire only for the left mouse button.
  • Updated moment, pikaday and numbro to their latest versions.
  • Fixed a bug with numbers not being presented properly with the pt_BR culture setting.
  • Extended the Babel config with the possibility to use private methods, optional chaining and nullish coalescing operator.

v7.3.0 (2019-10-23)

  • Add a new option to the Context Menu plugin - uiContainer. It allows declaring a DOM container, where all the Context Menu's element will be placed. It may come espacially handy when using Handsontable inside of an iframe or some other content-trimming context.
  • Bugs fixed.

v7.2.2 (2019-10-23)

  • Bugfix

2019-10-17

  • Updated to the latest version
  • Cleanup the change log
  • Update readme

This awesome jQuery plugin is developed by handsontable. For more Advanced Usages, please check the demo page or visit the official website.