import ipyvuetify as v
from traitlets import (Any, Unicode, List)
class MyMenu(v.VuetifyTemplate):
color = Unicode('primary').tag(sync=True)
items = List(['red', 'green', 'purple']).tag(sync=True)
button_text = Unicode('menu').tag(sync=True)
template = Unicode('''
<v-layout>
<v-menu offset-y>
<template v-slot:activator="{ on }">
<v-btn
:color="color"
class="white--text"
v-on="on">
{{ button_text }}
</v-btn>
</template>
<v-list>
<v-list-item
v-for="(item, index) in items"
:key="index"
@click="menu_click(index)">
<v-list-item-title>{{ item }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</v-layout>''').tag(sync=True)
def vue_menu_click(self, data):
self.color = self.items[data]
self.button_text = self.items[data]
MyMenu()
from traitlets import *
import ipyvuetify as v
select = v.Select(items=['identity', 'log', 'log10', 'log1p', 'log1p'], v_model='log', label='Transform')
class Test(v.VuetifyTemplate):
items = Any(['a', 'b']).tag(sync=True)
template = Unicode('''
<v-layout column>
<myselect/>
<v-select :items="items"/>
</v-layout>
''').tag(sync=True)
def vue_menu_click(self, data):
self.color = self.items[data]
self.button_text = self.items[data]
test = Test(components={'myselect': select})
test
import pandas as pd
import traitlets
import ipyvuetify as v
import json
class PandasDataFrame(v.VuetifyTemplate):
"""
Vuetify DataTable rendering of a pandas DataFrame
Args:
data (DataFrame) - the data to render
title (str) - optional title
"""
headers = traitlets.List([]).tag(sync=True, allow_null=True)
items = traitlets.List([]).tag(sync=True, allow_null=True)
search = traitlets.Unicode('').tag(sync=True)
title = traitlets.Unicode('DataFrame').tag(sync=True)
index_col = traitlets.Unicode('').tag(sync=True)
template = traitlets.Unicode('''
<template>
<v-card>
<v-card-title>
<span class="title font-weight-bold">{{ title }}</span>
<v-spacer></v-spacer>
<v-text-field
v-model="search"
append-icon="mdi-magnify"
label="Search ..."
single-line
hide-details
></v-text-field>
</v-card-title>
<v-data-table
:headers="headers"
:items="items"
:search="search"
:item-key="index_col"
:footer-props="{'items-per-page-options': [25, 50, 250, 500]}"
>
<template v-slot:no-data>
<v-alert :value="true" color="error" icon="mdi-alert">
Sorry, nothing to display here :(
</v-alert>
</template>
<template v-slot:no-results>
<v-alert :value="true" color="error" icon="mdi-alert">
Your search for "{{ search }}" found no results.
</v-alert>
</template>
<template v-slot:items="rows">
<td v-for="(element, label, index) in rows.item"
@click=cell_click(element)
>
{{ element }}
</td>
</template>
</v-data-table>
</v-card>
</template>
''').tag(sync=True)
def __init__(self, *args,
data=pd.DataFrame(),
title=None,
**kwargs):
super().__init__(*args, **kwargs)
data = data.reset_index()
self.index_col = data.columns[0]
headers = [{
"text": col,
"value": col
} for col in data.columns]
headers[0].update({'align': 'left', 'sortable': True})
self.headers = headers
self.items = json.loads(
data.to_json(orient='records'))
if title is not None:
self.title = title
iris = pd.read_csv('https://raw.githubusercontent.com/mwaskom/seaborn-data/master/iris.csv')
test = PandasDataFrame(data = iris, title='Iris')
test