color

a popup editor for hex code values. Allows picking a color from the colorboard.

string color;

//for a datatable column
{ id:"start", editor:"color", template:tpl, header:"Color A", width:120}

Details

To display the necessary color in a component item, you should create a proper template for it:

var tpl="<span style='background-color:#value#;border-radius:4px;padding-right:10px;'>
 &nbsp</span> #value#";

Here we have a square with rounded edges and a hex code for the corresponding color. Otherwise, just hex codes will be shown.

By default, a standard colorboard is shown. For further customization, you should configure your popup:

webix.editors.$popup = {
   color:{
     view:"popup",
     body:{ view:"colorboard", width:200, height:200, rows:20, cols:20 }
   }
};