Documentation keyboard_arrow_right Faq

FAQ

Technical Questions

Common questions and solutions for Jspreadsheet implementation, customization, and troubleshooting. Find practical answers to help you build and customize your JavaScript spreadsheet applications.

1. How do I set data grid dimensions as percentages?

<div id="spreadsheet" style="width: 50%; height: 50%"></div>
<script>
// Create the data grid with spreadsheet controls
jspreadsheet(document.getElementById('spreadsheet'), {
    tableOverflow: true,
    worksheets: [{
        minDimensions: [6, 5000],
    }]
});
</script>

2. Why does Jspreadsheet convert strings to numbers?

Jspreadsheet automatically converts strings to numbers by default to enable mathematical operations on numeric data like financial and sales figures, allowing correct calculations, sorting, and filtering. To prevent automatic conversion, set the autoCasting property to false for a specific column or the entire data grid.

// ...
columns: [{
    type: 'text',
    autoCasting: false
}]

3. How do I create alternating row colors (zebra striping)?

Add the following CSS to your project:

.jss tbody tr:nth-child(even) {
    background-color: #EEE9F1 !important;
}

4. How do I convert multiple HTML tables to Jspreadsheet data grids?

let tables = document.querySelectorAll('table');
for (let i = 0; i < tables.length; i++) {
    jspreadsheet(tables[i]);
}

5. How do I disable paste functionality in a data grid?

jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        minDimensions: [6, 6],
    }],
    onbeforepaste: function(instance, data, x, y) {
        return false;
    }
});

6. How can I intercept and modify pasted data?

jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        minDimensions: [6, 6],
    }],
    onbeforepaste: function(instance, data, x, y, options) {
        // Do something with the data
        return data;
    }
});

7. How do I override column types for specific cells?

jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        columns: [
            { type: 'text' },
            { type: 'text' },
        ],
        cells: {
            B2: { type: 'number', mask: '$ #,##0.00', decimal: '.' },
            B3: { type: 'percent' },
        }
    }]
});

8. How do I disable the context menu?

jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        minDimensions: [6, 6],
    }],
    contextMenu: function() {
        return false;
    }
});

9. How do I change the default download filename?

jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        minDimensions: [6, 6],
    }],
    csvFileName: 'yourname'
});

10. How do I add an external action without losing the spreadsheet focus?

Working example:

https://jsfiddle.net/spreadsheet/v5tbxg01/

11. How do I keep the selection in the spreadsheet when clicking on an element outside the sheet?

Add a class to the external element: jss_object

https://jsfiddle.net/spreadsheet/rg1tdh0z/

12. How do I automatically add unique IDs to data grid cells?

// Initiate a new Jspreadsheet data grid
jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        minDimensions: [6, 6],
    }],
    oncreatecell: function(worksheet, cell, x, y, options) {
        let id = worksheet.helpers.getCellNameFromCoords(x, y);
        cell.setAttribute('id', id);
    }
});

13. How do you include headers or nested headers during XLSX generation?

Since Excel does not support headers or nested headers directly, you can use the onbeforerender event in the render extension to include them. This event allows you to copy the headers or nested headers as data and update the relevant formulas in the JSON definition.

14. How do I implement custom cell validation rules?

jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        data: [
            ['[email protected]', 150],
            ['invalid-email', 75],
            ['[email protected]', 200],
        ],
        columns: [{
            type: 'text',
            title: 'Email'
        }, {
            type: 'number',
            title: 'Score'
        }]
    }],
    onbeforechange: function(instance, cell, x, y, value) {
        // Email validation for column 0
        if (x === 0) {
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!emailRegex.test(value)) {
                alert('Please enter a valid email address');
                return false;
            }
        }
        return value;
    }
});

15. How do I implement custom cell renderers?

jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        data: [
            ['Product A', 25],
            ['Product B', 75],
            ['Product C', 150],
        ],
        columns: [{
            type: 'text',
            title: 'Product'
        }, {
            type: 'number',
            title: 'Sales',
            render: function(td, value, x, y, instance) {
                if (value > 100) {
                    td.style.backgroundColor = '#ff4444';
                    td.style.color = 'white';
                } else if (value > 50) {
                    td.style.backgroundColor = '#ffaa44';
                }
                return value;
            }
        }]
    }]
});