Format Extension
The Format Extension provides an interface for configuring masks and editors on columns and cells in Jspreadsheet. It supports everything from basic numeric formats to advanced types like Record Reference, giving users precise control over data formatting and input behavior.
Supported formats include masks and alternative cell editors such as calendars, dropdowns, checkboxes, color pickers, and more. A full list of available options is provided below.
Documentation
No additional configuration is needed. Simply enable the extension using the setExtensions
method, and it activates automatically.
Once enabled, it adds a context menu option that opens a formatting modal, allowing users to customize cell and column behavior with various masks and editor types.
Mask Options
Mask Type |
---|
General |
Number |
Currency |
Accounting |
Percentage |
Text |
Custom |
Editor Options
Editor Type |
---|
Text |
Notes |
Numeric |
Percent |
Dropdown |
Checkbox |
Radio |
Calendar |
Image |
Color |
Link |
Progress |
Rating |
Autonumber |
Richtext |
Record |
Installing
Using NPM
$ npm install @jspreadsheet/format
Import the necessary CSS
import "@jspreadsheet/format/dist/style.css"
import "@lemonadejs/studio/dist/style.css"
import "jsuites/dist/jsuites.css"
Using a CDN
<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@lemonadejs/studio/dist/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/format/dist/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jspreadsheet/format/dist/style.min.css" type="text/css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/studio/dist/style.min.css" type="text/css" />
Examples
Basic Format-Enabled Spreadsheet
Once the Format Extension is enabled, a "Format" option appears at the top of the context menu when you right-click any cell or column. This opens the formatting modal for customizing masks and editors.
<html>
<script src="https://jspreadsheet.com/v11/jspreadsheet.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v11/jspreadsheet.css" type="text/css" />
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/studio/dist/style.min.css" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@lemonadejs/studio/dist/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@jspreadsheet/format/dist/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/studio/dist/style.min.css" type="text/css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@jspreadsheet/format/dist/style.min.css" type="text/css" />
<div id="spreadsheet"></div>
<script>
// Set the license for both plugin and the spreadsheet
jspreadsheet.setLicense('ZTY2OGU2MjQ2NmMyZmU2ZmYxZTFhN2U4ZDgxZjM3OTk2MjJkYWZiZDcwYjg2MDY1OGIzOTZiYWQ4YjBhNzVmYTNiYzkyZDM3ZTg5MmNlMjY0N2E1OTMxMTgyNDI4YjhmYzdiMzQ1MGRmNjZlOWViMTY4ZDEyMTExM2U5YzhkZjAsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVd05EQXdOelkzTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlMQ0ptYjNKdFlYUWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
// Set the extensions
jspreadsheet.setExtensions({ format });
// Create the spreadsheet
jspreadsheet(document.getElementById('spreadsheet'), {
toolbars: true,
worksheets: [{
data: [[0.5]],
minDimensions: [5, 5],
cells: { A1: { mask: 'h:mm:ss' } },
}],
});
</script>
</html>
import React, { useRef } from "react";
import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/react";
import format from "@jspreadsheet/format";
import "jspreadsheet/dist/jspreadsheet.css";
import "jsuites/dist/jsuites.css";
import "@lemonadejs/studio/dist/style.css";
import "@jspreadsheet/format/dist/style.css";
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('ZTY2OGU2MjQ2NmMyZmU2ZmYxZTFhN2U4ZDgxZjM3OTk2MjJkYWZiZDcwYjg2MDY1OGIzOTZiYWQ4YjBhNzVmYTNiYzkyZDM3ZTg5MmNlMjY0N2E1OTMxMTgyNDI4YjhmYzdiMzQ1MGRmNjZlOWViMTY4ZDEyMTExM2U5YzhkZjAsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVd05EQXdOelkzTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlMQ0ptYjNKdFlYUWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
// Extensions
jspreadsheet.setExtensions({ format })
export default function App() {
// Spreadsheet array of worksheets
const spreadsheet = useRef();
// Data
const data = [[0.5]];
// Cells
const cells = { A1: { mask: 'h:mm:ss' } }
// Render component
return (
<Spreadsheet ref={spreadsheet}>
<Worksheet data={data} cells={cells} />
</Spreadsheet>
);
}
<template>
<Spreadsheet ref="spreadsheet">
<Worksheet :data="data" :cells="cells" />
</Spreadsheet>
</template>
<script>
import { Spreadsheet, Worksheet, jspreadsheet } from "@jspreadsheet/vue";
import format from "@jspreadsheet/format";
import "jsuites/dist/jsuites.css"
import "jspreadsheet/dist/jspreadsheet.css";
import "@lemonadejs/studio/dist/style.css"
import "@jspreadsheet/format/dist/style.css"
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('ZTY2OGU2MjQ2NmMyZmU2ZmYxZTFhN2U4ZDgxZjM3OTk2MjJkYWZiZDcwYjg2MDY1OGIzOTZiYWQ4YjBhNzVmYTNiYzkyZDM3ZTg5MmNlMjY0N2E1OTMxMTgyNDI4YjhmYzdiMzQ1MGRmNjZlOWViMTY4ZDEyMTExM2U5YzhkZjAsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVd05EQXdOelkzTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlMQ0ptYjNKdFlYUWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
// Extensions
jspreadsheet.setExtensions({ format })
export default {
components: {
Spreadsheet,
Worksheet,
},
setup() {
// Data
const data = [[0.5]];
// Cells
const cells = { A1: { mask: 'h:mm:ss' } }
// Return object
return {
data,
cells,
};
}
}
</script>
import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet";
import format from "@jspreadsheet/format";
import "jspreadsheet/dist/jspreadsheet.css";
import "jsuites/dist/jsuites.css";
import "@lemonadejs/studio/dist/style.css";
import "@jspreadsheet/format/dist/style.css";
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('ZTY2OGU2MjQ2NmMyZmU2ZmYxZTFhN2U4ZDgxZjM3OTk2MjJkYWZiZDcwYjg2MDY1OGIzOTZiYWQ4YjBhNzVmYTNiYzkyZDM3ZTg5MmNlMjY0N2E1OTMxMTgyNDI4YjhmYzdiMzQ1MGRmNjZlOWViMTY4ZDEyMTExM2U5YzhkZjAsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVd05EQXdOelkzTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlMQ0ptYjNKdFlYUWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
// Extensions
jspreadsheet.setExtensions({ format });
@Component({
standalone: true,
selector: "app-root",
template: `<div #spreadsheet></div>`
})
export class AppComponent {
@ViewChild("spreadsheet") spreadsheet: ElementRef;
// Create a new data grid
ngAfterViewInit() {
// Create spreadsheet
jspreadsheet(this.spreadsheet.nativeElement, {
worksheets: [{
data: [[0.5]],
minDimensions: [5, 5],
cells: { A1: { mask: 'h:mm:ss' } },
}],
});
}
}