Nested Headers with other Column Settings

#1

Hey,

We currently have a table with nested headers and we need to apply some number formatting to the columns. I Had a look at this React How to use Nested Headers with columns config objects and found that the example posted https://stackblitz.com/edit/react-axqsoc?file=src%2FApp.js

Sorry in advance for the duplication but does Handsontable of any other way of doing this, via the config?

I also have another question about the example. The columns specified in columnConfigs all have a title but that does not get picked up, is this property only set by the label within the nestedHeaders

Cheers, James

#2

Hi @james.dale

Can you please explain a bit more what do you mean by doing it via config? In general the numeric format is set independently for each column setup.

As for the another question. In this example the title is used wrongly, it works only for regular headers, in case of nested headers it should be specified as label.

#3

Hey, yeah sure, let me see if I can show what I mean. I might just be miss understanding something.

So currently we have nestedHeaders which looks something like this

    [
        "Items",
        {
            "label": "Item One",
            "colspan": 1
        },
        {
            "label": "Item Two",
            "colspan": 1
        },
        ...
    ],
    [
        "Nested One",
        "Nested Two",
        ...
    ]
]

For the data in the table we have numbers for Nested One and Nested Two this is great and the nestedHeader works as expected.

We now however want to format this data so applying something like

      type: 'numeric',
      numericFormat: {
        pattern: {
          thousandSeparated: true,
          mantissa: 10,
          trimMantissa: true,
        },
      },

Maybe wishful thinking but I wanted to do something like { label: "Nested One", type: '...', numericFormat: {...}} within the nestedHeaders prop, but yeah from the docs this is not possible, but how would I achieve the above format with thousandSeparated etc… for a particular column within nestedHeaders. Do I have to add columns also?

Cheers, James

#4

Hi @james.dale

Thank you for the explanation. That’s correct. It has be configured for a particular column with the columns option. I have prepared an example showing how it can be done just for one column: https://jsfiddle.net/handsoncode/xhkcofpv/