column widths with getAutoSizedColumnWidth do not update after the data is loaded

[kglickman]

Package

Carbon for IBM Products

Description

We dynamically load our data, so the grid is initially empty. This means that the autoSizedColumnWidth is always initially based on the column header width. However, after the data is loaded, I expect it to update the column widths based on the data. This is not happening.

I thought maybe if I started with a Skeleton, by using isFetching: true, maybe it would recalculate when isFetching became false. That did not seem to help. However, I may have done something else wrong because I couldn't get the Skeleton to render at all.

Component(s) impacted

Datagrid

Browser

Chrome

@carbon/ibm-products (previously @carbon/ibm-cloud-cognitive) version

2.49.0

Suggested Severity

Severity 2 = Aspects of design is broken, and impedes users in a significant way, but there is a way to complete their tasks. Affects major functionality, has a workaround.

Product/offering

OpenPages

CodeSandbox or Stackblitz example

https://stackblitz.com/edit/github-fenvlt-rtdpqf

Steps to reproduce the issue (if applicable)

No response

Release date (if applicable)

Dev complete around 10/30

Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I checked the current issues for duplicate issues

[devadula-nandan]

hey @kglickman, could you check with this example, I have made few modifications to your code, and it works. https://codesandbox.io/p/devbox/silly-aryabhata-nxnspf you can simplify it further as per your use case.

Note: Since the width of the column can be dynamic based on the data, we need to create a dependency on the data or the appropriate width in the memoized column definition so that the column width updates according to the data.

[kglickman]

Oh, yes, I was being a little stupid. We use class components and mobx so I'm not used to doing some of those things. We will try to translate that same methodology.

[kglickman]

Following your example does work but I do think that the functionality should be in your code, not ours, as part of the auto-sized column feature. Pretty much everyone is going to load their grid dynamically like this.

[devadula-nandan]

Hi @kglickman,

In a typical case, the data might be updated outside of useDatagrid, and the column width—whether dynamic or static—is defined in the column definition before being passed into useDatagrid. That's why we provide getAutoSizedColumnWidth as a utility, intended to be used at the implementation level.

For instance, in this example, the widths for "Age" and "Visits" were set to 50 and 60, while the default width is 150. In our case, the getAutoSizedColumnWidth function dynamically calculates the width before useDatagrid. Therefore, this setup needs to happen at the implementer's level.

The upcoming example-based approach for datagrid will provide much better control over this, allowing you to make customizations specific to your requirements.