My SlickGrid Example

Excel like autoFill, formatted cells, dirty row detection, col/row selection

HTML

<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="https://rawgithub.com/Celebio/SlickGrid/master/lib/jquery.event.drag-2.2.js"></script>
<script src="https://rawgithub.com/Celebio/SlickGrid/master/slick.core.js"></script>
<script src="https://rawgithub.com/Celebio/SlickGrid/master/slick.grid.js"></script>
<link rel="stylesheet" href="https://rawgithub.com/Celebio/SlickGrid/master/slick.grid.css">
<link rel="stylesheet" href="https://rawgithub.com/Celebio/SlickGrid/master/slick-default-theme.css">
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="https://rawgithub.com/Celebio/SlickGrid/master/plugins/slick.cellselectionmodel.js"></script>
<script src="https://rawgithub.com/Celebio/SlickGrid/master/plugins/slick.cellrangedecorator.js"></script>
<script src="https://rawgithub.com/Celebio/SlickGrid/master/plugins/slick.cellrangeselector.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="https://rawgit.com/Celebio/SlickGrid/master/plugins/slick.rowselectionmodel.js"></script>
<table width="100%">
    <tr>
        <td valign="top" width="50%">
            <div id="myGrid" style="width:280px;height:128px;"></div><br>

            <div id="result"></div>
        </td>
    </tr>
</table>

CSS

.cell-effort-driven {
    text-align: center;
}
.cell-yellow {
    z-index:1;
    background: #FFFF00;
}
.slick-cell.selected {
    z-index:10;
    background:#FF8C00 !important;
}

JavaScript

(function ($) {
    // register namespace
    $.extend(true, window, {
        "Slick": {
            "Editors": {
                "MyEditor": clickTextEditor,
            }
        }
    });


    function clickTextEditor(args) {
        var $input;
        var defaultValue;
        var scope = this;

        this.init = function () {
            $input = $("<INPUT type=text class='editor-text' />")
                .appendTo(args.container)
                .bind("keydown.nav", function (e) {
                if (e.keyCode === $.ui.keyCode.LEFT || e.keyCode === $.ui.keyCode.RIGHT) {
                    e.stopImmediatePropagation();
                }
            })
                .focus()
                .select();
        };

        this.destroy = function () {
            $input.remove();
        };

        this.focus = function () {
            $input.focus();
        };

        this.getValue = function () {
            return $input.val();
        };

        this.setValue = function (val) {
            $input.val(val);
        };

        this.loadValue = function (item) {
            defaultValue = item[args.column.field] || "";
            $input.val(defaultValue);
            $input[0].defaultValue = defaultValue;
            $input.select();
        };

        this.serializeValue = function () {
            return $input.val();
        };

        this.applyValue = function (item, state) {
            item[args.column.field] = state;
        };

        this.isValueChanged = function () {
            return (!($input.val() == "" && defaultValue == null)) && ($input.val() != defaultValue);
        };

        this.validate = function () {
            if (args.column.validator) {
                var validationResults = args.column.validator($input.val());
                $('#result').html($('#result').text()+'<br/>'+"You have Updated Text from - "+defaultValue+" "+"To - "+$input.val());
                if (!validationResults.valid) {
                   ...