Tabulator on Bootstrap tab
As i was going on my project WorkNxt, i found a new interesting problem.
i mean this one of the main reasons i started this anyway, is to find and solve interesting problems!
i am using Tabulator and Bootstrap along with other JS and CSS libraries on this project, and what i wanted was very simple, to have a bootstrap tab navigator with two tabs each with a Tabulator table on it.
Simple?, not really, see what i found out is for some reason Tabulator might have trouble rendering in a Div with css display set to none, which is exactly the not shown yet tab(s) would be.
How did i resolve this, and i would dare to say it's a very good solution, is the little JS script below
function redrawTable() {
tabulatorTable.redraw();
$('#detials-tab a[href="#TargetTab"]').unbind('shown.bs.tab', redrawTable);
}
$('#detials-tab a[href="#TargetTab"]').on('shown.bs.tab', redrawTable);