Wrap `tags` in table

💬 App Building
1

image
image1220×513 47 KB

Hi, I have a column type tags, how make my tags wrap according to column width?

3

@engineering-tajir The Tag column type doesn't support wrapping it renders each tag as an inline-flex chip, so they always stay in one line.

To make them wrap based on the column width, switch the column to HTML format and render the tags inside a flex container with flex-wrap: wrap. That allows the tags to automatically move to the next line when the column is narrow.

2 Likes
4

Thanks so much for the input @Vishal1620, you are right that the Tags column does not support wrapping at the moment. I tried out your suggestion and it seems to work well on my end.

@engineering-tajir, is this what you had in mind? I included a GIF and a screenshot below for reference.
chrome-capture-2025-12-10 (5)

Screenshot 2025-12-10 at 12.21.24 AM
Screenshot 2025-12-10 at 12.21.24 AM1632×788 81.8 KB

5

Hey @engineering-tajir happy new year! :partying_face: Just checking in with you, what do you think of the suggestion I shared above? Were you able to try it out on your end?

6

Hey @engineering-tajir

To wrap the column content according to the column width in the table, you need to apply custom CSS

._main_145ea_1 .tag,
._main_145ea_1 span {
  white-space: normal;
  max-width: 100%;
}

You can find the appropriate class names by inspecting the table in the browser. Once you identify the table’s class and the specific class used for the column cells, apply this CSS in your custom styles.
demo (1)

7

Hey @engineering-tajir, how’s it going? Just checking in to see if you still need help. Did my suggestion above help at all?