How to Control Dynamic Table Row Height

[YY1]

Hi,
I have two Dynamic tables from left to right. The heights of them are different becuase of User UI Kit (maybe). Could anyone help figure out how to make their heights the same for the 2 tables? Thanks
YY1

[mpaisley]

Hey @YY1

Apologies for the delay in looking into this.

Can you tell me more about the issue? Are you trying to make the Row heights match or the whole table height match?

At this time, i think the only way to control the size of a table would be using the rowsPerPage element - but I don’t’ think this is what you mean.

Would it be possible to share a screen shot with the data blurred so I can understand exactly what you’re after?

Thanks!
Melissa

[YY1]

Hi @mpaisley
Thanks for your reply. I just want to make the row height of the 2 tables the same as shown below:

Thanks，
YY1

[sunnyape]

Hello @YY1

From what I can see, the row heights of both tables are already the same.

The baselines of the text in each row aligns perfectly with each other and they both have identical row heights (which are the same as the difference between the text baselines) and the rows in both align perfectly too:

[mpaisley]

Hey @YY1

You can manage the height with a box component if you like.
You’ll need to experiment to work out the height that will fit your data.

Here’s an (exaggerated) example:
In this example I’ve only used the <box> on the cats side:

In this example I’m using the <box> on both sides:

Here’s how i implemented the <box> in the rows:

const tableCellStyles = xcss({
  height: "100px",
});

...

const rows1 = cats.map((cat, index) => ({
  key: `row-${index}-${cat.name}`,
  cells: [
    {
      content: <Box xcss={tableCellStyles}>{cat.name}</Box>,
    },
    {
      content: <Box xcss={tableCellStyles}>{cat.breed}</Box>,
    },
    {
      content: <Box xcss={tableCellStyles}>{cat.age}</Box>,
    },
  ],
}));

I hope this helps! If it’s solved the issue for you, please mark this response as a solution.

Cheers!
Mel

[YY1]

Yes, I have spent a lot of time to adjust the row height and got this version.
Previously, because the team or member icon/images are not the same size, resulting in the effect of incongruity.