Wrap the data of the table component


How can I wrap data inside a column in the Table component using CSS?

With Ctrl + Shift + C, you need to find the button and the span of the long text:

Double-click on the button’s classes and copy.

Go to settings, appearence, custom css, add a dot “.”, paste and replace spaces by dots “.”:


Add white-space: break-spaces;

Thanks!

1 Like

Anytime!


Is there anyway that the type tags i could wrap?

Same thing to find the element. But select the parent div where all the tag divs are. Then use these CSS properties:

display:flex;
flex-wrap: wrap;
1 Like

You seem to be having random parts of the class name in there. Those can change time to time, and are not guaranteed to be the same on different devices.

It should be something like:

div[class*="new-table___StyledButton"] {
white-space: break-spaces;
}

Yeah but it will affect all the columns…

@Dharmil Do you want it to wrap for only a specific column?

I would find it weird if it wraps only for one and not all the columns.

It is better to involve the parent first, namely the selector td:nth-child(n) for a specific column order or just td to select all columns.

1 Like

Yes, it would be okay to be wraped for all the columns

Then I think this would work.

div[class*="new-table___StyledButton"] {
white-space: break-spaces;
}

Thanks! it works

1 Like

Anytime!

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.