How to custom header

[SEONG-GI-IN]

I want to insert a plus button image into the tui grid header. What should I do?

let grid = {};

grid.readData = () => {
let params = {
startDt: $('#startDt').val(),
endDt: $('#endDt').val(),
empName: $('#empName').val(),
empSeq: $('#loginVo [name=empSeq]').val(),
auth: $('#auth').val(),
};
CommonUtil.postAjax('/comm/getComDivCdList', params).done(function(result) {
grid.resetData(result.data);
});
}

grid.gridInit = () => {
const Grid = tui.Grid;
Grid.applyTheme('clean');
const gridInstance = new Grid({
el: document.getElementById('grid'),
columns: [
{
header: ' ',
name: 'plusBtn',
width: 30,
align: 'center',
headerRenderer: {
type: CustomHeaderRenderer,
},
},
{
header: '시스템코드',
name: 'expend_date',
width: 90,
},
{
header: '공통코드',
name: 'mgt_name',
minWidth: 90,
},
{
header: '공통코드명',
name: 'res_note',
minWidth: 80,
},
{
header: '설명',
name: 'cause_date',
width: 120,
},
{
header: '순서',
name: 'doc_no',
width: 80,
},
],
columnOptions: {
resizable: true,
},
header: { height: 30, align: 'left' },
bodyHeight: 550,
rowHeight: 'auto',
});

return gridInstance;

};

// Custom Header Renderer Class
class CustomHeaderRenderer {
constructor(props) {
const button = document.createElement('button');
button.innerHTML = '';
button.style.border = 'none';
button.style.background = 'none';
button.onclick = () => {
alert('헤더 버튼 클릭됨!');
};
this.el = button;
}

getElement() {
	return this.el;
}

}