We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

set text for column header in Spreadsheet

Hi team,

I am looking for a function to set text for column header in Spreadsheet, there is a post related to jQuery but it is not working for Vue spreadsheet. May I ask do you have any idea about it, thanks!

- For jQuery spreadsheet:

https://www.syncfusion.com/kb/11544/how-to-set-custom-text-for-column-header-in-spreadsheet


Best Regards,
Eric Huang


3 Replies 1 reply marked as answer

SP Sangeetha Priya Murugan Syncfusion Team February 13, 2023 07:27 AM UTC

Hi Eric,



Your requirement can be achieved in our spreadsheet by using the beforeCellRender event. We have triggered this event while rendering the header cell elements, and you can set the text as shown below.


Code Block:


 beforeCellRender: (args): void => {

    if (args.cell == undefined && args.colIndex >= 0) {

      args.element.innerHTML = 'custom header'; // set the custom text for column headers

    }

  }

 


Sample Link:  https://stackblitz.com/edit/g4p8j6?file=index.ts


Could you please check the above details and get back to us, if you need any further assistance on this?


Regards,

Sangeetha M


Marked as answer

EH Eric Huang February 16, 2023 03:36 PM UTC

Dear Sangeetha,

The code is working to set column headers, thanks!

I recommend if your team could consider to have same function that likes JQuery Spreadsheet to set column headers will be better. 


Best Regards,

Eric



SP Sangeetha Priya Murugan Syncfusion Team February 20, 2023 12:01 PM UTC

Hi Eric,


In our EJ2 Spreadsheet, we have provided this support by using the beforeCellRender event. We triggered this event before rendering the header cells, and you can set the custom text based on your needs. We have implemented this behavior based on our current architecture. Therefore, we suggest you set the column header text as we have previously suggested.


Loader.
Up arrow icon