Aggrid how use colSpan?

[erfaenda]

Question

Good day, I'm trying to create a table with groups and headers by merging several cells, I added the 'is_header' property: True, if it satisfies, then I'm trying to merge several cells in a row into one for the header. The aggrid examples use colSpan. But I couldn’t figure out how to use it correctly in Nicegui. Please need help

new_data.append({
                    'id': None, 
                    'title': parent_names,
                    'username': '',
                    'password': '',
                    'url': '',
                    'notes': '',
                    'is_header': True
                })

grid = ui.aggrid({
                'defaultColDef': {
                    'flex': 1,
                    'cellStyle': {'display': 'flex', 'alignItems': 'center'} 
                },
                'columnDefs': [
                    {'headerName': 'ID', 'field': 'id', 'hide': True}, 
                    {
                        'headerName': 'Title',
                        'field': 'title',
                        'cellRenderer': 'agGroupCellRenderer',
                        'resizable': True,
                        #  colSpan
                        'colSpan': {
                            "function": "params.data.is_header === 'true' ? 2 : 1"
                        }
                    },
                    {'headerName': 'Username', 'field': 'username'},
                    {'headerName': 'Password', 'field': 'password'},
                    {'headerName': 'URL', 'field': 'url'},
                    {'headerName': 'Notes', 'field': 'notes'},
                ],
                'rowData': [],
                'rowSelection': 'multiple',
            }).style('height: 700px').on('cellClicked', on_cell_clicked)

With this execution I have an empty table

[falkoschindler]

Can you, please, try to create a minimum reproducible code example? This would allow us and the community to help more efficiently. Thanks!
Why is it important to provide a minimal reproducible example?

[erfaenda]

Can you, please, try to create a minimum reproducible code example? This would allow us and the community to help more efficiently. Thanks! Why is it important to provide a minimal reproducible example?

Of course, here is a training example code:

from nicegui import ui

catalogs = [
    {'id': 1, 'name': 'some very long chain of parent directories that does not fit into the cell --> next chain of directories la la la la la la -->'},
    {'id': 2, 'name': 'Catalog 1 --> Catalog 2 --> Catalog 3 -->'},
]

people = [
    {'id': 1, 'parent_id': 1, 'name': 'Alice', 'age': 23, 'profession': 'student'},
    {'id': 2, 'parent_id': 1, 'name': 'Bob', 'age': 21, 'profession': 'student'},
    {'id': 3, 'parent_id': 2, 'name': 'Carol', 'age': 42, 'profession': 'professor'},
    {'id': 4, 'parent_id': 2, 'name': 'Dave', 'age': 25, 'profession': 'student'},
]
# gen people
row_data = []
for catalog in catalogs:
    row_data.append({'name': catalog['name'], 'age': None, 'profession': None, 'isCatalog': True})
    for person in people:
        if person['parent_id'] == catalog['id']:
            row_data.append({'name': person['name'], 'age': person['age'], 'profession': person['profession'], 'isCatalog': False})

# func colSpan for merge colums
def col_span(params):
    if params['data']['isCatalog']:
        return 3  # merge (Name, Age, Profession)
    return 1  # simple

# style class
cell_class_rules = {
    'Name': {
        'bg-gray-300': 'data.isCatalog',
        'font-bold': 'data.isCatalog'
    },
    'Age': {
        'bg-gray-300': 'data.isCatalog',
        'hide': 'data.isCatalog'
    },
    'Profession': {
        'bg-gray-300': 'data.isCatalog',
        'hide': 'data.isCatalog'
    }
}

ui.aggrid({
    'columnDefs': [
        {
            'headerName': 'Name',
            'field': 'name',
            'cellClassRules': cell_class_rules['Name'],
            # I don’t know how to describe this correctly
            #'colSpan': {"function": "col_span('data.isCatalog')"},   this not working
        },
        {
            'headerName': 'Age',
            'field': 'age',
            'cellClassRules': cell_class_rules['Age'],
        },
        {
            'headerName': 'Profession',
            'field': 'profession',
            'cellClassRules': cell_class_rules['Profession'],
        }
    ],
    'rowData': row_data,
    'domLayout': 'autoHeight',
    'headerHeight': 0
}).style('width: 500px')

ui.run()

[CSharpDummy]

I would also like to use 'flex' for column width, is this possible.

[erfaenda]

Я бы также хотел использовать «flex» для ширины столбца, возможно ли это?

I tried this, but it doesn't work, it looks like ag grid can only specify width for the entire column

    'Name': {
        'flex-1': 'data.isCatalog',        
        'bg-gray-300': 'data.isCatalog',
        'font-bold': 'data.isCatalog',
        'w-full': 'data.isCatalog'
    },
    'Age': {
        'flex-shrink-0': 'data.isCatalog',  
        'bg-gray-300': 'data.isCatalog',
        'hide': 'data.isCatalog'
    },
    'Profession': {
        'flex-shrink-0': 'data.isCatalog',  
        'bg-gray-300': 'data.isCatalog',
        'hide': 'data.isCatalog'
    }

[falkoschindler]

You can define a JavaScript function for the colSpan property like this:

':colSpan': '(params) => params.data.isCatalog ? 3 : 1',

The leading colon : indicates a string that needs to be translated to a JavaScript object on the client.

[erfaenda]

Beauty! Thank you very much, this is exactly what I was missing, the initial colon was not obvious to me :P