:root {
  /* Dimensions */
  --grid-row-height: 40px;
  --grid-header-height: 36px;
  --grid-group-header-height: 32px;
  --grid-filter-bar-height: 32px;
  
  /* Spacing */
  --grid-cell-padding-x: 0.75rem;
  --grid-cell-padding-y: 0.5rem;
}

const columns = [
  {
    accessorKey: 'status',
    header: 'Status',
    meta: {
      // Conditional classes
      cellClassRules: {
        'text-green-600': (value) => value === 'active',
        'text-red-600': (value) => value === 'inactive',
      },
      // Inline styles
      cellStyle: (value) => ({
        fontWeight: value === 'active' ? 'bold' : 'normal',
      })
    }
  }
]