how to render html/css in table

[rafaelrdealmeida]

First Check

• I added a very descriptive title here.
• I have checked the FAQs for a similar question and didn't find it.
• I used the GitHub search to find a similar question and didn't find it.
• I searched the NiceGUI documentation, with the integrated search.
• I already searched online "How to X in NiceGUI" and didn't find any information.

Example Code

import json
from nicegui import ui

data = {
    "001": {
        "nome": "diarios oficiais",
        "subcategorias": {
            "001/001": {
                "nome": "Diário Oficial - União"
            },
            "001/002": {
                "nome": "Diário Oficial - Estaduais",
                "subcategorias": {
                    "001/002/001": {
                        "nome": "Estado de São Paulo - Executivo"
                    },
                    "001/002/002": {
                        "nome": "Estado de São Paulo - Legislativo"
                    }
                }
            },
            "001/003": {
                "nome": "Diário Oficial - Municipais",
                "subcategorias": {
                    "001/003/001": {
                        "nome": "Franca-SP"
                    }
                }
            },
            "001/004": {
                "nome": "Diário Oficial - Legislativo Federal Brasileiro",
                "subcategorias": {
                    "001/004/001": {
                        "nome": "Câmara Federal"
                    }
                }
            }
        }
    },
    "003": {
        "nome": "Dados estatais",
        "subcategorias": {
            "003/001": {
                "nome": "Dados estatais - América Latina",
                "subcategorias": {
                    "003/001/001": {
                        "nome": "Dados estatais - América Latina - Brasil",
                        "subcategorias": {
                            "003/001/001/001": {
                                "nome": "Gov Federal",
                                "subcategorias": {
                                    "003/001/001/001/001": {
                                        "nome": "Presidência",
                                        "subcategorias": {
                                            "003/001/001/001/001-a": {
                                                "nome": "Biblioteca Presidência"
                                            },
                                            "003/001/001/001/001-b": {
                                                "nome": "Planalto"
                                            }
                                        }
                                    },
                                    "003/001/001/001/002": {
                                        "nome": "Ministério das Relações Exteriores"
                                    },
                                    # ... você pode manter os outros ou truncar para teste
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}



# Estilo CSS para indentação
ui.add_head_html('''
<style>
    .category-item {
        margin-left: 20px;
    }
</style>
''')

# Função para ler e validar o arquivo JSON
def load_json(file_path):
    try:
        with open(file_path, 'r', encoding='utf-8') as f:
            data = json.load(f)
        return data
    except FileNotFoundError:
        ui.notify("Erro: O arquivo 'categorias.json' não foi encontrado.", type="negative")
        exit(1)
    except json.JSONDecodeError:
        ui.notify("Erro: O arquivo 'categorias.json' está malformado.", type="negative")
        exit(1)

# Função recursiva para processar categorias e subcategorias
def parse_categories(d=data, nivel=0):
    rows = []
    for key, value in d.items():
        nome = value.get("nome", "")
        print(type(nome))
        # Gera o HTML para o nome com indentação (como string)
        nome_indentado = f'<span class="category-item" style="margin-left:{nivel * 20}px">↳ {nome}</span>'
        rows.append({'ID': key, 'Nome': nome_indentado})  # Nome_indentado é uma string
        subcats = value.get("subcategorias", {})
        if subcats:
            rows.extend(parse_categories(subcats, nivel + 1))
    return rows

# # Carrega os dados do JSON
# data = load_json('categorias.json')
# print(type(data))

# Processa o JSON em uma lista de linhas para a tabela
table_data = parse_categories(data)
print(table_data)

# Cria a interface da tabela no NiceGUI
ui.table(
    columns=[
        {'name': 'ID', 'label': 'ID', 'field': 'ID'},
        {'name': 'Nome', 'label': 'Nome', 'field': 'Nome', 'align': 'left', 'html': True},  # Renderiza HTML
    ],
    rows=table_data,
    row_key='ID',
).props('wrap-cells')

# Inicia o servidor NiceGUI
ui.run()

Description

I'm not able to correctly pass the style of the "Nome" column in the table. I've tried several ways that are in the documentation, but I still haven't been able to solve it. Any suggestions?

NiceGUI Version

2.14.1

Python Version

Python 3.11.12

Browser

Chrome

Operating System

Linux

Additional Context

[evnchn]

Styling table is a bit tricky: refer to https://nicegui.io/documentation/table#conditional_formatting

Notably, we're leveraging Quasar, so this would help too: https://quasar.dev/vue-components/table#example--body-cell-slot

[falkoschindler]

Here is an MRE for HTML in table cells:

ui.table(rows=[
    {'name': 'bold', 'code': '<b>Bold</b>'},
    {'name': 'italic', 'code': '<i>Italic</i>'},
    {'name': 'underline', 'code': '<u>Underline</u>'},
]).add_slot('body-cell-code', '<q-td v-html="props.row.code"></q-td>')

Would make a useful demo in the documentation. Anyone up for a pull request? 🙂

[evnchn]

Not until Apr 15. Still exploring Netherlands.

[falkoschindler]

I just added it in PR #4646. ✔️