Solara•3mo ago

Changing text color in a Selectable DataTable cell by using an external function

Hello, I am trying to customize certain cells display in DataTable by using for example a format function. I am trying to do this on a DataTable that allows me to select rows for further inspection. I managed to get the "selectable" part by using rv.DataTable instead of solara.DataFrame/DataTable and setting up v_model="selected" and using on_v_model to get results back. Now I am struggling on how to customize each cells individually given their value. I checked vuetify documentation and I saw that should be possible through cell_props but I didnt find that is currently exposed in the current ipyvuetify implementation of DataTable (or I didnt find!) I tried to create a custom component by mixing these examples of vuetify webpage (https://github.com/vuetifyjs/vuetify/tree/master/packages/docs/src/examples/v-data-table/slot-item-key.vue and https://github.com/vuetifyjs/vuetify/tree/master/packages/docs/src/examples/v-data-table/prop-row-selection.vue), I managed to make something with circle values and selectable boxes, but failed miserably to make the on_v_model pass the feedback to python or even costumize directly which item to highlight/change or how to even expose the function "getColor" to be passthrough as a python function and to control which header item to use (by default it uses calories), since I am terrible at javascript/vue things related. I am wondering how difficult would be to do this? dont need to be using <v-chip> just beign able to pass a function to change color based on a given cell value would be enough (for a certain header) and how to control that in python. Is this too difficult? Thanks!

GitHub

vuetify/packages/docs/src/examples/v-data-table/slot-item-key.vue a...

🐉 Vue Component Framework. Contribute to vuetifyjs/vuetify development by creating an account on GitHub.

9 Replies

MaartenBreddels•3mo ago

Note that ipyvuetify is still on v2, so you should consult the https://v2.vuetifyjs.com/ docs. Although if you really want to use vuetify v3, you can install the alpha, see https://discord.com/channels/1106593685241614489/1287576906035892245 for some pycafe examples See also https://discord.com/channels/1106593685241614489/1286989885692969052 and https://github.com/widgetti/solara/issues/110 for plans to make the datatable more flexible. Does this help you?

Monty Python•3mo ago

chaffra

<:issue_open:882464248951877682> [widgetti/solara] [Feature Request] solara DataFrame should handle pandas Styler

If you have a styled df = pandas.DataFrame().style, you can pass it as sdf = solara.DataFrame(df.data) but you loose the styling that was applied to df. So if columns were hidden by the styler, they are displayed again. It would be good for solara.DataFrame to reapply the style before when displaying sdf in a notebook for example.

Created

MitulaOP•3mo ago

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?

MaartenBreddels•3mo ago

I'm not sure what you question is. What do you mean by v-chip example?

MitulaOP•3mo ago

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

MaartenBreddels•3mo ago

Would be great if you could share a demo at https://py.cafe !

PyCafe: Create & Share Streamlit, Dash and Python Apps Online.

Playground for Python web frameworks. Run and edit Python code snippets for web frameworks in a web browser.

MitulaOP•3mo ago

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

PyCafe - Solara - Solara Custom Data Table Example

Create & Share Streamlit, Dash and Python Apps Online.

MaartenBreddels•3mo ago

Are you sure v-data-table has a v-model?

MitulaOP•3mo ago

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.

Gaming

Programming

Changing text color in a Selectable DataTable cell by using an external function