Wallogit.com
2017 © Pedro Peláez
jExcel - The javascript spreadsheet
Jexcel CE has been renamed to Jspreadsheet CE
, (*1)
Jspreadsheet CE is an extensible framework for building sophisticated data-oriented interfaces with Excel-like controls. By bringing familiar spreadsheet features to your application, you can drastically reduce development time while delivering an interface that users already know how to use, leading to faster adoption and increased productivity. You can use Jspreadsheet in many different applications, such as:, (*2)
, (*3)
npm install jspreadsheet-ce, (*4)
<script src="https://cdn.jsdelivr.net/npm/jspreadsheet-ce/dist/index.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jspreadsheet-ce/dist/jspreadsheet.min.css" type="text/css" /> <script src="https://cdn.jsdelivr.net/npm/jsuites/dist/jsuites.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jsuites/dist/jsuites.min.css" type="text/css" />
A basic example to integrate the Jspreadsheet in your website to create your first data grid with spreadsheet controls. https://codepen.io/hchiam/pen/qBRzXKK, (*5)
Add jexcel/jspreadsheet and Jsuites to your html file, (*6)
<script src="https://bossanova.uk/jspreadsheet/v5/jspreadsheet.js"></script> <script src="https://jsuites.net/v5/jsuites.js"></script> <link rel="stylesheet" href="https://bossanova.uk/jspreadsheet/v5/jspreadsheet.css" type="text/css" /> <link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />
You should initialize your data grid on a div container, such as:, (*7)
<div id="spreadsheet"></div>
To initialize a Jspreadsheet CE table you should run JavaScript, such as:, (*8)
jspreadsheet(document.getElementById('spreadsheet'), {
worksheets: [{
data: [
['Jazz', 'Honda', '2019-02-12', '', true, '$ 2.000,00', '#777700'],
['Civic', 'Honda', '2018-07-11', '', true, '$ 4.000,01', '#007777'],
],
columns: [
{ type: 'text', title:'Car', width:120 },
{ type: 'dropdown', title:'Make', width:200, source:[ "Alfa Romeo", "Audi", "Bmw", "Honda" ] },
{ type: 'calendar', title:'Available', width:200 },
{ type: 'image', title:'Photo', width:120 },
{ type: 'checkbox', title:'Stock', width:80 },
{ type: 'numeric', title:'Price', width:100, mask:'$ #.##,00', decimal:',' },
{ type: 'color', width:100, render:'square', }
]
}]
});
Serve your html file and then you will get the rendered table in your browser, (*9)
, (*10)
, (*11)
% npm run build, (*12)
% npm run start, (*13)
More information, (*14)
Special thanks to FDL - Fonds de Dotation du Libre for their support and sponsorship, which made the new version possible with many exciting features., (*15)
=PROGRESS (progress bar), =RATING (5-star rating).=COLUMN, =ROW, =CELL, =TABLE, =VALUE.includeHeadersOnCopy, persistence, filters, autoCasting, freezeColumns.onevent, onchangepage, onbeforesave, onsave.getMeta, setMeta methods.Jspreadsheet v3 is a complete rebuild of the JavaScript spreadsheet (previously a jQuery plugin). Due to the changes, full compatibility could not be ensured. If upgrading, your code may require some updates. For more information, refer to the article on upgrading from Jspreadsheet v2 or Handsontable., (*16)
New features in Jspreadsheet v3: - Drag and drop columns. - Resizable rows. - Merge columns. - Search functionality. - Pagination. - Lazy loading. - Full-screen mode. - Image upload. - Native color picker. - Better mobile compatibility. - Enhanced nested headers support. - Advanced keyboard navigation. - Better hidden column management. - Data picker enhancements: dropdown, autocomplete, multiple selection, group options, and icons. - Import from XLSX (experimental)., (*17)
Major improvements: - A new formula engine with faster results and no external dependencies. - No use of selectors, leading to faster performance. - New native column types. - No jQuery required. - Examples for React, Vue, and Angular. - XLSX support via a custom SheetJS integration (experimental)., (*18)
alt+enter.set/get meta information.set/get configuration parameters.set/get cell styles.set/get cell comments.insertRow, deleteRow, insertColumn, deleteColumn. See an example.insertRow, deleteRow, insertColumn, deleteColumn, moveRow.updateSettings improvements.See contributing, (*19)
Jspreadsheet CE is released under the [MIT license]. Contact contact@jspreadsheet.com, (*20)