Trame dynamic table example with vuetify3 doesn't show the table header

[kerim371]

Hi,

I just modified Trame dyn table example to use vuetify3 instead:

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

import pandas as pd

# server = get_server(client_type="vue2")
server = get_server(client_type="vue3")
state = server.state

and I got table header disappeared like in the picture:

[jourdain]

API between veutify2 and 3 are different. Adjust the keys to match the new API.

[kerim371]

Sorry didn't get that.

I just tried to add "item_key": "Dessert":

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

but didn't work.

I also look in vuetify table doc and it looks a little bit awkward. Maybe I look in wrong resources?

[jourdain]

You can find a vue3 example with table here

[jourdain]

The Python API/doc get generated from the JS doc. I usually directly look at the JS doc https://vuetifyjs.com/en/api/v-data-table/

[kerim371]

Thank you for the materials.

How do you think, if I just started using Trame user should I use Vuetify2 or Vuetify3? I guess Trame with Vuetify2 is more stable and a little bit easier to learn. But maybe there are some Vuetify3 advantages?

[jourdain]

vue3 is the way forward. Vuetify managed to catchup most of the feature it had in v2. So starting with vue3 should be fine now.

[kerim371]

Good to know! thank you!