Altinn / Altinn/app-frontend-react

Grid column options width is not working as intended in v3

Open
#1,888 0 comments 0 reactions 0 assignees View on GitHub
area/table kind/bug
Dominant language
TypeScript
Stars
21
Forks
33
Avg merge
6d 23h
Merged PRs (30d)
3

Description

### Description of the bug

It looks like we have a bug in v3 for configuring column widths for the `Grid` component. The width is not set in cases where the header of that column is empty. If there is text in the header, the width is set, but it has no effect for the first column.

Relevant slack discussion: https://altinn.slack.com/archives/C02EJ9HKQA3/p1709196534224289

### Steps To Reproduce

1. in a v3 app, add a grid component
2. create a header and rows, for four columns
3. make the first column only contain text elements, some text should be long in order to illustrate that the configured width is not applied, and the rest of the table cells simple input components
4. configure each `columnOptions` for each header-cell like this
```
"columnOptions": {
"width": "25%
}
```
5. See that the width of the columns are not equal. (Note: all of the columns should not be literally equal, the first and last columns have added some extra width as padding. Subtracting this padding should make all the widths equal.)

### Additional Information

_No response_

Contributor guide

Open the contributing guide

Research direction

Start at the Grid component and search for handling of columnOptions.width, then reproduce the issue in a v3 app using four columns and an empty first-column header. Done means configured widths are applied consistently, including when a header is empty and for the first column, while accounting for edge padding.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.