Create Web-Based Interactive Tables and Spreadsheets

Jspreadsheet CE is a lightweight vanilla JavaScript plugin for creating amazing web-based interactive HTML tables and spreadsheets compatible with other spreadsheet software. You can create an online spreadsheet from JS, JSON, CSV, or XSLX files. You can copy it from Excel and paste it directly into a Jspreadsheet CE spreadsheet and vice versa. It is very easy to integrate any 3rd party JavaScript plugins to create custom columns, and custom editors, and customize any feature in your application.

Jspreadsheet CE has a lot of different input options with native column types to cover the requirements of the most popular web-based applications. It is a complete web data management solution. Create amazing applications with the Jspreadsheet CE JavaScript spreadsheet.

bs excel like table, handsontable, javascript spreadsheet free, excel like table in html, javascript spreadsheet with formulas, vue excel like table, jquery editable table like excel

Main advantages

Create rich and easy-to-use web interfaces and applications.
You can easily handle complex data inputs in a way that your users will use.
Improve your user software experience.
Create rich CRUDS and beautiful user interface.
Excel compatibility: Users can transfer data using common copy and paste shortcuts.
Easy customizations with easy third-party plug-in integration.
Light, fast and easy to use.
Thousands of successful use cases.
Accelerate your business dealing with challenging data entry into web-based programs.

How to make use of it:

1. Import jExcel and jSuites into the document.

<link rel="stylesheet" href="/path/to/jsuites.css" />
<link rel="stylesheet" href="/path/to/jexcel.css" />
<script src="/path/to/jsuites.js"></script>
<script src="/path/to/jexcel.js"></script>

2. Create an empty DIV element to hold the spreadsheet.

<div id="demo"></div>

3. Create a spreadsheet from the dataset you provide.

// from JS arrays
jexcel(document.getElementById('demo'), {
  data: [
    // data here
  ];
  columns:[
    // columns data here
  ]
});

// from a JSON file
jexcel(document.getElementById('demo'), {
  url:'data.json',
  columns:[
    // columns data here
  ]
});

// from a CSV file
jexcel(document.getElementById('demo'), {
  csv:'demo.csv',
  csvHeaders:true,
  columns:[
    // columns data here
  ]
});

4. All possible options with default values.

// External data
url:null,
// Data
data:null,
// Copy behavior
copyCompatibility:false,
root:null,
// Rows and columns definitions
rows:[],
columns:[],
// Deprected legacy options
colHeaders:[],
colWidths:[],
colAlignments:[],
nestedHeaders:null,
// Column width that is used by default
defaultColWidth:50,
defaultColAlign:'center',
// Spare rows and columns
minSpareRows:0,
minSpareCols:0,
// Minimal table dimensions
minDimensions:[0,0],
// Allow Export
allowExport:true,
// @type {boolean} - Include the header titles on download
includeHeadersOnDownload:false,
// @type {boolean} - Include the header titles on copy
includeHeadersOnCopy:false,
// Allow column sorting
columnSorting:true,
// Allow column dragging
columnDrag:false,
// Allow column resizing
columnResize:true,
// Allow row resizing
rowResize:false,
// Allow row dragging
rowDrag:true,
// Allow table edition
editable:true,
// Allow new rows
allowInsertRow:true,
// Allow new rows
allowManualInsertRow:true,
// Allow new columns
allowInsertColumn:true,
// Allow new rows
allowManualInsertColumn:true,
// Allow row delete
allowDeleteRow:true,
// Allow deleting of all rows
allowDeletingAllRows:false,
// Allow column delete
allowDeleteColumn:true,
// Allow rename column
allowRenameColumn:true,
// Allow comments
allowComments:false,
// Global wrap
wordWrap:false,
// Image options
imageOptions: null,
// CSV source
csv:null,
// Filename
csvFileName:'jexcel',
// Consider first line as header
csvHeaders:true,
// Delimiters
csvDelimiter:',',
// First row as header
parseTableFirstRowAsHeader:false,
parseTableAutoCellType:false,
// Disable corner selection
selectionCopy:true,
// Merged cells
mergeCells:{},
// Create toolbar
toolbar:null,
// Allow search
search:false,
// Create pagination
pagination:false,
paginationOptions:null,
// Full screen
fullscreen:false,
// Lazy loading
lazyLoading:false,
loadingSpin:false,
// Table overflow
tableOverflow:false,
tableHeight:'300px',
tableWidth:null,
// Meta
meta: null,
// Style
style:null,
// Execute formulas
parseFormulas:true,
autoIncrement:true,
autoCasting:true,
// Security
secureFormulas:true,
stripHTML:true,
// Filters
filters:false,
footers:null,
// Global event dispatcher
onevent:null,
// Persistance
persistance:false,
// Customize any cell behavior
updateTable:null,
// Detach the HTML table when calling updateTable
detachForUpdates: false,
freezeColumns:null,

5. Callback functions.

onundo: function(instance, historyRecord){
  // do something
},
onredo: function(instance, historyRecord){
  // do something
},
onload: function(instance, historyRecord){
  // do something
},
onchange: function(instance, cell, x, y, value){
  // do something
},
onbeforechange: function(instance, cell, x, y, value){
  // do something
},
onafterchanges: function(instance, records){
  // do something
},
onbeforeinsertrow: function(instance, rowNumber, numOfRows, insertBefore){
  // do something
},
oninsertrow: function(instance, rowNumber, numOfRows, rowRecords, insertBefore){
  // do something
},
onbeforeinsertcolumn: function(instance, columnNumber, numOfColumns, insertBefore){
  // do something
},
oninsertcolumn: function(instance, columnNumber, numOfColumns, historyRecords, insertBefore){
  // do something
},
onbeforedeleterow: function(instance, rowNumber, numOfRows){
  // do something
},
ondeleterow: function(instance, rowNumber, numOfRows, rowRecords){
  // do something
},
onbeforedeletecolumn: function(instance, columnNumber, numOfColumns){
  // do something
},
ondeletecolumn: function(instance, columnNumber, numOfColumns, historyRecords){
  // do something
},
onmoverow: function(instance, from, to){
  // do something
},
onmovecolumn: function(instance, from, to){
  // do something
},
onresizerow: function(instance, cell, width){
  // do something
},
onresizecolumn: function(instance, cell, width){
  // do something
},
onsort: function(instance, cellNum, order){
  // do something
},
onselection: function(instance, x1, y1, x2, y2, origin){
  // do something
},
onpaste: function(instance, data){
  // do something
},
onbeforepaste: function(instance, data, x, y){
  // do something
},
onmerge: function(instance, cellName, colspan, rowspan){
  // do something
},
onfocus: function(instance){
  // do something
},
onblur: function(instance){
  // do something
},
onchangeheader: function(instance, column, oldValue, newValue){
  // do something
},
oneditionstart: function(instance, cell, x, y){
  // do something
},
oneditionend: function(instance, cell, x, y, value, save){
  // do something
},
onchangestyle: function(instance, o, k, v){
  // do something
},
onchangemeta: function(instance, o, k, v){
  // do something
},
onchangepage: function(instance, pageNumber, oldPage){
  // do something
},
onbeforesave: function(instance, obj, data){
  // do something
},
onsave: function(instance, obj, data){
  // do something
},

6. Compile the plugin.

text:{
  noRecordsFound: 'No records found',
  showingPage: 'Showing page {0} of {1} entries',
  show: 'Show ',
  search: 'Search',
  entries: ' entries',
  columnName: 'Column name',
  insertANewColumnBefore: 'Insert a new column before',
  insertANewColumnAfter: 'Insert a new column after',
  deleteSelectedColumns: 'Delete selected columns',
  renameThisColumn: 'Rename this column',
  orderAscending: 'Order ascending',
  orderDescending: 'Order descending',
  insertANewRowBefore: 'Insert a new row before',
  insertANewRowAfter: 'Insert a new row after',
  deleteSelectedRows: 'Delete selected rows',
  editComments: 'Edit comments',
  addComments: 'Add comments',
  comments: 'Comments',
  clearComments: 'Clear comments',
  copy: 'Copy...',
  paste: 'Paste...',
  saveAs: 'Save as...',
  about: 'About',
  areYouSureToDeleteTheSelectedRows: 'Are you sure to delete the selected rows?',
  areYouSureToDeleteTheSelectedColumns: 'Are you sure to delete the selected columns?',
  thisActionWillDestroyAnyExistingMergedCellsAreYouSure: 'This action will destroy any existing merged cells. Are you sure?',
  thisActionWillClearYourSearchResultsAreYouSure: 'This action will clear your search results. Are you sure?',
  thereIsAConflictWithAnotherMergedCell: 'There is a conflict with another merged cell',
  invalidMergeProperties: 'Invalid merged properties',
  cellAlreadyMerged: 'Cell already merged',
  noCellsSelected: 'No cells selected',
},

7. API methods.

// Get the full or partial table data
// @Param boolan onlyHighlighedCells - Get only highlighted cells  
myTable.getData([bool]);

// Get the full or partial table data in JSON format
// @Param boolan onlyHighlighedCells - Get only highlighted cells
myTable.getData([bool]);

// Get the data from one row by number
// @Param integer rowNumber - Row number 
myTable.getRowData([int]);

// Get the data from one column by number
// @Param integer columnNumber - Column number 
myTable.getColumnData([int]);

// Set the data from one column by number
// @Param integer columnNumber - Column number
myTable.setColumnData([int], [array]);

// Update the table data
// @Param json newData - New json data, null will reload what is in memory. 
myTable.setData([json]);

// Merge cells
// @Param string columnName - Column name, such as A1.
// @Param integer colspan - Number of columns
// @Param integer rowspan - Number of rows
myTable.setMerge([string], [int], [int]);

// Get merged cells properties
// @Param string columnName - Column name, such as A1. 
myTable.getMerge([string]);

// Remove merged
// @Param string columnName - Column name, such as A1. 
myTable.removeMerge([string]);

// Destroy merged by column name
// destroyMerged: Destroy all merged cells 
myTable.destroyMerge();

// Get current cell DOM
// @Param string columnName - str compatible with excel, or as object. 
myTable.getCell([string]);

// Get current cell DOM innerHTML
// @Param string columnName - str compatible with excel, or as object. 
myTable.getLabel([string]);

// Get current cell value
// @Param mixed cellIdent - str compatible with excel, or as object. 
myTable.getValue([string]);

// Get value from coords
// @Param integer x
// @Param integer y
myTable.getValueFromCoords([integer], [integer]);

// Change the cell value
// @Param mixed cellIdent - str compatible with excel, or as object.
// @Param string Value - new value for the cell  
myTable.setValue([string], [string]);

// Set value from coords
// @Param integer x
// @Param integer y
// @Param string Value - new value for the cell
// @Param bool force - update readonly columns 
myTable.getValueFromCoords([integer], [integer], [string], [bool]);

// Reset the table selection
// @Param boolean executeBlur - execute the blur from the table
myTable.resetSelection([bool]);

// Select cells
// @Param object startCell - cell object
// @Param object endCell - cell object
// @Param boolean ignoreEvents - ignore onselection event  
myTable.updateSelection([cell], [cell], true);

// Select cells
// @Param integer x1
// @Param integer y1
// @Param integer x2
// @Param integer y2 
myTable.updateSelectionFromCoords([integer], [integer], [integer], [integer]);

// Get the current column width
// @Param integer columnNumber - column number starting on zero  
myTable.getWidth([integer]);

// Change column width
// @Param integer columnNumber - column number starting on zero
// @Param string newColumnWidth - New column width 
myTable.setWidth([integer], [integer]);

// Get the current row height
// @Param integer rowNumber - row number starting on zero  
myTable.getHeight([integer]);

// Change row height
// @Param integer rowNumber - row number starting on zero
// @Param string newRowHeight- New row height  
myTable.setHeight([integer], [integer]);

// Get the current header by column number
// @Param integer columnNumber - Column number starting on zero  
myTable.getHeader([integer]);

// Get all header titles 
myTable.getHeaders();

// Change header by column
// @Param integer columnNumber - column number starting on zero
// @Param string columnTitle - New header title  
myTable.setHeader([integer], [string]);

// Get table or cell style
// @Param mixed - cell identification or null for the whole table. 
myTable.getStyle([string]);

// Set cell(s) CSS style
// @Param mixed - json with whole table style information or just one cell identification. Ex. A1.
// @param k [optional]- CSS key
// @param v [optional]- CSS value  
myTable.setSyle([object], [string], [string]);

// Remove all style from a cell
// @Param string columnName - Column name, example: A1, B3, etc  
myTable.resetStyle([string]);

// Get cell comments
// @Param mixed - cell identification or null for the whole table. 
myTable.getComments([string]);

// Set cell comments
// @Param cell - cell identification
// @Param text - comments  
myTable.setComments([string], [string]);

// Reorder a column asc or desc
// @Param boolean sortType - Zero will toggle current option, one for desc, two for asc  
myTable.orderBy([integer], [boolean]);

// Get table definitions  
myTable.getConfig();

// Add a new column
// @param mixed - num of columns to be added or data to be added in one single column
// @param int columnNumber - number of columns to be created
// @param boolean insertBefore
// @param object properties - column properties  
myTable.insertColumn([mixed], [integer], [boolean], [object]);

// Remove column by number
// @Param integer columnNumber - Which column should be excluded starting on zero
// @param integer numOfColumns - number of columns to be excluded from the reference column  myTable.deleteColumn([integer], [integer]);

// change the column position
// @Param integer columnPosition
// @Param integer newColumnPosition  
myTable.moveColumn([integer], [integer]);

// Add a new row
// @Param mixed - number of blank lines to be insert or a single array with the data of the new row
// @Param integer rowNumber - reference row number
// @param boolean insertBefore 
myTable.insertRow([mixed], [integer], [boolean]);

// Remove row by number
// @Param integer rowNumber - Which row should be excluded starting on zero
// @Param integer numOfRows - number of lines to be excluded 
myTable.deleteRow([integer], [integer]);

// Change the row position
// @Param integer rowPosition
// @Param integer newRowPosition 
myTable.moveRow([integer], [integer]);

// Get the current data as a CSV file  
myTable.download();

// Get the table or cell meta information
// @Param mixed - cell identification or null for the whole table. 
myTable.getMeta([string]);

// Set the table or cell meta information
// @Param mixed - json with whole table meta information.  
myTable.setMeta([mixed]);

// Toogle table fullscreen mode
// @Param boolan fullscreen - define fullscreen status as true or false  
myTable.fullscreen([bool]);

// Get the selected rows
// @Param boolan asIds - Get the rowNumbers or row DOM elements  
myTable.getSelectedRows([bool]);

// Get the selected columns
// @Param boolan asIds - Get the colNumbers or row DOM elements  
myTable.getSelectedColumns([bool]);

// Show column of index numbers 
myTable.showIndex();

// Hide column of index numbers 
myTable.hideIndex();

// Search in the table, only if directive is enabled during inialization.
// @Param string - Search for word 
myTable.search([string]);

// Reset search table 
myTable.resetSearch();

// Which page showing on jExcel - Valid only when pagination is true. 
myTable.whichPage();

// Go to page number- Valid only when pagination is true.
// @Param integer - Go to page number  
myTable.page([integer]);

// Undo last changes 
myTable.undo();

// Redo changes  
myTable.redo();

Dynamic Spreadsheet-like Data Grid, Jspreadsheet CE v4: The JavaScript spreadsheet Plugin/Github, spreadsheet like web app