BlogPlaygroundOne

VTable API


Props
name
type
default
'default' | 'comfortable' | 'compact'
'default'

Adjusts the vertical height used by the component.

boolean
false

Use the fixed-footer prop together with the height prop to fix the footer to the bottom of the table.

boolean
false

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

string | number
undefined

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

boolean
false

Will add a hover effect to a table’s row when the mouse is over it.

'odd' | 'even'
null

Applies a background to either even or odd rows.

string | (new () => any) | FunctionalComponent
'div'

Specify a custom tag used on the root element.

string
undefined

Specify a theme for this component and all of its children.

Slots
never
never
never
never

Slot to add content below the table.

The default Vue slot.

Slot to add content above the table.

Slots for custom rendering of the table wrapper.

SASS Variables
name
default
rgb(var(--v-theme-surface))
thin solid $table-border-color
rgba(var(--v-border-color), var(--v-border-opacity))
tools.theme-color('on-surface', var(--v-high-emphasis-opacity))
0 16px
('default': 0, 'comfortable': -2, 'compact': -4)
tools.map-deep-get(settings.$typography, 'body-medium', 'size')
inherit
500
56px
rgba(var(--v-border-color), var(--v-hover-opacity))
1.5
tools.map-deep-get(settings.$typography, 'label-large', 'size')
52px
rgba(var(--v-border-color), var(--v-hover-opacity))
(
  $table-background,
  $table-color,
)
0.28s
box-shadow, opacity, background, height
settings.$standard-easing