Error message when creating nested table

[dorel14]

Hello

I'd like to create a nested table for this example of data

`   data = [
        {
            "id": 3,
            "name": "Léa Blanc",
            "extension": "Ext.111",            
            "mail": "[email protected]",
            "date_added": "2025-01-02T18:15:14.300064",
            "date_out": None,
            "out": False,
            "date_modified": "2025-01-02T18:15:14.300072",            
            "queueslist": []
        },
        {
            "id": 1,
            "name": "Léa Girard",
            "extension": "Ext.102",
            "mail": "[email protected]",
            "date_added": "2025-01-02T18:15:14.300064",
            "date_out": None,
            "out": False,
            "date_modified": "2025-01-03T18:21:32.646340",            
            "queueslist": [
                {
                    "id": 3,
                    "queuename": "Vip",
                    "queue": "Ext.613",                    
                    "date_added": "2025-01-03T15:51:28.801569",
                    "date_modified": "2025-01-03T15:51:28.801577"
                },
                {
                    "id": 12,
                    "queuename": "test800",
                    "queue": "ext.800",                                        
                    "date_added": "2025-01-03T15:51:28.801569",
                    "date_modified": "2025-01-03T15:51:28.801577"
                }
            ]
        }
    ]

Here is the i set up from this example in tabulator doc

def refresh_extensions():
    extensions = get_extensions()
    # Transform the queueslist data to match parent structure

    data = [
        {
            "id": 3,
            "name": "Léa Blanc",
            "extension": "Ext.111",            
            "mail": "[email protected]",
            "date_added": "2025-01-02T18:15:14.300064",
            "date_out": None,
            "out": False,
            "date_modified": "2025-01-02T18:15:14.300072",            
            "queueslist": []
        },
        {
            "id": 1,
            "name": "Léa Girard",
            "extension": "Ext.102",
            "mail": "[email protected]",
            "date_added": "2025-01-02T18:15:14.300064",
            "date_out": None,
            "out": False,
            "date_modified": "2025-01-03T18:21:32.646340",            
            "queueslist": [
                {
                    "id": 3,
                    "queuename": "Vip",
                    "queue": "Ext.613",                    
                    "date_added": "2025-01-03T15:51:28.801569",
                    "date_modified": "2025-01-03T15:51:28.801577"
                },
                {
                    "id": 12,
                    "queuename": "test800",
                    "queue": "ext.800",                                        
                    "date_added": "2025-01-03T15:51:28.801569",
                    "date_modified": "2025-01-03T15:51:28.801577"
                }
            ]
        }
    ]

    table_config= {
            "data":data,
            "debugInvalidOptions": True,          
            "locale":"fr-FR",
            "langs":{
                'fr-FR': {
                    'pagination': {
                        'first': 'Premier',
                        'first_title': 'Première Page',
                        'last': 'Dernier',
                        'last_title': 'Dernière Page',
                        'prev': 'Précédent',
                        'prev_title': 'Page Précédente',
                        'next': 'Suivant',
                        'next_title': 'Page Suivante',
                        'all': 'Tout'
                        },  
                    }
                },
            "columns": [
                {"title": "id", "field": "id","visible":True},
                {"title": "Extension", "field": "extension", "sorter": "string"},  
                {"title": "Name", "field": "name", "sorter": "string"},                              
                {"title": "Mail", "field": "mail", "sorter": "string"},
                {"title": "Out", "field": "out", "sorter": "string", "formatter":"tickCross","formatterParams":{
                "allowEmpty":True,
                "allowTruthy":True,
                "tickElement":"<i class='fa fa-check'></i>",
                "crossElement":"<i class='fa fa-times'></i>",
                }},               
                {"title": "Out date", "field": "date_out", "sorter": "date", "formatter": "datetime", "formatterParams": {
                    "inputFormat":"iso",
                    "outputFormat":"dd/MM/yy",
                    "invalidPlaceholder":"(invalid date)",
                    "timezone":os.getenv('TZ'),
                }},
                {"title": "Creation date", "field": "date_added", "sorter": "date", "formatter": "datetime", "formatterParams": {
                    "inputFormat":"iso",
                    "outputFormat":"dd/MM/yy",
                    "invalidPlaceholder":"(invalid date)",
                    "timezone":os.getenv('TZ'),
                }},
                {"title": "Modify date", "field": "date_modified", "sorter": "date", "formatter": "datetime", "formatterParams": {
                    "inputFormat":"iso",
                    "outputFormat":"dd/MM/yy",
                    "invalidPlaceholder":"(invalid date)",
                    "timezone":os.getenv('TZ'),
                }},
                ],
        "rowFormatter": """
            function(row) {
                if(row.getData().queueslist && row.getData().queueslist.length > 0) {
                    var holderEl = document.createElement("div");
                    var tableEl = document.createElement("div");
                    
                    holderEl.style.padding = "10px";
                    holderEl.style.backgroundColor = "#f5f5f5";
                    holderEl.style.marginTop = "5px";
                    holderEl.style.width = "100%";
                    
                    holderEl.appendChild(tableEl);
                    
                    var element = row.getElement();
                    var detailsEl = document.createElement("div");
                    detailsEl.style.boxSizing = "border-box";
                    detailsEl.style.padding = "10px";
                    detailsEl.appendChild(holderEl);
                    
                    element.after(detailsEl);
                    
                    var subTable = new Tabulator(tableEl, {
                        layout: "fitColumns",
                        data: row.getData().queueslist,
                        columns: [
                            {title: "Queue", field: "queue", width: 150},
                            {title: "Queue Name", field: "queuename", width: 200},
                            {title: "Added", field: "date_added", formatter: "datetime", 
                            formatterParams: {
                                outputFormat: "dd/MM/yy"
                            },
                            width: 150
                            }
                        ]
                    });
                }
            }
        """,
            "layout": "fitColumns",
            "responsiveLayout":True,
            "resizableRows":True,
            "resizableRowGuide": True,
            "pagination":"local",
            "paginationSize":10            
    }
    table = tabulator(table_config).classes('w-full compact').props('id=extensions_table')
    table.on_event("rowClick", lambda e: handle_row_click(e))

Table look like this

tabulator.min.js:2 Uncaught (in promise) TypeError: this.table.options.rowFormatter is not a function

[CrystalWindSnake]

Hi, @dorel14. When the parameter value is JavaScript code, a colon should be placed before the name.

{
     ":rowFormatter": r"""
function a(row){
        //row - row component
        
        var data = row.getData();
        
        if(data.age == 16){
            row.getElement().style.color = "red";
        }
}
"""
}

The following is a full example.

from nicegui_tabulator import tabulator
from nicegui import ui

tabledata = [
    {
        "id": 1,
        "name": "Oli Bob",
        "age": "12",
    },
    {
        "id": 2,
        "name": "Brendon Philips",
        "age": "125",
    },
    {
        "id": 3,
        "name": "Margret Marmajuke",
        "age": "16",
    },
]

table_config = {
    "data": tabledata,
    "columns": [
        {"title": "Name", "field": "name", "width": 150},
        {"title": "Age", "field": "age", "hozAlign": "left"},
    ],
    ":rowFormatter": r"""
function a(row){
        //row - row component
        
        var data = row.getData();
        
        if(data.age == 16){
            row.getElement().style.color = "red";
        }
}
""",
}

tabulator(table_config)


ui.run()