feat(VTable): add striped prop (#19735)

Author: MajesticPotatoe

packages/api-generator/src/locale/en/VTable.json

@@ -3,7 +3,8 @@
     "fixedFooter": "Use the fixed-footer prop together with the height prop to fix the footer to the bottom of the table.",
     "fixedHeader": "Use the fixed-header prop together with the height prop to fix the header to the top of the table.",
     "height": "Use the height prop to set the height of the table.",
-    "hover": "Will add a hover effect to a table's row when the mouse is over it."
+    "hover": "Will add a hover effect to a table's row when the mouse is over it.",
+    "striped": "Applies a background to either **even** or **odd** rows."
   },
   "slots": {
     "bottom": "Slot to add content below the table.",

packages/docs/src/examples/v-table/prop-striped.vue

@@ -0,0 +1,121 @@
+<template>
+  <v-table striped="even">
+    <thead>
+      <tr>
+        <th class="text-left">
+          Name
+        </th>
+        <th class="text-left">
+          Calories
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr
+        v-for="item in desserts"
+        :key="item.name"
+      >
+        <td>{{ item.name }}</td>
+        <td>{{ item.calories }}</td>
+      </tr>
+    </tbody>
+  </v-table>
+</template>
+
+<script setup>
+  import { ref } from 'vue'
+
+  const desserts = ref([
+    {
+      name: 'Frozen Yogurt',
+      calories: 159,
+    },
+    {
+      name: 'Ice cream sandwich',
+      calories: 237,
+    },
+    {
+      name: 'Eclair',
+      calories: 262,
+    },
+    {
+      name: 'Cupcake',
+      calories: 305,
+    },
+    {
+      name: 'Gingerbread',
+      calories: 356,
+    },
+    {
+      name: 'Jelly bean',
+      calories: 375,
+    },
+    {
+      name: 'Lollipop',
+      calories: 392,
+    },
+    {
+      name: 'Honeycomb',
+      calories: 408,
+    },
+    {
+      name: 'Donut',
+      calories: 452,
+    },
+    {
+      name: 'KitKat',
+      calories: 518,
+    },
+  ])
+</script>
+
+<script>
+  export default {
+    data () {
+      return {
+        desserts: [
+          {
+            name: 'Frozen Yogurt',
+            calories: 159,
+          },
+          {
+            name: 'Ice cream sandwich',
+            calories: 237,
+          },
+          {
+            name: 'Eclair',
+            calories: 262,
+          },
+          {
+            name: 'Cupcake',
+            calories: 305,
+          },
+          {
+            name: 'Gingerbread',
+            calories: 356,
+          },
+          {
+            name: 'Jelly bean',
+            calories: 375,
+          },
+          {
+            name: 'Lollipop',
+            calories: 392,
+          },
+          {
+            name: 'Honeycomb',
+            calories: 408,
+          },
+          {
+            name: 'Donut',
+            calories: 452,
+          },
+          {
+            name: 'KitKat',
+            calories: 518,
+          },
+        ],
+      }
+    },
+  }
+</script>

packages/docs/src/pages/en/components/tables.md

@@ -66,3 +66,9 @@ Use the **height** prop to set the height of the table.
 Use the **fixed-header** prop together with the **height** prop to fix the header to the top of the table.
 
 <ExamplesExample file="v-table/prop-fixed-header" />
+
+#### Striped
+
+By applying the **striped** prop, you can have a background applied to either the **even** or **odd** rows of the table. Color can be further adjusted using sass variables.
+
+<ExamplesExample file="v-table/prop-striped" />

packages/vuetify/src/components/VTable/VTable.sass

@@ -48,6 +48,20 @@
                 background: $table-hover-color
                 pointer-events: none
                 @include tools.absolute(true)
+    
+    &.v-table--striped-even
+      > .v-table__wrapper
+        > table
+          > tbody
+            > tr:nth-child(even)
+              background-color: $table-stripe-color
+    
+    &.v-table--striped-odd
+      > .v-table__wrapper
+        > table
+          > tbody
+            > tr:nth-child(odd)
+              background-color: $table-stripe-color
 
     &.v-table--fixed-header
       > .v-table__wrapper

packages/vuetify/src/components/VTable/VTable.tsx

@@ -10,18 +10,28 @@ import { makeThemeProps, provideTheme } from '@/composables/theme'
 // Utilities
 import { convertToUnit, genericComponent, propsFactory, useRender } from '@/util'
 
+// Types
+import type { PropType } from 'vue'
+
 export type VTableSlots = {
   default: never
   top: never
   bottom: never
   wrapper: never
 }
 
+export type Striped = null | 'odd' | 'even'
+
 export const makeVTableProps = propsFactory({
   fixedHeader: Boolean,
   fixedFooter: Boolean,
   height: [Number, String],
   hover: Boolean,
+  striped: {
+    type: String as PropType<Striped>,
+    default: null,
+    validator: (v: any) => ['even', 'odd'].includes(v),
+  },
 
   ...makeComponentProps(),
   ...makeDensityProps(),
@@ -49,6 +59,8 @@ export const VTable = genericComponent<VTableSlots>()({
             'v-table--has-top': !!slots.top,
             'v-table--has-bottom': !!slots.bottom,
             'v-table--hover': props.hover,
+            'v-table--striped-even': props.striped === 'even',
+            'v-table--striped-odd': props.striped === 'odd',
           },
           themeClasses.value,
           densityClasses.value,

packages/vuetify/src/components/VTable/_variables.scss

@@ -18,6 +18,7 @@ $table-border: thin solid $table-border-color !default;
 $table-hover-color: rgba(var(--v-border-color), var(--v-hover-opacity)) !default;
 $table-line-height: 1.5 !default;
 $table-column-padding: 0 16px !default;
+$table-stripe-color: rgba(var(--v-border-color), var(--v-hover-opacity)) !default;
 $table-transition-duration: 0.28s !default;
 $table-transition-property: box-shadow, opacity, background, height !default;
 $table-transition-timing-function: settings.$standard-easing !default;