How do you make a Grid header?

[OlottSoft]

How do I make the Grid header look like a picture?

   

[paramvir]

These are grouped headers which are created by nesting colModel.

Example: https://paramquery.com/pro/demos/showhide_groups

[OlottSoft]

I can't quite understand the attached example.

The headers of the example are 1 at the top and N at the bottom.

What I'm trying to do is in the form of N top and one bottom.

Please give me an easy sample code.

Thank you for your answer.

I'm not good at English, so I'm using the power of the translator.

I hope you understand.

[paramvir]

Oh ok, sorry about that.

Inverted column grouping  in the form of N top and one bottom is not feasible with standard headers.

However you can take help of cell merging and use body cells as header cells to create that kind of layout.

Code: [Select]

    showHeader: false,
    freezeRows: 2,
    mergeCells: [
      //r1 is shorthand for rowIndx, c1 for colIndx, rc for rowCount or rowspan, cc for columnCount or colspan.
      {
        r1: 0,
        c1: 0,
        rc: 2,
        cc: 1
      },
      {
        r1: 1,
        c1: 1,
        rc: 1,
        cc: 4
      },
      {
        r1: 1,
        c1: 5,
        rc: 1,
        cc: 5
      }
    ],

Please check this https://jsfiddle.net/9g6342t8/

[OlottSoft]

Oh, that's right. That's what I wanted to know.
I have one more question.
How do I organize the body area in the same format as the header?

So you just have to define it like a standard header and connect the data, and now how do you make the data connection?

I love your answers to the questions that I don't
Thank you very much.

[paramvir]

The previous way is not a standard way to create header but a workaround to imitate the merge cell layout only as shared by you in the screenshot manually in body of grid.

Note: the standard header features like column resizing, sorting, filtering and other header stuff don't work along with this workaround because the actual header is hidden with showHeader: false