Grid Header
1 line header
<div id="grid" class="grid"></div>
<script>
const grid = new Grid({
el: document.getElementById('grid'),
data: [
],
scrollX: false,
scrollY: false,
header : {
height: 44
},
minRowHeight : 44,
rowHeaders: [
{
type: 'checkbox',
header: '<label class="check__label"><input type="checkbox" class="check__input" name="_checked" /><span class="check__style"></span></label>',
width: 44,
renderer: {
type: CheckboxRenderer
},
},
{
header: 'NO',
type: 'rowNum',
width: 49,
},
],
columns: [
{
header: '상태',
name: 'state',
width: 53,
align : 'center',
renderer : {
type : StateRenderer
}
},
{
header: '발령일자',
name: 'date1',
align : 'center',
},
{
header: '부서명',
name: 'department',
align : 'left',
},
{
header: '기본급',
name: 'salary',
align : 'right',
},
{
header: '이름',
name: 'name',
align : 'center',
},
{
header: '직책',
name: 'position1',
align : 'center',
},
{
header: '직위',
name: 'position2',
align : 'center',
},
{
header: '직급',
name: 'position3',
align : 'center',
},
{
header: '입사일',
name: 'date2',
align : 'center',
}
]
});
</script>
2 line header : Header가 두 단 이상일 때
<div id="grid3" class="grid"></div>
<script>
function CustomColumnHeader(props){
const columnInfo = props.columnInfo;
const el = document.createElement('div');
el.className = 'custom';
el.textContent = columnInfo.header;
this.el = el;
}
CustomColumnHeader.prototype.getElement = function() {
return this.el;
}
CustomColumnHeader.prototype.render = function(props) {
this.el.textContent = props.columnInfo.header;
}
const grid3 = new Grid({
el: document.getElementById('grid3'),
data: [
],
scrollX: false,
scrollY: false,
header : {
height: 75,
complexColumns: [
{
header: 'Header',
name: 'mergeColumn1',
childNames: ['salary', 'name','position1'],
renderer: CustomColumnHeader
}
],
columns: [
{
name: 'id',
renderer: CustomColumnHeader
}
]
},
minRowHeight : 44,
rowHeaders: [
{
type: 'checkbox',
header: '<label class="check__label"><input type="checkbox" class="check__input" name="_checked" /><span class="check__style"></span></label>',
width: 44,
renderer: {
type: CheckboxRenderer
},
},
{
header: 'NO',
type: 'rowNum',
width: 49,
},
],
columns: [
{
header: '상태',
name: 'state',
width: 53,
align : 'center',
renderer : {
type : StateRenderer
}
},
{
header: '발령일자',
name: 'date1',
align : 'center',
},
{
header: '부서명',
name: 'department',
align : 'left',
},
{
header: '기본급',
name: 'salary',
align : 'right',
},
{
header: '이름',
name: 'name',
align : 'center',
},
{
header: '직책',
name: 'position1',
align : 'center',
},
{
header: '직위',
name: 'position2',
align : 'center',
},
{
header: '직급',
name: 'position3',
align : 'center',
},
{
header: '입사일',
name: 'date2',
align : 'center',
}
]
});
</script>
Reference