Add rowspan to nested headers

[deeta]

trafficstars

Many of the developers have the need to add some row and colspans... Here is an example

http://jsfiddle.net/Ckw9b/157/

@warpech - please tell me if there is a better way of doing this. A bit messy to remove additional cells but works right after cleaning up....

[warpech]

I would love to build it into Handontable once I figure out a clean and flexible way to do it. Question is - would you rather use it in column headers or any cells?

[deeta]

I need it in the column header for now, but I use the cells to make a header and not the colheaders. This gives me much more flexibility with what I am trying to acheive. And I do have some usecases where I need it in the cells.

[tolian49]

I see the issue is closed, but the example doesn't seem to create the correct columns in that it's missing data. Forcing it by putting in min/max column counts creates extra columns on the headers. Am I viewing something incorrectly?

Thanks, Nick

[warpech]

The example above was created using 0.7.5, which does not work exactly the same way as 0.8.0

That's the cost of hacking around officially unsupported features :) I know that @deeta deeta put a lot of effort into his code and maybe he also has a version that works with 0.8.0.

Grouped headers will not be officially supported any time soon. If somebody has an idea how to make it as a plugin, I can help to put some integration hooks.

[newpost]

i need header rowpan @warpech help me

[AMBudnik]

hi @newpost this option is unavailable at the moment. You can merge rows inside the grid but the following option for headers is not yet developed.

[note to myself - ZD36629]

[newpost]

@AMBudnik , Is it difficult that rowspan inside header? why not

[AMBudnik]

@newpost Adding a rowspan maybe it not so hard to do but currently Handsontable has so many option that can interact with rowspan (sorting, filtering, selection) so we did not tried to add this feature yet.

[escobar5]

@AMBudnik so is there any updates about this?, I know this post is related, but this was posted when NestedHeaders plugin didn't exist. Now colspan is a possibility with that plugin, is there any chances rowpan will be supported?

[AMBudnik]

Surely it will @escobar5 but it is a little bit lower on our to-do list. Here's a list of issues/features that should appear in June's version https://github.com/handsontable/handsontable/milestone/100

[cevc96]

Hello, I wanna know if you've implemented it, it would help me a lot. Thanks

[AMBudnik]

Hi @cevc96 the nestedHeaders support only colspan - https://docs.handsontable.com/pro/5.0.0/demo-nested-headers.html

[realeve]

@AMBudnik is rowspan supported at 2019?

[AMBudnik]

Hey, @realeve nestedHeaders in v 7.2.2 (latest) still is only set to support colspan. However, thank you for mentioning this subject. I'm gathering popular feature requests and would like to mention those on our planning meeting.

[realeve]

@AMBudnik in Ant Design, it's supported very well: https://ant.design/components/table/#components-table-demo-grouping-columns

and Antd's nested header configuration is also more intuitive, for example,in handsontable,we use

nestedHeaders: [
  ['A', {label: 'B', colspan: 8}, 'C'],
  ['D', {label: 'E', colspan: 4}, {label: 'F', colspan: 4}, 'G'],
  ['H', {label: 'I', colspan: 2}, {label: 'J', colspan: 2}, {label: 'K', colspan: 2}, {label: 'L', colspan: 2}, 'M'],
  ['N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W']
]

to render the demo but in antd we don't need calculate rowspan or colspan, we just need to focus on the logic.the config may be like this:

nestedHeaders: [
    "A",
    {
      label: "B",
      children: [
        {
          label: "E",
          chldren: [
            {
              label: "I",
              children: ["O", "P"]
            },
            {
              label: "J",
              children: ["Q", "R"]
            }
          ]
        },
        {
          label: "F",
          chldren: [
            {
              label: "K",
              children: ["S", "T"]
            },
            {
              label: "L",
              children: ["U", "R"]
            }
          ]
        }
      ]
    },
    "C"
  ]

[AMBudnik]

Thank you for sharing the example, @realeve
We might change the settings once we'd be able to introduce colspan. It is good to know have others are doing this.

[deepthan]

I have implemented rowspan, which can be set in the same way as' nestedHeaders' and 'colspan', if you need it, please contact me at Github. for example

nestedHeaders:  [
  [ { label: 'c', rowspan: 3}, { label: 'B', colspan: 9 }],
  ['', { label: 'E', colspan: 4 }, { label: 'F', colspan: 4 },  { label: 'G', rowspan: 3}],
  ['', { label: 'I', colspan: 2 }, { label: 'J', colspan: 2,  rowspan: 2 }, { label: 'K', colspan: 2 }, { label: 'L', colspan: 2 }, ''],
  ['N', { label: '2', colspan: 1 }, 'P', '', '', 'S', 'T', 'U', '22', '']
];

To render

[AMBudnik]

Well done @deepthan If you would like to see your implementation added to the official version of Handsontable I highly encourage you to create a pull request.

[GabrielHangor]

@deepthan hey, do you mind sharing this knowledge?

Thank you. I am not sure how i can message you via GitHub.

[zgurea1]

hello, is there a work around to have rowspan in table headers?

[adrianszymanski89]

Hi @zgurea1

We don't have any workaround for this feature. Only the solution that @deepthan created, but he hasn't shared it here yet.