jSpreadsheet Plugin : Row Header rename
Row Header rename is a plugin for rename row header (Index) with custom name
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.
Documentation
Dependencies
Options of plugin
Option name | Description | Type | Default Value |
---|---|---|---|
headerIndexTitle |
For change header text of column index | String |
(blank) |
rowIndexTitle |
For change header row (Index) If set an array : value repeat after last name set If set a function : ryou have 1 parameter : index, return string, If set an object : property = indexrow, value of property = value |
String|Array[value, value]|Object {indexrow:value,...}|function (indexRow) {} |
null |
widthRowIndex |
For resize column index | Int|String |
50 |
Use in specifics worksheet
For use this plugin on specifics worksheet, set in option in worksheet the role headerRename
jspreadsheet(document.getElementById('spreadsheet'), {
worksheets:[{
...
role: ["headerRename"],
...
},{
...
role: "headerRename",
...
}],
...
plugins: [
...
{ name:'rowRename', plugin:jss_rowHeaderRename, options:{headerIndexTitle: "hours", rowIndexTitle:function(rowIndex) {return (rowIndex % 24) + ":00";}}},
...
],
...
});
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/rowHeaderRename.min.js"></script>
Initialize plugin on jSpreadsheet
jspreadsheet(document.getElementById('spreadsheet'), {
...
plugins: [
...
{ name:'rowRename', plugin:jss_rowHeaderRename, options:{headerIndexTitle: "hours", rowIndexTitle:function(rowIndex) {return (rowIndex % 24) + ":00";}}},
...
],
...
});
Example with options with Array
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/rowHeaderRename.min.js"></script>
Initialize plugin on jSpreadsheet
jspreadsheet(document.getElementById('spreadsheet'), {
...
plugins: [
...
{ name:'rowRename', plugin:jss_rowHeaderRename, options:{headerIndexTitle: "Who ?", rowIndexTitle:["Me", "You", "Us"]}},
...
],
...
});
Example with options with Object
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/rowHeaderRename.min.js"></script>
Initialize plugin on jSpreadsheet
jspreadsheet(document.getElementById('spreadsheet'), {
...
plugins: [
...
{ name:'rowRename', plugin:jss_rowHeaderRename, options:{headerIndexTitle: "Name", rowIndexTitle:{0:"Tom", 1:"Pierre", 2:"Jean", 3:"William"}, widthRowIndex: 100}},
...
],
...
});
CDN
You can use this CDN link
<script src="https://cdn.jsdelivr.net/gh/GBonnaire/jspreadsheet-plugins-and-editors@latest/plugins/JSSV8/dist/rowHeaderRename.min.js"></script>
NPM
npm install @jspreadsheet/rowheaderrename
import jss_rowHeaderRename from '@jspreadsheet/rowheaderrename';
Copyright and license
Copyright GBonnaire.fr and Code released under the MIT License