Excel like feature grid for UI

Many plugins are available for creating grid/table. But if we want to create excel like feature for UI which plugin should we use? Yes there are some plugins available. In those I found Handsontable is much better and easy for customization. You can easily add columns and rows and has a great support for doing data validation. You can go to this link Handsontable for understanding about the features provided by Handsontable.

(This image is captured from handsontable official site)

Let us check how we can start with Hanndsontable. You can go to Handsontable plugin site and download plugin. It is pretty straight forward to start with Handsontable.

Html

<div id="sample"></div>

JS

var data = [
  ["", "India", "US", "China", "Russia"],
  ["2016", 10, 11, 12, 13],
  ["2017", 20, 11, 14, 13],
  ["2018", 30, 15, 12, 13]
];

var container = document.getElementById('sample');
var hot = new Handsontable(container, {
  data: data,
  rowHeaders: true,
  colHeaders: true,
  dropdownMenu: true
});

You are done with your first excel like grid. What we have done is a very basic thing, you can go to handsontable site and explore more thing. However in my future posts I will be writing about customizing handsontable like customizing context menu, custom validation, clickable header options etc. If you are interested please book mark this post for future updates.

Related Posts

1. Customize context menu in handsontable