Interactive Spreadsheet examples
DHTMLX Spreadsheet delivers a full spreadsheet experience in the browser: multi-sheet workbooks, a built-in formula engine, rich cell formatting, and seamless XLSX import and export. Explore the interactive demos below to see it in action, or visit the official documentation for the full API reference.
Use the toggles above to switch the menu bar, formula bar, and read-only mode on and off. Then explore the examples - from formula handling and XLSX import/export to custom themes and multi-sheet setups - each with editable code you can adapt.
Getting started
Set up DHTMLX Spreadsheet from scratch:
- Initialization with menu bar - create a spreadsheet with the top menu bar enabled
- Initialization with multiple sheets - add multiple named sheet tabs to a single instance
- Formulas (functions) cheat sheet - reference all supported spreadsheet functions in one place
- Localization - switch the interface language at runtime
Cells & editing
Cell types, editors, and formatting:
- Cell editor types - use datepicker, timepicker, and select cell editors
- Locked cells - prevent specific cells from being edited
- Readonly - lock the entire spreadsheet for display-only use
- Readonly via events - implement readonly mode by intercepting before* events for granular control over which operations to block
- Initialization with merged cells - start with pre-merged cells in the initial dataset
- Format localization - format numbers, dates, and currency values per locale
- Custom formats - define number and date format patterns for individual cells
- Managing selection - set and clear cell selection via the API
- Hide formula bar - hide the edit line above the grid
Rows, columns & sheets
Column and row layout, visibility, and sheet management:
- Frozen rows and columns - keep header rows or label columns fixed while scrolling
- Freezing columns and rows via API - freeze and unfreeze rows or columns at runtime
- Hiding columns and rows via API - show or hide rows and columns dynamically
- Adding and deleting rows and columns - add, delete, and resize rows and columns programmatically
- Column and row sizing, sort order - set column widths, row heights, and default sort direction
- Filtering via API - apply and remove column filters through the API
- Custom row and column count - configure the total number of rows and columns on init
- Set active sheet - switch the visible sheet tab programmatically
- Clearing data - remove all data or clear specific cells programmatically
Styling & appearance
Themes, toolbar, and context menu customization:
- Built-in themes (skins) - switch between light, dark, and high-contrast themes
- Custom themes (skins) - create a custom color theme by overriding CSS variables
- Dynamic color change in themes - update theme colors at runtime without reinitializing
- Pre-styled cells - initialize the spreadsheet with pre-formatted cell styles and values
- Custom menu bar item - set up the top menu bar with custom items
- Full toolbar - display every available toolbar button at once
- Custom toolbar button - add your own buttons to the toolbar
- Custom toolbar icons - replace default icons with custom SVGs or font icons
- Custom context menu - configure right-click menu actions
Export & import
Data loading and file exchange:
- Load data from URL - fetch and parse spreadsheet data from a remote endpoint
- Detecting data load - run code after data finishes loading via an event callback
- Load CSV file - import a CSV file directly into the spreadsheet
- Import and export to JSON - serialize and restore full spreadsheet state as JSON
- Import and export to .xlsx - load and save spreadsheets in Excel format with formatting preserved
- Custom import and export path - point import and export requests to a custom server endpoint
- Clipboard between Grid and Spreadsheet - copy and paste values between DHTMLX Grid and Spreadsheet
Framework integration
Use DHTMLX Spreadsheet in popular JavaScript frameworks:
- React integration - integrate DHTMLX Spreadsheet into a React project
- Angular integration - add spreadsheet functionality to an Angular application
- Vue integration - embed a spreadsheet in your Vue app
- Svelte integration - use a spreadsheet widget in a Svelte project