@jspreadsheet/statusbar

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.)

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

Option name	Description	Type	Default Value
`showAddRowButton`	For show or hide add row button on left of status bar Values availables : - `true` for all, - `false` none, - `"before"` for only add before row, - `"after"` for only add after row	`Boolean or String`	`true`
`showAddColButton`	For show or hide add col button on left of status bar Values availables : - `true` for all, - `false` none, - `"before"` for only add before column, - `"after"` for only add after column	`Boolean or String`	`true`
`showAddCalculateButton`	For show all time calculate button	`Boolean`	`false`
`limitCalculation`	Define limit Calculation for autocalculate. 0 = no limit	`Integer`	`0`
`defaultQuantity`	Define defautlQuantity on input	`Integer`	`10`
`closeInsertionOnly`	option to defined behavior insertion method	`Boolean`	`false`
`autoButtonDisable`	option to defined behavior action bar. Automatic button disable when no action it's possible	`Boolean`	`true`
`formulas`	Object of formulas, you can use quick reference on formulas `{range}` : Range name A1:B3 `{cells}` : Array of cells (work with filtered row) [A1,A3,B1,B3] `{x1}` : x start selection (first x = 0) `{y1}` : y start selection (first y = 0) `{x2}` : x end selection `{y2}` : y end selection the key property of object is the name showing before result If you use custom formula, for not show empty result, return null. `function args : (instance: {JspreadSheetCurrent}, parameters: {Object with range, cells, x1, y1, x2, y2}, values: {values of selected range})`	`Object of string or function`	`{ "Range":"{range}", // Format A1:B5 "SUM":"=SUM({range})", "MAX":"=MAX({range})", "MIN":"=MIN({range})", },`

You can modify CSS file for change separator of formulas

Events

This plugin dispatch this events

Event name	Args
`statusbar_onload`	WorkBook, Elements(Array of elements)
`statusbar_buttons_disable`	Worksheet, Elements(Array of elements)
`statusbar_buttons_enable`	Worksheet, Elements(Array of elements)

For translation

you can use jSuites dictionary for translate this plugin

Option name	Default Value
`label`	Add
`labelTooMuchData`	Too much data
`labelButtonCalculate`	Calculate

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: {}}],
});