Cacher is the code snippet organizer for pro developers

<script type="text/javascript" charset="utf-8">

    var grid = {
        view: "datatable",
        id: "mytable",
        editaction: "custom",
        navigation: true,
        select: "cell",
        sort: 'text',
        content: "textFilter",
        resizeColumn: true,
        resizeRow: true,
        autoheight: true,
        autowidth: true,
        footer: false,
        header: true,
        select: "row", editable: true, editaction: "click",

        save: "rest->/posts",
        url: "rest->/posts.json",

        columns: [
            {id: "id", editor: "text", header: "ID", css: "rank", width: 50},
            {id: "name", editor: "text", header: "Title", width: 200},
            {id: "body", editor: "text", header: "Content", width: 80},


            {id: "edit", header: "Edit", template: "{common.editIcon()}"},
            {id: "trash", header: "Trash", template: "{common.trashIcon()}"}
        ]
    };

    var buttons = {
        view: "toolbar", elements: [
            {
                view: "button", value: "Add Row", click: function () {
                    $$('mytable').add({
                        id: '-',
                        name: "...",
                        body: ".."
                    });

                }
            },
            {
                view: "button", value: "Delete Row", click: function () {
                    var id = $$('mytable').getSelectedId();
                    if (id)
                        $$('mytable').remove(id);
                }
            },
            {}
        ]
    };

    var search = {
        view: "text",
        id: "textField",
        placeholder: "Type something to filter the grid...",
        on: {
            onTimedKeyPress: function () {
                $$("mytable").filterByAll();
            }
        }
    };

    webix.ui({
        rows: [
            search,
            grid,
            buttons
        ]
    });

</script>