JavaScript Spreadsheet

Highly customizable JavaScript spreadsheet library with elegant Material style for editing and formatting data safely and conveniently.

Enhance Your App with DHTMLX Spreadsheet

Built-in features

Using 170+ predefined functions The Spreadsheet widget includes hundreds of predefined math formulas and string, financial, and information functions users can apply to perform various calculations with values and strings. The functions are compatible with Excel and Google Sheets. Working with multiple sheets You can allow your users to work with multiple sheets. They may add a new sheet, rename it, remove an unnecessary one, and change the currently active sheet. Users can conveniently consolidate data from multiple sheets into a single one via cross-referencing. Number formatting With DHTMLX Spreadsheet, you can apply different cell numeric values, including text, digits, percent, and currency signs. Moreover, you may change the settings of default number formats or create custom ones.

Add-on

Excel export module You can purchase a standalone module for exporting spreadsheet tables to Excel (.xlsx) format. It can be deployed directly to your server or as a Docker image. Besides, you’ll get all updates and fixes to the export service together with consultations on the Spreadsheet widget.

Simple customization

Adding custom icons and toolbar buttons By default, DHTMLX Spreadsheet uses Material Design icons. However, you can add any other icon font pack as well as apply desired controls to the toolbar. For example, you can add a custom button to the toolbar to remove all content at once. Enriching context menu controls You have an option to add custom controls not only to the toolbar, but to other spreadsheet parts, including menu and context menu. Thus, you can add a Paint format control to the context menu and allow end-users to save cell style and apply it to other cells within seconds. Setting custom read-only mode In addition to applying the read-only mode to the entire Spreadsheet, you have an option to block certain operations. Thus, for example, you can restrict the possibility to edit and style the cell content.

Spreadsheet Key Features

• Multiple sheets
• Built-in themes : Material, Light, Dark, High Contrast
• Creating custom themes
• Interface localization
• Data searching
• Data filtering (by condition, by values)
• Merging and splitting cells
• Different types of cell editors
• Columns' auto width
• Frozen columns and rows
• Math formulas and string functions
• Sorting columns and data ranges
• Drop-down lists in cells
• Boolean operators
• Cross-browser compatibility (IE11+)
• Convenient API
• Intuitive Excel-like interface
• Adding a TimePicker
• Flexible layout, toolbar, and menu customization
• Default and custom number formats
• Import and export of data to JSON
• Wrapping or clipping long text
• Text formatting
• Import and export of data to Excel (in all browsers except IE and Microsoft Edge)
• Setting custom import/export path
• Plenty of operations for the grid
• Read-only mode
• Auto filling of cells
• Hotkeys navigation

Why Choose DHTMLX Spreadsheet?

Operations for the grid

JavaScript spreadsheet supports the most essential features for displaying and formatting tabular data due to the simple API. Offering the basic Excel-like functionality, it allows you to embed the spreadsheet anywhere on a web page and work with the tabular data in a familiar way. The spreadsheet supports undo/redo actions, block selection, locking and unlocking cells, adding and removing columns and rows, etc.

Custom look and feel

Need to build a complex financial app or use a simple JavaScript spreadsheet for internal purposes? Due to a wide range of configuration settings, you may fine-tune the layout, toolbar, menu, and context menu of your spreadsheet. Among the available options are adding custom toolbar controls, custom icons for controls, menu and context menu items, etc.

Cell formatting

With the formatting capabilities of DHTMLX Spreadsheet, you can change text color and decoration, cell background, set text-align, rename column headings, resize columns' width, etc. Besides, it's possible to clear the styles applied to cells. End users may choose to clear the style of a cell, its value or both.

Support for Angular, React, and Vue.js

DHTMLX Spreadsheet comes with support for the most widely used client-side frameworks to meet the needs of the majority of developers. Integration with Angular, React, and Vue.js is smooth and requires just a few quick steps described in our guides.