So I have built a table component where I feed data and I have dropzones for the text, buttons, tags etc
Now when some text is a but longer it seems to shift the row. How do I stop this from happening?
Did you try to use the wrap option on the text element? You can also choose to add “…”.
I also see that every column is 1fr.
I would check out some resources about the css-grid.amd the use of fractions.
I am also checking out the details about this, but I did play around with the column sizes.
What I did in my app is to set some colums that have values of the same length which are also smaller to a fixed number of pixels. For example you can try to set the Id and status column to 100px.
You can also play around with different fr values. Like 0.8fr for Id and Status and and 1.4fr for Party. In this way you can create more space for the column with longer text values.