PyCafe - Solara - Solara Custom Data Table Example

app.py
requirements.txt
app.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

import solara
from ipyvuetify import VuetifyTemplate
import traitlets


class CustomDataTable(VuetifyTemplate):
    template = traitlets.Unicode(
        """
                                 <div>
<template>
  <v-data-table
    v-model="v_model"
    :headers="headers"
    :items="items"
    class="elevation-1"
    item-key="Name"
    class="solara-data-table"
    show-select
  >
    <template v-slot:item.Age="{ item, value }">
      <v-chip
        :color="item.__color__Age"
        dark
      >
        {{ value }}
      </v-chip>
    </template>
  </v-data-table>
</template>
                                 </div>
                                 """
    ).tag(sync=True)

    v_model = traitlets.List([]).tag(sync=True)
    headers = traitlets.List([]).tag(sync=True)
    items = traitlets.List([]).tag(sync=True)

    # Observe seelctions and update table values
    @traitlets.observe("selected")
    def _observe_selected(self, change):
        self.v_model = change["new"]


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"},
]


def get_color_by_age(age):
    if age < 18:
        return "blue"
    if age < 30:
        return "orange"
    if age < 40:
        return "pink"
    return "purple"


for d in data:
    d["__color__Age"] = get_color_by_age(d["Age"])

headers = [
    {"text": "Name", "value": "Name"},
    {"text": "Age", "value": "Age"},
    {"text": "Location", "value": "City"},
]


@solara.component
def Page():
    v, set_v = solara.use_state([])
    CustomDataTable.element(v_model=[], items=data, headers=headers, on_v_model=set_v)
    solara.display(v)
Py.Cafe

solara-custom-data-table

Solara Custom Data Table Example
