How to bypass nestedHeaders plugin limitations?

Tags: #<Tag:0x00007f51b932da68> #<Tag:0x00007f51b932d590>
#1

Hello. I encountered three issues while trying to style the table header.

This is the result I expect to get.

Expected_result

Here’s the snippet: https://jsfiddle.net/wt3a2mzy/26/

  1. As far as I understand, since 2012, the ability to merge table headers vertically (rowspan) has not been implemented. The reason for this is a break in backward compatibility (https://github.com/handsontable/handsontable/issues/191#issuecomment-2541354128).

  2. At the lowest level of nestedHeaders (label: "F"), it is not possible to merge cells by setting colspan > 1. If you specify:

    {
    "label": "F",
    "colspan": 3
}

    the header disappears.

  3. It is not possible to add a row number symbol (№) in the upper-left corner of the table, which should be merged vertically with the rows to maintain centering.

How can these problems be solved?

P.S. I’m using v.13.1.0

#2

Hi @mr.fursy

Such layout isn’t currently possible to achieve with the nested headers structure. As you mentioned, it’s because the column header can only be merged horizontally. Only the custom symbol can be added to the 0 header. Here’s an example: https://jsfiddle.net/7q64ub8m/1/

#3

In your example, for some reason, the top level of nestedHeaders increased in height. I achieved the same effect using the afterGetColHeader hook.

const afterGetColHeader: GridSettings['afterGetColHeader'] = (col, TH, headerLevel) => {
  if (col === -1) {
    if (headerLevel === 2) {
      TH.innerHTML = ''
      const div = document.createElement('div')
      div.style.cssText = `
          height: 17px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: 700;
        `
      div.innerHTML = '№'
      TH.appendChild(div)
    }
  } else {
    TH.classList.add(cls.bold)
  }
}

Is this practice considered normal? The only thing that bothers me is that we have specific requirements for row height (15px). The library has a minimum row height restriction (23px), so I had to override it not through the rowHeight prop but via SCSS:

.table {
  td,
  th,
  textarea {
    font-size: 12px;
    height: 15px !important;
    line-height: 12px !important;
  }
}

And I had to define so many CSS properties in cssText within the hook instead of just using TH.innerHTML = '№', because otherwise, the header breaks.

#4

Hi @mr.fursy

Yes, you can also use the afterGetColHeader hook to achieve that. As for changing the default height of the rows, it’s not recommended as that might result in various visual glitches.

1 Like