Conditionally hide components

Questions
1

I have a page with lots of functions on. It displays a table. I want to re-use the page quite often but have different columns showing so was going to create different versions of the table on the same page with a conditions to show / hide.

My question is whether this would slow down load times as even though only one table to loading, would it load the data in the other hidden tables

2

If all tables are linked to the same model, I don’t think you will notice any slowing.

3

Creating copies of the same table with different columns in different places based on display logic is a nightmare to update later on as you end up having to do the same work over and over again for each table you create in order to make a single minor tweak to all of your many tables.

You can potentially achieve similar results with a single table by dynamically hiding/showing columns, cutting down on the amount of work needed to make broad modifications to the one table in question.

Here’s a function I wrote to dynamically hide/show table columns (tested in V1):

// skuid.custom.setHidden(f)
// takes an object consisting of table and properties and sets item in the table to display or not display based on properties
// options:
// {
//		table: table component to update (optional, use either this or tableId)
//		tableId: id of table component to update (optional, use either this or table)
//		key: the key to use to match table column, can either use the column's label, or fieldId
//		by: "label" or "fieldId" depending on how you want to select the column; defaults to "label"
//		value: true to hide, false to unhide; defaults to true
//		wrapper: optional wrapper to re-render in order to refresh the display so the changes are visible - NOTE: if making more than 1 change at a time do not use this as it will force several re-renders and can slow/freeze the UI
// }
skuid.custom.setHidden = function (f){
	function getKeyBy(object,by,value) {
	    return Object.keys(object).find(key => object[key][by] === value);
	}
	let table = f.table;
	if(table===undefined){
		table = skuid.component.getById(f.tableId);
	}
	let key = f.key;
	let set = table._personalizationService.getSettings();
	if (!set.columnSettingsByUID) {
		set.columnSettingsByUID = table.element._columnSettingsByUID;
	}
	let value = f.value;
	if(f.value === undefined){
		value = true;
	}
	let by = f.by;
	if(f.by === undefined){
		by = 'label';
	}

	set.columnSettingsByUID[getKeyBy(set.columnSettingsByUID,by,key)].userHidden = value;
	table._personalizationService.updateSettings(set);

	if(f.wrapper !== undefined){
		f.wrapper.render();
	}
}