h2oai/wave

Min and Max column width not behaving as expected

Open

#1622 opened on Sep 14, 2022

View on GitHub
 (14 comments) (0 reactions) (0 assignees)Python (3,677 stars) (279 forks)batch import
buggood first issueui

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
@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