diff --git a/packages/common/src/editors/dualInputEditor.ts b/packages/common/src/editors/dualInputEditor.ts
index 9ad47a9d9..e0c70961a 100644
--- a/packages/common/src/editors/dualInputEditor.ts
+++ b/packages/common/src/editors/dualInputEditor.ts
@@ -152,6 +152,9 @@ export class DualInputEditor implements Editor {
     input.autocomplete = 'off';
     input.placeholder = editorSideParams.placeholder || '';
     input.title = editorSideParams.title || '';
+    if (fieldType === 'readonly') {
+      input.readOnly = true;
+    }
     if (fieldType === 'number') {
       input.step = this.getInputDecimalSteps(position);
     }
diff --git a/packages/common/src/interfaces/columnEditorComboInput.interface.ts b/packages/common/src/interfaces/columnEditorComboInput.interface.ts
index 2b96a1a8a..ab4dd62dc 100644
--- a/packages/common/src/interfaces/columnEditorComboInput.interface.ts
+++ b/packages/common/src/interfaces/columnEditorComboInput.interface.ts
@@ -5,7 +5,7 @@ interface EditorComboInput extends Partial<ColumnEditor> {
   field: string;
 
   /** Editor Type */
-  type: 'integer' | 'float' | 'number' | 'password' | 'text';
+  type: 'integer' | 'float' | 'number' | 'password' | 'text' | 'readonly';
 }
 
 export interface ColumnEditorComboInput {
diff --git a/packages/common/src/styles/_variables.scss b/packages/common/src/styles/_variables.scss
index 4c461253c..b43e6dc41 100644
--- a/packages/common/src/styles/_variables.scss
+++ b/packages/common/src/styles/_variables.scss
@@ -175,7 +175,7 @@ $column-picker-checkbox-opacity-hover:      0.35 !default;
 $column-picker-checkbox-width:              13px !default;
 $column-picker-close-btn-bg-color:          #ffffff !default;
 $column-picker-close-btn-cursor:                pointer !default;
-$column-picker-close-btn-font-size:         21px;
+$column-picker-close-btn-font-size:         21px !default;
 $column-picker-close-btn-border:            0px solid #9c9c9c !default;
 $column-picker-close-btn-height:            21px !default;
 $column-picker-close-btn-width:             15px !default;
@@ -390,10 +390,10 @@ $checkbox-selector-opacity:                 0.15 !default;
 $checkbox-selector-opacity-hover:           0.35 !default;
 
 /* Editors */
-$editor-focus-border-color:                 lighten($primary-color, 10%);
-$editor-focus-box-shadow:                   inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px rgba(lighten($primary-color, 3%), .3);
-$date-editor-focus-border-color:            $editor-focus-border-color;
-$date-editor-focus-box-shadow:              $editor-focus-box-shadow;
+$editor-focus-border-color:                 lighten($primary-color, 10%) !default;
+$editor-focus-box-shadow:                   inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px rgba(lighten($primary-color, 3%), .3) !default;
+$date-editor-focus-border-color:            $editor-focus-border-color !default;
+$date-editor-focus-box-shadow:              $editor-focus-box-shadow !default;
 $large-editor-background-color:             #ffffff !default;
 $large-editor-border:                       2px solid #a0a0a0 !default;
 $large-editor-text-padding:                 5px !default;
@@ -413,13 +413,14 @@ $text-editor-padding-bottom:                0 !default;
 $text-editor-padding-left:                  2px !default;
 $text-editor-padding-right:                 0 !default;
 $text-editor-padding-top:                   0 !default;
-$text-editor-focus-border-color:            $editor-focus-border-color;
-$text-editor-focus-box-shadow:              $editor-focus-box-shadow;
+$text-editor-focus-border-color:            $editor-focus-border-color !default;
+$text-editor-focus-box-shadow:              $editor-focus-box-shadow !default;
+$text-editor-readonly-color:                #f0f0f0 !default;
 $slider-editor-height:                      24px !default;
 $slider-editor-runnable-track-padding:      0 6px !default;
 $slider-editor-number-padding:              4px 6px !default;
-$slider-editor-focus-border-color:          $editor-focus-border-color;
-$slider-editor-focus-box-shadow:            $editor-focus-box-shadow;
+$slider-editor-focus-border-color:          $editor-focus-border-color !default;
+$slider-editor-focus-box-shadow:            $editor-focus-box-shadow !default;
 
 /* Compound Filters */
 $compound-filter-bgcolor:                   #e4eacf !default;
diff --git a/packages/common/src/styles/slick-editors.scss b/packages/common/src/styles/slick-editors.scss
index 1d73fb638..b5b044366 100644
--- a/packages/common/src/styles/slick-editors.scss
+++ b/packages/common/src/styles/slick-editors.scss
@@ -26,6 +26,10 @@
         &.right {
           margin-left: calc(#{$text-editor-margin-left + 9px});
         }
+
+        &[readonly] {
+          background-color: $text-editor-readonly-color;
+        }
       }
 
       .slider-editor-input {