tui-grid
Version:
TOAST UI Grid : Powerful data grid control supported by TOAST UI
52 lines (42 loc) • 1.83 kB
Markdown
## Using the `header.complexColumns`
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 `title` properties. But you can specify child columns with the `childNames` property.
Let's see the example below.
```javascript
var grid = new tui.Grid({
el: $('#wrapper'),
columns: [
{
title: 'col1',
name: 'col1',
},
{
title: 'col2',
name: 'col2',
},
{
title: 'col3',
name: 'col3'
}
],
header: {
complexColumns: [
{
title: 'col1 + col2',
name: 'parent1',
childNames: ['col1', 'col2']
},
{
title: '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:
## Example Page
You can see the example that is using more complex column headers [here](https://nhnent.github.io/tui.grid/api/tutorial-example03-complex-columns.html).