Skip to content

Commit

Permalink
refactor(VDataTable): disable virtual-rows
Browse files Browse the repository at this point in the history 
has issues that could not be resolved before v2 release

BREAKING CHANGE: the virtual-rows prop (from alpha/beta) will no longer work
  • Loading branch information
@johnleider
johnleider committed Jul 20, 2019
1 parent 96d9682 commit 8284ef5
Show file tree
Hide file tree
Showing 5 changed files with 41 additions and 44 deletions.
1 change: 0 additions & 1 deletion packages/docs/src/data/pages/components/DataTables.json
View file
Expand Up @@ -40,7 +40,6 @@
"simple/multi-sort",
"simple/search",
"simple/headerless",
"simple/virtualized",
"simple/loading",
"simple/dense",
"simple/footer-props",
Expand Down
3 changes: 0 additions & 3 deletions packages/docs/src/examples/data-tables/playground.vue
View file
Expand Up @@ -3,7 +3,6 @@
<v-layout row wrap justify-space-around>
<v-switch v-model="dense" class="mx-2" label="Dense"></v-switch>
<v-switch v-model="loading" class="mx-2" label="Loading"></v-switch>
<v-switch v-model="virtualRows" class="mx-2" label="Virtual rows"></v-switch>
<v-switch v-model="disableSort" class="mx-2" label="Disable sort"></v-switch>
<v-switch v-model="disablePagination" class="mx-2" label="Disable pagination"></v-switch>
<v-switch v-model="disableFiltering" class="mx-2" label="Disable filtering"></v-switch>
Expand Down Expand Up @@ -43,7 +42,6 @@
:items="desserts"
:dense="dense"
:loading="loading"
:virtual-rows="virtualRows"
:disable-sort="disableSort"
:disable-pagination="disablePagination"
:disable-filtering="disableFiltering"
Expand All @@ -68,7 +66,6 @@
dense: false,
height: 300,
loading: false,
virtualRows: false,
disableSort: false,
disablePagination: false,
disableFiltering: false,
Expand Down
39 changes: 20 additions & 19 deletions packages/vuetify/src/components/VDataTable/VDataTable.ts
View file
Expand Up @@ -11,7 +11,7 @@ import { VData } from '../VData'
import { VDataFooter, VDataIterator } from '../VDataIterator'
import VBtn from '../VBtn'
import VDataTableHeader from './VDataTableHeader'
import VVirtualTable from './VVirtualTable'
// import VVirtualTable from './VVirtualTable'
import VIcon from '../VIcon'
import VProgressLinear from '../VProgressLinear'
import Row from './Row'
Expand Down Expand Up @@ -68,7 +68,8 @@ export default VDataIterator.extend({
showSelect: Boolean,
showExpand: Boolean,
showGroupBy: Boolean,
virtualRows: Boolean,
// TODO: Fix
// virtualRows: Boolean,
mobileBreakpoint: {
type: Number,
default: 600,
Expand Down Expand Up @@ -483,23 +484,23 @@ export default VDataIterator.extend({
dense: this.dense,
}

if (this.virtualRows) {
return this.$createElement(VVirtualTable, {
props: Object.assign(simpleProps, {
items: props.items,
height: this.height,
rowHeight: this.dense ? 24 : 48,
headerHeight: this.dense ? 32 : 48,
// TODO: expose rest of props from virtual table?
}),
scopedSlots: {
items: ({ items }) => this.genItems(items, props) as any,
},
}, [
this.proxySlot('body.before', [this.genCaption(props), this.genHeaders(props)]),
this.proxySlot('bottom', this.genFooters(props)),
])
}
// if (this.virtualRows) {
// return this.$createElement(VVirtualTable, {
// props: Object.assign(simpleProps, {
// items: props.items,
// height: this.height,
// rowHeight: this.dense ? 24 : 48,
// headerHeight: this.dense ? 32 : 48,
// // TODO: expose rest of props from virtual table?
// }),
// scopedSlots: {
// items: ({ items }) => this.genItems(items, props) as any,
// },
// }, [
// this.proxySlot('body.before', [this.genCaption(props), this.genHeaders(props)]),
// this.proxySlot('bottom', this.genFooters(props)),
// ])
// }

return this.$createElement(VSimpleTable, {
props: simpleProps,
Expand Down
2 changes: 1 addition & 1 deletion packages/vuetify/src/components/VDataTable/__tests__/VDataTable.spec.ts
View file
Expand Up @@ -170,7 +170,7 @@ describe('VDataTable.ts', () => {
expect(wrapper.html()).toMatchSnapshot()
})

it('should render virtual table', () => {
it.skip('should render virtual table', () => {
const wrapper = mountFunction({
propsData: {
headers: testHeaders,
Expand Down
40 changes: 20 additions & 20 deletions packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/VDataTable.spec.ts.snap
View file
Expand Up @@ -156,7 +156,7 @@ exports[`VDataTable.ts should render loading state 1`] = `
<div role="button"
aria-haspopup="listbox"
aria-expanded="false"
aria-owns="list-276"
aria-owns="list-256"
class="v-input__slot"
>
<div class="v-select__slot">
Expand All @@ -165,7 +165,7 @@ exports[`VDataTable.ts should render loading state 1`] = `
10
</div>
<input aria-label="$vuetify.dataTable.itemsPerPageText"
id="input-276"
id="input-256"
readonly="readonly"
type="text"
aria-readonly="true"
Expand Down Expand Up @@ -364,7 +364,7 @@ exports[`VDataTable.ts should render loading state 2`] = `
<div role="button"
aria-haspopup="listbox"
aria-expanded="false"
aria-owns="list-296"
aria-owns="list-276"
class="v-input__slot"
>
<div class="v-select__slot">
Expand All @@ -373,7 +373,7 @@ exports[`VDataTable.ts should render loading state 2`] = `
10
</div>
<input aria-label="$vuetify.dataTable.itemsPerPageText"
id="input-296"
id="input-276"
readonly="readonly"
type="text"
aria-readonly="true"
Expand Down Expand Up @@ -1323,7 +1323,7 @@ exports[`VDataTable.ts should render with group scoped slot 1`] = `
<div role="button"
aria-haspopup="listbox"
aria-expanded="false"
aria-owns="list-259"
aria-owns="list-239"
class="v-input__slot"
>
<div class="v-select__slot">
Expand All @@ -1332,7 +1332,7 @@ exports[`VDataTable.ts should render with group scoped slot 1`] = `
5
</div>
<input aria-label="$vuetify.dataTable.itemsPerPageText"
id="input-259"
id="input-239"
readonly="readonly"
type="text"
aria-readonly="true"
Expand Down Expand Up @@ -1752,7 +1752,7 @@ exports[`VDataTable.ts should render with group.summary scoped slot 1`] = `
<div role="button"
aria-haspopup="listbox"
aria-expanded="false"
aria-owns="list-181"
aria-owns="list-161"
class="v-input__slot"
>
<div class="v-select__slot">
Expand All @@ -1761,7 +1761,7 @@ exports[`VDataTable.ts should render with group.summary scoped slot 1`] = `
5
</div>
<input aria-label="$vuetify.dataTable.itemsPerPageText"
id="input-181"
id="input-161"
readonly="readonly"
type="text"
aria-readonly="true"
Expand Down Expand Up @@ -2127,7 +2127,7 @@ exports[`VDataTable.ts should render with grouped rows 1`] = `
<div role="button"
aria-haspopup="listbox"
aria-expanded="false"
aria-owns="list-238"
aria-owns="list-218"
class="v-input__slot"
>
<div class="v-select__slot">
Expand All @@ -2136,7 +2136,7 @@ exports[`VDataTable.ts should render with grouped rows 1`] = `
5
</div>
<input aria-label="$vuetify.dataTable.itemsPerPageText"
id="input-238"
id="input-218"
readonly="readonly"
type="text"
aria-readonly="true"
Expand Down Expand Up @@ -2333,7 +2333,7 @@ exports[`VDataTable.ts should render with item scoped slot 1`] = `
<div role="button"
aria-haspopup="listbox"
aria-expanded="false"
aria-owns="list-203"
aria-owns="list-183"
class="v-input__slot"
>
<div class="v-select__slot">
Expand All @@ -2342,7 +2342,7 @@ exports[`VDataTable.ts should render with item scoped slot 1`] = `
5
</div>
<input aria-label="$vuetify.dataTable.itemsPerPageText"
id="input-203"
id="input-183"
readonly="readonly"
type="text"
aria-readonly="true"
Expand Down Expand Up @@ -2649,7 +2649,7 @@ exports[`VDataTable.ts should render with item.expanded scoped slot 1`] = `
<div role="button"
aria-haspopup="listbox"
aria-expanded="false"
aria-owns="list-140"
aria-owns="list-120"
class="v-input__slot"
>
<div class="v-select__slot">
Expand All @@ -2658,7 +2658,7 @@ exports[`VDataTable.ts should render with item.expanded scoped slot 1`] = `
5
</div>
<input aria-label="$vuetify.dataTable.itemsPerPageText"
id="input-140"
id="input-120"
readonly="readonly"
type="text"
aria-readonly="true"
Expand Down Expand Up @@ -2988,7 +2988,7 @@ exports[`VDataTable.ts should render with showExpand 1`] = `
<div role="button"
aria-haspopup="listbox"
aria-expanded="false"
aria-owns="list-92"
aria-owns="list-72"
class="v-input__slot"
>
<div class="v-select__slot">
Expand All @@ -2997,7 +2997,7 @@ exports[`VDataTable.ts should render with showExpand 1`] = `
5
</div>
<input aria-label="$vuetify.dataTable.itemsPerPageText"
id="input-92"
id="input-72"
readonly="readonly"
type="text"
aria-readonly="true"
Expand Down Expand Up @@ -3327,7 +3327,7 @@ exports[`VDataTable.ts should render with showExpand 2`] = `
<div role="button"
aria-haspopup="listbox"
aria-expanded="false"
aria-owns="list-92"
aria-owns="list-72"
class="v-input__slot"
>
<div class="v-select__slot">
Expand All @@ -3336,7 +3336,7 @@ exports[`VDataTable.ts should render with showExpand 2`] = `
5
</div>
<input aria-label="$vuetify.dataTable.itemsPerPageText"
id="input-92"
id="input-72"
readonly="readonly"
type="text"
aria-readonly="true"
Expand Down Expand Up @@ -3693,7 +3693,7 @@ exports[`VDataTable.ts should render with showSelect 1`] = `
<div role="button"
aria-haspopup="listbox"
aria-expanded="false"
aria-owns="list-118"
aria-owns="list-98"
class="v-input__slot"
>
<div class="v-select__slot">
Expand All @@ -3702,7 +3702,7 @@ exports[`VDataTable.ts should render with showSelect 1`] = `
5
</div>
<input aria-label="$vuetify.dataTable.itemsPerPageText"
id="input-118"
id="input-98"
readonly="readonly"
type="text"
aria-readonly="true"
Expand Down

0 comments on commit 8284ef5

Please sign in to comment.