You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
My team has made a custom data table component where in production we have insanely long string fields that
When wrap-cells prop is not applied, the table defaults to horizontal scroll that we don't want in out page container
When wrap-cells prop is applied, our data table gets gets so bloated that we don't like the amount of vertical real estate that the field ends up taking for the whole row as the table ends up becoming most of the table
-- To solve both of these, our custom component sets the width of the column, ends it in "...", then uses the q-tooltip to display a larger portion of the information needed on mouse hover.
What we hate is that with every table on our site having different numbers of columns with different field lengths we have to manually establish the viewer window (ex. "width: max(200px, 20vw)") css property for the max width on that column each time we do the tooltip and abbreviation. We'd love if there was a prop that would automate this process for us that we could in the columns array specify a prop that would be an alternative to wrap cells for the table and would do something similar to what we've mocked up.
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
My team has made a custom data table component where in production we have insanely long string fields that
-- To solve both of these, our custom component sets the width of the column, ends it in "...", then uses the q-tooltip to display a larger portion of the information needed on mouse hover.
What we hate is that with every table on our site having different numbers of columns with different field lengths we have to manually establish the viewer window (ex. "width: max(200px, 20vw)") css property for the max width on that column each time we do the tooltip and abbreviation. We'd love if there was a prop that would automate this process for us that we could in the columns array specify a prop that would be an alternative to wrap cells for the table and would do something similar to what we've mocked up.
Beta Was this translation helpful? Give feedback.
All reactions