search

nuxt / ui

A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.
https://ui.nuxt.com
MIT License
4.03k stars 509 forks source link

UTable select column pushing other columns to right when only few columns selected #2222

Open theunsa opened 1 month ago

theunsa commented 1 month ago

Description

Problem statement When only a few columns are displayed on the UTable, it seems to push the other columns to the right.

table-select-gap

Use case Besides allowing users to pick display columns using a selector, we have use cases where tables are used to display lists of data and sometimes those tables only have 2-3 columns. On high-resolution screens those columns are then weirdly pushed to the right.

What I've tried I've tried adjusting the ui.checkbox.padding, but it is obviously more than padding that is required. It would be great if there was some max-width property for the select-column.

Also considered using a column:class but looking at the code it is clear that Checkbox is not part of the normal column slots, so it would require some other setting.

I'll be happy if a simple workaround exists, so please share if there is a quick solution to constrain this select-column width.

theunsa commented 1 week ago

Still stuck with this ... anyone with a workaround?

Or should I just live with this until nuxt-ui-v3 is stable and hopefully resolves it?