@jspreadsheet/persistenceflag

jSpreadsheet Plugin : persistence Flag

Replace Notification persistence and cloud by discret flag on toolbar

This plugin is Free

What is jSpreadsheet ?

jSpreadsheet, a lightweight Vanilla JavaScript plugin, can help you create exceptional web-based interactive tables and spreadsheets. Compatible with most widely-used spreadsheet software, such as Excel or Google Spreadsheet, it offers users an unrivalled Excel-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. Impress your clients with a better user experience and a great dynamic interactive data management tool.

• Download jSpreadsheet Pro

Documentation

Dependencies

• jSpreadsheet Pro v8 or
• jSpreadsheet Pro v9
• or
• jSpreadsheet Pro v10

Options of plugin

Option name	Description	Type	Default Value
cssProgress	Your class css for animated icon in progress	String	(blank)
dateFormat	Use in text {date} for add datetime or {time} for add onlytime	Object	{ year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric' }
iconError	Material icon code	String	error
iconSuccess	Material icon code	String	check_circle
iconProgress	Material icon code	String	cached
showText	Show text with flag	Boolean	true
showOnlyTime	Show only type with flag	Boolean	false

For translation

you can use jSuites dictionary for translate this plugin

Option name	Default Value
textError	'Not updated'
textProgress	'Updating'
textSuccess	'Updated {date}'

Get started

Header on page

<script src="https://cdn.jsdelivr.net/npm/jspreadsheet/dist/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jspreadsheet/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" />

<script src="/path/to/persistenceFlag.min.js"></script>

Initialize plugin on jSpreadsheet

jspreadsheet(document.getElementById('spreadsheet'), {
        toolbar: true, // or Array/object
	...
	plugins: [
      ...
      { name:'persistenceFlag', plugin:jss_persistenceFlag },
      ...  
    ],
    ...
});

Example with options and style

Header on page

<script src="https://cdn.jsdelivr.net/npm/jspreadsheet/dist/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jspreadsheet/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" />

<script src="/path/to/persistenceFlag.min.js"></script>

<style>
.jss-flagpersistence i {
    padding: 5px;
    font-size: 1.1em;
}

.jss-flagpersistence span {
    color: #999999;
    font-size: 1em;
}
</style>

Initialize plugin on jSpreadsheet

jspreadsheet(document.getElementById('spreadsheet'), {
    toolbar: true, // or Array/object
	...
	plugins: [
      ...
      { name:'persistenceFlag', plugin:jss_persistenceFlag, options:{showText:false} },
      ...  
    ],
    ...
});

CDN

You can use this CDN link

<script src="https://cdn.jsdelivr.net/gh/GBonnaire/jspreadsheet-plugins-and-editors@latest/plugins/JSSV8/dist/persistenceFlag.min.js"></script>

NPM

npm install @jspreadsheet/persistenceflag

import jss_persistenceFlag from  '@jspreadsheet/persistenceflag';

Copyright and license

Copyright GBonnaire.fr and Code released under the MIT License