Ipyvuetify DataTable with Select in a column

[camhpj]

Hi I am trying to create a DataTable with single row select as well as dropdown (Select) menus in one of the columns. My current issue is that changing the value of one dropdown changes the value of every dropdown (probably because they share a v_model). In the end I need to be able to pull the values of the dropdown out of the table.

import reacton.ipyvuetify as v

data = [
    {"name": "John", "age": 15, "city": "New York"},
    {"name": "Jane", "age": 23, "city": "London"},
    {"name": "Peter", "age": 32, "city": "Paris"},
    {"name": "Kate", "age": 21, "city": "Berlin"},
    {"name": "Mary", "age": 29, "city": "Mumbai"},
]

v.DataTable(
    headers=[
        {"text": "Name", "value": "name"},
        {"text": "Age", "value": "age"},
        {"text": "City", "value": "city"},
        {"text": "Selector", "value": "selector"},
    ],
    items=data,
    class_="elevation-1",
    single_select=True,
    show_select=True,
    v_slots=[
        {
            "name": "item.selector",
            "variable": "item",
            "children": v.Select(
                items=["Yes", "No"],
                v_model="item.selector",
            ),
        }
    ],
)

[maartenbreddels]

Hi Cameron,

i think this is more an ipyvuetify question, but happy to answer it here. I don't think v_model supports the way you want to use it. I think you may have to start using a VuetifyTemplate for this.

Regards,

Maarten

[camhpj]

Thanks for the reply. I was able to get it working with VuetifyTemplate!