handsontable / docs-archive Goto Github PK

API Documentation for Handsontable

docs-archive's Introduction

Handsontable is a JavaScript component that combines data grid features with spreadsheet-like UX.
It provides data binding, data validation, filtering, sorting, and CRUD operations.

Get started with Handsontable

React

Angular

Vue

Vue 3

JavaScript

Features

The most popular features of Handsontable:

  ✓ Multiple column sorting
  ✓ Non-contiguous selection
  ✓ Filtering data
  ✓ Export to file
  ✓ Validating data
  ✓ Conditional formatting
  ✓ Merging cells
  ✓ Freezing rows/columns
  ✓ Moving rows/columns
  ✓ Resizing rows/columns
  ✓ Hiding rows/columns
  ✓ Context menu
  ✓ Comments

Documentation

Get started

1. Install Handsontable

Using a package manager

Get Handsontable from npm, Yarn or NuGet.

npm install handsontable

import Handsontable from 'handsontable';

import 'handsontable/dist/handsontable.full.min.css';

Using a CDN

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css" />

2. Create a container

<div id="example"></div>

3. Initialize your grid

const container = document.querySelector('#example');
const hot = new Handsontable(container, {
  data: [
    ['', 'Tesla', 'Volvo', 'Toyota', 'Ford'],
    ['2019', 10, 11, 12, 13],
    ['2020', 20, 11, 14, 13],
    ['2021', 30, 15, 12, 13]
  ],
  rowHeaders: true,
  colHeaders: true,
  licenseKey: 'non-commercial-and-evaluation' // for non-commercial use only
});

Support

We provide support for developers working with commercial version via contact form or at [email protected].

If you use a non-commercial version then please ask your tagged question on StackOverflow.

License

Handsontable is a commercial software with two licenses available:

Free for non-commercial purposes such as teaching, academic research, and evaluation. Read it here.
Commercial license with support and maintenance included. See pricing plans.

License key

If you use Handsontable in a project that supports your commercial activity, then you must purchase the license key at handsontable.com.

If you use the free for non-commercial license of Handsontable, then pass the phrase 'non-commercial-and-evaluation', as described in this documentation.

Proudly created and maintained by the Handsontable Team.

docs-archive's People

Contributors

Stargazers

Watchers

Forkers

adriana20 naveensharp vetal2409 dflock laughsmile orionhyc mdabdulimran zhangge001 eggboxcn pushpendra-singh-rawat msridhar99 bxf2012 craigmamakin atulchirame davidmarston abureviewer1 afbruno locoxon kartikkumar07 smfinvest techcreatifs tienda1989 lienkieu shyam4370 sungdv brokenjoin laurabonilla bwww daskrishna sarathiatgit amoyzastafara gojeanil jrawdin abduljeelan joesloan magoodah zhaowenzhang sirnose kvnandini mitchdonley kmrabhay nguyenthuyenlong1988 jinlin516293816 mohamma0 alain178 johsch css-code lucasseveryn reload1989 sudhanshu6247 sneha03 kaelsu 0van bx8mt 446888507 sumanraj321 anicao mariobustosjmz onyivantono mahesh-i2i thiagoferrarezi fanicode ethanw77 kapilraut02 tamirdg hankyunghwa jakeboone02 hass3779 ankurgupta0292 ccomplainville gabrieldinis somewhereintime gillesgut davidemaser draxzel potpath rakibsub01 anandapriyan santuparashetti shangar selvakumar79 bmounisha jbnjs149 selimgokdemir vedhanayagam ariefsam miguel20109 yuhwkim inwe hkundnani choakai kumarshan aisgiftedcloud pankaj19908 peitai kushal131089 esegev1 demo1236 kleopatra999 ilovezy

docs-archive's Issues

Data Validation Demo does not work in Fiddle

Demo: http://docs.handsontable.com/0.17.0/demo-data-validation.html

While doing double LMB then Enter we get (as expected)

When we do the same in Fiddle we get

Change font size for API reference entries

Too big font sizes exaggerate the meaning for some properties over the others. Quote from handsontable/#5136

Correct CSS. "Types" in tables are bigger than the other content. See this here: https://docs.handsontable.com/pro/3.0.0/ManualColumnFreeze.html#freezeColumn (font size 15px instead of 13px). Be careful though as it's a global setting and we probably need to override it these particular occurences. Also, a word "Properties" should be much smaller (now it's 24px and should be 14px). Additionally, change the size of the Return parameters section: https://docs.handsontable.com/pro/3.0.0/AutoColumnSize.html#getFirstVisibleColumn

afterChange misleading docs

url: https://docs.handsontable.com/0.24.0/Hooks.html#event:afterChange

Parameters are misplaced
source returns an array and changes returns a string.

Documentation is unclear about inclusion of dependencies in the `full` package

@warpech commented on Wed Jan 31 2018

The page https://docs.handsontable.com/0.35.1/tutorial-quick-start.html instructs me to install Handsontable using Bower and use the files handsontable.full.js and handsontable.full.css.

The page https://docs.handsontable.com/0.35.1/demo-date.html tells that Pikaday and Moment must be included in <head> separately, because they are not included in Handsontable.

This is untrue, because Pikaday and Moment are already bundled within handsontable.full.js

This document https://github.com/handsontable/handsontable/blob/master/dist/README.md is out of date, too, because it also says that Pikaday and Moment are not in the full bundle.

In the merge cells tutorial, use different colspan and rowspan

In the merge cells tutorial https://docs.handsontable.com/0.34.0/demo-merged-cells.html you provide three examples for merging cells:

mergeCells: [
      {row: 1, col: 1, rowspan: 3, colspan: 3},
      {row: 3, col: 4, rowspan: 2, colspan: 2},
      {row: 5, col: 6, rowspan: 3, colspan: 3}
    ]

however, in EVERY example the rowspan is exactly equal to the colspan. I think it would be much better if their values differ to show that this is a possibility, too. And to show which of the two parameter has what effect.

For example:

mergeCells: [
      {row: 1, col: 1, rowspan: 4, colspan: 1},
      {row: 3, col: 4, rowspan: 2, colspan: 2},
      {row: 5, col: 6, rowspan: 2, colspan: 5}
    ]

Hide edit example button in IE

Opening examples in JSFiddle won't work in IE and they're not going to fix it: jsfiddle/jsfiddle-users#1257 (comment). We've decided to hide the button in IE.

DataSchema missing link

where: https://docs.handsontable.com/0.21.0/Options.html#dataSchema
There's a missing link in description of dataSchema.

There is no "Editor" documentation for Angular

I purpose to create documentation for "Editor" in Angular context. Because there is some specific details in "Editor" implementation.

Minor tutorial issue, wrong URL

on https://docs.handsontable.com/0.34.4/tutorial-features.html

Formulas | Use formulas in cells to perform calculations.

links to Filtering page, which is clearly a mistake.
( https://docs.handsontable.com/pro/1.14.2/demo-filtering.html )

I haven't checked other links, so not sure if more invalid links are present on the page. The actual link to "Filtering" page is valid.

Also, it says: "Pressing ENTER in a cell (not changing the value) results in pushing all the cells in the column beneath this cell down one row (including current cell) resulting in a blank cell under the cursor (which hasn't moved)."

... but instead pressing ENTER once simply begins editing mode and ENTER a second time simply stops editing-mode, with no blank cell under the cursor (which has moved down one step).

Custom editor tutorial doesn't account for fixed height tables (w/ solution)

Hoping we can get this solution (or a similar one) on your docs so others won't run into the same confusion I did. If you have a fixed height table, when you "open" the custom editor, and you have scrolled down at all, the vertical positioning is off (way off if you scrolled a lot). It only happens on a fixed height table ('height' setting OR css height property):

Code in the docs for the final "open" method could use these changes (noted in comments):

SelectEditor.prototype.open = function() {
  var width = Handsontable.Dom.outerWidth(this.TD);
  // important - group layout reads together for better performance
  var height = Handsontable.Dom.outerHeight(this.TD);
  var rootOffset = Handsontable.Dom.offset(this.instance.rootElement);
  var tdOffset = Handsontable.Dom.offset(this.TD);
  var editorSection = this.checkEditorSection();
  var cssTransformOffset;
  // change 1 - read the scroll position of the wtTable holder element 
  //  (only comes into play if we're using a fixed height for our Handsontable) 
  var scrollTop = this.instance.view.wt.wtTable.holder.scrollTop;
  var scrollLeft = this.instance.view.wt.wtTable.holder.scrollLeft;

  switch(editorSection) {
    case 'top':
      cssTransformOffset = Handsontable.Dom.getCssTransform(this.instance.view.wt.wtScrollbars.vertical.clone.wtTable.holder.parentNode);
      break;
    case 'left':
      cssTransformOffset = Handsontable.Dom.getCssTransform(this.instance.view.wt.wtScrollbars.horizontal.clone.wtTable.holder.parentNode);
      break;
    case 'corner':
      cssTransformOffset = Handsontable.Dom.getCssTransform(this.instance.view.wt.wtScrollbars.corner.clone.wtTable.holder.parentNode);
      break;
  }
  var selectStyle = this.select.style;

  if (cssTransformOffset && cssTransformOffset !== -1) {
    selectStyle[cssTransformOffset[0]] = cssTransformOffset[1];
    // change 2 - css transform is being used, indicating we don't need to account for the scroll position
    scrollTop = scrollLeft = 0;
  } else {
    Handsontable.Dom.resetCssTransform(this.select);
  }

  selectStyle.height = height + 'px';
  selectStyle.minWidth = width + 'px';
  // change 3 - account for scroll offset for perfect positioning
  selectStyle.top = tdOffset.top - scrollTop - rootOffset.top + 'px';
  selectStyle.left = tdOffset.left - scrollLeft - rootOffset.left + 'px';
  selectStyle.margin = '0px';
  selectStyle.display = '';

  this.instance.addHook('beforeKeyDown', onBeforeKeyDown);
};

404

link: http://docs.handsontable.com/0.28.3/demo-formula-support.html
leading from http://docs.handsontable.com/0.28.3/demo-formula-support.html Free Features > Formula support

Search id conflict

Link for demo for the search option does not work,
Docs doesn't scroll to search option

I cannot search for a copied keyword

I have the afterCreateRow copied which is an exact name of a hook. But when I paste it in the docs browser and hit Enter I am moved to the same page I was before.

Add a space between method/hook name and its type

More than often me and clients are copying the name of a hook/method/option with its type.

For example, try to copy and paste viewport option. If you dbl click the name to copy it you'll get viewportRowRenderingOffsetNumber

Adding a small space solves the issue.

Add pasteMode to the docs

There's no information about the pasteMode in our copyPaste plugin. We should add it at https://github.com/handsontable/handsontable/blob/develop/src/plugins/copyPaste/copyPaste.js

Add missing option to the contextMenu

We do not mention how to freeze columns via a custom context menu.

the proper keys are unfreeze_column / freeze_column

Add getCellsMeta method to docs

It return a flat array of all cells.

Scrolling rows and columns: demo issue

demo: http://docs.handsontable.com/demo-scrollbars.html

Clicking maximize table from this:

does this:

still occurs after scrolling the table.

We should use CDN in our code examples

Update Handsontable links in JSFiddle examples. Currently we're linking resources from our documentation. Which should be avoided.

<script src="https://docs.handsontable.com/pro/5.0.0/components/handsontable-pro/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://docs.handsontable.com/pro/5.0.0/components/handsontable-pro/dist/handsontable.full.min.css">
<script src="https://docs.handsontable.com/pro/5.0.0/components/numbro/dist/languages.min.js"></script>

We should use JSDelivr CDN instead:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/languages/all.js"></script>

Broken demo custom-renderer

After an upgrade Handsontable to beta6 demo was broken at http://docs.handsontable.com/0.15.0-beta6/demo-custom-renderers.html#page-dropdown.

Dropdown visibility

demo: https://docs.handsontable.com/0.21.0/demo-dropdown.html

Dropdown list is hidden under code example.

Result

Add information on how to define range in comments plugin

To use the getComment method we need to add a range for the plugin and this is what we write about range

While we should add an example of how to set the range

demo: http://jsfiddle.net/39vk5ctf/

Add CSS To Scrollbar Docs

On http://docs.handsontable.com/0.19.0/demo-scrollbars.html it says:

If you want scrollbars, just set container width, height and overflow: auto in CSS. This demo shows table of 1000 rows and columns. Only visible part is rendered. Native div scrollbar is used to scroll through the table.

Can you add the CSS example because when I try the only way seems to be to set it on the handsontable items

.handsontable-container{
  overflow: scroll;
}
.ht_master{
  overflow: scroll;
}

Highlight current row INCLUDING current cell

Hi, I want to highlight an entire row when I select any of its cells.

I'm using "currentRowClassName: 'currentRow'," as suggested in the tutorial, but it doesn't applies the css class to the selected cell.

Is there a way to achieve this?
Thanks in advance!

Broken link to comments demo

The link to the "Comments" demo in this section leads me to the homepage, it appears to be broken[...]

moved from: handsontable/handsontable#3027

Dropdown type missing from the docs Type definition

URL: http://docs.handsontable.com/0.26.0/Options.html?#type

Unexpected characters in the option label

.<String> shouldn't be placed in the label
src: https://docs.handsontable.com/pro/5.0.2/Options.html#selectionMode

Dropdown 'filter' definition

We could add more details about what's filter for in the dropdown cell type.
URL: http://docs.handsontable.com/0.26.0/demo-dropdown.html

Jon's proposition:

If [filter] defined as 'true', when the user types into the input area the Autocomplete's suggestion list is updated to only include those choices starting with what has been typed; if defined as 'false' all suggestions remain shown, with those matching what has been typed marked in bold.
source: https://forum.handsontable.com/t/behaviour-of-dropdown-type-filter-option/484/3

Read-only specific cells - demo update

Source: http://docs.handsontable.com/0.20.2/demo-read-only.html (2nd example)

Should update hot2.getData() to hot2.getSourceData() according to changes made in 0.20.0
Changed demo: http://jsfiddle.net/5tngx6wn/1/

Currently demo does not work.

Uncaught TypeError on copy-paste on the demo page

The issue which has been added by @krzysztofspilka: #3862

Description

There is an error "Uncaught TypeError: Cannot read property '0' of undefined(…)" being thrown on copy-paste in a demo about conditional formatting.

Steps to reproduce

Go to https://docs.handsontable.com/demo-conditional-formatting.html
Copy everything
Paste anywhere below a first row

Demo

https://gyazo.com/2d912511298f88fb37566fb81de83d05

Solution

In file: /tutorials/conditional-formatting.html should be:

var getData = this.instance.getData();

if (row === 0 || (getData[row] && getData[row][col] === 'readOnly')) {
   ...

Edit in JSFiddle button redirects to unsecured http:// url

I get a warning from the web browser about unsecured connection. This happens because we are on https:// domain and open a http:// JSFiddle url. JSFiddle supports https so maybe we can redirect through https?

Example > Sport Sorting Bug

Bug at: Example > Sport

To reproduce:
sort few times an income column.

Result:
after few clicks only two first rows get sorted.

Bootstrap integration demo doesn't work

demo: https://docs.handsontable.com/0.24.1/demo-bootstrap.html
Please check result tab

there are few console logs and table it not rendered.

Custom build docs don't work on the develop branch

The "Custom build" docs say to use grunt, but all grunt tasks have been removed from HoT in the develop branch. I don't know what the correct build process is now.

Submenus for ContextMenu's aren't documented

@deto commented on Thu Jun 09 2016

As per title, could really use some documentation on using submenus when creating a custom context menu.

The documentation states to use the Jquery contextMenu documentation for details, but the example here:

https://swisnl.github.io/jQuery-contextMenu/demo/sub-menus.html

Doesn't work.

Looking at this Issue, it appears special support for submenu's was added here:

handsontable/handsontable#1350

But there is no documentation detailing the correct syntax. Only thing I could find was this stackoverflow answer here:

http://stackoverflow.com/questions/24074313/how-create-a-submenu-in-a-contextmenu-handsontable

Which still took me a while to get working because I didn't realize the sub-menu item keys are required to be prefixed with the parent menu key.

@AMBudnik commented on Thu Jun 09 2016

Thanks for sharing @deto
Our submenu tutorial can be found at: https://docs.handsontable.com/pro/1.4.1/demo-context-menu.html (context menu section) but you're right - we can add more information and/or examples.

ps. please notice that there are two bugs related that you can came accross by creating your own submenu (handsontable/handsontable#3550 and handsontable/handsontable#3533)

@deto commented on Thu Jun 09 2016

Maybe I'm missing it, but on the page you linked, I can't find a single mention of sub-menus. To clarify, by sub-menus, I don't mean context menus, but rather the ability to do a hierarchical context menu - where you hover over one option and another set of choices pops out. This is shown in the "alignment" example on the page you linked, but since that is a built-in option, there is no instruction on how to configure your own sub-menu.

It appears this is an option, though, based on the issue I posted above where the functionality was added. I just had to go digging around SO to find the right syntax, and even then, there were other caveats to get it working - none that are a big deal, but were just time-consuming to figure out without documentation.

@AMBudnik commented on Fri Jun 10 2016

Wow.. I was sure that it's already there! Sorry for a misguidance.
We surely have to add this to the docs... even if it's not working as expected (like in the handsontable/handsontable#3550)

@deto commented on Sun Jun 12 2016

Yep - figured it was just an oversight and that you'd want to have some documentation on it (since someone spent time coding up the feature!)

Little styling issue

In numeric cell type demo, edit on fiddlebutton does not hover properly. Hovering changes font color instead of background.

Other cell type menu options are fine.

Demo pre-populating rows

uses the non-existing methods and causes an error when trying to edit more cells at once (using copy / paste).

GetValue() does not working correctly

Change
var selection = this.getSelected()[0];
// Get always manufacture name of clicked row
return this.getDataAtRow(selection[0])[0];

Add configs needed to generate documentation based on jsdoc spec

Prepare every nessesary files (styles, templates, configs, grunt etc.) needed to generate documentation.

Broken Comments demo

URL: http://docs.handsontable.com/0.26.0/Options.html#comments

The link at

See Comments demo for examples.

is broken

isSorted function update

as @strickc wrote

In the documentation for Sorting Data (http://docs.handsontable.com/0.18.0/demo-sorting-data.html) it states:

To check whether a table has been sorted you can check the sortColumn property. If table instance has this property defined then it has been sorted. The value of sortColumn is the index of a column by which the table has been sorted. Additionally, you can check sorting order using sortOrder property. If sortOrder is true, then the order is ascending, otherwise, the order is descending.

and also supplies an example function isSorted that checks if this property is undefined. However, if a column has been sorted in the past and is returned to unsorted by the user, the sortColumn property will remain set, leading to a false positive for the isSorted function.

The solution is instead to use the sortOrder property to check if the table is currently sorted. This can be seen on the following jsFiddle: https://jsfiddle.net/3jk8g589/

The documentation should be updated to read:

To check whether a table has been sorted you can check the sortOrder property. If sortOrder is true, then the order is ascending, if false, the order is descending, and if undefined, the table is not sorted. Additionally, you can check the column last sorted using the sortColumn property.
A simple function, which checks whether the table has been sorted could look like this:
function isSorted(hotInstance) { return hotInstance.sortingEnabled && typeof hotInstance.sortOrder !== 'undefined'; }

dataSchema wrong link src

At dataSchema there should be a link to http://docs.handsontable.com/0.19.0/tutorial-data-sources.html (data sources).

Now it links to main page.

demo-chromajs broken

according to: handsontable/handsontable#3060

http://docs.handsontable.com/0.20.2/demo-chromajs.html
http://docs.handsontable.com/0.20.1/demo-chromajs.html

Uncaught TypeError: Cannot read property '1' of undefined
at demo-chromajs.html:2088

function updateHeatmap(change, source) { 
  // arguments: [true, undefined, undefined, undefined, undefined, undefined]
  if (change) {
    heatmap[change[0][1]] = generateHeatmapData.call(this, change[0][1]);
  } else {

The Handsontable cell type demo does not work from 0.36.0/1.16.0

Source: https://docs.handsontable.com/pro/1.16.0/demo-handsontable.html

It logs an error in the console

And after we decide to exit the editor

The code fails at the

return this.getSourceDataAtRow(selection[0]).name line as after 1.16.0 selection is an array of arrays - not a single value as before.

Handsontable - Formula field retrieval issue

I have formula fields that reference other formula fields in my handsontable. While retrieving some of the formula fields I have issues, where I am getting the formula instead of the calculated value.

I have tried 2 ways of retrieving the formula fields as below,

Method One:

var cellId2 = myht.plugin.utils.translateCellCoords({row: rowNum,col: colNum});
var res1 = myht.plugin.helper.cellValue(cellId2);

When above fails, it returns the formula itself instead of the value.

Method Two:

var formula = myht.getDataAtCell(rowNum, colNum);
formula = formula.substr(1).toUpperCase();
var newValue = myht.plugin.parse(formula, {row: rowNum, col: colNum, id: cellId2 });

When above fails, newValue object has errors as shown below,
{error: "#VALUE!", result: null}

Following is a jsfiddle that shows the problem. https://jsfiddle.net/76z48m98/3/

View the problematic retrievals in the console after clicking the button in the fiddle. If it works fine without issues, probably try 2-4 times clicking button or refresh jsfiddle & try, you can see the issue happen, as sometimes(rarely) everything works fine.

As I understand it, when the libraries calculate the formula, sometimes if the referenced cells are formula cells again, it sometimes retrieves the formula itself of the referenced cells instead of the actual value, leading to isNaN and it fails.

Fix styling table

http://docs.handsontable.com/0.15.0/demo-conditional-formatting.html

Demo: Data validation

handsontable/handsontable#2432