Active Grid

Custom Styling - Active Grid

Overview

Customize the ActiveGrid's appearance using CSS classes, CSS variables, className props, and conditional styling. The grid provides multiple styling approaches for different use cases.

Styling Approaches

1. CSS Variables (Recommended)

Override CSS variables for consistent theming:

.grid-container {
  --grid-row-height: 52px;
  --grid-header-height: 56px;
  --grid-cell-padding-x: 1rem;
  --grid-cell-padding-y: 0.75rem;
}

2. className Props

Add custom classes via props:

<ActiveGrid
  className="my-custom-grid"
  columns={columns}
  data={data}
  {...}
/>

3. CSS Classes

Target built-in classes:

.grid-row:hover {
  background-color: #f0f9ff;
}

.grid-header-cell {
  text-transform: uppercase;
  font-size: 0.75rem;
}

4. Conditional Styling

Use rowClassRules for dynamic row styling:

<ActiveGrid
  settings={{
    rowClassRules: {
      'bg-red-50': (row) => row.status === 'error',
      'font-bold': (row) => row.priority === 'high',
    },
  }}
  {...}
/>

Complete Theme Examples

Enterprise Theme

/* enterprise-theme.css */
.grid-enterprise {
  /* Heights */
  --grid-row-height: 48px;
  --grid-header-height: 56px;
  --grid-cell-padding-x: 1rem;
  --grid-cell-padding-y: 0.625rem;
  
  /* Borders */
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  overflow: hidden;
}

.grid-enterprise .grid-header-row {
  background: linear-gradient(180deg, #f9fafb 0%, #f3f4f6 100%);
  border-bottom: 2px solid #d1d5db;
}

.grid-enterprise .grid-header-cell {
  font-weight: 600;
  color: #374151;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}

.grid-enterprise .grid-row {
  transition: background-color 0.15s ease;
}

.grid-enterprise .grid-row:hover {
  background-color: #f9fafb;
}

.grid-enterprise .grid-row[data-state='selected'] {
  background-color: #dbeafe;
  border-left: 3px solid #3b82f6;
}

.grid-enterprise .grid-footer-row {
  background-color: #f3f4f6;
  font-weight: 700;
  border-top: 2px solid #d1d5db;
}

<ActiveGrid className="grid-enterprise" {...} />

Minimal Theme

/* minimal-theme.css */
.grid-minimal {
  --grid-row-height: 40px;
  --grid-header-height: 44px;
  --grid-cell-padding-x: 0.75rem;
  --grid-cell-padding-y: 0.5rem;
}

.grid-minimal .grid-header-row {
  border-bottom: 1px solid #e5e7eb;
}

.grid-minimal .grid-header-cell {
  font-weight: 500;
  color: #6b7280;
  font-size: 0.875rem;
}

.grid-minimal .grid-row {
  border-bottom: 1px solid #f3f4f6;
}

.grid-minimal .grid-row:hover {
  background-color: #f9fafb;
}

Dark Theme

/* dark-theme.css */
.grid-dark {
  --grid-row-height: 44px;
  --grid-header-height: 48px;
  
  background-color: #1f2937;
  color: #f9fafb;
  border: 1px solid #374151;
}

.grid-dark .grid-header-row {
  background-color: #111827;
  border-bottom: 1px solid #374151;
}

.grid-dark .grid-header-cell {
  color: #e5e7eb;
  font-weight: 600;
}

.grid-dark .grid-row {
  border-bottom: 1px solid #374151;
}

.grid-dark .grid-row:hover {
  background-color: #374151;
}

.grid-dark .grid-row[data-state='selected'] {
  background-color: #1e3a5f;
  border-left: 3px solid #3b82f6;
}

.grid-dark .grid-cell {
  color: #f3f4f6;
}

.grid-dark .grid-footer-row {
  background-color: #111827;
  border-top: 1px solid #374151;
}

Conditional Row Styling

Status-Based Styling

<ActiveGrid
  settings={{
    rowClassRules: {
      'bg-red-50 border-l-4 border-l-red-500': (row) => 
        row.status === 'error',
      'bg-yellow-50 border-l-4 border-l-yellow-500': (row) => 
        row.status === 'warning',
      'bg-green-50 border-l-4 border-l-green-500': (row) => 
        row.status === 'success',
      'opacity-50': (row) => 
        !row.isActive,
    },
  }}
  {...}
/>

Priority-Based Styling

<ActiveGrid
  settings={{
    rowClassRules: {
      'font-bold bg-red-50': (row) => row.priority === 'high',
      'bg-yellow-50': (row) => row.priority === 'medium',
      'text-muted-foreground': (row) => row.priority === 'low',
    },
  }}
  {...}
/>

Date-Based Styling

<ActiveGrid
  settings={{
    rowClassRules: {
      'bg-red-50': (row) => {
        const dueDate = new Date(row.dueDate);
        const today = new Date();
        return dueDate < today;
      },
      'bg-yellow-50': (row) => {
        const dueDate = new Date(row.dueDate);
        const tomorrow = new Date();
        tomorrow.setDate(tomorrow.getDate() + 1);
        return dueDate < tomorrow;
      },
    },
  }}
  {...}
/>

Column Styling

Header Styling

{
  accessorKey: 'amount',
  header: 'Amount',
  meta: {
    headerClassName: 'text-right font-bold text-primary',
  },
}

Cell Styling

{
  accessorKey: 'amount',
  header: 'Amount',
  meta: {
    cellClassName: 'text-right font-mono font-semibold',
    cellAlign: 'right',
  },
}

Conditional Cell Styling

{
  accessorKey: 'amount',
  header: 'Amount',
  cell: ({ getValue }) => {
    const amount = getValue() as number;
    return (
      <div className={cn(
        'font-mono',
        amount > 1000 && 'text-green-600 font-bold',
        amount < 0 && 'text-red-600'
      )}>
        ${amount.toFixed(2)}
      </div>
    );
  },
}

Striped Rows

<ActiveGrid
  settings={{
    stripedRows: true,
    stripeClassName: 'bg-muted/20',
  }}
  {...}
/>

Custom stripe colors:

.grid-container--striped .grid-row:nth-child(even) {
  background-color: #f9fafb;
}

.grid-container--striped .grid-row:nth-child(odd) {
  background-color: #ffffff;
}

Column Borders

<ActiveGrid
  settings={{
    showColumnBorders: true,
  }}
  {...}
/>

Custom border styling:

.grid-border-r {
  border-right: 2px solid #e5e7eb;
}

Hover Effects

Disable default hover:

Custom hover effect:

Sticky Header Styling

Footer Styling

Responsive Styling

Complete Custom Theme

Best Practices

✅ DO

Use CSS variables for theming
Test light and dark modes
Keep hover effects subtle
Use transitions for smooth effects
Maintain accessibility contrast
Test on different screen sizes

❌ DON'T

Don't use !important unless necessary
Don't hardcode colors
Don't break grid structure
Don't ignore z-index layers
Don't forget hover states
Don't skip responsive testing

/* Mobile */
@media (max-width: 640px) {
  .grid-container {
    --grid-row-height: 56px;
    --grid-cell-padding-x: 0.5rem;
  }
  
  .grid-header-cell {
    font-size: 0.75rem;
  }
}

/* Tablet */
@media (min-width: 641px) and (max-width: 1024px) {
  .grid-container {
    --grid-row-height: 48px;
  }
}

/* Desktop */
@media (min-width: 1025px) {
  .grid-container {
    --grid-row-height: 44px;
  }
}

import './custom-grid-theme.css';

function UsersTable() {
  return (
    <ActiveGrid
      className="grid-custom-theme"
      columns={columns}
      data={users}
      settings={{
        rowHeight: 52,
        headerHeight: 60,
        stripedRows: true,
        showColumnBorders: false,
        rowClassRules: {
          'row-error': (row) => row.status === 'error',
          'row-warning': (row) => row.status === 'warning',
          'row-success': (row) => row.status === 'success',
          'row-inactive': (row) => !row.isActive,
        },
        footer: {
          className: 'footer-custom',
          cellClassName: 'footer-cell-custom',
        },
      }}
    />
  );
}

/* custom-grid-theme.css */
.grid-custom-theme {
  --grid-cell-padding-x: 1.25rem;
  --grid-cell-padding-y: 0.875rem;
  
  border-radius: 0.75rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

/* Header */
.grid-custom-theme .grid-header-row {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.grid-custom-theme .grid-header-cell {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.8rem;
}

/* Rows */
.grid-custom-theme .grid-row {
  transition: all 0.2s ease;
}

.grid-custom-theme .grid-row:hover {
  background-color: #f8fafc;
  transform: scale(1.01);
}

/* Status rows */
.grid-custom-theme .row-error {
  background-color: #fee2e2;
  border-left: 4px solid #ef4444;
}

.grid-custom-theme .row-warning {
  background-color: #fef3c7;
  border-left: 4px solid #f59e0b;
}

.grid-custom-theme .row-success {
  background-color: #d1fae5;
  border-left: 4px solid #10b981;
}

.grid-custom-theme .row-inactive {
  opacity: 0.5;
}

/* Footer */
.grid-custom-theme .footer-custom {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-weight: 700;
}

.grid-custom-theme .footer-cell-custom {
  text-align: right;
}

Custom Styling