Skip to content

Commit 23fc00a

Browse files
rstoenescurstoenescu
committed
feat(QTable): New scoped slot -> "loading" for customizing the loading state quasarframework#5965 
1 parent aca5cb1 commit 23fc00a

File tree

10 files changed

+224
-32
lines changed

10 files changed

+224
-32
lines changed

‎docs/src/examples/QTable/CustomLoading.vue‎

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
<template>
2+
<div class="q-pa-md">
3+
<q-toggle v-model="loading" label="Loading state" class="q-mb-md" />
4+
<q-table
5+
title="Treats"
6+
:data="data"
7+
:columns="columns"
8+
color="primary"
9+
row-key="name"
10+
:loading="loading"
11+
>
12+
<template v-slot:loading>
13+
<q-inner-loading showing color="primary" />
14+
</template>
15+
</q-table>
16+
</div>
17+
</template>
18+
19+
<script>
20+
export default {
21+
data () {
22+
return {
23+
loading: false,
24+
25+
columns: [
26+
{
27+
name: 'desc',
28+
required: true,
29+
label: 'Dessert (100g serving)',
30+
align: 'left',
31+
field: row => row.name,
32+
format: val => `${val}`,
33+
sortable: true
34+
},
35+
{ name: 'calories', align: 'center', label: 'Calories', field: 'calories', sortable: true },
36+
{ name: 'fat', label: 'Fat (g)', field: 'fat', sortable: true },
37+
{ name: 'carbs', label: 'Carbs (g)', field: 'carbs' },
38+
{ name: 'protein', label: 'Protein (g)', field: 'protein' },
39+
{ name: 'sodium', label: 'Sodium (mg)', field: 'sodium' },
40+
{ name: 'calcium', label: 'Calcium (%)', field: 'calcium', sortable: true, sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) },
41+
{ name: 'iron', label: 'Iron (%)', field: 'iron', sortable: true, sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) }
42+
],
43+
data: [
44+
{
45+
name: 'Frozen Yogurt',
46+
calories: 159,
47+
fat: 6.0,
48+
carbs: 24,
49+
protein: 4.0,
50+
sodium: 87,
51+
calcium: '14%',
52+
iron: '1%'
53+
},
54+
{
55+
name: 'Ice cream sandwich',
56+
calories: 237,
57+
fat: 9.0,
58+
carbs: 37,
59+
protein: 4.3,
60+
sodium: 129,
61+
calcium: '8%',
62+
iron: '1%'
63+
},
64+
{
65+
name: 'Eclair',
66+
calories: 262,
67+
fat: 16.0,
68+
carbs: 23,
69+
protein: 6.0,
70+
sodium: 337,
71+
calcium: '6%',
72+
iron: '7%'
73+
},
74+
{
75+
name: 'Cupcake',
76+
calories: 305,
77+
fat: 3.7,
78+
carbs: 67,
79+
protein: 4.3,
80+
sodium: 413,
81+
calcium: '3%',
82+
iron: '8%'
83+
},
84+
{
85+
name: 'Gingerbread',
86+
calories: 356,
87+
fat: 16.0,
88+
carbs: 49,
89+
protein: 3.9,
90+
sodium: 327,
91+
calcium: '7%',
92+
iron: '16%'
93+
},
94+
{
95+
name: 'Jelly bean',
96+
calories: 375,
97+
fat: 0.0,
98+
carbs: 94,
99+
protein: 0.0,
100+
sodium: 50,
101+
calcium: '0%',
102+
iron: '0%'
103+
},
104+
{
105+
name: 'Lollipop',
106+
calories: 392,
107+
fat: 0.2,
108+
carbs: 98,
109+
protein: 0,
110+
sodium: 38,
111+
calcium: '0%',
112+
iron: '2%'
113+
},
114+
{
115+
name: 'Honeycomb',
116+
calories: 408,
117+
fat: 3.2,
118+
carbs: 87,
119+
protein: 6.5,
120+
sodium: 562,
121+
calcium: '0%',
122+
iron: '45%'
123+
},
124+
{
125+
name: 'Donut',
126+
calories: 452,
127+
fat: 25.0,
128+
carbs: 51,
129+
protein: 4.9,
130+
sodium: 326,
131+
calcium: '2%',
132+
iron: '22%'
133+
},
134+
{
135+
name: 'KitKat',
136+
calories: 518,
137+
fat: 26.0,
138+
carbs: 65,
139+
protein: 7,
140+
sodium: 54,
141+
calcium: '12%',
142+
iron: '6%'
143+
}
144+
]
145+
}
146+
}
147+
}
148+
</script>

‎docs/src/examples/QTable/Loading.vue‎

Lines changed: 4 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
<template>
22
<div class="q-pa-md">
3-
<q-btn label="Refresh" color="primary" @click="onRefresh" class="q-mb-md" />
3+
<q-toggle v-model="loading" label="Loading state" class="q-mb-md" />
44
<q-table
55
title="Treats"
66
:data="data"
77
:columns="columns"
8+
color="primary"
89
row-key="name"
910
:loading="loading"
1011
/>
@@ -15,7 +16,8 @@
1516
export default {
1617
data () {
1718
return {
18-
loading: true,
19+
loading: false,
20+
1921
columns: [
2022
{
2123
name: 'desc',
@@ -137,18 +139,6 @@ export default {
137139
}
138140
]
139141
}
140-
},
141-
mounted () {
142-
this.onRefresh()
143-
},
144-
methods: {
145-
// emulate fetching data from server
146-
onRefresh () {
147-
this.loading = true
148-
setTimeout(() => {
149-
this.loading = false
150-
}, 5000)
151-
}
152142
}
153143
}
154144
</script>

‎docs/src/pages/vue-components/table.md‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -210,7 +210,11 @@ When `pagination` has a property named `rowsNumber`, then this means that you’
210210

211211
### Loading state
212212

213-
<doc-example title="Loading" file="QTable/Loading" />
213+
<doc-example title="Default loading" file="QTable/Loading" />
214+
215+
The example below requires Quasar v1.8+:
216+
217+
<doc-example title="Custom loading" file="QTable/CustomLoading" />
214218

215219
### Custom top
216220

‎ui/dev/src/pages/components/data-table-part3.vue‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,24 @@
66
<q-select class="q-ma-sm inline" filled v-model="separator" :options="['horizontal', 'vertical', 'cell', 'none']" :dark="dark" />
77
<q-toggle v-model="hasSelection" label="Selection" :dark="dark" />
88

9+
<q-table
10+
:data="data"
11+
:columns="columns"
12+
:grid="$q.screen.lt.md"
13+
title="Loading slot"
14+
row-key="name"
15+
:loading="loading"
16+
class="q-my-lg"
17+
:color="$q.dark.isActive || dark ? 'amber' : 'primary'"
18+
:dark="dark"
19+
flat
20+
bordered
21+
>
22+
<template v-slot:loading>
23+
<q-inner-loading showing />
24+
</template>
25+
</q-table>
26+
927
<q-table
1028
:data="data"
1129
:columns="columns"

‎ui/src/components/inner-loading/QInnerLoading.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,10 @@ export default Vue.extend({
4343
: void 0
4444

4545
return h('transition', {
46-
props: { name: this.transition }
46+
props: {
47+
name: this.transition,
48+
appear: true
49+
}
4750
}, child)
4851
}
4952
})

‎ui/src/components/table/QTable.js‎

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -230,19 +230,31 @@ export default Vue.extend({
230230
},
231231

232232
render (h) {
233+
const child = [ this.getTop(h) ]
233234
const data = { staticClass: this.containerClass }
234235

235-
if (this.grid === false) {
236-
data.class = this.cardClass
237-
data.style = this.cardStyle
236+
if (this.grid === true) {
237+
child.push(this.getGridHeader(h))
238+
}
239+
else {
240+
Object.assign(data, {
241+
class: this.cardClass,
242+
style: this.cardStyle
243+
})
238244
}
239245

240-
return h('div', data, [
241-
this.getTop(h),
242-
this.grid === true ? this.getGridHeader(h) : null,
246+
child.push(
243247
this.getBody(h),
244248
this.getBottom(h)
245-
])
249+
)
250+
251+
if (this.loading === true && this.$scopedSlots.loading !== void 0) {
252+
child.push(
253+
this.$scopedSlots.loading()
254+
)
255+
}
256+
257+
return h('div', data, child)
246258
},
247259

248260
methods: {

‎ui/src/components/table/QTable.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -492,6 +492,13 @@
492492
}
493493
},
494494

495+
"slots": {
496+
"loading": {
497+
"desc": "Override default effect when table is in loading state; Suggestion: QInnerLoading",
498+
"addedIn": "v1.8.0"
499+
}
500+
},
501+
495502
"scopedSlots": {
496503
"item": {
497504
"desc": "Slot to use for defining an item when in 'grid' mode; Suggestion: QCard",

‎ui/src/components/table/QTable.sass‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,9 @@
5151
> div:last-child
5252
border-bottom-left-radius: inherit
5353
border-bottom-right-radius: inherit
54+
55+
> .q-inner-loading
56+
border-radius: inherit !important
5457

5558
&__top
5659
padding: 12px 16px
@@ -125,6 +128,7 @@
125128

126129
&--grid
127130
box-shadow: none
131+
border-radius: $generic-border-radius
128132
.q-table__top
129133
padding-bottom: 4px
130134
.q-table__middle

‎ui/src/components/table/table-grid.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,11 @@ export default {
9191
this.getTableHeader(h)
9292
])
9393
]
94-
: (this.loading === true ? this.__getProgress(h) : void 0)
94+
: (
95+
this.loading === true && this.$scopedSlots.loading === void 0
96+
? this.__getProgress(h)
97+
: void 0
98+
)
9599

96100
return h('div', { staticClass: 'q-table__middle' }, child)
97101
}

‎ui/src/components/table/table-header.js‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,16 @@ export default {
88
getTableHeader (h) {
99
const child = this.getTableHeaderRow(h)
1010

11-
this.loading === true && child.push(
12-
h('tr', { staticClass: 'q-table__progress' }, [
13-
h('th', {
14-
staticClass: 'relative-position',
15-
attrs: { colspan: '100%' }
16-
}, this.__getProgress(h))
17-
])
18-
)
11+
if (this.loading === true && this.$scopedSlots.loading === void 0) {
12+
child.push(
13+
h('tr', { staticClass: 'q-table__progress' }, [
14+
h('th', {
15+
staticClass: 'relative-position',
16+
attrs: { colspan: '100%' }
17+
}, this.__getProgress(h))
18+
])
19+
)
20+
}
1921

2022
return h('thead', child)
2123
},

0 commit comments

Comments
 (0)