CSS custom properties for theme customization.
The ActiveGrid uses CSS custom properties (variables) for flexible theming. Override these variables to customize heights, spacing, and other visual properties.
:root {
--grid-row-height: 44px;
--grid-header-height: 48px;
--grid-group-header-height: 32px;
--grid-filter-bar-height: 36px;
--grid-cell-padding-x: 0.75rem;
--grid-cell-padding-y: 0.5rem;
}44px.grid-container {
--grid-row-height: 52px; /* Taller rows */
}Override via settings:
<ActiveGrid settings={{ rowHeight: 52 }} />48px.grid-container {
--grid-header-height: 56px;
}Override via settings:
<ActiveGrid settings={{ headerHeight: 56 }} />32px.grid-container {
--grid-group-header-height: 40px;
}Override via settings:
<ActiveGrid settings={{ groupHeaderHeight: 40 }} />36px.grid-container {
--grid-filter-bar-height: 44px;
}Override via settings:
<ActiveGrid settings={{ filterBarHeight: 44 }} />0.75rem (12px).grid-container {
--grid-cell-padding-x: 1rem; /* More horizontal space */
}0.5rem (8px)Column widths are automatically set as CSS variables:
--col-{columnId}-size--header-{headerId}-sizeAdjust variables based on screen size:
Variables automatically work with dark mode themes:
Reference variables in your custom CSS:
Variables can reference other variables:
Variables can be overridden at different levels:
Priority (highest to lowest):
Access variables via JavaScript:
Set variables via JavaScript:
You can set heights via settings or CSS variables:
Via Settings (Recommended):
Via CSS Variables:
Settings are converted to CSS variables internally.
| Variable | Default | Description |
|----------|---------|-------------|
| --grid-row-height | 44px | Body row height |
| --grid-header-height | 48px | Header row height |
| --grid-group-header-height | 32px | Column group header height |
| --grid-filter-bar-height | 36px | Filter bar height |
| --grid-cell-padding-x | 0.75rem | Horizontal cell padding |
| --grid-cell-padding-y | 0.5rem | Vertical cell padding |
| --col-{id}-size | Auto | Column width (generated) |
| --header-{id}-size | Auto | Header width (generated) |
Inspect computed values in DevTools:
.grid-container {
--grid-cell-padding-y: 0.75rem; /* More vertical space */
}/* Auto-generated */
.grid-container {
--col-name-size: 200px;
--col-email-size: 250px;
--col-status-size: 120px;
}/* Auto-generated */
.grid-container {
--header-personal-size: 450px;
--header-contact-size: 370px;
}.grid-container--compact {
--grid-row-height: 36px;
--grid-header-height: 40px;
--grid-group-header-height: 28px;
--grid-filter-bar-height: 32px;
--grid-cell-padding-x: 0.5rem;
--grid-cell-padding-y: 0.25rem;
}<ActiveGrid className="grid-container--compact" {...} />.grid-container--spacious {
--grid-row-height: 56px;
--grid-header-height: 64px;
--grid-group-header-height: 40px;
--grid-filter-bar-height: 44px;
--grid-cell-padding-x: 1.25rem;
--grid-cell-padding-y: 0.875rem;
}<ActiveGrid className="grid-container--spacious" {...} />/* Default (mobile) */
.grid-container {
--grid-row-height: 48px;
--grid-header-height: 52px;
--grid-cell-padding-x: 0.5rem;
}
/* Tablet */
@media (min-width: 768px) {
.grid-container {
--grid-row-height: 44px;
--grid-header-height: 48px;
--grid-cell-padding-x: 0.75rem;
}
}
/* Desktop */
@media (min-width: 1024px) {
.grid-container {
--grid-row-height: 40px;
--grid-header-height: 44px;
--grid-cell-padding-x: 1rem;
}
}:root {
--grid-row-height: 44px;
}
.dark {
/* Heights remain the same in dark mode */
--grid-row-height: 44px;
}.custom-row {
height: var(--grid-row-height);
padding: var(--grid-cell-padding-y) var(--grid-cell-padding-x);
}
.custom-header {
height: var(--grid-header-height);
line-height: var(--grid-header-height);
}.grid-container {
--grid-row-height: 44px;
--grid-double-row-height: calc(var(--grid-row-height) * 2);
--grid-total-header-height: calc(
var(--grid-header-height) + var(--grid-group-header-height)
);
}/* Global */
:root {
--grid-row-height: 44px;
}
/* Per container */
.grid-container {
--grid-row-height: 48px;
}
/* Per theme */
.grid-container--compact {
--grid-row-height: 36px;
}const container = document.querySelector('.grid-container');
const rowHeight = getComputedStyle(container)
.getPropertyValue('--grid-row-height');
console.log(rowHeight); // "44px"container.style.setProperty('--grid-row-height', '52px');/* Enterprise Theme */
.grid-enterprise {
/* Heights */
--grid-row-height: 48px;
--grid-header-height: 56px;
--grid-group-header-height: 36px;
--grid-filter-bar-height: 40px;
/* Spacing */
--grid-cell-padding-x: 1rem;
--grid-cell-padding-y: 0.625rem;
}
/* Compact Theme */
.grid-compact {
/* Heights */
--grid-row-height: 32px;
--grid-header-height: 36px;
--grid-group-header-height: 28px;
--grid-filter-bar-height: 32px;
/* Spacing */
--grid-cell-padding-x: 0.5rem;
--grid-cell-padding-y: 0.25rem;
}
/* Mobile Theme */
.grid-mobile {
/* Heights */
--grid-row-height: 56px;
--grid-header-height: 60px;
--grid-filter-bar-height: 48px;
/* Spacing */
--grid-cell-padding-x: 0.75rem;
--grid-cell-padding-y: 0.75rem;
}<ActiveGrid
settings={{
rowHeight: 52,
headerHeight: 56,
cellPaddingX: 16,
cellPaddingY: 12,
}}
{...}
/>.my-grid {
--grid-row-height: 52px;
--grid-header-height: 56px;
--grid-cell-padding-x: 1rem;
--grid-cell-padding-y: 0.75rem;
}// Get all CSS variables
const container = document.querySelector('.grid-container');
const styles = getComputedStyle(container);
// Log specific variable
console.log(styles.getPropertyValue('--grid-row-height'));
// Log all grid variables
for (let i = 0; i < styles.length; i++) {
const prop = styles[i];
if (prop.startsWith('--grid-') || prop.startsWith('--col-')) {
console.log(prop, styles.getPropertyValue(prop));
}
}