Vue Data Grid Styling & Theming

The Data Grid is styled entirely with CSS custom properties. Every knob is a --cui-data-grid-* variable that resolves through CoreUI’s semantic tokens (--cui-body-bg, --cui-border-color, …), so the grid inherits your theme — including data-coreui-theme="dark" — with no extra rules.

Light & dark mode

Because the tokens resolve through CoreUI semantic variables, dark mode works out of the box:

<template>
  <div data-coreui-theme="dark">
    <CDataGrid :columns="columns" :items="items" />
  </div>
</template>

No grid-specific dark styles are needed — the semantic tokens flip and the grid follows.

Overriding tokens

Set any variable on the grid element (or an ancestor) to retheme it — a class passed to the component lands on the grid’s root element:

<template>
  <CDataGrid class="users-grid" :columns="columns" :items="items" />
</template>

.users-grid {
  --cui-data-grid-spacing: 0.75rem;
  --cui-data-grid-header-bg: var(--cui-tertiary-bg);
  --cui-data-grid-viewport-max-height: 40rem;
}

CSS variables

The grid also inherits the .table styles (striping, borders) from @coreui/coreui(-pro), so table-level CSS variables like --cui-table-striped-bg apply too.

Sass

The stylesheet is a Sass module, so the same knobs are available at build time. Every CSS variable above is backed by a Sass variable of the same name without the --cui- prefix, and configuring one changes the emitted token:

@use "@coreui/data-grid/scss/data-grid" with (
  $data-grid-spacing: .75rem,
  $data-grid-viewport-max-height: 40rem
);

A token map is available too. It merges over the defaults, so you can add or retarget individual custom properties — and a null value removes one:

@use "@coreui/data-grid/scss/data-grid" with (
  $data-grid-tokens: (
    --cui-data-grid-header-bg: var(--cui-tertiary-bg),
    --cui-data-grid-menu-shadow: none
  )
);

A few layout values have no runtime token and are configurable at build time only — the toolbar/header bar height, the popup max-width, and the shared border, radius and muted-color references the grid chrome reuses. They are the data-grid-layout-variables block in scss/components/_data-grid.scss.

$prefix is configurable as well (cui- by default), for the case where the surrounding CoreUI build uses a different one.

Without the CoreUI stylesheet

The grid’s markup uses .table, .btn, the form controls, .pagination, .spinner-border and .visually-hidden from @coreui/coreui(-pro). If that stylesheet is not on the page, load data-grid.standalone.css instead of data-grid.css — it carries those base styles itself for ~2.7 kB gzip. See Installation.

Two properties make it safe to drop in:

• every base rule is scoped to .data-grid, so the sheet never restyles the rest of your page;
• every base rule sits in the data-grid-base cascade layer, while the grid’s own rules stay unlayered. A layered declaration always loses to an unlayered one, so if CoreUI (or your own CSS) is loaded after all, it wins on every property it declares and the two can coexist.

That second point assumes the surrounding stylesheet is unlayered, which is true of CoreUI 5. Against a stylesheet that uses cascade layers itself, the outcome becomes ordinary layer order — rename the layer to place it where you need:

@use "@coreui/data-grid/scss/data-grid.standalone" with (
  $base-layer: vendor
);

The base styles are configurable the same way as the grid. Their variables are prefixed $base- and cover the palette, the control sizing and the icons:

@use "@coreui/data-grid/scss/data-grid.standalone" with (
  $base-primary: #0d6efd,
  $base-border-color: #d0d7de,
  $base-btn-font-size-sm: .8125rem
);