Documentation

CSS Variables Reference

Customize the grid appearance using CSS custom properties.

Usage

Override variables on the grid container:

<div class="my-grid">
  <DataGrid {data} {columns} />
</div>

<style>
  .my-grid {
    --datagrid-header-bg: #1e40af;
    --datagrid-header-color: white;
  }
</style>

Or use inline styles:

<div style="--datagrid-header-bg: #1e40af;">
  <DataGrid {data} {columns} />
</div>

Container Variables

VariableDefaultDescription
--datagrid-bg#ffffffGrid background color
--datagrid-color#111827Default text color
--datagrid-border-color#e5e7ebBorder color for grid and cells
--datagrid-font-familysystem-ui, sans-serifFont family
--datagrid-font-size14pxBase font size

Header Variables

VariableDefaultDescription
--datagrid-header-bg#f9fafbHeader row background
--datagrid-header-color#111827Header text color
--datagrid-header-font-weight600Header font weight
--datagrid-header-height48pxHeader row height

Row Variables

VariableDefaultDescription
--datagrid-row-bgtransparentDefault row background
--datagrid-row-hover-bg#f3f4f6Row background on hover
--datagrid-row-stripe-bg#f9fafbAlternating row background
--datagrid-row-height40pxData row height

Cell Variables

VariableDefaultDescription
--datagrid-cell-padding8px 12pxCell padding
--datagrid-cell-colorinheritCell text color

Selection Variables

VariableDefaultDescription
--datagrid-selected-bg#eff6ffSelected row background
--datagrid-selected-border#3b82f6Selected row border color
--datagrid-selected-colorinheritSelected row text color
--datagrid-focus-ring#3b82f6Focus indicator color
--datagrid-focus-ring-width2pxFocus indicator width

Filter Row Variables

VariableDefaultDescription
--datagrid-filter-bg#f3f4f6Filter row background
--datagrid-filter-height36pxFilter row height
--datagrid-filter-input-bg#ffffffFilter input background
--datagrid-filter-input-border#d1d5dbFilter input border
--datagrid-filter-input-focus#3b82f6Filter input focus border

Resize Handle Variables

VariableDefaultDescription
--datagrid-resize-handle-color#d1d5dbResize handle default color
--datagrid-resize-handle-hover#3b82f6Resize handle hover color
--datagrid-resize-handle-active#2563ebResize handle active color
--datagrid-resize-handle-width4pxResize handle width

Sort Indicator Variables

VariableDefaultDescription
--datagrid-sort-indicator-color#6b7280Sort arrow color
--datagrid-sort-indicator-active#111827Active sort arrow color

Loading & Empty State Variables

VariableDefaultDescription
--datagrid-loading-bgrgba(255,255,255,0.8)Loading overlay background
--datagrid-loading-color#6b7280Loading text color
--datagrid-empty-color#9ca3afEmpty message color
--datagrid-error-color#ef4444Error message color
--datagrid-error-bg#fef2f2Error background color

Edit Mode Variables

VariableDefaultDescription
--datagrid-edit-bg#ffffffEdit input background
--datagrid-edit-border#3b82f6Edit input border
--datagrid-edit-error-border#ef4444Validation error border
--datagrid-edit-error-color#ef4444Validation error text

Theme Examples

Dark Theme

.dark-theme {
  --datagrid-bg: #1f2937;
  --datagrid-color: #e5e7eb;
  --datagrid-border-color: #374151;
  --datagrid-header-bg: #111827;
  --datagrid-header-color: #f9fafb;
  --datagrid-row-bg: #1f2937;
  --datagrid-row-hover-bg: #374151;
  --datagrid-row-stripe-bg: #111827;
  --datagrid-selected-bg: #1e3a5f;
  --datagrid-selected-border: #60a5fa;
  --datagrid-filter-bg: #111827;
  --datagrid-filter-input-bg: #374151;
  --datagrid-filter-input-border: #4b5563;
  --datagrid-loading-bg: rgba(31, 41, 55, 0.8);
  --datagrid-empty-color: #6b7280;
}

Brand Theme

.brand-theme {
  --brand-primary: #7c3aed;
  --brand-primary-light: #a78bfa;
  --brand-primary-bg: #ede9fe;

  --datagrid-header-bg: var(--brand-primary);
  --datagrid-header-color: white;
  --datagrid-selected-bg: var(--brand-primary-bg);
  --datagrid-selected-border: var(--brand-primary);
  --datagrid-focus-ring: var(--brand-primary-light);
  --datagrid-resize-handle-hover: var(--brand-primary);
  --datagrid-filter-input-focus: var(--brand-primary);
}

Compact Theme

.compact-theme {
  --datagrid-font-size: 12px;
  --datagrid-header-height: 36px;
  --datagrid-row-height: 28px;
  --datagrid-cell-padding: 4px 8px;
  --datagrid-filter-height: 28px;
}

See also