How to add javascript function and get it reusable inside props?

[msiwik-epruf]

Question

I want to add custom function getBadgeColor and use is as prop inside custom_badge_age_slot.

Tried with add_static_files, adding it as <script> inside prop and nothing works as expected.

This is my minimal example

from nicegui import ui

columns = [
    {'name': 'age', 'label': 'Age', 'field': 'age',},
    {'name': 'age2', 'label': 'Age2', 'field': 'age2'},
]

# Sample data, structure based on the image
data = [
    {"age": 5, "age2": 5},
    {"age": 20, "age2": 20},
    {"age": 15, "age2": 15},
    {"age": 25, "age2": 25},
    {"age": 25, "age2": 25},
    {"age": 35, "age2": 35}
]


def custom_badge_age_slot():
    return '''
    <q-td key="age" :props="props">
        <q-badge :color="getBadgeColor(props.value)">
            {{ props.value }}
        </q-badge>
    </q-td>
    '''

def plain_badge_age_slot():
    return '''
    <q-td key="age2" :props="props">
        <q-badge :color="props.value < 21 ? 'red' : 'green'">
            {{ props.value }}
        </q-badge>
    </q-td>
    '''

java_script_func = '''
function getBadgeColor(value) {
    if (value < 20) {
        return 'red';
    } else if (value < 30) {
        return 'yellow';
    } else {
        return 'green';
    }
}
'''

with ui.table(columns=columns,
         column_defaults={
        'align': 'center',
        'headerClasses': 'text-primary',
         },
         rows=data,
         pagination={'rowsPerPage': 10}
         ) as table:
    table.add_slot('body-cell-age', custom_badge_age_slot())
    table.add_slot('body-cell-age2', plain_badge_age_slot())


ui.run(port=7771)

[falkoschindler]

Hi @msiwik-epruf, that's a very good question. I thought it should be possible to define the function within the globally accessible window object or some other Vue trickery, but nothing I tried seems to work. Does anyone else have an idea?

[ed2050]

What errors are you getting and what do you expect to see?

Slightly different, but I use ui.add_head_html to load a js file with functions. Then I call it from a table like below.

Your func custom_badge_age_slot generates the DOM nodes text directly, whereas ui.table generates them for me. But perhaps comparing the output created by ui.table to your output could show where things are going wrong? Look at the rendered DOM in page inspector and see what's different.

    columns = [
        {
            'name'  : 'File' ,
            'label' : 'File' ,
            'field' : 'filename' ,
            'align' : 'left' ,
        } ,
        {
            'name'  : 'size' ,
            'label' : 'Size' ,
            'field' : 'size' ,
        } ,
        {
            'name'  : 'mtime' ,
            'label' : 'Mod time' ,
            'field' : 'dl' ,
            'align' : 'left' ,
            ':format' : 'value => window.fmt_time_js (value, false)' ,
        } ,
    ]
    table = ui.table (columns = columns, rows = filedata)

[msiwik-epruf]

@ed2050 Can you show full working example?

[gsal1000]

@msiwik-epruf & @falkoschindler , while I wasn't trying to use a javascript function from inside a slot, I was trying to bind a custom event to a table using .on(...) which would run a python function; and then have that event emitted when a button in the additional slot was clicked. The problem was I couldn't use the emitEvent javascript function as suggested in the nicegui docs because apparently there's no access to the global scope in Vue templates - see explanation here: https://stackoverflow.com/questions/54055097/use-global-variable-in-vue-template

So, my workaround was to use the Vue $emit() method to send the event to the table as in the following:

<q-btn size="sm" color="accent" round dense
    @click="() => $parent.$emit('edit_button_clicked', props.row.id)"
    :icon="'edit'" />

Not exactly the same problem, but I think similar underlying cause (i.e. no access to the global scope from Vue).

Here's the full working source for how I worked around the issue (well parts relevant to the discussion anyway). It is essentially using the "Table with expandable rows" example from the nicegui docs https://nicegui.io/documentation/table#table_with_expandable_rows :

def display_table(data: List[Dict],
                  columns: List[Dict],
                  visible_columns: List[str],
                  sort_column: str,
                  display_name: str,
                  container) -> None:

    def handle_edit_button_clicked(event: events.GenericEventArguments) -> None:
        global main_content
        global right_drawer
        color = 'lightgrey' if event.args else 'white'
        main_content.style(f"color: {color}; background-color: {color}")
        rowid = event.args
        logger.info(f"Edit button clicked for row: {rowid}")
        ui.notify(f"Edit button clicked for row: (ID: {rowid})")

    container.clear()
    with container:
        row_key = next(iter(data[0]))
        table = ui.table(columns=columns,
                         rows=data,
                         row_key=row_key,
                         pagination={'rowsPerPage': 15, 'sortBy': sort_column, 'page': 1}
                ).props(f'title="{display_name}" dense visible-columns="{visible_columns}"')
        table.classes('w-full overflow-x-auto sticky-header-table').mark('main_data_table')
        table.add_slot('header', r'''
            <q-tr :props="props">
                <q-th auto-width />
                <q-th auto-width />
                <q-th v-for="col in props.cols" :key="col.name" :props="props">
                    {{ col.label }}
                </q-th>
            </q-tr>
        ''')
        table.add_slot('body', r'''
            <q-tr :props="props">
                <q-td auto-width>
                    <q-btn size="sm" color="accent" round dense
                        @click="() => $parent.$emit('edit_button_clicked', props.row.id)"
                        :icon="'edit'" />
                </q-td>
                <q-td auto-width>
                    <q-btn size="sm" color="accent" round dense
                        @click="props.expand = !props.expand"
                        :icon="props.expand ? 'remove' : 'add'" />
                </q-td>
                <q-td v-for="col in props.cols" :key="col.name" :props="props">
                    {{ col.value }}
                </q-td>
            </q-tr>
            <q-tr v-show="props.expand" :props="props">
                <q-td colspan="100%">
                    <div class="text-left">Editing '{{ props.row.name }}' (ID={{ props.row.id }}).</div>
                </q-td>
            </q-tr>
        ''')
        table.on('edit_button_clicked', handle_edit_button_clicked)

        search = ui.input('Search').bind_value(table, 'filter')
        search.move(target_index=0)

Perhaps you could bind a handler using the js_handler argument. How you would update the value of the :color attribute though, I'm not sure of as javascript isn't my strong suite.