Vue Table Component Styling

Table Styling

Learn how to customize the Vue Table component with CSS classes, variables, and Sass for flexible styling and seamless integration into your design.

On this page

Sass variables

Deprecated in v6.0.0

Sass variables set these defaults at build time and are removed in v7. The CSS variables above reach the same values without recompiling, and can be set on a single element.

scss

$table-striped-order:         odd !default;
$table-striped-columns-order: even !default;

Sass loops

scss

// Which theme colours get a .table-* variant. The values come from the theme
// tokens now, so this is a list of names rather than a map of shifted colours.
$table-variants: map.keys($theme-colors) !default;