AnalyticalTable: How to Automatically Size Columns to Fit Cell Control?

[albert-li-fioneer]

I am working on creating an AnalyticalTable with editable controls of different kinds in the cells. I want the width of the columns to be set so that they fit the control placed in the cell so I set the scaleWidthMode property of the table to "Grow".

According to the description here this should resize each column to fit the cell contents. However, the columns are not being sized to fit the controls, and parts of them are being cut off:

Is there something I am missing? Any advice on how I could get the desired behaviour is appreciated.

[Lukas742]

Hi @albert-li-fioneer

the Grow and Smart mode only work for cells with plain text as content. I see that our documentation is currently not clear enough about this, so I created a PR to describe it better. Cells with content other than text are ignored, that's why in your case only the header text was taken into account and therefore "PCD" is, for example, much more narrow than "EXPIRY_DATE".
When you're using components as content it's in most cases recommended to set a width or maybe even a minWidth.

[albert-li-fioneer]

Thanks for the response! Is there a way of programmatically obtaining the width of the component in the cell so I can set the column width based on it?

[Lukas742]

I wouldn't recommend that. For measuring (e.g. with offsetWidth) you need to mount your elements first and then adjust the value inside the table. So you will either have to mount them somewhere else (hidden) and only after they mounted and you received the width, mount the table including the custom components, or measure them while inside the table and update the width in runtime, which needs rerendering for each component.

It get's even worse when you want to dynamically change the content, then you will probably need to register a observer and update the column width on every resize change.

Both approaches will have a negative impact on performance and maybe even UX.