Theme
The plugin comes with two available themes : dark and light
TIP
By default, the theme used will be based on your browser preferred theme (value auto)
Set theme to use
To set the theme to use, simply set the theme option to either dark, light or auto.
Dark theme
vue
<template>
<ModernTable
:columns="[
{ label: 'Country', field: 'country' },
{ label: 'Capital', field: 'capital' }
]"
:rows="[
{ country: 'Ukraine', capital: 'Kiev' },
{ country: 'France', capital: 'Paris' },
{ country: 'Germany', capital: 'Berlin' }
]"
:options="{ theme: 'dark' }"
/>
</template>Country | Capital |
|---|---|
Ukraine | Kiev |
France | Paris |
Germany | Berlin |
1 - 3 / 3 | |
Light theme
vue
<template>
<ModernTable
:columns="[
{ label: 'Country', field: 'country' },
{ label: 'Capital', field: 'capital' }
]"
:rows="[
{ country: 'Ukraine', capital: 'Kiev' },
{ country: 'France', capital: 'Paris' },
{ country: 'Germany', capital: 'Berlin' }
]"
:options="{ theme: 'light' }"
/>
</template>Country | Capital |
|---|---|
Ukraine | Kiev |
France | Paris |
Germany | Berlin |
1 - 3 / 3 | |