jQuery Grid

Set the rtl property of the jqxGrid. Author: http://jqwidgets.com

HTML

<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<div id="window">
    <div>header</div>
    <div style="background-color:#AAA">
        <div id="grid"></div>
    </div>
</div>

JavaScript

function getTextElementByColor(color) {
            if (color == 'transparent' || color.hex == "") {
                return $("<div style='text-shadow: none; position: relative; padding-bottom: 4px; margin-top: 4px;'>transparent</div>");
            }

            var element = $("<div style='text-shadow: none; position: relative; padding-bottom: 4px; margin-top: 4px;'>#" + color.hex + "</div>");
            var nThreshold = 105;
            var bgDelta = (color.r * 0.299) + (color.g * 0.587) + (color.b * 0.114);
            var foreColor = (255 - bgDelta < nThreshold) ? 'Black' : 'White';
            element.css('color', foreColor);
            element.css('background', "#" + color.hex);
            element.addClass('jqx-rc-all');
            return element;
        }

        $(document).ready(function () {
            var data = [
                {
                    "property": "Background", "value": "#4621BC", type: "color"
                },
                {
                    "property": "Color", "value": "#B1B11B", type: "color"
                }
            ];

            var source =
             {
                 dataType: "array",
                 dataFields: [
                      { name: "property", type: "string" },
                      { name: "value", type: "string" },
                      { name: "type", type: "string" },
                      { name: "children", type: "array" }
                 ],
                 hierarchy:
                     {
                         root: "children"
                     },
                 localData: data
             };

            var dataAdapter = new $.jqx.dataAdapter(source, {
                loadComplete: function () {

                }
            });

        

           $("#grid").jqxGrid(
           {
              source: dataAdapter,
              editable: true,
              editmode: 'selectedcell',
               height: 100,
              columns: [
               { text:...