Tables

The simpler of the table components is v-table, a basic wrapper component for the HTML <table> element. In addition, regular table elements such as <thead>, <tbody>, <tr>, and <td> work by default.

More advanced tables such as v-data-table are available.

Edit this page

Copy Page as Markdown

Usage

Name	Calories
Frozen Yogurt	159
Ice cream sandwich	237
Eclair	262
Cupcake	305
Gingerbread	356
Jelly bean	375
Lollipop	392
Honeycomb	408
Donut	452
KitKat	518

ads via vuetify

API

Component	Description
v-table	Primary Component

Toggle Inline API

Examples

Props

Theme

Use theme prop to switch table to another theme.

Name	Calories
Frozen Yogurt	159
Ice cream sandwich	237
Eclair	262
Cupcake	305
Gingerbread	356
Jelly bean	375
Lollipop	392
Honeycomb	408
Donut	452
KitKat	518

Density

You can show a dense version of the table by using the density prop.

Name	Calories
Frozen Yogurt	159
Ice cream sandwich	237
Eclair	262
Cupcake	305
Gingerbread	356
Jelly bean	375
Lollipop	392
Honeycomb	408
Donut	452
KitKat	518

Height

Use the height prop to set the height of the table.

Name	Calories
Frozen Yogurt	159
Ice cream sandwich	237
Eclair	262
Cupcake	305
Gingerbread	356
Jelly bean	375
Lollipop	392
Honeycomb	408
Donut	452
KitKat	518

Fixed header

Use the fixed-header prop together with the height prop to fix the header to the top of the table.

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.