@jspreadsheet/persistanceflag

jSpreadsheet Plugin : Persistance Flag

Replace Notification persistance 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 v7

Options of plugin

Option name	Description	Type	Default Value
css_progress	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' }
icon_error	Material icon code	String	error
icon_success	Material icon code	String	check_circle
icon_progress	Material icon code	String	cached
showText	Show text with flag	Boolean	true
showOnlyTime	Show onlyt type with flag	Boolean	false

For translation

you can defined on translation global to replace var text_XXXX by flagpersistance_

Option name	Default Value
text_error	'Not updated'
text_progress	'Updating'
text_success	'Updated {date}'

Get started

Header on page

<script src="https://jspreadsheet.com/v7/jspreadsheet.js"></script>
<script src="https://jspreadsheet.com/v7/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v7/jsuites.css" type="text/css" />
<link rel="stylesheet" href="https://jspreadsheet.com/v7/jspreadsheet.css" type="text/css" />

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

Initialize plugin on jSpreadsheet

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

Example with options and style

Header on page

<script src="https://jspreadsheet.com/v7/jspreadsheet.js"></script>
<script src="https://jspreadsheet.com/v7/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v7/jsuites.css" type="text/css" />
<link rel="stylesheet" href="https://jspreadsheet.com/v7/jspreadsheet.css" type="text/css" />

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

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

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

Initialize plugin on jSpreadsheet

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

CDN

You can use this CDN link

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

NPM

npm install @jspreadsheet/persistanceflag

import jss_persistanceFlag from  '@jspreadsheet/persistanceflag';

Copyright and license

Copyright GBonnaire.fr and Code released under the MIT License