CSS classes used by the grid for styling.
The ActiveGrid uses semantic CSS classes that can be targeted for custom styling. All classes follow a consistent naming convention with BEM-style modifiers.
.grid-container {
border: 1px solid var(--border);
border-radius: 0.5rem;
}.grid-container--resizing {
cursor: col-resize;
user-select: none;
}.grid-container--keyboard-nav .grid-cell--focused {
outline: 2px solid var(--ring);
}.grid-header-wrapper {
position: sticky;
top: 0;
z-index: 10;
}.grid-header-row {
display: flex;
border-bottom: 1px solid var(--border);
}.grid-header-row--group {
background-color: var(--muted);
}.grid-header-cell {
padding: var(--grid-cell-padding-y) var(--grid-cell-padding-x);
font-weight: 500;
}.grid-header-cell--pinned {
position: sticky;
z-index: 1;
}New in v5.1
showColumnBorders is enabled)Use classes with rowClassRules:
.grid-container
├── .grid-header-wrapper
│ ├── .grid-header-row
│ │ └── .grid-header-cell
│ └── .grid-header-row--group
│ └── .grid-header-cell
├── .grid-body
│ └── .grid-row
│ └── .grid-cell
└── .grid-footer
└── .grid-footer-row
└── .grid-footer-cell.grid-header-cell--pinned-last-left {
border-right: 1px solid var(--border);
}.grid-header-cell--pinned-first-right {
border-left: 1px solid var(--border);
}.grid-header-cell--sorted {
background-color: var(--accent);
}.grid-body {
overflow: auto;
}.grid-body--virtual {
position: relative;
}.grid-row {
display: flex;
border-bottom: 1px solid var(--border);
}.grid-row:hover {
background-color: var(--accent);
}.grid-row[data-state='selected'] {
background-color: var(--accent);
}.grid-row--pinned-top {
position: sticky;
top: var(--grid-header-height);
z-index: 1;
background-color: var(--background);
}.grid-row--pinned-bottom {
position: sticky;
bottom: 0;
z-index: 1;
background-color: var(--background);
}.grid-row--expanded {
background-color: var(--muted);
}.grid-cell {
padding: var(--grid-cell-padding-y) var(--grid-cell-padding-x);
display: flex;
align-items: center;
}.grid-cell--pinned {
position: sticky;
background-color: inherit;
}.grid-cell--pinned-last-left {
border-right: 1px solid var(--border);
}.grid-cell--pinned-first-right {
border-left: 1px solid var(--border);
}.grid-cell--focused {
outline: 2px solid var(--ring);
outline-offset: -2px;
}.grid-cell--editing {
background-color: var(--accent);
}.grid-footer {
position: sticky;
bottom: 0;
z-index: 10;
}.grid-footer-row {
display: flex;
border-top: 1px solid var(--border);
font-weight: 600;
}.grid-footer-cell {
padding: var(--grid-cell-padding-y) var(--grid-cell-padding-x);
}.sort-indicator {
margin-left: 0.5rem;
display: inline-flex;
align-items: center;
}.sort-indicator--asc {
color: var(--primary);
}.sort-indicator--desc {
color: var(--primary);
}.sort-indicator__badge {
font-size: 0.75rem;
margin-left: 0.25rem;
color: var(--muted-foreground);
}.grid-border-r {
border-right: 1px solid var(--border);
}.grid-empty-state {
padding: 3rem;
text-align: center;
color: var(--muted-foreground);
}.resize-handle {
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 4px;
cursor: col-resize;
}.resize-handle--active {
background-color: var(--primary);
}/* Custom grid theme */
.grid-container {
--border: hsl(214 32% 91%);
--background: hsl(0 0% 100%);
border-radius: 0.5rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
/* Header styling */
.grid-header-row {
background: linear-gradient(to bottom, #f8f9fa, #e9ecef);
}
.grid-header-cell {
font-weight: 600;
color: #495057;
text-transform: uppercase;
font-size: 0.75rem;
letter-spacing: 0.05em;
}
/* Row styling */
.grid-row {
transition: background-color 0.15s ease;
}
.grid-row:hover {
background-color: #f8f9fa;
}
.grid-row[data-state='selected'] {
background-color: #e7f5ff;
border-left: 3px solid #228be6;
}
/* Pinned rows */
.grid-row--pinned-top {
background-color: #fff3cd;
font-weight: 600;
}
.grid-row--pinned-bottom {
background-color: #d1ecf1;
font-weight: 600;
border-top: 2px solid #0c5460;
}
/* Cell styling */
.grid-cell {
font-size: 0.875rem;
}
.grid-cell--focused {
outline: 2px solid #228be6;
outline-offset: -2px;
}
.grid-cell--editing {
background-color: #fff3cd;
}
/* Footer styling */
.grid-footer-row {
background-color: #f1f3f5;
font-weight: 700;
border-top: 2px solid #dee2e6;
}
/* Sort indicators */
.sort-indicator--asc,
.sort-indicator--desc {
color: #228be6;
}
/* Resize handle */
.resize-handle:hover {
background-color: #228be6;
}
.resize-handle--active {
background-color: #1971c2;
}.dark .grid-container {
--border: hsl(215 28% 17%);
--background: hsl(222 47% 11%);
}
.dark .grid-header-row {
background: linear-gradient(to bottom, #1a1b1e, #25262b);
border-bottom-color: #373a40;
}
.dark .grid-row:hover {
background-color: #25262b;
}
.dark .grid-row[data-state='selected'] {
background-color: #1c3d5a;
}
.dark .grid-cell--focused {
outline-color: #4dabf7;
}<ActiveGrid
settings={{
rowClassRules: {
'grid-row--error': (row) => row.status === 'error',
'grid-row--warning': (row) => row.status === 'warning',
'grid-row--success': (row) => row.status === 'success',
},
}}
{...}
/>.grid-row--error {
background-color: #fff5f5;
border-left: 3px solid #e03131;
}
.grid-row--warning {
background-color: #fff9db;
border-left: 3px solid #fab005;
}
.grid-row--success {
background-color: #ebfbee;
border-left: 3px solid #2b8a3e;
}