Skip to content

Commit 18365e0

Browse files
nekosaurjohnleider
nekosaur
authored and
johnleider
committed
fix(VDataTable): change page when items length decreases (#9634)
closes #9010
1 parent 5f073b5 commit 18365e0

File tree

3 files changed

+216
-1
lines changed

3 files changed

+216
-1
lines changed

‎packages/vuetify/src/components/VData/VData.ts

+3-1
Original file line numberDiff line numberDiff line change
@@ -354,7 +354,9 @@ export default Vue.extend({
354354
paginateItems (items: any[]) {
355355
// Make sure we don't try to display non-existant page if items suddenly change
356356
// TODO: Could possibly move this to pageStart/pageStop?
357-
if (items.length < this.pageStart) this.internalOptions.page = 1
357+
if (this.serverItemsLength === -1 && items.length <= this.pageStart) {
358+
this.internalOptions.page = Math.max(1, this.internalOptions.page - 1)
359+
}
358360

359361
return items.slice(this.pageStart, this.pageStop)
360362
},

‎packages/vuetify/src/components/VDataTable/__tests__/VDataTable.spec.ts

+26
Original file line numberDiff line numberDiff line change
@@ -556,4 +556,30 @@ describe('VDataTable.ts', () => {
556556

557557
expect(itemsPerPage).not.toHaveBeenCalled()
558558
})
559+
560+
// https://github.com/vuetifyjs/vuetify/issues/9010
561+
it('should change page if item count decreases below page start', async () => {
562+
const page = jest.fn()
563+
const wrapper = mountFunction({
564+
propsData: {
565+
headers: testHeaders,
566+
items: testItems.slice(0, 4),
567+
itemsPerPage: 2,
568+
footerProps: {
569+
itemsPerPageOptions: [2],
570+
},
571+
page: 2,
572+
},
573+
listeners: {
574+
'update:page': page,
575+
},
576+
})
577+
578+
expect(wrapper.html()).toMatchSnapshot()
579+
580+
wrapper.setProps({ items: testItems.slice(0, 2) })
581+
await wrapper.vm.$nextTick()
582+
583+
expect(page).toHaveBeenCalledWith(1)
584+
})
559585
})

‎packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/VDataTable.spec.ts.snap

+187
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,192 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3+
exports[`VDataTable.ts should change page if item count decreases below page start 1`] = `
4+
<div class="v-data-table theme--light">
5+
<div class="v-data-table__wrapper">
6+
<table>
7+
<colgroup>
8+
<col class>
9+
<col class>
10+
<col class>
11+
<col class>
12+
<col class>
13+
<col class>
14+
</colgroup>
15+
<thead class="v-data-table-header">
16+
<tr>
17+
<th role="columnheader"
18+
scope="col"
19+
aria-label="Dessert (100g serving)"
20+
aria-sort="none"
21+
class="text-left"
22+
>
23+
<span>
24+
Dessert (100g serving)
25+
</span>
26+
</th>
27+
<th role="columnheader"
28+
scope="col"
29+
aria-label="Calories: Not sorted. Activate to sort ascending."
30+
aria-sort="none"
31+
class="text-start sortable"
32+
>
33+
<span>
34+
Calories
35+
</span>
36+
<i aria-hidden="true"
37+
class="v-icon notranslate v-data-table-header__icon material-icons theme--light"
38+
style="font-size: 18px;"
39+
>
40+
$sort
41+
</i>
42+
</th>
43+
<th role="columnheader"
44+
scope="col"
45+
aria-label="Fat (g): Not sorted. Activate to sort ascending."
46+
aria-sort="none"
47+
class="text-start sortable"
48+
>
49+
<span>
50+
Fat (g)
51+
</span>
52+
<i aria-hidden="true"
53+
class="v-icon notranslate v-data-table-header__icon material-icons theme--light"
54+
style="font-size: 18px;"
55+
>
56+
$sort
57+
</i>
58+
</th>
59+
<th role="columnheader"
60+
scope="col"
61+
aria-label="Carbs (g): Not sorted. Activate to sort ascending."
62+
aria-sort="none"
63+
class="text-start sortable"
64+
>
65+
<span>
66+
Carbs (g)
67+
</span>
68+
<i aria-hidden="true"
69+
class="v-icon notranslate v-data-table-header__icon material-icons theme--light"
70+
style="font-size: 18px;"
71+
>
72+
$sort
73+
</i>
74+
</th>
75+
<th role="columnheader"
76+
scope="col"
77+
aria-label="Protein (g): Not sorted. Activate to sort ascending."
78+
aria-sort="none"
79+
class="text-start sortable"
80+
>
81+
<span>
82+
Protein (g)
83+
</span>
84+
<i aria-hidden="true"
85+
class="v-icon notranslate v-data-table-header__icon material-icons theme--light"
86+
style="font-size: 18px;"
87+
>
88+
$sort
89+
</i>
90+
</th>
91+
<th role="columnheader"
92+
scope="col"
93+
aria-label="Iron (%): Not sorted. Activate to sort ascending."
94+
aria-sort="none"
95+
class="text-start sortable"
96+
>
97+
<span>
98+
Iron (%)
99+
</span>
100+
<i aria-hidden="true"
101+
class="v-icon notranslate v-data-table-header__icon material-icons theme--light"
102+
style="font-size: 18px;"
103+
>
104+
$sort
105+
</i>
106+
</th>
107+
</tr>
108+
</thead>
109+
<tbody>
110+
<tr class>
111+
<td class="text-left">
112+
Eclair
113+
</td>
114+
<td class="text-start">
115+
262
116+
</td>
117+
<td class="text-start">
118+
16
119+
</td>
120+
<td class="text-start">
121+
23
122+
</td>
123+
<td class="text-start">
124+
6
125+
</td>
126+
<td class="text-start">
127+
7%
128+
</td>
129+
</tr>
130+
<tr class>
131+
<td class="text-left">
132+
Cupcake
133+
</td>
134+
<td class="text-start">
135+
305
136+
</td>
137+
<td class="text-start">
138+
3.7
139+
</td>
140+
<td class="text-start">
141+
67
142+
</td>
143+
<td class="text-start">
144+
4.3
145+
</td>
146+
<td class="text-start">
147+
8%
148+
</td>
149+
</tr>
150+
</tbody>
151+
</table>
152+
</div>
153+
<div class="v-data-footer">
154+
<div class="v-data-footer__pagination">
155+
3-4 of 4
156+
</div>
157+
<div class="v-data-footer__icons-before">
158+
<button type="button"
159+
class="v-btn v-btn--flat v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
160+
aria-label="Previous page"
161+
>
162+
<span class="v-btn__content">
163+
<i aria-hidden="true"
164+
class="v-icon notranslate material-icons theme--light"
165+
>
166+
$prev
167+
</i>
168+
</span>
169+
</button>
170+
</div>
171+
<div class="v-data-footer__icons-after">
172+
<button type="button"
173+
disabled="disabled"
174+
class="v-btn v-btn--disabled v-btn--flat v-btn--icon v-btn--round v-btn--text theme--light v-size--default"
175+
aria-label="Next page"
176+
>
177+
<span class="v-btn__content">
178+
<i aria-hidden="true"
179+
class="v-icon notranslate material-icons theme--light"
180+
>
181+
$next
182+
</i>
183+
</span>
184+
</button>
185+
</div>
186+
</div>
187+
</div>
188+
`;
189+
3190
exports[`VDataTable.ts should default to first option in itemsPerPageOptions if it does not include itemsPerPage 1`] = `
4191
<div class="v-data-table theme--light">
5192
<div class="v-data-table__wrapper">

0 commit comments

Comments
 (0)