Is it possible to have "two-leveled" header or "special" single row

Tags: #<Tag:0x00007f8b1ae7b650>
#1

Hi,

Currently, I want to create a table as such.
14%20AM

Note that this table has 2 headers levels.

The top level are all texts/strings:

  1. Input
  2. Additional Information
  3. Output.

The second level header have dropdown, text, and dropdown.

  1. Input Attributes Names (dropdown)
  2. Notes (text/string)
  3. Output attributes Names (dropdown)

The rest of the contents of the table will be just texts/strings.

Is it possible to have this type of “two-leveled” header? Or some way to specify a single row is “special” in the way that it is not text/string, but a dropdown followed by a text followed by a dropdown?

Thanks in advance!

#2

Hi @curtisxuan

welcome on our forum :slight_smile:

I can see two ways to get everything working as you desired to pick the best way I would need to know, if

  • you plan to support sorting/ filtering/ moving columns
  • as I assume Input 1 is an input, meaning User can change its value. Please confirm
  • are Additional Information and Output column labels changed anyhow (for example - when data change or any given header changes`)
#3

Thanks for the quick response @aleksandra_budnik,

  • I don’t plan to support any of sorting/filtering/moving columns
  • The top row (Input 1, Additional Info, and Output) values will never change, so they would be constant header names
  • I do want to support allowing user to add in more input columns, so the table might have more than one input columns, but always one Additional Info and Output column). When user adds a new column, it’ll just add a column with Input 2.
#4

Hi @curtisxuan

The easiest approach I see would be to meet the first line of headers as actual colHeaders and then style the first row of data to look like your 2nd level of headers. Then it will be easier to add the ability to change the content of those cells. Here’s what I came up with https://jsfiddle.net/hyxbptc0/1/

#5

Hi @aleksandra_budnik,

It seems like the implementation provided is working for me as well. However, I noticed that for the sample you provided, if I start input a value that is not part of the dropdown list, the cell would become red.

51%20PM

However, in my version, it seems like I don’t get this feature. I didn’t seem to find the code that deals with this in the sample as well. Could the reason be different version of handsontable?

34%20PM

#6

Hi @curtisxuan

The feature that you are missing in your code is cell validation. You have to set the cell to desired type to get the validator working. In this case you need to set cell type to dropdown as you can see in the example in line 38:

https://jsfiddle.net/aszymanski/8Lurs10b/7/

Please, try this solution and if it will still not work you can share your code example so we can examine what’s wrong.

#7

Hi @adrian.szymanski

I did make sure to set the cell type to dropdown. From the example shown, I think you could see that for my first row, where I put the “Wrong” values, the dropdown of [‘a’, ‘b’, ‘c’] values are shown.

Here is my code (very similar to the implementation @aleksandra_budnik provided):

cells(row, col) {
      const cp = {};
      if (row === 0) {
        set(cp, 'className', 'imitateHeader');
        if (col < numInputAttributes) {
          set(cp, 'type', 'dropdown');
          set(cp, 'source', ['a', 'b', 'c']);
          set(cp, 'renderer', inputRenderer);
        } else if (col === numInputAttributes) {
          set(cp, 'renderer', notesRenderer);
        } else if (col === numInputAttributes + 1) {
          set(cp, 'type', 'dropdown');
          set(cp, 'source', ['1', '2', '3']);
          set(cp, 'renderer', channelRenderer);
        }
      }
      return cp;
    },

Note: I am using set from lodash here. numInputAttributes is the number of input columns.

#8

Hi @curtisxuan

Did the problem also occur when you provide an array instead of set from lodash? It looks like it’s the only difference between your code and our example so that’s probably the place where the problem lies.

#10

hi @adrian.szymanski,

I tried to change my code to

cp.source = ['1,', '2', '3'];

but still not getting the red validation error when the cell has other values.

#11

Hi @curtisxuan

There is obviously something missing. But I am not sure if we will be able to specify the cause of the issue without seeing your implementation and ability to debug it. Would you please send us a demo where the issue is replicable?

#12

Hi @aleksandra_budnik,

If it’s not something obvious, I think I can live without it for now. Thanks for helping me resolve the original issue! Feel free to close this thread.

#13

Thank you for your prompt reply. I still think that we would be able to solve that case so feel free to ping me anytime to sort this one out.

#14