# Perspective Table: Any way to get the new column widths after user makes adjustments?

**URL:** <https://forum.inductiveautomation.com/t/perspective-table-any-way-to-get-the-new-column-widths-after-user-makes-adjustments/79671>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [September 26, 2023, 6:48pm UTC](https://forum.inductiveautomation.com/t/perspective-table-any-way-to-get-the-new-column-widths-after-user-makes-adjustments/79671 "2023-09-26T18:48:09Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [September 27, 2023, 7:30am UTC](https://forum.inductiveautomation.com/t/perspective-table-any-way-to-get-the-new-column-widths-after-user-makes-adjustments/79671/2 "2023-09-27T07:30:02Z")

</div>

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](https://forum.inductiveautomation.com/uploads/short-url/5Z0ACMSHJGx7jwvMUeFkccpatNt.zip) (24.2 KB)

> **markdown code**
>
> ```auto
> #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
> 	
> 
> ```

---

_[View the full topic](https://forum.inductiveautomation.com/t/perspective-table-any-way-to-get-the-new-column-widths-after-user-makes-adjustments/79671)._