colorPicker connection

You can apply the jQuery MiniColors library to RealGrid.
registerCustomRenderer() is a function that allows you to create and use a renderer yourself.

This is a demo where you click on a cell in the "colorPicker" column to change it to the desired color.

RealGrid and jQuery MiniColors connection

You can check jQuery MiniColors at https://github.com/claviska/jquery-minicolors (opens in a new tab)

To use jQuery MiniColors, minicolors.css and minicolors.js include are required.

<script src="/js/jquery-3.5.0.min.js"></script>
<link href="/public/styles/jquery.minicolors.css" rel="stylesheet" />
<script src="/js/jquery.minicolors.js"></script>

Chart creation function

// column //
 
var columns = [{
   ... skip ...
},{
   name: "col3",
   fieldName: "field3",
   header: {
     text: "colorPicker"
   },
   width: 150,
   renderer: "custom_renderer",
   styleName: "picker-renderer",
   editable: false
},{
   ... skip ...
}];
 
//colorPicker //
 
   gridView.registerCustomRenderer("custom_renderer", {
         initContent: function(parent) {
             var input = this._input = document.createElement("input");
             input.type = "text";
             // Color swatch settings //
             input.setAttribute("data-swatches", "#ef9a9a|#90caf9|#a5d6a7|#fff59d|#ffcc80|#bcaaa4|#eeeeee|#f44336|#2196f3|#4caf50|#ffeb3b|#ff9800|#795548| #9e9e9e");
             parent.appendChild(input);
         },
         render: function(grid, model, width, height, info) {
           // Specify creation location //
           var topItem = gridView.getTopItem();
           if(model.index.itemIndex < topItem + 5){
             var pickerPosition = 'bottom'
           }else {
             var pickerPosition = 'top left'
           }
             // Basic setting //
             var input = this._input;
             $(input).minicolors && $(input).minicolors({
                 control: $(input).attr('data-control') || 'hue',
                 defaultValue: $(input).attr('data-defaultValue') || '',
                 format: $(input).attr('data-format') || 'hex',
                 keywords: $(input).attr('data-keywords') || '',
                 inline: $(input).attr('data-inline') === 'true',
                 letterCase: $(input).attr('data-letterCase') || 'lowercase',
                 opacity: $(input).attr('data-opacity'),
                 position: $(input).attr('data-position') || pickerPosition,//'bottom',
                 swatches: $(input).attr('data-swatches') ? $(input).attr('data-swatches').split('|') : [],
 
                 change: function(hex, opacity) {
                     if (!hex) {
                         return;
                     }
        
                     var index = gridView.getIndexOfElement(this); // this means input.
                     if (index) {
                         var itemIndex = index.itemIndex;
                         gridView.setValue(itemIndex, index.fieldIndex, hex);
                     }
                 },
 
                 show: function() {
                     console.log($(this._input).minicolors("settings"));
                     console.log('Show event triggered!');
                 }
             });
 
             if (model.value != null) {
                 this._input.value = model.value;
                 $(this._input).minicolors("value", model.value);
             } else {
                 $(this._input).minicolors("value", null);
             }
         },
         //Content initialization callback //
         clearContent: function(parent) {
             $(this._input).minicolors("destroy");
             parent.innerHTML = "";
         }
     });

CSS Custom

/* *.css */
.picker-renderer > .rg-renderer{
     overflow: visible !important;
     text-align: left !important;
}

text type date editor File Drag and Drop