I have installed sticky header module in my angular application and I want to obtain a sticky-responsive thead.
Initial
<!--"table" = responsive boostrap class-->
<table class="table">
<thead>
<tr>
<th>...</th>
<th>...</th>
</tr>
</thead>
<tbody>
<tr>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>
After sticky header executes the table width is fixed:
<thead>
<tr>
<th style="width:173px">...</th>
<th style="width:173px">...</th>
</tr>
</thead>
I tried to remove the style attribute from the script, but this is not helpful. I have also seen that angular-scrollable-table directive is responsive.
var headersAreFixed = $q.defer();
function fixHeaderWidths() {
if (!$element.find("thead th .th-inner").length) {
$element.find("thead th").wrapInner('<div class="th-inner"></div>');
}
if($element.find("thead th .th-inner:not(:has(.box))").length) {
$element.find("thead th .th-inner:not(:has(.box))").wrapInner('<div class="box"></div>');
}
$element.find("table th .th-inner:visible").each(function (index, el) {
el = angular.element(el);
var width = el.parent().width(),
lastCol = $element.find("table th:visible:last"),
headerWidth = width;
if (lastCol.css("text-align") !== "center") {
var hasScrollbar = $element.find(".scrollArea").height() < $element.find("table").height();
if (lastCol[0] == el.parent()[0] && hasScrollbar) {
headerWidth += $element.find(".scrollArea").width() - $element.find("tbody tr").width();
headerWidth = Math.max(headerWidth, width);
}
}
var minWidth = _getScale(el.parent().css('min-width')),
title = el.parent().attr("title");
headerWidth = Math.max(minWidth, headerWidth);
el.css("width", headerWidth);
if (!title) {
// ordinary column(not sortableHeader) has box child div element that contained title string.
title = el.find(".title .ng-scope").html() || el.find(".box").html();
}
//el.attr("title", title.trim());
});
headersAreFixed.resolve();
}
I overrode the th width property with a css class in my main stylesheet:
<table class="table-fix">
<thead>
<tr>
<th class="table-header-fix2">...</th>
<th class="table-header-fix2">...</th>
</tr>
</thead>
.table-header-fix2{
width:12.50% !important; // 12.50 = fullScreenWidth / nr_Columns
}
I will update this answer if I manage to translate the code above into the js module
Update
If you have different table head structures in your app (for example 2 tables with 2 th and other 5 tables with 10 th) you might want to set the proper th width percentage for each table by doing a change in the fsm-sticky-header.js function setColumnHeaderSizes():
var thNumber = 0;
function setColumnHeaderSizes() {
if (clonedHeader.is('tr') || clonedHeader.is('thead')) {
var clonedColumns = clonedHeader.find('th');
thNumber = 100 / ($(".table-fix").find("tr:first th").length;
header.find('th').each(function (index, column) {
var clonedColumn = $(clonedColumns[index]);
clonedColumn.css( 'width', thNumber + '%');
});
}
};