QTable with Selection has no checkboxes

[toastoaster]

Hi,
I was trying to recreate the Multi selection example from the Quasar documentation: https://quasar.dev/vue-components/table#example--multiple-selection

from trame.app import get_server
from trame.ui.quasar import QLayout
from trame.widgets import quasar, html

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

COLUMNS = [
    {"name": 'name', "label": 'Dessert (100g serving)', "field": "name"},
    {"name": 'calories', "align": 'center', "label": 'Calories', "field": 'calories'},
    {"name": 'fat', "label": 'Fat (g)', "field": 'fat'}
]

ROWS = [{"name": 'Frozen Yogurt', "calories": 159, "fat": 6.0},
        {"name": 'Ice cream sandwich', "calories": 237, "fat": 9.0},
        {"name": 'Eclair', "calories": 262, "fat": 16.0},
        {"name": 'Cupcake', "calories": 305, "fat": 3.7},
        {"name": 'Gingerbread', "calories": 356, "fat": 16.0},
        {"name": 'Jelly bean', "calories": 375, "fat": 0.0},
        {"name": 'Lollipop', "calories": 392, "fat": 0.2},
        {"name": 'Honeycomb', "calories": 408, "fat": 3.2},
        {"name": 'Donut', "calories": 452, "fat": 25.0},
        {"name": 'KitKat', "calories": 518, "fat": 26.0}]

state.table = {
    "flat": True,
    "bordered": True,
    "title": "Treats",
    "rows": ("table_rows", ROWS),
    "columns": ("table_headers", COLUMNS),
    "row_key": "name",
    "selection": "multiple",
    "v_model_selected": ("selection", []),
    "filter": ("query", "")
}

with QLayout(server):
    with quasar.QPageContainer():
        with quasar.QPage():
            with quasar.QInput(v_model="query", filled=True, type="search", hint="Search"):
                with html.Template(v_slot_append=True):
                    quasar.QIcon(name="search")
            print(quasar.QTable(**state.table))

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

Unfortunately my resulting Website does not contain any checkboxes to select the rows. The example layout.py on the Trame-Quasar-Project does yet not contain an example for a table (https://github.com/Kitware/trame-quasar/blob/master/example/layout.py).

In the trame-docs the "v_model_selected"-prop does not follow the convention but changing it to just "selected" still does not work (https://trame.readthedocs.io/en/latest/trame.widgets.quasar.html#trame.widgets.quasar.QTable).

Can anyone help me recreating it please?

[jourdain]

Try to print your layout and if that does not match the Quasar doc, add missing property by registering them with the __properties=[("py_attr_name", "js-vue:template.attribute"), ...], keyword attribute.

[toastoaster]

What you suggested probably works as an overwrite of variables that get translated wrongly?
Expected:
<q-table flat bordered title="Treats" :rows="rows" :columns="columns" row-key="name" selection="multiple" v-model:selected="selected"/>
But is:
<q-table title="Treats" :rows="rows" row-key="name" :columns="columns" flat bordered :filter="query" @selection="multiple" :selected="selected" />
If I am ignoring the ":filter" (which works), the differences are "@ selection" instead of "selection" and ":selected" instead of "v-model:selected".

So I am using:
print(quasar.QTable(**state.table, __properties=[("selection", "selection"), ("selected", "v-model:selected")]))
But it does not seem to change anything. The output still looks the same (only rearranged):
<q-table @selection="multiple" :selected="selected" title="Treats" :rows="rows" row-key="name" :columns="columns" flat bordered :filter="query" />

[jourdain]

That works for me

state.table = {
    "flat": True,
    "bordered": True,
    "title": "Treats",
    "rows": ("table_rows", ROWS),
    "columns": ("table_headers", COLUMNS),
    "row_key": "name",
    "v_bind_selection": "multiple",
    "v_model_selected": ("selection", []),
    "filter": ("query", "")
}

with QLayout(server):
    with quasar.QPageContainer():
        with quasar.QPage():
            with quasar.QInput(v_model="query", filled=True, type="search", hint="Search"):
                with html.Template(v_slot_append=True):
                    quasar.QIcon(name="search")
            print(quasar.QTable(
                **state.table, 
                __properties=[
                    ("v_model_selected", "v-model:selected"),
                    ("v_bind_selection", ":selection"),
                ],
                )
            )

The issue is that those keys are already defined/processed in the QTable. You need to pick unique ones so that your mapping can properly take effect.

This is the code that get generated from the API

class QTable(HtmlElement):
    def __init__(self, children=None, **kwargs):
        super().__init__("q-table", children, **kwargs)
        self._attr_names += [
            "fullscreen",
            "no_route_fullscreen_exit",
            "rows",
            "row_key",
            "virtual_scroll",
            "virtual_scroll_target",
            "virtual_scroll_slice_size",
            "virtual_scroll_slice_ratio_before",
            "virtual_scroll_slice_ratio_after",
            "virtual_scroll_item_size",
            "virtual_scroll_sticky_size_start",
            "virtual_scroll_sticky_size_end",
            "table_colspan",
            "color",
            "icon_first_page",
            "icon_prev_page",
            "icon_next_page",
            "icon_last_page",
            "grid",
            "grid_header",
            "dense",
            "columns",
            "visible_columns",
            "loading",
            "title",
            "hide_header",
            "hide_bottom",
            "hide_selected_banner",
            "hide_no_data",
            "hide_pagination",
            "dark",
            "flat",
            "bordered",
            "square",
            "separator",
            "wrap_cells",
            "binary_state_sort",
            "column_sort_order",
            "no_data_label",
            "no_results_label",
            "loading_label",
            "selected_rows_label",
            "rows_per_page_label",
            "pagination_label",
            "table_style",
            "table_class",
            "table_header_style",
            "table_header_class",
            "card_container_style",
            "card_container_class",
            "card_style",
            "card_class",
            "title_class",
            "filter",
            "filter_method",
            "pagination",
            "rows_per_page_options",
            "selection",   # <--------- exist in both properties and events
            "selected", # <--------- missing v-model mapping
            "expanded",
            "sort_method",
        ]
        self._event_names += [
            "fullscreen",
            "row_click",
            "row_dblclick",
            "row_contextmenu",
            "request",
            "selection",  # <--------- exist in both properties and events
            ("update_pagination", "update:pagination"),
            ("update_selected", "update:selected"),
            ("update_expanded", "update:expanded"),
            "virtual_scroll",
        ]

[toastoaster]

Thank you very much for your help and the fast answers!
Changing "selection" to "v_bind_selection" fixes it. It is interesting to see that events with the same name can prevent this.
I hope that this exampke will be beneficial for others as well.