Skip to content

Commit

Permalink
refactor: data-table (#5737)
Browse files Browse the repository at this point in the history 
initial rewrite of data-table and data-iterator
  • Loading branch information
@nekosaur
nekosaur authored Feb 22, 2019
1 parent a0ebde1 commit d45bd7e
Show file tree
Hide file tree
Showing 51 changed files with 2,762 additions and 3,056 deletions.
147 changes: 70 additions & 77 deletions packages/docs/src/examples/data-tables/crud.vue
View file
Original file line number Diff line number Diff line change
@@ -1,82 +1,75 @@
<template>
<div>
<v-toolbar flat color="white">
<v-toolbar-title>My CRUD</v-toolbar-title>
<v-divider
class="mx-2"
inset
vertical
></v-divider>
<v-spacer></v-spacer>
<v-dialog v-model="dialog" max-width="500px">
<v-btn slot="activator" color="primary" dark class="mb-2">New Item</v-btn>
<v-card>
<v-card-title>
<span class="headline">{{ formTitle }}</span>
</v-card-title>
<v-data-table
:headers="headers"
:items="desserts"
class="elevation-1"
>
<template #top>
<v-toolbar flat color="white">
<v-toolbar-title>My CRUD</v-toolbar-title>
<v-divider
class="mx-2"
inset
vertical
></v-divider>
<v-spacer></v-spacer>
<v-dialog v-model="dialog" max-width="500px">
<v-btn slot="activator" color="primary" dark class="mb-2">New Item</v-btn>
<v-card>
<v-card-title>
<span class="headline">{{ formTitle }}</span>
</v-card-title>

<v-card-text>
<v-container grid-list-md>
<v-layout wrap>
<v-flex xs12 sm6 md4>
<v-text-field v-model="editedItem.name" label="Dessert name"></v-text-field>
</v-flex>
<v-flex xs12 sm6 md4>
<v-text-field v-model="editedItem.calories" label="Calories"></v-text-field>
</v-flex>
<v-flex xs12 sm6 md4>
<v-text-field v-model="editedItem.fat" label="Fat (g)"></v-text-field>
</v-flex>
<v-flex xs12 sm6 md4>
<v-text-field v-model="editedItem.carbs" label="Carbs (g)"></v-text-field>
</v-flex>
<v-flex xs12 sm6 md4>
<v-text-field v-model="editedItem.protein" label="Protein (g)"></v-text-field>
</v-flex>
</v-layout>
</v-container>
</v-card-text>
<v-card-text>
<v-container grid-list-md>
<v-layout wrap>
<v-flex xs12 sm6 md4>
<v-text-field v-model="editedItem.name" label="Dessert name"></v-text-field>
</v-flex>
<v-flex xs12 sm6 md4>
<v-text-field v-model="editedItem.calories" label="Calories"></v-text-field>
</v-flex>
<v-flex xs12 sm6 md4>
<v-text-field v-model="editedItem.fat" label="Fat (g)"></v-text-field>
</v-flex>
<v-flex xs12 sm6 md4>
<v-text-field v-model="editedItem.carbs" label="Carbs (g)"></v-text-field>
</v-flex>
<v-flex xs12 sm6 md4>
<v-text-field v-model="editedItem.protein" label="Protein (g)"></v-text-field>
</v-flex>
</v-layout>
</v-container>
</v-card-text>

<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="blue darken-1" text @click="close">Cancel</v-btn>
<v-btn color="blue darken-1" text @click="save">Save</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-toolbar>
<v-data-table
:headers="headers"
:items="desserts"
class="elevation-1"
>
<template slot="items" slot-scope="props">
<td>{{ props.item.name }}</td>
<td class="text-xs-right">{{ props.item.calories }}</td>
<td class="text-xs-right">{{ props.item.fat }}</td>
<td class="text-xs-right">{{ props.item.carbs }}</td>
<td class="text-xs-right">{{ props.item.protein }}</td>
<td class="justify-center layout px-0">
<v-icon
small
class="mr-2"
@click="editItem(props.item)"
>
edit
</v-icon>
<v-icon
small
@click="deleteItem(props.item)"
>
delete
</v-icon>
</td>
</template>
<template slot="no-data">
<v-btn color="primary" @click="initialize">Reset</v-btn>
</template>
</v-data-table>
</div>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="blue darken-1" flat @click="close">Cancel</v-btn>
<v-btn color="blue darken-1" flat @click="save">Save</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-toolbar>
</template>
<template #item.action="props">
<v-icon
small
class="mr-2"
@click="editItem(props.item)"
>
edit
</v-icon>
<v-icon
small
@click="deleteItem(props.item)"
>
delete
</v-icon>
</template>
<template #no-data>
<v-btn color="primary" @click="initialize">Reset</v-btn>
</template>
</v-data-table>
</template>

<script>
Expand All @@ -94,7 +87,7 @@
{ text: 'Fat (g)', value: 'fat' },
{ text: 'Carbs (g)', value: 'carbs' },
{ text: 'Protein (g)', value: 'protein' },
{ text: 'Actions', value: 'name', sortable: false }
{ text: 'Actions', value: 'action', sortable: false }
],
desserts: [],
editedIndex: -1,
Expand Down
17 changes: 4 additions & 13 deletions packages/docs/src/examples/data-tables/customIcons.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,10 @@
:headers="headers"
:items="desserts"
class="elevation-1"
prev-icon="mdi-menu-left"
next-icon="mdi-menu-right"
sort-icon="mdi-menu-down"
>
<template slot="items" slot-scope="props">
<td>{{ props.item.name }}</td>
<td class="text-xs-right">{{ props.item.calories }}</td>
<td class="text-xs-right">{{ props.item.fat }}</td>
<td class="text-xs-right">{{ props.item.carbs }}</td>
<td class="text-xs-right">{{ props.item.protein }}</td>
<td class="text-xs-right">{{ props.item.iron }}</td>
</template>
</v-data-table>
:items-per-page="5"
:header-props="{ sortIcon: 'mdi-menu-up' }"
:footer-props="{ prevIcon: 'mdi-menu-left', nextIcon: 'mdi-menu-right' }"
></v-data-table>
</template>

<script>
Expand Down
52 changes: 21 additions & 31 deletions packages/docs/src/examples/data-tables/expand.vue
View file
Original file line number Diff line number Diff line change
@@ -1,36 +1,26 @@
<!-- eslint-disable vue/no-unused-vars -->
<template>
<div>
<v-toolbar flat color="white">
<v-toolbar-title>Expandable Table</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn color="primary" dark @click="expand = !expand">
{{ expand ? 'Close' : 'Keep' }} other rows
</v-btn>
</v-toolbar>
<v-data-table
:headers="headers"
:items="desserts"
:expand="expand"
item-key="name"
>
<template slot="items" slot-scope="props">
<tr @click="props.expanded = !props.expanded">
<td>{{ props.item.name }}</td>
<td class="text-xs-right">{{ props.item.calories }}</td>
<td class="text-xs-right">{{ props.item.fat }}</td>
<td class="text-xs-right">{{ props.item.carbs }}</td>
<td class="text-xs-right">{{ props.item.protein }}</td>
<td class="text-xs-right">{{ props.item.iron }}</td>
</tr>
</template>
<template slot="expand" slot-scope="props">
<v-card flat>
<v-card-text>Peek-a-boo!</v-card-text>
</v-card>
</template>
</v-data-table>
</div>
<v-data-table
:headers="headers"
:items="desserts"
item-key="name"
show-expand
:single-expand="expand"
class="elevation-1"
>
<template #top>
<v-toolbar flat color="white">
<v-toolbar-title>Expandable Table</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn color="primary" dark @click="expand = !expand">
{{ expand ? 'Close' : 'Keep' }} other rows
</v-btn>
</v-toolbar>
</template>
<template #item.expanded="{ headers }">
<td :colspan="headers.length">Peek-a-boo!</td>
</template>
</v-data-table>
</template>

<script>
Expand Down
8 changes: 0 additions & 8 deletions packages/docs/src/examples/data-tables/footer.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,6 @@
:items="desserts"
class="elevation-1"
>
<template slot="items" slot-scope="props">
<td>{{ props.item.name }}</td>
<td class="text-xs-right">{{ props.item.calories }}</td>
<td class="text-xs-right">{{ props.item.fat }}</td>
<td class="text-xs-right">{{ props.item.carbs }}</td>
<td class="text-xs-right">{{ props.item.protein }}</td>
<td class="text-xs-right">{{ props.item.iron }}</td>
</template>
<template slot="footer">
<td :colspan="headers.length">
<strong>This is an extra footer</strong>
Expand Down
8 changes: 0 additions & 8 deletions packages/docs/src/examples/data-tables/headerCell.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,6 @@
</span>
</v-tooltip>
</template>
<template slot="items" slot-scope="props">
<td>{{ props.item.name }}</td>
<td class="text-xs-right">{{ props.item.calories }}</td>
<td class="text-xs-right">{{ props.item.fat }}</td>
<td class="text-xs-right">{{ props.item.carbs }}</td>
<td class="text-xs-right">{{ props.item.protein }}</td>
<td class="text-xs-right">{{ props.item.iron }}</td>
</template>
</v-data-table>
</template>

Expand Down
28 changes: 16 additions & 12 deletions packages/docs/src/examples/data-tables/headerless.vue
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,29 @@
<template>
<v-data-table
:headers="headers"
:items="desserts"
hide-default-header
hide-default-footer
class="elevation-1"
hide-actions
hide-headers
>
<template slot="items" slot-scope="props">
<td>{{ props.item.name }}</td>
<td class="text-xs-right">{{ props.item.calories }}</td>
<td class="text-xs-right">{{ props.item.fat }}</td>
<td class="text-xs-right">{{ props.item.carbs }}</td>
<td class="text-xs-right">{{ props.item.protein }}</td>
<td class="text-xs-right">{{ props.item.iron }}</td>
</template>
</v-data-table>
></v-data-table>
</template>

<script>
export default {
data () {
return {
headers: [
{
text: 'Dessert (100g serving)',
align: 'left',
value: 'name'
},
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
{ text: 'Carbs (g)', value: 'carbs' },
{ text: 'Protein (g)', value: 'protein' },
{ text: 'Iron (%)', value: 'iron' }
],
desserts: [
{
name: 'Frozen Yogurt',
Expand Down
Loading

0 comments on commit d45bd7e

Please sign in to comment.