Jspreadsheet v9: The JavaScript spreadsheet

Teach Umesh Ji March 07, 2023

Jspreadsheet, a lightweight Vanilla JavaScript plugin, can help you create exceptional web-based interactive tables and spreadsheets. It is compatible with the most widely-used spreadsheet software. It offers users an unrivaled spreadsheet-like user experience. It also works well with prominent modern frameworks and flexibly utilizes a large collection of events, extensions and configurations to meet different application requirements.

JavaScript data grid

Create applications with spreadsheet-like controls. Manage thousands of database records in an instant.

 




Used by great companies around the world






Spreadsheet-like controls


Jspreadsheet is a powerful spreadsheet-like plugin

Impress your clients with a better user experience.

  • Make rich and user-friendly web interfaces and applications
  • Handle complicated data inputs with ease and convenience
  • Copy and paste and common spreadsheet shortcuts
  • Highly flexible and customizable
  • Lightweight and easy to use
  • Responsive controls
  • Powerful data grid
  • Agnostic platform. It works well with Angular, React, Vue.



ABCDE
289A289B289C289D289E289
290A290B290C290D290E290
291A291B291C291D291E291
292A292B292C292D292E292
293A293B293C293D293E293
294A294B294C294D294E294
295A295B295C295D295E295
296A296B296C296D296E296
297A297B297C297D297E297
298A298B298C298D298E298
299A299B299C299D299E299
300A300B300C300D300E300
301A301B301C301D301E301
302A302B302C302D302E302
303A303B303C303D303E303

20 columns x 50000 rows (one million cells)

The table was created in: 1268ms


Manage thousands of data base records in an instant

With a new DOM management engine, the pagination and lazy loading options allow for higher efficiency when rendering tables.

Learn More >
“The latest version of Jspreadsheet is a powerful tool, providing an excellent front end for our spreadsheet interface. The Jspreadsheet team is helpful and quick to respond.”

Dana Stoesz,
Coder - Metrex



Flexible and customizable

The advanced integrated tab management system gives users a higher degree of flexibility in their usage.

Learn More >
“We vetted 10 JS spreadsheet components and we must say that jspreadsheet comes out as the best”

Lode Cools,
CTO & Co-founder - Bizzcontrol

Temperature (°C)Monthly Average TemperatureSource: WorldClimate.comTokyoNew YorkBerlinLondonJanMarMayJulSepNov-100102030Highcharts.com

ABCDEFG
1Tokyo76.99.514.518.221.5
2New York-0.20.85.711.31722
3Berlin-0.90.63.58.413.517
4London3.94.25.78.511.915.2



Online spreadsheets, easy to use.

Copy and paste the code below and quick start creating amazing online spreadsheets.

Sheet1
undo
redo
save
Default
ABCDEF
1
2
3
4
5
6


Source code

  1. <html>
  2. <script src="https://jspreadsheet.com/v9/jspreadsheet.js"></script>
  3. <script src="https://jsuites.net/v4/jsuites.js"></script>
  4. <link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" />
  5. <link rel="stylesheet" href="https://jspreadsheet.com/v9/jspreadsheet.css" type="text/css" />
  6.  
  7. <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />
  8.  
  9. <div id="spreadsheet"></div>
  10.  
  11. <script>
  12. // Set your JSS license key (The following key only works for one day)
  13. jspreadsheet.setLicense('NDFiMGEyOTFjOTk2ZWFiMGY4NWUzMDNkZDcwYTAxYzAzMTFjZTM5ZTA4NmJlNmM3Yjg3MDI2NDA1NGRiNmEzOTJiZWU4MzZlYmE0ZGVlYWRlZmE2Y2FkYjRhMDBiMjQ3ZTVjNmFmN2M2YzYxNmY1MTk2YmY0OGVhZWQ4OWE3YzIsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTNPRGM0T0RNeU9Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpJaXdpYzJOdmNHVWlPbHNpZGpjaUxDSjJPQ0lzSW5ZNUlpd2lZMmhoY25Seklpd2labTl5YlhNaUxDSm1iM0p0ZFd4aElpd2ljR0Z5YzJWeUlpd2ljbVZ1WkdWeUlpd2lZMjl0YldWdWRITWlMQ0pwYlhCdmNuUWlMQ0ppWVhJaUxDSjJZV3hwWkdGMGFXOXVjeUlzSW5ObFlYSmphQ0pkTENKa1pXMXZJanAwY25WbGZRPT0=');
  14.  
  15. // Create the spreadsheet
  16. jspreadsheet(document.getElementById('spreadsheet'), {
  17.     tabs: true,
  18.     toolbar: true,
  19.     worksheets: [{
  20.         minDimensions: [8,8],
  21.     }],
  22. });
  23. </script>
  24. </html>

More spreadsheet examples



License

A license is required to use this software. Please choose one of our subscription plans.


About Jspreadsheet

Inspired by other spreadsheet software, Jspreadsheet Pro is an original JavaScript app created to facilitate data input and manipulation in web-based applications. This software has two different distributions, the Community Edition (CE) and the Pro Edition. It is a lightweight alternative to other JavaScript spreadsheet libraries.Thus, you will be familiar with migrating your data to JSS Spreadsheet.



Comparison


Pro vs Community editions

If you are interested in more details about the features, visit the version comparison section.

FeatureDescription
DOM managementWith a new DOM management engine, the pagination and lazy loading options allow for higher efficiency when rendering tables.
Formula parsingThe upgraded formula engine ensures that the efficiency and accuracy of calculations are enhanced, even when dealing with chained formulas.
Cross-Worksheet calculationsWork with formulas from different and multiple worksheets.
Data persistenceOffers complete support for data persistence. Developers can persist not only data, but also the properties of data tables in a remote server. Data tables can thus be easily recreated.

Stronger integration with remote servers enables better management of record IDs and remote data persistence.
Decouple editorsAllows for overwriting column properties for one specific cell. For example, the table can be configured to render a drop-down in one specific cell within a text type column.
Filter optionsThe filterOptions property helps developers overwrite the behavior of a cell based on the values of another cell. For example, I have two date columns in a table; the second should not have a date that is before the one in the first.
Real-time collaborationReal-time online sharing capacity gives multiple users the ability to collaborate effectively.
Custom editor templateOffers a lot of new native column types and provides a new simplified custom type template. Developers can extend and create new custom column types in mere minutes.
Worksheet managementThe advanced integrated tab management system gives users a higher degree of flexibility, including the option to create new worksheets inside a spreadsheet.
Add-ons and extensionsSupport for add-ons and plugins, which allows developers to use third-party extensions or create their own add-ons.
Premium supportOffers timely and comprehensive technical support to help developers maximize the potential of Jspreadsheet Pro and fulfill any application requirements.



Jspreadsheet release notes


Jspreadsheet 9.5.0

  • Group rows has changed from array of elements to number of elements.

Jspreadsheet 9.4.0

  • Execution on hidden formulas
  • Column group methods and events
  • Row group destroy event has been renamed.
  • z-index fix for position relative in cells
  • snapToGrid scrolling

Jspreadsheet 9.3.4

  • Fixes: search for symbols, resetSearch to update scroll, scroll left.

Jspreadsheet 9.3.0

  • New scroll processing, navigation and visual.
  • New dropdown editor arrows (clickable)
  • Selection with scroll incremental speed
  • Frozen cols/rows condition to merged and > than the viewport
  • Checkbox and radio better user experience

Jspreadsheet 9.2.10

  • Better click handler for checkbox and radio editor type
  • textOverflow and hide column fixes

Jspreadsheet 9.2.9

  • Validation @types
  • Fix ordering with hidden type: image columns
  • Toolbar updateState for all items
  • Toolbar bold item apply the opposite of the main selected cell
  • Column and row move border to CSS only.
  • definedNames and formula loop protection updates
  • onrenderfootercell to apply masks on footer cells
  • autoNumber fixes when using tableOverflow
  • autoWidth on dblclick in the header border
  • spacing property on spreadsheet to adjust the breath space in the end of the table
  • Column and rows visibility updates
  • SUBTOTAL on formula-pro to auto update when using filters or searching

Jspreadsheet 9.2.0

  • setWidth will show a column when applied to a hidden column
  • setHeight will show a row when applied to a hidden row
  • Viewport inherits the container width if that is defined and when tableWidth is not defined.
  • Viewport inherits the container height if that is defined and when tableHeight is not defined.
  • Hidden rows are no longer in the viewport.
  • Update nestedHeaders when adding or deleting columns
  • Improvements on the selection and keyboard navigation
  • New methods setRowGroup, resetRowGroup, openRowGroup, closeRowgroup, autoWidth
  • New events oncreaterowgroup, onopenrowgroup, oncloserowgroup, ondestroyrowgroup
  • FreezeRows to be included in all search results

Jspreadsheet 9.1.24

  • New events for search customization: onsearchstart, onserchrow

Jspreadsheet 9.1.22

  • New property columnSortingOnDblClick. Default to false (You can keep historical compatibility change that to true)
  • Double click on the header right border to autoResize based on the data
  • Show/hide columns and rows to the contextMenu
  • Persistence to the show/hide columns and rows methods
  • New events onchangerowvisibility, onchangecolumnvisibility
  • New row and column over merged rows or merged columns

Jspreadsheet 9.1.20

  • Height viewport monitoring on scroll left.
  • Paste with inverted selection fix
  • Freeze rows border position fix
  • New options to disabled virtualization based on the axis when using tableOverflow: true. virtualizationX and virtualizationY.

Jspreadsheet 9.1.17

  • Cloning action when mouseup outside viewport
  • Filter to remove duplicates for dates
  • Destroy to remove all classes and call ondestroy for extensions
  • Toolbar select default font-family

Jspreadsheet 9.1.13

  • Redraw on tab change
  • onbeforechange to accept empty string
  • marching ants disappear when on start edition
  • Internal tracking special formulas.

Jspreadsheet 9.1.6

  • Spreadsheet level autoIncrement
  • Nested headers + frozen columns improvements
  • Create from table
  • Allow cells with white spaces

Jspreadsheet 9.1.0

  • New viewport: faster, resizable, responsive
  • Mobile selection control
  • Horizontal formula corner dragging
  • Extended toolbar with merged cells and vertical align
  • Formula with arrays. (Requires Formula-Premium)
  • New events: onresize, onchangereferences, onbeforesend, onchangedefinednames, oninput
  • Fill handler matching Excel and Google Sheets trends algorithm. Available in the Premium edition with formula pro.
  • History cascade options
  • Download method will call the XSLS render when this the extension is enabled
  • Better default alignment management.
  • ShiftFormula to consider $
  • Variable with nulls instead of zeros
  • getHeight with zero
  • Defined names with history and programmatic methods.
  • Freeze rows
  • Spreadsheet cell text rotation
  • Regional zebra background color


Jspreadsheet 8.7.3

  • New event: onbeforesend
  • Controls: CTRL- to exclude rows and columns
  • Picker.palette([]) to customize the colors from variables in the formulas.

Jspreadsheet 8.6.5

  • setStyle from the toolbar items will not apply style for filtered rows.

Jspreadsheet 8.6.4

  • Re-applying alignment on resetStyle

Jspreadsheet 8.6.3

  • New event: oncreatecolumn
  • New spreadsheet property: moveDownOnEnter

Jspreadsheet 8.6.2

  • Formula calculations: Default value from zero to null when the cell is blank.
  • Array calculations improved

Jspreadsheet 8.5.2

  • New Formula picker with cross-spreadsheet support.
  • Toolbar default options have changed.
  • New style: jss_light
  • New extension: validations
  • onbeforechange returns false to cancel the change event
  • Matrix calculation refresh
  • updateProperty

Jspreadsheet 8.4.2

  • New event onbeforefilter to overwrite the options of the filter.
  • setViewport to keep viewport position
  • Keyboard arrows during the cell edition to move to another cell.
  • Filter editor position

Jspreadsheet 8.3.2

  • No scrollY when tableOverflow + pagination is used, since the height is defined by the number of rows.
  • New event onformulachain brings all information about the chain formula executions.

Jspreadsheet 8.3.1

  • onbeforepaste returns an array in all cases (paste from external or internal source).
  • Rollback for the conditional jspreadsheet return. (To maintain compatibility with legacy declarations).
  • jspreadsheet.destroy removes references to all worksheets
  • wordWrap is deprecated.
  • wrap is a new property that can be used on columns or cells to wrap the text.

Jspreadsheet 8.2.4

  • setData with a new argument to force Array or JSON to be returned
  • Plugins.onevent to work with interception.
  • Plugins.onselection is deprecated.
  • defaultColAlign: default as null. The default is now defined by the CSS.
  • defaultRowHeight: default as 23px.
  • Type number default alignment to right. Can be overwritten via CSS (jss_number).
  • updateTable load after formulas execution.
  • setProperty, getProperty can update specific cell properties. Now includes history, persistence and changes to multiple records.
  • Toolbar color picker to default the current selected cell property value (cursor).
  • createWorksheet to return the new worksheet instance.
  • Jspreadsheet returns the reference to the worksheets array.
  • Image type accepts floating images.
  • Keep the options.data reference when inserting new rows.
  • Type fixes

Jspreadsheet 8.1.15

  • onbeforeformula
  • setWidth for hidden columns
  • Spreadsheet scroll improvements

Jspreadsheet 8.1.12

  • Image type with options (absolute, width, height).
  • Spreadsheet selection with shift improvement
  • Viewport.refresh updates

Jspreadsheet 8.1.9

  • shiftFormula property for columns

Jspreadsheet 8.1.7

  • Better mobile navigation experience. Spreadsheet touch events updates.
  • Formula picker

Jspreadsheet 8.1.0

  • Fixes for filter + add/delete rows combination
  • New property rows[y].results: Boolean to identify records in the search/filter results
  • beforeinit for Plugins
  • Fixes for the programmatic set/reset freezeColumns
  • Improvement of the CSS for freezeColumns + hidden index column
  • Formulas on footers review

Jspreadsheet 8.0.61

  • New spreadsheet formula picker component
  • getRange method automatic order correction fix
  • updateState to get the current selection

Jspreadsheet 8.0.58

  • loadData to reset or reload the JavaScript grid data.
  • Better id synchronization when a column is defined as primaryKey.
  • spreadsheet.toolbar as a method.
  • Fixes when data cell === null and viewport is active to avoid console error on scroll.

Jspreadsheet 8.0.57

  • Internal automatic datatype identification for the spreadsheet: Json or Array based on column names
  • getRange method to bring the selection as a range format.

Jspreadsheet 8.0.56

  • New external javascript data grid formula picker
  • Spreadsheet toolbars resize when open a new worksheet or viewport resize.

Jspreadsheet 8.0.55

  • contextmenu types updates
  • setData on readonly cells
  • Copy and paste when filter/search is applied fixes

Jspreadsheet 8.0.51

  • setData to adjust to different grid dimensions
  • setRowId server callback to update row ids

Jspreadsheet 8.0.48

  • getRowData returns a JSON or Array based on the initial data type
  • Spreadsheet viewport fullscreen to cover all screen space
  • Spreadsheet with empty data is now enabled
  • It is now possible to delete the last row
  • MinSpareRows and MinSpareCols on initialization
  • Spreadsheet formula fixes

Jspreadsheet 8.0.46

  • Editor input CSS z-index update
  • Automatically get the next available name when the spreadsheet worksheet name is not defined
  • Webcomponent support has been included
  • oncopy to support cancelation
  • Get processed values with mask for cells that are not loaded
  • Grid Onwheel behavior
  • getChain fixes
  • Dataype to define the type of data
  • Automatic scroll adjustment for the last row/column
  • New locked property on cells
  • Basic spreadsheet formula plugin fixes
  • NextJS compatibility changes

Jspreadsheet 8.0.41

  • Fixes for spreadsheet calendar mask
  • Force Excel-like formulas on readonly cells on spreadsheet initialization

Jspreadsheet 8.0.31

  • Spreadsheet viewport improvements
  • Touch events

Jspreadsheet 8.0.26

  • deleteRow rendering updates when using the spreadsheet viewport
  • Border freeze
  • Changing complex JSON data objects on insertRow

Jspreadsheet 8.0.15

  • Autocast improvements;
  • Formify integration;

Jspreadsheet 8.0.0

  • Floating editor element, compatible with EMI
  • Viewport loading navigation
  • New formula engine
  • New parent spreadsheet container
  • Shared toolbar
  • New contextmenu arguments
  • New translation options
  • New plugins and editors capabilities


Jexcel 7.11.8

Jexcel has been renamed to Jspreadsheet.
  • Filter for individual columns
  • Global license handler
  • setExtensions, setDictionary
  • Improvement to the scroll experience for lazyloading
  • New tooltip properties for columns
  • New arguments for the lazyloading events
  • Formula caching adjustments
  • New argument for onbeforepaste (style)
  • New masking integration

Jexcel 7.8.2

  • Filter for individual columns
  • Update filters programmatically
  • Validation property, native and custom rules
  • Disabled internal sequence option for new records

Jexcel 7.7.9

  • Custom divisor for options in the dropdown

Jexcel 7.7.2

  • Toolbar with options
  • Responsive autocomplete column
  • textEditor to force input [input type='text'] for column type='number'

Jexcel 7.7.1

  • New events to customize the search results: onbeforesearch and onsearch.

Jexcel 7.7.0

If you migrate from 7.6.1 to 7.7.0 and are dealing with the DOM elements of the tabs using el.children[0], that has been changed to el.tabs.headers.
  • New tabs with navigation.

Jexcel 7.6.1

  • Apply filters programmatically: filter(integer columnNumber, Object values)

Jexcel 7.4.2

  • A new spreadsheet event: oncomments(DOMElement el, Object cells)

Jexcel 7.4.0

  • New column methods: getColumnIdByName, getColumn, setColumn
  • executeFormula with optional x, y references.

Jexcel 7.3.5

  • debugFormulas: true

Jexcel 7.3.0

  • InternationalKeyboard initialization property
  • New jexcel_object class for external elements
  • Better searching/filtering integration

Jexcel 7.2.0

  • Automatic scroll during dragging or selection
  • Freeze nested headers
  • Freeze index numbers

Jexcel 7.1.6

  • Wildcard domain certificate licenses
  • Formula caching

Jexcel 7.1.0

  • General formula engine refactoring
  • Cross-worksheet formula updates and fixes
  • Goto row method
  • Merge selected cells

Jexcel 7.0.0

We are proud to release the new version of Jexcel. More performance and a better spreadsheet experience for the user.

  • Cross-worksheet spreadsheet formula support
  • Formula cache
  • Multiple filter and search combination
  • Spreadsheet with lazycolumns
  • New mergeCells controllers
  • Merge cell updates with insert/delete rows and columns
  • Copy and paste with formulas shift updates
  • Optimizations
  • New dragging/resizing controllers for columns and rows
  • New copy/paste behavior, closer to other software behaviors
  • Better record id management
  • New arrow navigation
  • Calendar and dropdown options

Jexcel 6

Not released to the public.


Jexcel 5.6.7

  • setProperty to render changes in the column.

Jexcel 5.6.6

  • Copy and paste formulas
  • Formulas fixes on delete/insert rows
  • setConfig to change dimensions
  • setHeight to accept arrays of rows

Jexcel 5.6.1

  • New flag and default: includeHiddenRowsOnCopy: false
  • filterOptions with more obvious behavior

Jexcel 5.6.0

  • Full screen with toolbars and worksheet tabs
  • Worksheet new methods, and initial configuration
  • Dropodwn with extra properties and filterOptions
  • New toolbar with new default options

Jexcel 5.5.0

  • New worksheet events
  • New worksheet actions on contextmenu
  • Security increased for formulas and editors
  • Jsuites v3 integration
  • Toolbars
  • New cross sheet relation editor
  • Formula security

Jexcel 5.0.0

  • Calendar filter, to create conditions before open
  • New detached borders and copying indication border
  • New formula and loading engine
  • New faster navigation options
  • Various native column type implementations
  • New decouple custom column template object
  • New cell property capable of setting a type for one specific cell
  • HTML content compatibility
  • Complete data and configuration persistence support
  • Remote tables and multiple user table synchronization (jExcel Cloud)
  • Theme
  • Fixed formulas on footers
  • Formula can return DOM elements
  • Dynamic column type changing

Jexcel 4.0.1

  • Freeze columns
  • Resize multiple columns
  • New smart key navigation
  • New smart merge cell methods
  • Support for large tables, only loads what is necessary when using lazyloading or pagination
  • Faster formula engine
  • New native formula methods
  • Super event: centralized event handler method
  • Easier backend integration

Jexcel 3.6.0

  • Better formula parsing
  • New events
  • New initialization options
  • General fixes

Jexcel 3.2.3

  • getMeta, setMeta methods
  • NPM package with jSuites
  • General fixes

Jexcel 3.0.1

jExcel v3 is a completely rebuilt Vanilla JavaScript version. For that reason, it was not possible to maintain complete compatibility with the previous version. If you are upgrading, you might need to implement a few updates in your code. If you have questions, you can review the article on upgrading from jExcel v2 or Handsontable.

jExcel v3 brings a lot of great new features:

  • Drag and drop columns
  • Resizable rows
  • Merge columns
  • Search
  • Pagination
  • Lazy loading
  • Full-screen flag
  • Image upload
  • Native color picker
  • Better mobile compatibility
  • Better nested headers compatibility
  • Amazing keyboard navigation support
  • Better hidden column management
  • Great data picker: dropdown, autocomplete, multiple, group options and icons
  • Importing from XSLX (experimental)

Big improvements include:

  • A completely new formula engine with no external dependencies with much faster results.
  • Absolutely no selectors, meaning a much faster application
  • New native columns
  • No jQuery is required
  • React, Vue and Angular examples
  • XLXS support using a custom sheetjs (experimental).

Jexcel 2.1.0

We are glad to bring you the latest jquery plugin version, with the following improvements:

  • Mobile touch fixes
  • Paste fixes & new CSV parser

Jexcel 2.0.0

  • New radio column
  • New dropdown with autocomplete and multiple selection options
  • Header/body separation for a better scroll/column resize behavior and compatibility
  • Better text-wrapping, including alt+enter Excel compatibility
  • New set/get meta information
  • New set/get config parameters
  • New set/get programmatic cell style
  • New set/get cell comments
  • New table custom toolbar
  • New responsive calendar picker

Jexcel 1.5.7

  • Checkbox column type improvements
  • Destroy jquery table updates

Jexcel 1.5.1

  • Spreadsheet data overflow and fixed headers. See an example
  • Navigation improvements

Jexcel 1.5.0

  • Relative insertRow, deleteRow, insertColumn, deleteColumn. See an example
  • Undo/Redo action tracker for insertRow, deleteRow, insertColumn, deleteColumn, moveRow
  • New formula column recursive chain
  • New Bootstrap-like alternative design option. See an example
  • updateSettings updates




Create applications with spreadsheet-like controls


Teach Umesh Ji

Posted by Teach Umesh Ji

Umesh Kumar Meghwal

Post a Comment

0 Comments

Post a Comment