@jspreadsheet/statusbar NPM

jSpreadsheet Plugin : Status bar

Status bar is a plugin for add a status bar on bottom of the sheet like Excel. On this status bar you can add new row with button, and show information on selection (Range selected, Formulas, etc.)

preview

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

Options of plugin

You can modify CSS file for change separator of formulas

Events

This plugin dispatch this events

For translation

you can use jSuites dictionary for translate this plugin

Get started

Header on page

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

<script src="/path/to/statusbar.min.js"></script>
<link rel="stylesheet" href="/path/to/statusbar.min.css" type="text/css" />

Initialize plugin on jSpreadsheet

jspreadsheet(document.getElementById('spreadsheet'), {
	...
	plugins: [
      ...
      { name:'statusBar', plugin:jss_statusbar },
      ...  
    ],
    ...
});

Example with options with Options

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/statusbar.min.js"></script>
<link rel="stylesheet" href="/path/to/statusbar.min.css" type="text/css" />

Initialize plugin on jSpreadsheet

jspreadsheet(document.getElementById('spreadsheet'), {
	...
	plugins: [
      ...
      { name:'statusBar', plugin:jss_statusbar, options: { 
                 showAddRowButton: false,
                 limitCalculation: 1000,
                 formulas:{
                    "COUNT":"=COUNT({range})",
                    "My Formula": function(instance, parameters, values) {
                        return parameters.range;
                    }
                 } // End formulas
            } // End options
      },
      ...  
    ],
    ...
});

CDN

You can use this CDN link

<script src="https://cdn.jsdelivr.net/gh/GBonnaire/jspreadsheet-plugins-and-editors@latest/plugins/JSSV8/dist/statusbar.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/GBonnaire/jspreadsheet-plugins-and-editors@latest/plugins/JSSV8/dist/statusbar.min.css" type="text/css" />

NPM

npm install @jspreadsheet/statusbar

import jss_statusBar from '@jspreadsheet/statusbar';
import '@jspreadsheet/statusbar/style.css';

Example for webpack

import 'material-icons/iconfont/material-icons.css';
import jSuites from 'jsuites';
import 'jsuites/dist/jsuites.css';
import jspreadsheet from 'jspreadsheet';
import 'jspreadsheet/dist/jspreadsheet.css';
import formula from '@jspreadsheet/formula-pro';
import jss_statusbar from '@jspreadsheet/statusbar';
import '@jspreadsheet/statusbar/style.css';

jspreadsheet.setLicense("YourLicensekey");

jspreadsheet.setExtensions( { formula } );

const myTable = jspreadsheet(document.getElementById('myTable'), {
        minDimensions: [50, 50],
        toolbar: true,
        plugins: [{name: 'status', plugin: jss_statusbar, options: {}}],
});