Query About Adding Custom Icons to Column Headers in SpreadJS

Query About Adding Custom Icons to Column Headers in SpreadJS

Posted by: clingam on 29 August 2024, 6:59 pm EST

• 

  clingam

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 29 August 2024, 6:59 pm EST - Updated 29 August 2024, 7:04 pm EST

  Hello SpreadJS Community,

  I am currently working on a project where we are using SpreadJS to manage and display clinical trial data in a grid format. We have a requirement to add custom icons (such as a lock or formula symbol) next to the text in the column headers to visually indicate different statuses or attributes of the columns.

  Could you please advise if SpreadJS supports the addition of custom icons in column headers? If so, could you provide guidance or examples on how to implement this feature?

  Thank you for your assistance!

  

  3603×753 205 KB

• 

  priyam.kushwaha

  

  • Post Options:
  • Link
    Copy

  Posted 30 August 2024, 1:31 am EST

  Hi,

  Yes, you can add custom icons to the column header by defining them in the decoration property of the style. Please refer to the attached code snippet and sample below:

  const spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
  const sheet = spread.getActiveSheet();
  
  let style = new GC.Spread.Sheets.Style();
  style.decoration = {
      icons: [
          {
              src: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjEyIiBoZWlnaHQ9IjEyIiBmaWxsPSJ0cmFuc3BhcmVudCIvPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTcgOUg1TDUgNS45NjA0NmUtMDhIN0w3TCA3IDlaTTYgMTBDNi41NTIyOCAxMCA3IDEwLjQ0NzcgNyAxMUM3IDExLjU1MjMgNi41NTIyOCAxMiA2IDEyQzUuNDQ3NzIgMTIgNSAxMS41NTIzIDUgMTFDNSAxMC40NDc3IDUuNDQ3NzIgMTAgNiAxMFoiIGZpbGw9IiNFNjUyNDkiLz4KPC9zdmc+Cg==',
              position: GC.Spread.Sheets.IconPosition.rightOfText
          }
      ]
  };
  
  sheet.setStyle(0, 0, style, GC.Spread.Sheets.SheetArea.colHeader);

  Sample: https://jscodemine.mescius.io/share/Hr3UKIhPD0WgbFtAjpbvbw/?defaultOpen={"OpenedFileName"%3A["%2Findex.html"%2C"%2Fsrc%2Fapp.js"]%2C"ActiveFile"%3A"%2Fsrc%2Fapp.js"}

  For more insights, you can also check out the demo: https://developer.mescius.com/spreadjs/demos/features/cells/cell-style-decoration-icons/purejs

  References:

  decoration: https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Sheets.Style#decoration

  Regards,
  
  Priyam