HeaderGroups with rowspan

[aspirisen]

Hello, i use headers with nested columns, and looks like react-table does not calculate appropriate rowSpan for the header cells.

None-nested columns do not have rowspan to look like single-level column header.

Also react-table inserts cells, so i can't manually calculate rowSpan as there are real cells.
However i would expect react-table to automatically calculate correct rowSpan as looks like there is enough information about header group size

I have columns like that, as you can see i have nested columns

[
    {
        "id": "1",
        "Header": "One"
    },
    {
        "id": "2",
        "Header": "Two",
        "columns": [
            {
                "id": "3",
                "Header": "Three"
            },
            {
                "id": "4",
                "Header": "Four"
            }
        ]
    },
    {
        "id": "5",
        "Header": "Five"
    },
    {
        "id": "6",
        "Header": "Second"
    },
    {
        "id": "7",
        "Header": "Seven"
    },
    {
        "id": "8",
        "Header": "Eight"
    },
    {
        "id": "9",
        "Header": "Nine"
    },
    {
        "id": "10",
        "Header": "Ten",
        "columns": [
            {
                "id": "11",
                "Header": "Eleven"
            },
            {
                "id": "12",
                "Header": "Twelve"
            }
        ]
    }
]

There is similar discussion, but not about automatic header group rowspan calculation #2233

[Darcrandex]

I have the same question, there is a demo

[Roman86]

Just solved this problem and packaged it into a tiny npm library. It's really simple to use — you can rowspan both the header and footer, with table and non-table tr/th elements. Check it out!:

npm i tanstack-table-header-rowspan

https://www.npmjs.com/package/tanstack-table-header-rowspan