Multi row table headers with merged cells

Multi row table headers with merged cells

Posted by: finance on 25 June 2024, 2:02 pm EST

• 

  finance

  • Post Options:
  • Link
    Copy

  Posted 25 June 2024, 2:02 pm EST - Updated 25 June 2024, 2:07 pm EST

  Hello team, is there a way to merge table header cells in SpreadJS?

  My use case is to show identical data for different time periods, in adjacent columns, and I’d like to have the main data-info as a single header on the top, spanning multiple columns, and the time periods as the sub header cells. Please check the attached current and desired sheet.

  I’m creating the table using

  addFromDataSource

  and have showHeader set to true, which adds one header row to the sheet. Is it possible to have 2 such header rows and merge cells in them?

  

  1070×186 9.53 KB

  

  776×178 8.02 KB

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 25 June 2024, 4:06 pm EST

  Hi,

  Thanks for sharing the use case and images with us.

  Currently, Microsoft Excel does not allow users to merge table cells, and SpreadJS maintains this functionality for compatibility reasons, meaning it also does not support merging table cells (including headers).

  However, you can use the TableSheet feature to create multiple headers. For more information, please refer to this demo: https://developer.mescius.com/spreadjs/demos/features/table-sheet/multiple-header/purejs

  We also plan to introduce multiple lines as headers in the future, allowing for merged table headers. The internal tracking ID for this requested feature is SJS-176. Unfortunately, we do not have an ETA for when this feature will be available.

  Regards,

  Ankit

• 

  finance

  • Post Options:
  • Link
    Copy

  Posted 25 June 2024, 9:18 pm EST - Updated 25 June 2024, 9:23 pm EST

  Hi Ankit, thanks for suggesting TableSheets. I am using it as below and getting an exception. What’s going wrong?

  

  1082×278 38.5 KB

  The error -

  

  1144×972 205 KB

• 

  priyam.kushwaha

  

  • Post Options:
  • Link
    Copy

  Posted 26 June 2024, 5:47 pm EST

  Hi,

  I tried to replicate the behavior with the available information on my end but was unsuccessful. On my end, it is working as expected. Please refer to the attached sample.

  Sample: https://jscodemine.mescius.io/share/Zxs_if1M1kW_kh5YEg4kEQ/?IsEmbed=false&Theme=Unset&PreviewDirection=0&IsEditorShow=true&IsExplorerShow=true&IsPreviewShow=true&IsConsoleShow=true&IsRunBTNShow=false&IsResetBTNShow=false&IsOpenInCodemineBTNShow=false&PanelWidth=20&PanelWidth=50&PanelWidth=30&defaultOpen={"OpenedFileName"%3A["%2Findex.html"%2C"%2Fpackage.json"%2C"%2Fsrc%2Fapp.js"]%2C"ActiveFile"%3A"%2Fsrc%2Fapp.js"}

  To better assist you, could you share a sample along with the steps to replicate the behavior you have observed, or modify the existing sample to replicate the behavior by forking it? This will enable me to investigate the problem more thoroughly. It would also be helpful if you could provide a GIF or video illustrating the issue.

  Regards,
  
  Priyam

• 

  finance

  • Post Options:
  • Link
    Copy

  Posted 26 June 2024, 8:18 pm EST - Updated 26 June 2024, 8:23 pm EST

  Hi Priyam, do you have an example with React, using the Spreadsheet component? Also, in the example linked above, I see that the spread instance is being taken from a Designer object.

  let designer = new GC.Spread.Sheets.Designer.Designer("designer-container")
  let spread = designer.getWorkbook();

  In my React project, I am using Spreadsheet component, and later using the spread instance provided by the workbookInitialized callback. Do you have an example in React?

  

  1066×440 41.5 KB

• 

  priyam.kushwaha

  

  • Post Options:
  • Link
    Copy

  Posted 27 June 2024, 9:35 pm EST - Updated 27 June 2024, 9:40 pm EST

  Hi,

  You can refer to the demo sample linked below as an example for TableSheet in React. Specifically, look at the “app-func.jsx” file.

  

  1852×863 115 KB

  Sample: https://developer.mescius.com/spreadjs/demos/features/table-sheet/overview/react

  Regards,
  
  Priyam