Tabs switching with multiple tables on each tab fails

[PrzemyslawKlys]

Hi @opustecnica,

I think we didn't fix it - your query selector only finds first value and uses that, but it doesn't work for all data tables that are visible, so it fails on all other tables.

PSWriteHTML/Resources/JS/tabbisAdditional.js

Lines 13 to 20 in cf40b03

	try {
	var table = document.getElementById(tab.id + "-Content").querySelector('table[id^="DT-"]');
	if (table) {
	$("#" + table.id).DataTable().columns.adjust().responsive.recalc();
	}
	} catch (e) {
	console.log('No datatables available.');
	}

It's easy to reproduce:

PSWriteHTML/Examples/Example-DashimoStyle/Run-EasyDashboard.ps1

Lines 1 to 36 in dd63ea4

	Import-Module .\PSWriteHTML.psd1 -Force
	$Process = Get-Process | Select-Object -First 30
	$Process1 = Get-Process | Select-Object -First 5
	$Process2 = Get-Process | Select-Object -First 10
	$Process3 = Get-Process | Select-Object -First 10
	Dashboard -Name 'Dashimo Test' -FilePath $PSScriptRoot\Output\DashboardEasy.html -Show {
	Tab -Name 'First tab' {
	Section -Name 'Test' {
	Table -DataTable $Process -Filtering
	}
	Section -Name 'Test2' -Collapsable -Collapsed {
	Panel {
	Table -DataTable $Process1
	}
	Panel {
	Table -DataTable $Process1
	}
	}
	Section -Name 'Test3' {
	Table -DataTable $Process -DefaultSortColumn 'Id'
	}
	}
	Tab -Name 'second tab' {
	Panel {
	Table -DataTable $Process2
	}
	Panel {
	Table -DataTable $Process2
	}
	Panel {
	Table -DataTable $Process3 -DefaultSortIndex 4 -ScrollCollapse
	}
	}
	} -Online

[PrzemyslawKlys]

I think I fixed it.

PSWriteHTML/Resources/JS/tabbisAdditional.js

Lines 1 to 33 in d87dbd1

	var tabs = tabbis.init({
	tabGroup: "[data-tabs]",
	paneGroup: "[data-panes]",
	tabActive: "active",
	paneActive: "active",
	callback: function (tab, pane) {
	// console.log("TAB id:" + tab.id);
	// console.log(pane.id);
	// console.log(tableid);
	// this makes sure to refresh tables on tab change to make sure they have buttons and everything
	// it's a bit heavy as it touches all tables, may require some improvements in future to consider
	// which tab has which table
	function resizeTable(table) {
	try {
	$("#" + table.id).DataTable().columns.adjust().responsive.recalc();
	console.log('Resized table with id ' + table.id);
	} catch{
	console.log('Failed to resize table with ' + table.id);
	}
	}
	try {
	var table = document.getElementById(tab.id + "-Content").querySelectorAll('table[id^="DT-"]');
	table.forEach(resizeTable)
	} catch (e) {
	console.log('No datatables available.');
	}
	}
	});
	// in theory should take care of removing local storage for tabbis
	// some errors occurs if the local storage is not cleaned after a while
	window.addEventListener("unload", tabbis.remove, false);

This should do the trick

[opustecnica]

Just saw this. I have a few work related items that need addressing immediately and I will check on the solution.

[PrzemyslawKlys]

I'm pretty confident I fixed it :-) But do verify ;-)