group_by vue3 VDataTables

[AliE89]

Hello,

I am transitioning to vue3, however I am experiencing some issues in using the keyword group_by in a VDataTable (see example 02_vuetify/00_dataframe-table-vue3.py):

table = {
    "headers": ("headers", headers),
    "items": ("rows", rows),
    #"search": ("query", ""),
    #"classes": "elevation-1 ma-4",
    #"multi_sort": True,
    #"dense": True,
    #"items_per_page": 5,
    "group_by": "Dessert" # Adding this
}

I am getting this error out: JS Error => TypeError: l.value.map is not a function.

This is what gets printed: <VDataTable :key="w17-${tts}" :items="rows" groupBy="Dessert" :headers="headers" />.

Any chance there is a bug around?

Thank you

[jourdain]

Not sure, did you try things with the vuetify playground?

[AliE89]

I had a look around and the capability should be there. It not very clear to me how should I pass that info via python interface. Looking at the js error and vue3 doc it looks like it expect a list (e.g. https://vuetifyjs.com/en/components/data-tables/basics/#group-header-slot)) but this:

groupBy: [
  {
    key: 'gluten',
    order: 'asc',
  }
]

does not work either, so I am a bit puzzled.

Cheers

[alesgenova]

Dessert is not a key on the dessert object.
Try grouping by the key glutenfree for example

"group_by": 'glutenfree'

[AliE89]

Hello,

Thanks a lot! That was my first guess, but I get this l.value.map error out of it... if I do ['glutenfree'] I am not getting any issue, but results it's like this:

Jeez all the stuff I got working on vue2 now it's broken on vue3 :(

[jourdain]

https://vuetifyjs.com/en/getting-started/upgrade-guide/#upgrade-guide

[alesgenova]

So I actually found a couple of issues with the vue3 datatable example in trame, it looks like it was actually using vue2, and also the format of the headers was not quite what vuetify3 expects.

Here is a full example using vue3, where we add a new group field to the items, and then group by it in the display

from trame.app import get_server
from trame.ui.vuetify3 import SinglePageLayout
from trame.widgets import html, vuetify3 as vuetify

import pandas as pd

server = get_server(client_type="vue3")
state, ctrl = server.state, server.controller

# --------------------------------------------------------------------------------
# Loading dataframe
# --------------------------------------------------------------------------------
data = [
    {
        "name": "Frozen Yogurt",
        "calories": 200,
        "fat": 6,
        "carbs": 24,
        "protein": 4,
        "iron": "1%",
        "glutenfree": True,
        "group": "stacornea",
    },
    {
        "name": "Ice cream sandwich",
        "calories": 200,
        "fat": 9,
        "carbs": 37,
        "protein": 4.3,
        "iron": "1%",
        "glutenfree": False,
        "group": "stacornea",
    },
    {
        "name": "Cupcake",
        "calories": 300,
        "fat": 3.7,
        "carbs": 67,
        "protein": 4.3,
        "iron": "8%",
        "glutenfree": True,
        "group": "stogatto",
    },
    {
        "name": "Gingerbread",
        "calories": 400,
        "fat": 16,
        "carbs": 49,
        "protein": 3.9,
        "iron": "16%",
        "glutenfree": True,
        "group": "stogatto",
    },
    {
        "name": "Lollipop",
        "calories": 400,
        "fat": 0.2,
        "carbs": 98,
        "protein": 0,
        "iron": "2%",
        "glutenfree": True,
        "group": "forzainter",
    },
    {
        "name": "Honeycomb",
        "calories": 400,
        "fat": 3.2,
        "carbs": 87,
        "protein": 6.5,
        "iron": "45%",
        "glutenfree": True,
        "group": "forzainter",
    },
]


frame = pd.DataFrame.from_dict(data)

# --------------------------------------------------------------------------------
# Configure table columns and options
# --------------------------------------------------------------------------------

# fmt: off
header_options = {
    "name":         {"text": "Dessert", "align": "start", "sortable": False},
    "calories":     {"text": "Calories"},
    "fat":          {"text": "Fat (g)"},
    "carbs":        {"text": "Carbs (g)"},
    "protein":      {"text": "Protein (g)"},
    "iron":         {"text": "Iron (%)"},
    "glutenfree":   {"text": "Gluten-Free"},
    "group":        {"text": "Group"},
}

state.setdefault("group_by", [{"key": "group", "order": "desc"}])

# fmt: on
_headers, rows = vuetify.dataframe_to_grid(frame, header_options)

headers = []

for header in _headers:
    headers.append(dict(**header, key=header["value"], title=header["text"]))

table = {
    "group_by": ("group_by",),
    "headers": ("headers", headers),
    "items": ("rows", rows),
    "item_value": "name",
}


# --------------------------------------------------------------------------------
# GUI
# --------------------------------------------------------------------------------

with SinglePageLayout(server) as layout:
    layout.title.set_text("Vuetify table example")

    with layout.content:
        state.rows = rows
        with vuetify.VDataTable(**table) as datatable:
            with vuetify.Template(
                group_header="{ item, columns, toggleGroup, isGroupOpen }",
                __properties=[
                    ("group_header", "v-slot:group-header"),
                ],
            ):
                with html.Tr():
                    with html.Td(
                        colspan=("columns.length",)
                    ):
                        vuetify.VBtn(
                            icon=("isGroupOpen(item) ? '$expand' : '$next'",),
                            size="small",
                            variant="text",
                            click="toggleGroup(item)",
                        )
                        html.Span("Group: {{ item.value }}")

            with vuetify.Template(
                calories="{ item }",
                __properties=[
                    ("calories", "v-slot:item.calories"),
                ],
            ):
                vuetify.VChip(
                    "{{ item.calories }}",
                    color=("item.color",),
                    dark=True,
                )
            with vuetify.Template(
                glutenfree="{ item }",
                __properties=[
                    ("glutenfree", "v-slot:item.glutenfree"),
                ],
            ):
                vuetify.VCheckbox(
                    "{{ item.glutenfree }}",
                    v_model=("item.glutenfree",),
                    disabled=False,
                    input="flushState('rows')",
                )


if __name__ == "__main__":
    server.start()

[AliE89]

Thanks Alessadro, I'll have a look tomorrow and let you know! In the meantime I can say that I do agree on this "group": "forzainter" 😄