widgetti / widgetti/ipyvuetify

Passing data via v_slots

Open
#131 3 comments 3 reactions 0 assignees View on GitHub

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:
image

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 }}'])]}])

image

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

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.