search

thien-do / moai

A React component library, where buttons look like buttons🗿
https://moai.thien.do
127 stars 26 forks source link

Table expand icon cell takes up too much space #229

Closed clitetailor closed 3 years ago

clitetailor commented 3 years ago

Currently, every columns are taking a proportion of space even with the table's expand icon. The icon cell width should be fixed and does not take up other cell space.

image (2)

lqt93 commented 3 years ago

@thien-do Could you brief solution for this issue?

thien-do commented 3 years ago

Ah actually I think this is an easy issue:

  1. Understand what makes that space (divpx or margin)
  2. Avoid render that space if only 1 item is rendered

This is because the first column of the table is used for 2 things: the expand button and the checkbox/radio for selectable rows. The space above is the space between these 2. It should not happen if there's only one.

I think the ideal solution is to use gap, but may it's not widely supported yet, so we can use the owl selector ( + )

clitetailor commented 3 years ago

This is because the first column of the table is used for 2 things: the expand button and the checkbox/radio for selectable rows. The space above is the space between these 2. It should not happen if there's only one.

@thien-do @lqt93

Nope, the gap does nothing in this case. The problem is the content of the expanded row is so large that it stretches all the table width including the first column.

image

IMO, the easiest solution is to set the width of the first column to 0px or 1px to make it fit to the content size and does not stretch again.

image