Custom tables

[AliE89]

Hi Sebasiten,

I am moving on to tables right now and I managed to do some basic ones following your tutorials.

Q1)
Now, I would like to do some more fancy stuff and I am trying to reproduce some of the examples on veutify like:

https://vuetifyjs.com/en/components/data-tables/basics/#item-key-slot

<template>
  <v-data-table
    :headers="headers"
    :items="vegetables"
  >
    <template v-slot:item.calories="{ value }">
      <v-chip :color="getColor(value)">
        {{ value }}
      </v-chip>
    </template>
  </v-data-table>
</template>

Is that possible doing something like this in Trame? I haven't seen an example around yet for that .

Q2)

Is footer_props something mapped?

FYI:
Footer props are set using this syntax:

footer_props=[{'nextIcon': 'mdi-plus', 'prevIcon': 'mdi-minus', 'itemsPerPageOptions': [2, 4, 6, 8, 10]}]

Cheers

[jourdain]

with vuetify.VDataTable(headers=("headers",), items=("vegetables",)) as table:
   with vuetify.Template(raw_attrs=['v-slot:item.calories="{ value }"']):
      vuetify.VChip({{ value }}, color=("getColor(value)",)

   print(table)

[jourdain]

Your question is also covered in slide 8 of that page

[AliE89]

Cheers,

I'll test it out asap :)

[AliE89]

Hi,

Sorry to get back very late on this, but I have been side tracked on other things.

I have tried the lines above but I cannot make them work. Instead, I am posting here what it is working for me:

with vuetify.VDataTable(headers=("headers", headers), items=("rows", rows)) as vtable: 
  with vuetify.Template(
      calories=" {item} ", 
      __properties=[("calories", "v-slot:item.calories")]):
      vuetify.VChip("{{ item.calories }}", color="red",)

The only missing bit is that I am not finding a good way to pass the actual value of the item to a function with some conditionals in it to return the right color.

Cheers.

[jourdain]

That was previously answered.

[AliE89]

Do you mean this line here:

color=("getColor(value)",) ?

It does not work for me, I get the following error:

"JS Error => ReferenceError: getColor is not defined", but the function is defined just above as:

def getColor(my_item, **kwargs): if float(my_item)>300: color = "red" else: color = "green" return color

Cheers

[jourdain]

Indeed you need to come up with your implementation of getColor(). Is that not what you want, a function with some conditionals in it to return the right color.

[AliE89]

Hi Sebastien,

yes exacly, I can undestand I need my own implementation, but for whatever reason the function I code in python is not hooked up correctly.

Here a super easy re-edition of tableDyna.py tutorial:

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

import json
import pandas as pd

server = get_server()
state = server.state

# --------------------------------------------------------------------------------
# Loading dataframe
# --------------------------------------------------------------------------------
data = json.loads(
    """
[{"name":"Frozen Yogurt","calories":200,"fat":6,"carbs":24,"protein":4,"iron":"1%"},{"name":"Ice cream sandwich","calories":200,"fat":9,"carbs":37,"protein":4.3,"iron":"1%"},{"name":"Eclair","calories":300,"fat":16,"carbs":23,"protein":6,"iron":"7%"},{"name":"Cupcake","calories":300,"fat":3.7,"carbs":67,"protein":4.3,"iron":"8%"},{"name":"Gingerbread","calories":400,"fat":16,"carbs":49,"protein":3.9,"iron":"16%"},{"name":"Jelly bean","calories":400,"fat":0,"carbs":94,"protein":0,"iron":"0%"},{"name":"Lollipop","calories":400,"fat":0.2,"carbs":98,"protein":0,"iron":"2%"},{"name":"Honeycomb","calories":400,"fat":3.2,"carbs":87,"protein":6.5,"iron":"45%"},{"name":"Donut","calories":500,"fat":25,"carbs":51,"protein":4.9,"iron":"22%"},{"name":"KitKat","calories":500,"fat":26,"carbs":65,"protein":7,"iron":"6%"}]
    """
)

frame = pd.DataFrame.from_dict(data)
frame2 = frame * 2

TABLES = {
    "table 1": frame,
    "table 2": frame2,
}

# --------------------------------------------------------------------------------
# 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 (%)"},
}

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

table = {
    "headers": ("headers", headers),
    "items": ("rows", rows),
    "search": ("query", ""),
    "classes": "table-striped",
    "multi_sort": True,
    "dense": True,
    "items_per_page": 15,
}

@state.change("table_name")
def update_table(table_name, **kwargs):
    df = TABLES[table_name]
    state.headers, state.rows = vuetify.dataframe_to_grid(df, header_options)

def getColor(my_item, **kwargs):
    if float(my_item)>300:
        color = "red"
    else:
        color = "green"

    return color

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

with SinglePageLayout(server) as layout:
    layout.title.set_text("Vuetify table example")
    with layout.toolbar:
        vuetify.VSpacer()
        vuetify.VTextField(
            v_model=("query", ""),
            placeholder="Search",
            dense=True,
            hide_details=True,
            classes="mx-2",
        )
        vuetify.VSelect(
            v_model=("table_name", "table 1"),
            items=("table_names", ["table 1", "table 2"]),
            dense=True,
            hide_details=True,
            style="max-width: 200px;",
        )

    with layout.content:
        with vuetify.VDataTable(headers=("headers", headers), items=("rows", rows)) as vtable: 
            with vuetify.Template(
                calories=" {item} ", # any name, but __properties must be bind to that name
                __properties=[("calories", "v-slot:item.calories")]):
                vuetify.VChip("{{ item.calories }}", color=("getColor(item)",),) # JS Error => ReferenceError: getColor is not defined
                #vuetify.VChip("{{ item.calories }}", color=(getColor("{{ item.calories }}"),),) # it just passes "{{ item.calories }}" as string 

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

[jourdain]

getColor needs to be in JavaScript not python.

[AliE89]

Sounds good, Should I provide it though a a dedicate script to be appended in state.trame__script or maybe shoud I declar it after ',' in the tuple like color (getColor(value), ''' function bla bla''')? Thanks Il Gio 14 Mar 2024, 19:37 Sebastien Jourdain (Kitware) < ***@***.***> ha scritto:

…

getColor needs to be in JavaScript not python. — Reply to this email directly, view it on GitHub <#438 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AL4ZV6VMEUVLPK4MTXOOXVLYYHU6VAVCNFSM6AAAAABC7NI4YKVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4DOOJQGIYTS> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[jourdain]

https://github.com/Kitware/trame/tree/master/examples/09_advanced/custom_js

[AliE89]

Thanks,

it works like a charm.

I think last thing on this topic for me would be this:

Is there a way to loop through every cell in the table to color every number? I might do a for with veutify.Template() for every column, but I guess this is really the average Joe solution!

Anyhow, I am posting here the solution (the poor man one) to help out others:

0. Write your own JS function and put it in a file (e.g. my_script.js):

function getColor (calories) {
    if (calories > 400) return 'red'
    else if (calories > 200) return 'orange'
    else return 'green'
  };

1. Load your own custom JS as in (https://github.com/Kitware/trame/tree/master/examples/09_advanced/custom_js)

js_file = Path(__file__).with_name("my_script.js").resolve()
server.enable_module(
    dict(
        # Path to serve under /my_code
        serve={"my_code": str(js_file.parent)},

        # JS file(s) to load
        scripts=[f"my_code/{js_file.name}"],
    )
)

2. Use table slots to access desired table values:

            with vuetify.Template(
                calories=" {item} ", # any name, but __properties must be bind to that name
                __properties=[("calories", "v-slot:item.calories")],
                color=("getColor(item.calories)",)
                ):
                vuetify.VChip("{{ item.calories }}", color=("getColor(item.calories)",),)

3. Enjoy the result:

Cheers

[jourdain]

Thanks for sharing the full solution for the community.

In case it was not obvious you can use python to loop on the colums where you want colors.

for col_name in ["calories", "fat", "protein"]:
    with vuetify.Template(raw_attrs=['v-slot:item.' + col_name + '="{ value }"']):
        vuetify.VChip("{{ item." + col_name + "}}", color=(f"getColor(item.{col_name})",),)

[AliE89]

Yes,

That's exactly waht I was planning to do with python. I have seen some people around using v-for in veytify, but the more I can get with python the better is!