Skip to main content

​
Usage

The VTable component is a wrapper for the standard HTML <table> element with Vuetify theming support. 
<template>
  <v-table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Calories</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Frozen Yogurt</td>
        <td>159</td>
      </tr>
      <tr>
        <td>Ice cream sandwich</td>
        <td>237</td>
      </tr>
    </tbody>
  </v-table>
</template>

​
Fixed Header

Create a table with a fixed header and scrollable body: 
<template>
  <v-table
    fixed-header
    height="300px"
  >
    <thead>
      <tr>
        <th>Name</th>
        <th>Calories</th>
      </tr>
    </thead>
    <tbody>
      <!-- table rows -->
    </tbody>
  </v-table>
</template>

​
Density

Adjust the row spacing with the density prop: 
<template>
  <v-table density="compact">
    <!-- table content -->
  </v-table>
</template>

​
Striped Rows

Alternate row colors for better readability: 
<template>
  <v-table striped="even">
    <!-- table content -->
  </v-table>
</template>

​
Hover Effect

Highlight rows on hover: 
<template>
  <v-table hover>
    <!-- table content -->
  </v-table>
</template>

​
Props

​
fixedHeader
boolean
default:"false"
Fixes the table header to the top while scrolling
​
fixedFooter
boolean
default:"false"
Fixes the table footer to the bottom while scrolling
​
height
string | number
Sets the height of the table. Required for fixed header/footer functionality
​
hover
boolean
default:"false"
Adds a hover effect to table rows
​
striped
'even' | 'odd'
Applies striped background to alternating rows. Use ‘even’ or ‘odd’ to specify which rows
​
density
'default' | 'comfortable' | 'compact'
default:"default"
Adjusts the vertical spacing within the table
​
theme
string
Specify a theme for this component and all of its children
​
tag
string
default:"div"
Specify a custom tag used on the root element

​
Slots

​
default
slot
The default slot for table content (wraps in table element automatically)
​
top
slot
Slot for content above the table
​
bottom
slot
Slot for content below the table
​
wrapper
slot
Slot to replace the default table wrapper. Use this for complete control over the table structure
When using fixedHeader or fixedFooter, you must also specify the height prop for proper functionality.

Build docs developers (and LLMs) love

Get started for freeTalk to us