How to set Custom text for Column Header in JavaScript Spreadsheet?

This knowledge base explains how to set custom text for column header in JavaScript Spreadsheet.

It can be achieved by setting the “field” and “text” in “columns” property. The “field” property defines the column name that you need to change, and the “text” defines the custom text provided for column header in Spreadsheet.

[JS]

$(function () {
         $("#Spreadsheet").ejSpreadsheet({
                 sheets: [{
                    dataSource: dataSource, fieldAsColumnHeader: true,
                 columns: [
                      { field: 'A', text: 'Item Name' }, 
                      { field: 'B', text: 'Quantity'},
                      { field: 'C', text: 'Price'},
                      { field: 'D', text: 'Amount'},
                      { field: 'E', text: 'Discount'},
                      { field: 'F', text: 'Profit'},
                   ] 
                }],
         });      
    });

The following output is the result of above code example in spreadsheet.

Demo Sample: https://jsplayground.syncfusion.com/aelbzo0z

Conclusion

I hope you enjoyed learning how to set custom text for column header in JavaScript Spreadsheet. 

You can reffer to our JavaScript Spreadsheet Feature Tour page to know about its other ground breaking feature representation and documentation, and how to quicly get started configuration  specifications.You can also explore our JavaScript Spreadsheet Example  to undrestand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!