Wrap the data of the table component

[Dharmil]

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

[MaximeBaker]

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;

[Dharmil]

@MaximeBaker

white-space: break-spaces;

Thanks!

[MaximeBaker]

Anytime!

[Dharmil]

Is there anyway that the type tags i could wrap?

[MaximeBaker]

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;

[ThinhDinh]

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;
}

[MaximeBaker]

Yeah but it will affect all the columns…

[ThinhDinh]

@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.

[Himaladin]

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.

[Dharmil]

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

[ThinhDinh]

Then I think this would work.

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

[Dharmil]

@MaximeBaker

display:flex;
flex-wrap: wrap;

Thanks! it works

[MaximeBaker]

Anytime!