Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
1 contributor

Users who have contributed to this file

54 lines (43 sloc) 1.67 KB

Complex Columns πŸ”—

The TOAST UI Grid allows you to group columns under a parent column header. Using the header.complexColumns option, you can build a tree-like structure, where one or more columns can be grouped together by a parent header. The parent header can also be a child of another parent header.

The header.complexColumns option is an array, in which each element specifies a parent column. Similar to normal columns, the parent column has the name and the header properties. But you can specify child columns with the childNames property.

Let's see the example below.

import Grid from 'tui-grid';

const grid = new Grid({
  el: document.getElementById('grid'),
  columns: [
    {
      header: 'col1',
      name: 'col1'
    },
    {
      header: 'col2',
      name: 'col2'
    },
    {
      header: 'col3',
      name: 'col3'    
    }
  ],
  header: {
    complexColumns: [
      {
        header: 'col1 + col2',
        name: 'parent1',
        childNames: ['col1', 'col2']            
      },
      {
        header: 'col1 + col2 + col3',
        name: 'parent2',
        childNames: ['parent1', 'col3']
      }
    ]
  }
});

Now, the parent1 column is the parent of the col1 and col2. And you can see that the parent1 column is also a child of another column parent2, which contains col3 also.

The result of the sample code looks like this:

The result of the sample code

Example

You can see the example that is using more complex column headers here.

You can’t perform that action at this time.