Skip to main content

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

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


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 => objectckey]yby] === 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.columnSettingsByUIDIgetKeyBy(set.columnSettingsByUID,by,key)].userHidden = value;
table._personalizationService.updateSettings(set);

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

Reply