feat(QTable): grid mode -- new props: card-container-class & card-container-style quasarframework#5449

Author: rstoenescu

ui/dev/components/components/data-table-part1.vue

@@ -238,6 +238,7 @@
         :selected.sync="selected"
         @selection="onSelection"
         :visible-columns="visibleColumns"
+        card-container-class="justify-center"
         row-key="name"
       >
         <template v-slot:top-right>

ui/src/components/table/QTable.js

@@ -92,6 +92,8 @@ export default Vue.extend({
     tableClass: [String, Array, Object],
     tableHeaderStyle: [String, Array, Object],
     tableHeaderClass: [String, Array, Object],
+    cardContainerClass: [String, Array, Object],
+    cardContainerStyle: [String, Array, Object],
     cardStyle: [String, Array, Object],
     cardClass: [String, Array, Object]
   },

ui/src/components/table/QTable.json

@@ -285,22 +285,45 @@
       "category": "style"
     },
 
+    "card-container-style": {
+      "type": [ "String", "Array", "Object" ],
+      "desc": "CSS style to apply to the cards container (when in grid mode)",
+      "examples": [
+        "background-color: #ff0000",
+        ":card-container-style=\"{ backgroundColor: '#ff0000' }\""
+      ],
+      "category": "style",
+      "addedIn": "v1.3.1"
+    },
+
+    "card-container-class": {
+      "type": [ "String", "Array", "Object" ],
+      "desc": "CSS classes to apply to the cards container (when in grid mode)",
+      "examples": [
+        "my-special-class",
+        "justify-center",
+        ":card-container-class=\"{ 'my-special-class': [Boolean condition] }\""
+      ],
+      "category": "style",
+      "addedIn": "v1.3.1"
+    },
+    
     "card-style": {
       "type": [ "String", "Array", "Object" ],
-      "desc": "CSS style to apply to the card",
+      "desc": "CSS style to apply to the card (when in grid mode)",
       "examples": [
         "background-color: #ff0000",
-        ":table-style=\"{ backgroundColor: '#ff0000' }\""
+        ":card-style=\"{ backgroundColor: '#ff0000' }\""
       ],
       "category": "style"
     },
 
     "card-class": {
       "type": [ "String", "Array", "Object" ],
-      "desc": "CSS classes to apply to the card",
+      "desc": "CSS classes to apply to the card (when in grid mode)",
       "examples": [
         "my-special-class",
-        ":table-class=\"{ 'my-special-class': [Boolean condition] }\""
+        ":card-class=\"{ 'my-special-class': [Boolean condition] }\""
       ],
       "category": "style"
     },

ui/src/components/table/QTable.sass

@@ -238,16 +238,12 @@ body.desktop .q-table tbody tr:hover td:before
 /*
  * On dark background
  */
-.q-table__card--dark
-  border-color: $separator-dark-color
+.q-table__card--dark, .q-table--dark
+  border-color: $table-dark-border-color
 
 .q-table--dark
-  border-color: $separator-dark-color
 
-  .q-table__bottom
-    border-top: 1px solid $table-dark-border-color
-
-  thead, tr, th, td
+  .q-table__bottom, thead, tr, th, td
     border-color: $table-dark-border-color
 
   tbody td
@@ -258,4 +254,4 @@ body.desktop .q-table tbody tr:hover td:before
 
   &.q-table--vertical-separator, &.q-table--cell-separator
     .q-table__top
-      border-bottom: 1px solid $table-dark-border-color
+      border-color: $table-dark-border-color

ui/src/components/table/QTable.styl

@@ -238,16 +238,12 @@ body.desktop .q-table tbody tr:hover td:before
 /*
  * On dark background
  */
-.q-table__card--dark
-  border-color $separator-dark-color
+.q-table__card--dark, .q-table--dark
+  border-color $table-dark-border-color
 
 .q-table--dark
-  border-color $separator-dark-color
 
-  .q-table__bottom
-    border-top 1px solid $table-dark-border-color
-
-  thead, tr, th, td
+  .q-table__bottom, thead, tr, th, td
     border-color $table-dark-border-color
 
   tbody td
@@ -258,4 +254,4 @@ body.desktop .q-table tbody tr:hover td:before
 
   &.q-table--vertical-separator, &.q-table--cell-separator
     .q-table__top
-      border-bottom 1px solid $table-dark-border-color
+      border-color $table-dark-border-color

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

@@ -57,7 +57,11 @@ export default {
           ])
         }
 
-      return h('div', { staticClass: 'row' }, this.computedRows.map(row => {
+      return h('div', {
+        staticClass: 'row',
+        class: this.cardContainerClass,
+        style: this.cardContainerStyle
+      }, this.computedRows.map(row => {
         const
           key = this.getRowKey(row),
           selected = this.isRowSelected(key)