I want to add customized content to a ojTable Header.
I am using the columns.headerRenderer attributte to achieve it (if you have another suggestion, you can let me know), but I can not visualize all the content because the header height is small. Let me show you a example:
<table id="table" summary="Summary" aria-label="Label"
data-bind="ojComponent: {component: 'ojTable',
data: datasource,
rootAttributes: {'style':'height: 200px'},
columns: columns}">
</table>
The variable columns is binded to columns:
var columns = [];
jsonData.forEach(function(column) {
columns.push({
headerText: column.name,
field: column.name,
headerRenderer : function () {
return "<h1>"+column.name+"</h1><p>1</p><p>2</p>";
}
});
});
I tried adding "columns.headerStyle: 'height: 300px '", but it did not work, the header content is still being overlapped by the table content.