Way to counteract condensed table view?

[Alex-Wenner-FHR]

I tried adjusting the size of the table but that doesn't seem to fix an issue like this when user filters and we see a singular record. Gets very small and hard to see! Any way to fix this currently?

[mturoci]

Hi @AlexWennerDT, could you please add a minimal repro? Our example seems fine:

[mturoci]

Thanks for the repro @AlexWennerDT! Very helpful. Can you try setting height of the table like this?

ui.table(
    name='table',
    downloadable=True,
    resettable=True,
    columns=[ui.table_column(name=c, label=c, filterable=True, searchable=True) for c in df.columns],
    rows=[ui.table_row(str(i), [str(row[name]) for name in df.columns]) for i, row in df.iterrows()],
    groupable=True,
    height='580px', # Set fixed table height.
    values=['']
)

[Alex-Wenner-FHR]

Thanks for the tip @mturoci, that solved the issue!

[azim-b]

@mturoci I'm seeing a similar problem. Is it possible to set the table height to be dynamic so it changes with the browser size, and stops just before the page length is complete so that the footer card is visible without scrolling?

Here's what the table looks like:

And these are the code snippets for reference:

[Alex-Wenner-FHR]

@azim-b I actually ran into the same issue and ended up using vh/vw … not sure if this is best practice but it seemed to work for me!

[mturoci]

@azim-b @AlexWennerDT see #1074 for general solution.

However, ui.table is a bit special and in order to achieve a truly pixel perfect solution, you would need to use CSS calc function.

The solution for now would be to specify table height like height='calc(100vh - headerHeightInPx - navigateheightInPx - footerHeightInPx)', where 100vh` means 100% of viewport height and rest of the values are obvious.

We might make this work out of the box one day (using the technique linked above), but need to solve some tech problems first - especially plots.