refactor(VTable): tuning pass (#15186)

* refactor(VTable): tuning pass

* test(VTable): update baseline cypress structure

* docs(VTable): update page structure

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

@@ -1,6 +1,6 @@
 ---
 meta:
-  title: Table component
+  title: Table
   description: The table component is a lightweight wrapper around the table element that provides a Material Design feel without all the baggage.
   keywords: table, simple table, vuetify table component, vue simple table component, table component
 nav: 'Tables'
@@ -14,12 +14,16 @@ related:
 
 The `v-table` component is a simple wrapper component around the `<table>` element. Inside the component you can use all the regular table elements such as `<thead>`, `<tbody>`, `<tr>`, etc.
 
-<entry />
+![Table Entry](https://cdn.vuetifyjs.com/docs/images/components-temp/v-table/v-table-entry.png)
+
+---
 
 ## Usage
 
 <example file="v-table/usage" />
 
+<entry />
+
 ## API
 
 <api-inline />

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

@@ -2,12 +2,12 @@
 import './VTable.sass'
 
 // Composables
+import { makeDensityProps, useDensity } from '@/composables/density'
 import { makeTagProps } from '@/composables/tag'
 import { makeThemeProps, provideTheme } from '@/composables/theme'
 
 // Utilities
-import { convertToUnit, defineComponent } from '@/util'
-import { makeDensityProps, useDensity } from '@/composables/density'
+import { convertToUnit, defineComponent, useRender } from '@/util'
 
 export const VTable = defineComponent({
   name: 'VTable',
@@ -18,15 +18,15 @@ export const VTable = defineComponent({
     height: [Number, String],
 
     ...makeDensityProps(),
-    ...makeThemeProps(),
     ...makeTagProps(),
+    ...makeThemeProps(),
   },
 
   setup (props, { slots }) {
     const { themeClasses } = provideTheme(props)
     const { densityClasses } = useDensity(props)
 
-    return () => (
+    useRender(() => (
       <props.tag
         class={[
           'v-table',
@@ -49,13 +49,15 @@ export const VTable = defineComponent({
             style={{ height: convertToUnit(props.height) }}
           >
             <table>
-              { slots.default?.() }
+              { slots.default() }
             </table>
           </div>
         ) }
 
         { slots.bottom?.() }
       </props.tag>
-    )
+    ))
+
+    return {}
   },
 })

packages/vuetify/src/components/VTable/__tests__/VTable.spec.cy.tsx

@@ -0,0 +1,14 @@
+/// <reference types="../../../../types/cypress" />
+
+import { VTable } from '..'
+import { generate } from '@/../cypress/templates'
+
+const props = {}
+
+const stories = {
+  Default: <VTable />,
+}
+// Tests
+describe('VTable', () => {
+  generate({ stories, props, component: VTable })
+})

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

@@ -3,6 +3,7 @@
 @use '../../styles/settings';
 @use '../../styles/tools';
 
+// VTable
 $table-background: rgb(var(--v-theme-surface)) !default;
 $table-color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !default;
 $table-density: ('default': 0, 'comfortable': -2, 'compact': -4) !default;
@@ -15,6 +16,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;
 
+// Lists
 $table-theme: (
   $table-background,
   $table-color,