h2oai / h2oai/wave

Min and Max column width not behaving as expected

Open
#1,622 14 comments 0 reactions 0 assignees View on GitHub
bug good first issue ui
Dominant language
Python
Stars
4.3k
Forks
371
Avg merge
26d 1h
Merged PRs (30d)
1

Description

#### Wave SDK Version, OS
h2o_wave==0.22.0

#### Actual behavior
The goal is to programmatically make columns widths automatically the right size to fit in a table without scrolling. Upon trying to do this we found some interesting and maybe unexpected behaviors:

* The size of `min_width==0` is bigger than expected
* Tables are identical when using `max_width` regardless of if `min_width` is set or not, in that `min_width` seems to be ignored if `max_width` is set

```python
@app('/')
async def serve(q: Q):

table_rows = [
ui.table_row(name='row1', cells=['John', 'Doe', "7042 23rd Ave", "123-456-7890"]),
ui.table_row(name='row2', cells=['John', 'Doe', "7042 23rd Ave", "123-456-7890"]),
ui.table_row(name='row3', cells=['John', 'Doe', "7042 23rd Ave", "123-456-7890"]),
]
column_names = ["name", "surname", "address", "phone"]
columns_to_test = {
"no_width": [ui.table_column(name=x, label=x) for x in column_names],
"min_width_0": [ui.table_column(name=x, label=x, min_width="0px") for x in column_names],
"max_width_100": [ui.table_column(name=x, label=x, max_width="200px") for x in column_names],
"min_width_0_and_max_width_100": [ui.table_column(name=x, label=x, min_width="0px", max_width="200px") for x in column_names]
}

q.page["meta"] = ui.meta_card("", layouts=[ui.layout("xs", width="800px", zones=[ui.zone("default")])])

for k in columns_to_test.keys():
q.page[k] = ui.form_card(box='default', items=[
ui.text_xl(k),
ui.table(name=k, columns=columns_to_test[k], rows=table_rows)
])

await q.page.save()
```

Contributor guide

Open the contributing guide

Research direction

Run the supplied h2o_wave==0.22.0 example and compare the four ui.table_column configurations for min_width and max_width. Trace how ui.table and ui.table_column apply these widths, then define the expected sizing for each case; the issue is done when minimum and maximum widths behave distinctly and the table fits as intended without unexpected scrolling.

Written by the indexing model from the issue text.

Assessment

Tech stack
python
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.