Excel Like Tables

This functionality is achived by using HandsonTable. Visit https://handsontable.com/ for more

For handsontable to work you need to include both handsontable.min.css and handsontable.min.js 

<link rel="stylesheet" href="/libcommon/plugins/handsontable/handsontable.min.css"/>
<script type="text/javascript" src="/libcommon/plugins/handsontable/handsontable.min.js"></script>
Example
<div id="handsontable-example"></div>


<script type="text/javascript">
var data = [
  ["", "Ford", "Tesla", "Toyota", "Honda"],
  ["2017", 10, 11, 12, 13],
  ["2018", 20, 11, 14, 13],
  ["2019", 30, 15, 12, 13]
];

var container = document.getElementById('handsontable-example');
var hot = new Handsontable(container, {
  data: data,
  rowHeaders: true,
  colHeaders: true
});
</script>

Note

For more examples and documentation visit: https://docs.handsontable.com/0.35.0/tutorial-features.html

We are using community version (CE) of HandsonTable. Following are the features available in CE

Name Description
Alignment Decide where the content is placed within the cell or a range of cells.
Autocomplete Choose one of the suggested options while typing or entering a custom value.
Checkbox Add a checkbox to a cell to indicate binary choices.
Comments Provide an additional note about the cell to help better understand its content.
Conditional formatting Define how specific cells are formatted depending on their values.
Context menu Invoke a shortcut menu to choose an action related to the selected object.
Custom borders Apply custom border style around cells or range of cells.
Custom buttons Insert and remove column or row using custom action buttons.
Custom HTML Display HTML content in a cell or header.
Data validation Control what values can be entered into a cell.
Date Use a date picker to select a date.
Disable cell editing Make cell non-editable without changing its appearance and behaviour.
Drag-down Drag the fill handle (a square in the bottom right corner of the cell) to fill cells with data series.
Dropdown Create an advanced dropdown list of choices in a cell.
Fixed rows and columns Define which rows or columns are visible while scrolling down or across the table.
Freezing Create freeze columns to keep them visible while scrolling.
Handsontable Use Handsontable itself as a custom cell editor.
Highlighting current Indicate the entire active column or row.
Merge cells Display cells across multiple rows or columns.
Moving Drag rows or columns to swap them within the table.
Numeric Type a custom number format in a cell.
Pagination Limit the number of records being displayed in a single view.
Password Use asterisks to mask the value in a cell.
Pre-populating new rows Create empty cells with predefined types or values
Read-only Lock the cell or a range of cells to disallow altering them.
Resizing Drag the sizing handle to change the size of column or row.
Scrolling Use native scrollbars to navigate within the table.
Search for values Search through the content with the search field.
Select Create a simple dropdown list of choices in a cell.
Sorting data Sort data in ascending or descending order throughout the column.
Stretching Allow columns to the parent container width.