Theme the CoreUI Data Grid with --cui-data-grid-* CSS variables that resolve through CoreUI semantic tokens, so light and dark modes work with no extra CSS.
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
| Variable | Default | Controls |
|---|---|---|
--cui-data-grid-viewport-max-height | 30rem | Max height of the scroll viewport. |
--cui-data-grid-header-bg | var(--cui-body-bg, #fff) | Header cell background. |
--cui-data-grid-header-shadow | inset 0 calc(-1 * var(--cui-border-width, 1px)) 0 var(--cui-border-color, #dee2e6) | Header bottom border. |
--cui-data-grid-select-cell-width | 2.5rem | Width of the selection checkbox column. |
--cui-data-grid-sorter-margin | .25rem | Gap before the sort indicator. |
--cui-data-grid-sorter-opacity | .3 | Resting opacity of the sort indicator. |
--cui-data-grid-spacing | .5rem | Cell padding. |
--cui-data-grid-resizer-width | .625rem | Hit area of the resize handle. |
--cui-data-grid-resizer-grip-height | 60% | Height of the resize grip. |
--cui-data-grid-resizer-grip-color | var(--cui-border-color, #dee2e6) | Resize grip color. |
--cui-data-grid-resizer-grip-color-hover | var(--cui-secondary-color, #6c757d) | Resize grip color on hover. |
--cui-data-grid-pinned-shadow-width | .375rem | Width of the shadow cast by pinned columns. |
--cui-data-grid-pinned-shadow | rgba(0, 0, 0, .15) | Color of the pinned-column shadow. |
--cui-data-grid-drop-indicator | var(--cui-primary, #321fdb) | Drop indicator while reordering columns. |
--cui-data-grid-loading-bg | — | Background of the loading overlay (server-side mode). |
--cui-data-grid-menu-bg | var(--cui-body-bg, #fff) | Column menu background. |
--cui-data-grid-menu-border-color | var(--cui-border-color, #dee2e6) | Column menu border. |
--cui-data-grid-menu-shadow | var(--cui-box-shadow, 0 .5rem 1rem rgba(0, 0, 0, .15)) | Column menu shadow. |
--cui-data-grid-menu-min-width | 10rem | Column menu minimum width. |
--cui-data-grid-menu-item-hover-bg | var(--cui-tertiary-bg, #f8f9fa) | Column menu item hover background. |
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.