How to set property height for ui.table rows?

[tz301]

Question

I want to set propery height for rows using ui.table. I try dense but it seems too narrow for me. I use '.custom-table1 tr { height: 100px !important }' to adjust height successfully, but when I change it to a small height value, it doesn't work.

Code below.

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': 'Carol'},
]
with ui.row().classes('w-full'):
    ui.table(columns=columns, rows=rows, row_key='name')

    ui.table(columns=columns, rows=rows, row_key='name').props('dense')

    ui.add_css(
        '.custom-table1 tr { height: 100px !important }'
    )
    ui.table(columns=columns, rows=rows, row_key='name').classes('custom-table1')

    ui.add_css(
        '.custom-table2 tr { height: 12px !important }'
    )
    ui.table(columns=columns, rows=rows, row_key='name').classes('custom-table2')

[falkoschindler]

Hi @tz301,

I think you need to reduce the vertical padding so that the rows can shrink further:

ui.add_css('''
    .custom-table thead tr { height: 36px; }
    .custom-table tbody td { height: 36px; padding: 0 16px; }
''')
ui.table(rows=[{'name': 'Alice'}, {'name': 'Bob'}, {'name': 'Carol'}]).classes('custom-table')

[tz301]

That works!