widgetti / widgetti/ipyvuetify
Passing data via v_slots
Nobody has claimed this yet.
- Dominant language
- Python
- Stars
- 355
- Forks
- 61
- PR merge metrics
- No merged PRs in 30d
Description
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?
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reviewing the DataTable, Btn, v_slots, and VuetifyTemplate entry points referenced in the examples; no repository files or tests are named. Determine whether composed widgets can receive the slot variable, and define completion as matching the template example with each button displaying its row value.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- python
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100