How to set custom widths of columns in ui.table, and how to wrap text for longer strings in ui.table cells?

[msiwik-epruf]

Question

So I have custom table:

from nicegui import ui

denerys_name = """<img width="552" alt="Zrzut ekranu 2024-04-18 o 10 38 28" src="https://github.com/zauberzeug/nicegui/assets/110815764/8ab477b2-1bc7-4089-a19f-b52830703e34">'"""

columns = [
    {'name': 'name', 'label': 'Name', 'field': 'name', 'required': True, 'align': 'left'},
    {'name': 'age', 'label': 'Age', 'field': 'age', 'sortable': True},
]
rows = [
    {'name': 'Alice', 'age': 18},
    {'name': 'Bob', 'age': 21},
    {'name': denerys_name},
]
ui.table(columns=columns, rows=rows, row_key='name')

ui.run()

Excpected result would look like attached screenshot. I tried with combining '\n' and <br> </br> tags, but nothing worked as expected.

[falkoschindler]

Hi @msiwik-epruf,

You can add custom CSS to the column definition to define the text wrap behavior:

ui.table(
    columns=[
        {'name': 'name', 'label': 'Name', 'field': 'name', 'align': 'left', 'style': 'text-wrap: wrap'},
        {'name': 'age', 'label': 'Age', 'field': 'age'},
    ],
    rows=[
        {'name': 'Alice', 'age': 18},
        {'name': 'Bob', 'age': 21},
        {'name': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec purus nec nunc ultricies'},
    ],
).classes('w-80')