Skip to content

Commit

Permalink
feat: update to use ipyvuetify1.0/vuetify2
Browse files Browse the repository at this point in the history
  • Loading branch information
@maartenbreddels
maartenbreddels committed Sep 24, 2019
1 parent 0208f23 commit c58dd9e
Show file tree
Hide file tree
Showing 2 changed files with 73 additions and 52 deletions.
95 changes: 52 additions & 43 deletions glue_jupyter/table/table.vue
View file
Original file line number Diff line number Diff line change
@@ -1,53 +1,62 @@
<template>
<v-slide-x-transition appear>
<v-data-table
:headers="[...headers_selections, ...headers]"
dense
hide-default-header
:headers="[...headers]"
:items="items"
:rows-per-page-items="[10,20,50,100]"
:pagination.sync="pagination"
:total-items="total_length"
:footer-props="{'items-per-page-options': [10,20,50,100]}"
:options.sync="options"
:items_per_page.sync="items_per_page"
:server-items-length="total_length"
class="elevation-1"
>
<template v-slot:headers="props">
<th style="padding: 0 10px">#</th>
<th style="padding: 0 1px">
<v-btn icon color="primary" flat small @click="apply_filter">
<v-icon>filter_list</v-icon>
</v-btn>
</th>
<th style="padding: 0 1px" v-for="(header, index) in headers_selections" :key="header.text">
<v-icon style="padding: 0 1px" :key="index" :color="selection_colors[index]">brightness_1</v-icon>
</th>
<v-slide-x-transition :key="header.text" v-for="header in headers">
<th >{{ header.text }}</th>
</v-slide-x-transition>
<template v-slot:header="props">
<thead>
<tr>
<th style="padding: 0 10px">#</th>
<th style="padding: 0 1px" v-if="selection_enabled">
<v-btn icon color="primary" text small @click="apply_filter">
<v-icon>filter_list</v-icon>
</v-btn>
</th>
<th style="padding: 0 1px" v-for="(header, index) in headers_selections" :key="header.text">
<v-icon style="padding: 0 1px" :key="index" :color="selection_colors[index]">brightness_1</v-icon>
</th>
<v-slide-x-transition :key="header.text" v-for="header in headers">
<th >{{ header.text }}</th>
</v-slide-x-transition>
</tr>
</thead>
</template>
<template v-slot:items="props">
<td style="padding: 0 10px" class="text-xs-left">
<i>{{ props.item.__row__ }}</i>
</td>
<td style="padding: 0 1px" class="text-xs-left">
<v-checkbox
hide-details
:input-value="checked.indexOf(props.item.__row__) != -1"
:key="props.item.__row__"
@change="(value) => select({checked: value, row: props.item.__row__})"
/>
</td>
<td style="padding: 0 1px" :key="props.item[header.value]" v-for="(header, index) in headers_selections">
<v-fade-transition leave-absolute>
<v-icon
v-if="props.item[header.value]"
v-model="props.item[header.value]"
:color="selection_colors[index]"
>brightness_1</v-icon>
</v-fade-transition>
</td>
<td v-for="header in headers" class="text-xs-right" :key="header.text">
<v-slide-x-transition appear>
<span>{{ props.item[header.value] }}</span>
</v-slide-x-transition>
</td>
<template v-slot:item="props">
<tr>
<td style="padding: 0 10px" class="text-xs-left">
<i>{{ props.item.__row__ }}</i>
</td>
<td style="padding: 0 1px" class="text-xs-left" v-if="selection_enabled">
<v-checkbox
hide-details style="margin-top: 0; padding-top: 0"
:input-value="checked.indexOf(props.item.__row__) != -1"
:key="props.item.__row__"
@change="(value) => select({checked: value, row: props.item.__row__})"
/>
</td>
<td style="padding: 0 1px" :key="header.text" v-for="(header, index) in headers_selections">
<v-fade-transition leave-absolute>
<v-icon
v-if="props.item[header.value]"
v-model="props.item[header.value]"
:color="selection_colors[index]"
>brightness_1</v-icon>
</v-fade-transition>
</td>
<td v-for="header in headers" class="text-xs-right" :key="header.text">
<v-slide-x-transition appear>
<span class="text-truncate" style="display: inline-block">{{ props.item[header.value] }}</span>
</v-slide-x-transition>
</td>
</tr>
</template>
</v-data-table>
</v-slide-x-transition>
Expand Down
30 changes: 21 additions & 9 deletions glue_jupyter/table/viewer.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,11 @@ class TableBase(v.VuetifyTemplate):
items = traitlets.Any().tag(sync=True) # the data, a list of dict
headers = traitlets.Any().tag(sync=True)
headers_selections = traitlets.Any().tag(sync=True)
pagination = traitlets.Any().tag(sync=True)
options = traitlets.Any().tag(sync=True)
items_per_page = traitlets.CInt(11).tag(sync=True)
selections = traitlets.Any([]).tag(sync=True)
selection_colors = traitlets.Any([]).tag(sync=True)
selection_enabled = traitlets.Bool(True).tag(sync=True)

def _update(self):
self._update_columns()
Expand All @@ -32,6 +34,10 @@ def _update_columns(self):
self.headers = self._get_headers()
self._update_items()

@traitlets.observe('items_per_page')
def _items_per_page(self, change):
self._update_items()

@traitlets.default('headers')
def _headers(self):
return self._get_headers()
Expand All @@ -51,9 +57,9 @@ def _get_headers_selections(self):
def _total_length(self):
return len(self)

@traitlets.default('pagination')
def _pagination(self):
return {'descending': False, 'page': 1, 'rowsPerPage': 10, 'sortBy': None, 'totalItems': len(self)}
@traitlets.default('options')
def _options(self):
return {'descending': False, 'page': 1, 'itemsPerPage': 10, 'sortBy': None, 'totalItems': len(self)}

def format(self, value):
return value
Expand All @@ -65,11 +71,17 @@ def _update_items(self):
def _items(self):
return self._get_items()

@traitlets.observe('pagination')
def _on_change_pagination(self, change):
@traitlets.observe('options')
def _on_change_options(self, change):
self.items = self._get_items()

template = traitlets.Unicode(TEMPLATE).tag(sync=True)
@traitlets.default('template')
def _template(self):
with open(os.path.join(os.path.dirname(__file__), "table.vue")) as f:
return f.read()

def vue_apply_filter(self, data):
pass

def vue_select(self, data):
is_checked, row = data['checked'], data['row']
Expand All @@ -93,8 +105,8 @@ def _get_headers(self):
return [{'text': k, 'value': k, 'sortable': False} for k in components]

def _get_items(self):
page = self.pagination['page'] - 1
page_size = self.pagination['rowsPerPage']
page = self.options['page'] - 1
page_size = self.options['itemsPerPage']
i1 = page * page_size
i2 = min(len(self), (page + 1) * page_size)

Expand Down

0 comments on commit c58dd9e

Please sign in to comment.