Skip to content

Commit

Permalink
fix(VDataTable): display as flex column on mobile
Browse files Browse the repository at this point in the history 
fixes #11337
  • Loading branch information
@KaelWD
KaelWD committed Jun 23, 2021
1 parent 6589ed8 commit 4cc80ca
Show file tree
Hide file tree
Showing 3 changed files with 47 additions and 39 deletions.
5 changes: 5 additions & 0 deletions packages/vuetify/src/components/VDataTable/VDataTable.sass
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,11 @@
.v-data-table
border-radius: $data-table-border-radius

&--mobile
> .v-data-table__wrapper tbody
display: flex
flex-direction: column

> .v-data-table__wrapper
tbody
tr
Expand Down
3 changes: 3 additions & 0 deletions packages/vuetify/src/components/VDataTable/VDataTable.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -595,6 +595,9 @@ export default mixins(

return this.$createElement(VSimpleTable, {
props: simpleProps,
class: {
'v-data-table--mobile': this.isMobile,
},
}, [
this.proxySlot('top', getSlot(this, 'top', {
...props,
Expand Down
78 changes: 39 additions & 39 deletions packages/vuetify/src/components/VDataTable/__tests__/__snapshots__/VDataTable.spec.ts.snap
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`VDataTable.ts should apply class from item to rows 1`] = `
<div class="v-data-table v-data-table--has-bottom theme--light">
<div class="v-data-table v-data-table--has-bottom theme--light v-data-table--mobile">
<div class="v-data-table__wrapper">
<table>
<colgroup>
Expand Down Expand Up @@ -393,7 +393,7 @@ exports[`VDataTable.ts should apply class from item to rows 1`] = `
`;

exports[`VDataTable.ts should apply class function to rows 1`] = `
<div class="v-data-table v-data-table--has-bottom theme--light">
<div class="v-data-table v-data-table--has-bottom theme--light v-data-table--mobile">
<div class="v-data-table__wrapper">
<table>
<colgroup>
Expand Down Expand Up @@ -785,7 +785,7 @@ exports[`VDataTable.ts should apply class function to rows 1`] = `
`;

exports[`VDataTable.ts should apply class list to rows 1`] = `
<div class="v-data-table v-data-table--has-bottom theme--light">
<div class="v-data-table v-data-table--has-bottom theme--light v-data-table--mobile">
<div class="v-data-table__wrapper">
<table>
<colgroup>
Expand Down Expand Up @@ -1177,7 +1177,7 @@ exports[`VDataTable.ts should apply class list to rows 1`] = `
`;

exports[`VDataTable.ts should apply class unique to rows 1`] = `
<div class="v-data-table v-data-table--has-bottom theme--light">
<div class="v-data-table v-data-table--has-bottom theme--light v-data-table--mobile">
<div class="v-data-table__wrapper">
<table>
<colgroup>
Expand Down Expand Up @@ -1569,7 +1569,7 @@ exports[`VDataTable.ts should apply class unique to rows 1`] = `
`;

exports[`VDataTable.ts should change page if item count decreases below page start 1`] = `
<div class="v-data-table v-data-table--has-bottom theme--light">
<div class="v-data-table v-data-table--has-bottom theme--light v-data-table--mobile">
<div class="v-data-table__wrapper">
<table>
<colgroup>
Expand Down Expand Up @@ -1769,7 +1769,7 @@ exports[`VDataTable.ts should change page if item count decreases below page sta
`;

exports[`VDataTable.ts should default to first option in itemsPerPageOptions if it does not include itemsPerPage 1`] = `
<div class="v-data-table v-data-table--has-bottom theme--light">
<div class="v-data-table v-data-table--has-bottom theme--light v-data-table--mobile">
<div class="v-data-table__wrapper">
<table>
<colgroup>
Expand Down Expand Up @@ -2211,7 +2211,7 @@ exports[`VDataTable.ts should default to first option in itemsPerPageOptions if
`;

exports[`VDataTable.ts should handle object when checking if it should default to first option in itemsPerPageOptions 1`] = `
<div class="v-data-table v-data-table--has-bottom theme--light">
<div class="v-data-table v-data-table--has-bottom theme--light v-data-table--mobile">
<div class="v-data-table__wrapper">
<table>
<colgroup>
Expand Down Expand Up @@ -2854,7 +2854,7 @@ exports[`VDataTable.ts should handle object when checking if it should default t
`;

exports[`VDataTable.ts should hide group button when column is not groupable 1`] = `
<div class="v-data-table v-data-table--has-bottom theme--light">
<div class="v-data-table v-data-table--has-bottom theme--light v-data-table--mobile">
<div class="v-data-table__wrapper">
<table>
<colgroup>
Expand Down Expand Up @@ -3497,7 +3497,7 @@ exports[`VDataTable.ts should hide group button when column is not groupable 1`]
`;

exports[`VDataTable.ts should limit page to current page count if not using server-items-length 1`] = `
<div class="v-data-table v-data-table--has-bottom theme--light">
<div class="v-data-table v-data-table--has-bottom theme--light v-data-table--mobile">
<div class="v-data-table__wrapper">
<table>
<colgroup>
Expand Down Expand Up @@ -3889,7 +3889,7 @@ exports[`VDataTable.ts should limit page to current page count if not using serv
`;

exports[`VDataTable.ts should not limit page to current item count when using server-items-length 1`] = `
<div class="v-data-table v-data-table--has-bottom theme--light">
<div class="v-data-table v-data-table--has-bottom theme--light v-data-table--mobile">
<div class="v-data-table__wrapper">
<table>
<colgroup>
Expand Down Expand Up @@ -4036,7 +4036,7 @@ exports[`VDataTable.ts should not limit page to current item count when using se
`;

exports[`VDataTable.ts should not limit page to current item count when using server-items-length 2`] = `
<div class="v-data-table v-data-table--has-bottom theme--light">
<div class="v-data-table v-data-table--has-bottom theme--light v-data-table--mobile">
<div class="v-data-table__wrapper">
<table>
<colgroup>
Expand Down Expand Up @@ -4427,7 +4427,7 @@ exports[`VDataTable.ts should not limit page to current item count when using se
`;

exports[`VDataTable.ts should not search column with filterable set to false 1`] = `
<div class="v-data-table v-data-table--has-bottom theme--light">
<div class="v-data-table v-data-table--has-bottom theme--light v-data-table--mobile">
<div class="v-data-table__wrapper">
<table>
<colgroup>
Expand Down Expand Up @@ -5070,7 +5070,7 @@ exports[`VDataTable.ts should not search column with filterable set to false 1`]
`;

exports[`VDataTable.ts should not search column with filterable set to false 2`] = `
<div class="v-data-table v-data-table--has-bottom theme--light">
<div class="v-data-table v-data-table--has-bottom theme--light v-data-table--mobile">
<div class="v-data-table__wrapper">
<table>
<colgroup>
Expand Down Expand Up @@ -5218,7 +5218,7 @@ exports[`VDataTable.ts should not search column with filterable set to false 2`]
`;

exports[`VDataTable.ts should not search column with filterable set to false and has filter function 1`] = `
<div class="v-data-table v-data-table--has-bottom theme--light">
<div class="v-data-table v-data-table--has-bottom theme--light v-data-table--mobile">
<div class="v-data-table__wrapper">
<table>
<colgroup>
Expand Down Expand Up @@ -5511,7 +5511,7 @@ exports[`VDataTable.ts should not search column with filterable set to false and
`;

exports[`VDataTable.ts should not search column with filterable set to false and has filter function 2`] = `
<div class="v-data-table v-data-table--has-bottom theme--light">
<div class="v-data-table v-data-table--has-bottom theme--light v-data-table--mobile">
<div class="v-data-table__wrapper">
<table>
<colgroup>
Expand Down Expand Up @@ -6154,7 +6154,7 @@ exports[`VDataTable.ts should not search column with filterable set to false and
`;

exports[`VDataTable.ts should not select item that is not selectable 1`] = `
<div class="v-data-table v-data-table--has-bottom theme--light">
<div class="v-data-table v-data-table--has-bottom theme--light v-data-table--mobile">
<div class="v-data-table__wrapper">
<table>
<colgroup>
Expand Down Expand Up @@ -6445,7 +6445,7 @@ exports[`VDataTable.ts should not select item that is not selectable 1`] = `
`;

exports[`VDataTable.ts should pass kebab-case footer props correctly 1`] = `
<div class="v-data-table v-data-table--has-bottom theme--light">
<div class="v-data-table v-data-table--has-bottom theme--light v-data-table--mobile">
<div class="v-data-table__wrapper">
<table>
<colgroup>
Expand Down Expand Up @@ -6548,7 +6548,7 @@ exports[`VDataTable.ts should pass kebab-case footer props correctly 1`] = `
`;

exports[`VDataTable.ts should render 1`] = `
<div class="v-data-table v-data-table--has-bottom theme--light">
<div class="v-data-table v-data-table--has-bottom theme--light v-data-table--mobile">
<div class="v-data-table__wrapper">
<table>
<colgroup>
Expand Down Expand Up @@ -6651,7 +6651,7 @@ exports[`VDataTable.ts should render 1`] = `
`;

exports[`VDataTable.ts should render footer.page-text slot content 1`] = `
<div class="v-data-table v-data-table--has-bottom theme--light">
<div class="v-data-table v-data-table--has-bottom theme--light v-data-table--mobile">
<div class="v-data-table__wrapper">
<table>
<colgroup>
Expand Down Expand Up @@ -6753,7 +6753,7 @@ exports[`VDataTable.ts should render footer.page-text slot content 1`] = `
`;

exports[`VDataTable.ts should render footer.prepend slot content 1`] = `
<div class="v-data-table v-data-table--has-bottom theme--light">
<div class="v-data-table v-data-table--has-bottom theme--light v-data-table--mobile">
<div class="v-data-table__wrapper">
<table>
<colgroup>
Expand Down Expand Up @@ -6856,7 +6856,7 @@ exports[`VDataTable.ts should render footer.prepend slot content 1`] = `
`;

exports[`VDataTable.ts should render item slot when using group-by function 1`] = `
<div class="v-data-table v-data-table--has-bottom theme--light">
<div class="v-data-table v-data-table--has-bottom theme--light v-data-table--mobile">
<div class="v-data-table__wrapper">
<table>
<colgroup>
Expand Down Expand Up @@ -7058,7 +7058,7 @@ exports[`VDataTable.ts should render item slot when using group-by function 1`]
`;

exports[`VDataTable.ts should render loading state 1`] = `
<div class="v-data-table v-data-table--has-bottom theme--light">
<div class="v-data-table v-data-table--has-bottom theme--light v-data-table--mobile">
<div class="v-data-table__wrapper">
<table>
<colgroup>
Expand Down Expand Up @@ -7186,7 +7186,7 @@ exports[`VDataTable.ts should render loading state 1`] = `
`;

exports[`VDataTable.ts should render loading state 2`] = `
<div class="v-data-table v-data-table--has-bottom theme--light">
<div class="v-data-table v-data-table--has-bottom theme--light v-data-table--mobile">
<div class="v-data-table__wrapper">
<table>
<colgroup>
Expand Down Expand Up @@ -7343,7 +7343,7 @@ exports[`VDataTable.ts should render loading state 2`] = `
`;

exports[`VDataTable.ts should render with body slot 1`] = `
<div class="v-data-table v-data-table--has-bottom theme--light">
<div class="v-data-table v-data-table--has-bottom theme--light v-data-table--mobile">
<div class="v-data-table__wrapper">
<table>
<colgroup>
Expand Down Expand Up @@ -7486,7 +7486,7 @@ exports[`VDataTable.ts should render with body slot 1`] = `
`;

exports[`VDataTable.ts should render with data 1`] = `
<div class="v-data-table v-data-table--has-bottom theme--light">
<div class="v-data-table v-data-table--has-bottom theme--light v-data-table--mobile">
<div class="v-data-table__wrapper">
<table>
<colgroup>
Expand Down Expand Up @@ -7878,7 +7878,7 @@ exports[`VDataTable.ts should render with data 1`] = `
`;

exports[`VDataTable.ts should render with foot slot 1`] = `
<div class="v-data-table v-data-table--has-bottom theme--light">
<div class="v-data-table v-data-table--has-bottom theme--light v-data-table--mobile">
<div class="v-data-table__wrapper">
<table>
<colgroup>
Expand Down Expand Up @@ -8273,7 +8273,7 @@ exports[`VDataTable.ts should render with foot slot 1`] = `
`;

exports[`VDataTable.ts should render with group scoped slot 1`] = `
<div class="v-data-table v-data-table--has-bottom theme--light">
<div class="v-data-table v-data-table--has-bottom theme--light v-data-table--mobile">
<div class="v-data-table__wrapper">
<table>
<colgroup>
Expand Down Expand Up @@ -8426,7 +8426,7 @@ exports[`VDataTable.ts should render with group scoped slot 1`] = `
`;

exports[`VDataTable.ts should render with group.summary scoped slot 1`] = `
<div class="v-data-table v-data-table--has-bottom theme--light">
<div class="v-data-table v-data-table--has-bottom theme--light v-data-table--mobile">
<div class="v-data-table__wrapper">
<table>
<colgroup>
Expand Down Expand Up @@ -8937,7 +8937,7 @@ exports[`VDataTable.ts should render with group.summary scoped slot 1`] = `
`;

exports[`VDataTable.ts should render with grouped rows 1`] = `
<div class="v-data-table v-data-table--has-bottom theme--light">
<div class="v-data-table v-data-table--has-bottom theme--light v-data-table--mobile">
<div class="v-data-table__wrapper">
<table>
<colgroup>
Expand Down Expand Up @@ -9396,7 +9396,7 @@ exports[`VDataTable.ts should render with grouped rows 1`] = `
`;

exports[`VDataTable.ts should render with item scoped slot 1`] = `
<div class="v-data-table v-data-table--has-bottom theme--light">
<div class="v-data-table v-data-table--has-bottom theme--light v-data-table--mobile">
<div class="v-data-table__wrapper">
<table>
<colgroup>
Expand Down Expand Up @@ -9553,7 +9553,7 @@ exports[`VDataTable.ts should render with item scoped slot 1`] = `
`;

exports[`VDataTable.ts should render with item.expanded scoped slot 1`] = `
<div class="v-data-table v-data-table--has-bottom theme--light">
<div class="v-data-table v-data-table--has-bottom theme--light v-data-table--mobile">
<div class="v-data-table__wrapper">
<table>
<colgroup>
Expand Down Expand Up @@ -9970,7 +9970,7 @@ exports[`VDataTable.ts should render with item.expanded scoped slot 1`] = `
`;

exports[`VDataTable.ts should render with showExpand 1`] = `
<div class="v-data-table v-data-table--has-bottom theme--light">
<div class="v-data-table v-data-table--has-bottom theme--light v-data-table--mobile">
<div class="v-data-table__wrapper">
<table>
<colgroup>
Expand Down Expand Up @@ -10418,7 +10418,7 @@ exports[`VDataTable.ts should render with showExpand 1`] = `
`;

exports[`VDataTable.ts should render with showExpand 2`] = `
<div class="v-data-table v-data-table--has-bottom theme--light">
<div class="v-data-table v-data-table--has-bottom theme--light v-data-table--mobile">
<div class="v-data-table__wrapper">
<table>
<colgroup>
Expand Down Expand Up @@ -10866,7 +10866,7 @@ exports[`VDataTable.ts should render with showExpand 2`] = `
`;

exports[`VDataTable.ts should render with showSelect 1`] = `
<div class="v-data-table v-data-table--has-bottom theme--light">
<div class="v-data-table v-data-table--has-bottom theme--light v-data-table--mobile">
<div class="v-data-table__wrapper">
<table>
<colgroup>
Expand Down Expand Up @@ -11359,7 +11359,7 @@ exports[`VDataTable.ts should render with showSelect 1`] = `
`;

exports[`VDataTable.ts should respect mustSort property on options 1`] = `
<div class="v-data-table v-data-table--has-bottom theme--light">
<div class="v-data-table v-data-table--has-bottom theme--light v-data-table--mobile">
<div class="v-data-table__wrapper">
<table>
<colgroup>
Expand Down Expand Up @@ -11597,7 +11597,7 @@ exports[`VDataTable.ts should respect mustSort property on options 1`] = `
`;

exports[`VDataTable.ts should search group-by column 1`] = `
<div class="v-data-table v-data-table--has-bottom theme--light">
<div class="v-data-table v-data-table--has-bottom theme--light v-data-table--mobile">
<div class="v-data-table__wrapper">
<table>
<colgroup>
Expand Down Expand Up @@ -11809,7 +11809,7 @@ exports[`VDataTable.ts should search group-by column 1`] = `
`;

exports[`VDataTable.ts should search group-by column 2`] = `
<div class="v-data-table v-data-table--has-bottom theme--light">
<div class="v-data-table v-data-table--has-bottom theme--light v-data-table--mobile">
<div class="v-data-table__wrapper">
<table>
<colgroup>
Expand Down Expand Up @@ -11984,7 +11984,7 @@ exports[`VDataTable.ts should search group-by column 2`] = `
`;

exports[`VDataTable.ts should show correct aria-labels when sorting 1`] = `
<div class="v-data-table v-data-table--has-bottom theme--light">
<div class="v-data-table v-data-table--has-bottom theme--light v-data-table--mobile">
<div class="v-data-table__wrapper">
<table>
<colgroup>
Expand Down Expand Up @@ -12392,7 +12392,7 @@ exports[`VDataTable.ts should show correct aria-labels when sorting 1`] = `
`;

exports[`VDataTable.ts should show correct aria-labels when sorting 2`] = `
<div class="v-data-table v-data-table--has-bottom theme--light">
<div class="v-data-table v-data-table--has-bottom theme--light v-data-table--mobile">
<div class="v-data-table__wrapper">
<table>
<colgroup>
Expand Down

0 comments on commit 4cc80ca

Please sign in to comment.