FAQ
Welcome to our Jspreadsheet FAQ page. Here, we tackle your most common queries about customizing the JSS data grid. Our aim is to simplify your development journey, enabling you to fully leverage our JavaScript spreadsheet component.How do I define a viewport data grid dimensions as percentages?
Why JSS converts a string to a number?
What is the best way to create odd/even rows in my data grid?
How do I transform multiple HTML static tables to dynamic Jspreadsheet data grids?
How do I disable paste over a JSS data grid?
How can I intercept and change a pasted string over a JSS data grid?
How do I overwrite a type of a cell over a column type?
How do I disabled the JavaScript contextmenu in my spreadsheet?
How do I change the default download filename?
How do I add an external action without losing the spreadsheet focus?
How do I keep the selection in the spreadsheet when clicking on an element outside the sheet?
How do I automatic add unique ID to the data grid cells?
<div id="spreadsheet" style="width: 50%; height: 50%"></div> <script> // Create the data grid with spreadsheet controls jspreadsheet(document.getElementById('spreadsheet'), { worksheets: [{ minDimensions: [6, 5000], tableOverflow: true, }] }); </script>
JSS attempts to convert a string to a number by default to enable mathematical operations on numeric data like financial and sales figures, allowing for correct calculations, sorting, and filtering. To prevent JSS from automatically converting a string to a number, you can set the autoCasting
property to false for a specific column or the entire data grid.
... columns: [{ type:'text', autoCasting: false }]
Solution: Add the following CSS code to your project.
.jss tbody tr:nth-child(even) { background-color: #EEE9F1 !important; }
var tables = document.querySelectorAll('table'); for (var i = 0; i < tables.length; i++) { jspreadsheet(tables[i]); }
jspreadsheet(document.getElementById('spreadsheet'), { worksheets: [{ minDimensions: [6,6], }], onbeforepaste: function(instance, data, x, y) { return false; } });
jspreadsheet(document.getElementById('spreadsheet'), { worksheets: [{ minDimensions: [6,6], }], onbeforepaste: function(instance, data, x, y, options) { // Do something with the data return data; } });
jspreadsheet(document.getElementById('spreadsheet'), { worksheets: [{ columns: [ { type: 'text' }, { type: 'text' }, ], cells: { B2: { type:'number', mask:'$ #,##0.00', decimal:'.' }, B3: { type:'percent' }, } } });
jspreadsheet(document.getElementById('spreadsheet'), { worksheets: [{ minDimensions: [6,6], }, contextMenu: function() { return false; } });
jspreadsheet(document.getElementById('spreadsheet'), { worksheets: [{ minDimensions: [6,6], }], csvFileName: 'yourname' });
Working example:
https://jsfiddle.net/spreadsheet/v5tbxg01/Add a class to the external element: jss_object
https://jsfiddle.net/spreadsheet/rg1tdh0z/// Initiate a new JSS data grid jspreadsheet(document.getElementById('spreadsheet'), { worksheets: [{ minDimensions: [6, 6], }], oncreatecell: function(worksheet, cell, x, y, options) { let cell = worksheet.helpers.getColumnNameFromCoords(x,y); cell.setAttribute('id', cell); } });