Mitula
Mitula
PostsComments
SSolara
Created by Mitula on 9/28/2024 in #questions-issues
Changing text color in a Selectable DataTable cell by using an external function
Sorry, I dotn understand Vue very much, but from the example at vuetify page, it seems to have for selection use cases (they set v-model="selected"), and the variable selected as list.
10 replies
SSolara
Created by Mitula on 9/28/2024 in #questions-issues
Changing text color in a Selectable DataTable cell by using an external function
I tried something like this for example: https://py.cafe/app/Mitula/solara-custom-data-table I am still confused about "Selected" and setting "v_model", but if I understand v_model defines the selected values right? So to work correctly I have to set up always a reactive variable to "selected". Also, I didnt find a way to expose the get_color function, so I coded that as a column name
10 replies
SSolara
Created by Mitula on 9/28/2024 in #questions-issues
Changing text color in a Selectable DataTable cell by using an external function
Sorr for the late reply. Basically I was trying to combine the v.DataTable with selected mode together with the conditional data-table example to modify certain rows as v-chips based on their values. (from Vuetify doc: <template> <v-data-table :headers="headers" :items="desserts" class="elevation-1" > <template v-slot:item.calories="{ item }"> <v-chip :color="getColor(item.calories)" dark > {{ item.calories }} </v-chip> </template> </v-data-table> </template>) I wanted to do that without using Vue, but I managed in the end to do by creating a VuetifyTemplate class and combine both the select example of vuetify table and this example. It is full of workarounds such as defining several columns with special names to define which color and which cell should be displayed as a <v-chip> but in the end worked. I didnt find how to expose the getColor function to the template and I only managed to be able to get feedback from the select values because github copilot helped that I needed to use @traitlets.observe decorator. I will post a snippet later on what it became in the end
10 replies
SSolara
Created by Mitula on 9/28/2024 in #questions-issues
Changing text color in a Selectable DataTable cell by using an external function
Hi Marteen, thank you for the feedback. Sorry I didnt notice I was checking the wrong Vuetify version. I dont know how to write Vue anyway, so thats that. Unfortunately that wont help, because I am not using solara.DataFrame. Currently solara DataFrame only allow interaction through cell actions which in my opnion is a bit clunky. For example I current have this DataTable with select v_model: 
import solara
import pandas as pd
from solara.alias import rv

data = [
    {"Name": "John", "Age": 25, "City": "Tokyo"},
    {"Name": "Linda", "Age": 27, "City": "Toronto"},
    {"Name": "Mark", "Age": 32, "City": "Vancouver"},
    {"Name": "Sarah", "Age": 50, "City": "Dubai"},
    {"Name": "Robert", "Age": 45, "City": "Kings Landing"},
    {"Name": "Tywin", "Age": 60, "City": "Casterly Rock"},
]


df = pd.DataFrame(data)


@solara.component
def Page():
    v, set_v = solara.use_state([])
    rv.DataTable(
        items=df.to_dict("records"),
        headers=[
            {
                "text": name,
                "value": name,
                "align": "start",
            }
            for name in df.columns
        ],
        dense=True,
        v_model="selected",
        on_v_model=set_v,
        item_key="Name",
        selectable_key="Name",
        show_select=True,
        calculate_widths=True,
    )
    solara.display(f"Selected is : {v}")
import solara
import pandas as pd
from solara.alias import rv

data = [
    {"Name": "John", "Age": 25, "City": "Tokyo"},
    {"Name": "Linda", "Age": 27, "City": "Toronto"},
    {"Name": "Mark", "Age": 32, "City": "Vancouver"},
    {"Name": "Sarah", "Age": 50, "City": "Dubai"},
    {"Name": "Robert", "Age": 45, "City": "Kings Landing"},
    {"Name": "Tywin", "Age": 60, "City": "Casterly Rock"},
]


df = pd.DataFrame(data)


@solara.component
def Page():
    v, set_v = solara.use_state([])
    rv.DataTable(
        items=df.to_dict("records"),
        headers=[
            {
                "text": name,
                "value": name,
                "align": "start",
            }
            for name in df.columns
        ],
        dense=True,
        v_model="selected",
        on_v_model=set_v,
        item_key="Name",
        selectable_key="Name",
        show_select=True,
        calculate_widths=True,
    )
    solara.display(f"Selected is : {v}")
I think this is the same as the <v-data-table with v-model="selectable"> Now I want to be able to highlight some cells similart o the <v-chip example> that uses a specific function for the cell. Dosnt need to be that, but just a way to pass a specific css for each cell id (or color). Pandas styler unfortunately will also not work. Is there any easy way of doing this without creating a new vue component?
10 replies