Passing data via v_slots

[fekete42]

Hi,

I'd like to ask if the following feature is available in ipyvuetify. What I want to achieve is to use the v_slots mechanism to pass data between widgets. The following is a simple example.

Let's assume we have a data table and we want to use buttons in one of the columns. With the ipyvuetify template widget this is achievable like this:

import ipyvuetify as v
import traitlets

data = {'headers': [{'text': 'A', 'value': 'A'},
                    {'text': 'B', 'value': 'B'},],
        'items': [{'A': '10', 'B': 'a'},
                  {'A': '20', 'B': 'b'},
                  {'A': '30', 'B': 'c'},]}

class CustomDataTable(v.VuetifyTemplate):
    headers = traitlets.List([]).tag(sync=True, allow_null=True)
    items = traitlets.List([]).tag(sync=True, allow_null=True)
    template = traitlets.Unicode('''
        <template>
            <v-data-table
                :headers="headers"
                :items="items"
            >
            <template v-slot:item.A="btn">
              <v-btn color="primary">
              {{ btn.value }}
            </v-btn>
            </template>
            </v-data-table>
        </template>
        ''').tag(sync=True)

CustomDataTable(headers=data['headers'], 
                items=data['items'])

The output looks like this, the items in column A are displayed as buttons:

I'd like to replicate the same by using the existing DataTable and Btn widgets. Composing widgets in python would be much more flexible. Unfortunately, I was unable to figure it out how I could pass variables, in this case {{ btn.value }}, through v_slots.

v.DataTable(headers=data['headers'], 
            items=data['items'], 
            v_slots=[{'name': 'item.A', 
                    'variable': 'btn', 
                    'children': [v.Btn(color='primary', children=['{{ btn.value }}'])]}])

As the image shows, the buttons are included in the table, but the labels on the buttons are not displayed properly.

Is it possible to obtain the same output as what I obtained with the template widget above?

[mariobuikhuizen]

The {{ ... }} syntax only works in the Vue template. In ipyvuetify we only support the passing of events in v-slots, so tooltips and menus are supported. Ipyvuetify can not support evaluating/executing javascript inside v-slots, so the template is the only option to support this.

[fekete42]

Would it be possible to use a template in v-slots and establish a link of javascript variables via the python API or it's also a dead-end idea?

[wjcroom]

items=[{ 'id': 1, 'name': 'Applications :', 'value':3, 'children': [ { 'id': 2, 'name': 'Calendar','value':55 },

], }]

v_slots=[{ 'name': 'prepend', 'variable': 'item',
'children': v.Btn(color='primary', children=['{{ item.value }}'])]}] treeview = rv.Treeview( items=items. v_slots=v_slots )

same as upper ,I need to show Button with item value how to do this?