The designer doesnt seem to like this very much, but it works on client (in browser atleast).
Tip: write on change, only read on startup (else you get an infinite loop)
Copy the markdown,
Take note of the domId of the table, and the propName on the first line of the code.
You'll want an onchange script on the view.custom.propName.
columnwidth.zip (24.2 KB)
markdown code
#make the propName the key to write too in the view.custom
propName = "cellHeader"
code = """<img style='display:none' src='/favicon.ico' onload=\"
const view = [...window.__client.page.views._data.values()].find(view => view.value.mountPath == this.parentNode.parentNode.parentNode.getAttributeNode('data-component-path').value.split('.')[0]).value;
const callbackTable = (mutationList, observer) => {
document.querySelectorAll('#"""+value+""" .ia_table__head__header__cell').forEach(e => {
const header = e.getAttribute('data-column-id');
const width = e.offsetWidth;
const prop = view.custom.read('"""+propName+"""');
view.custom.write('"""+propName+"""',{...prop,[header]:width});
});
};
const observerTable = new MutationObserver(callbackTable);
const tables = document.querySelectorAll('#"""+value+"""');
tables.forEach(table => observerTable.observe(table, { attributes: false, childList: true, subtree: true }));
document.querySelectorAll('#"""+value+""" .ia_table__head__header__cell').forEach(e => {
const header = e.getAttribute('data-column-id');
const width = e.offsetWidth;
const prop = view.custom.read('"""+propName+"""');
view.custom.write('"""+propName+"""',{...prop,[header]:width});
});
\"></img>""".replace("\n", "").replace("\t", "")
return code