<table id="project-config-versions-table"></table>
(function() {
    var counter = 1;
    function newId(seed) {
        return String(seed || '') + counter++;
    }

    var savedVersions = [{
        id: 10000,
        status: 'Released',
        name: 'v1.0',
        description: 'The first release'
    }, {
        id: 10001,
        status: 'Unreleased',
        name: 'v1.1',
        description: 'An improvement on the first release'
    }];

    function getVersion(id) {
        return savedVersions.find(v => v.id == id);
    }

    var server = sinon.fakeServer.create();
    server.respondWith("GET", /rest\/project\/(\w+)\/versions/, function(xhr, projectId) {
        xhr.respond(200, {"Content-Type": "application/json"}, JSON.stringify(savedVersions));
    });

    server.respondWith("GET", /rest\/version\/(\d+)/, function(xhr, id) {
        let version = getVersion(id);
        if (version) {
            xhr.respond(200, {"Content-Type": "application/json"}, JSON.stringify(version));
        } else {
            xhr.respond(404, {"Content-Type": "application/json"}, '{"errors":["Not found"]}');
        }
    });

    server.respondWith("PUT", /rest\/version\/(\d+)/, function(xhr, id) {
        let version = getVersion(id);
        if (version) {
            let newData = JSON.parse(xhr.requestBody);
            AJS.$.extend(version, newData);
            xhr.respond(200, {"Content-Type": "application/json"}, JSON.stringify(version));
        } else {
            xhr.respond(404, {"Content-Type": "application/json"}, '{"errors":["Not found"]}');
        }
    });

    server.respondWith("DELETE", /rest\/version\/(\d+)/, function(xhr, id) {
        let version = getVersion(id);
        if (version) {
            savedVersions = savedVersions.filter(v => v.id !== id);
            xhr.respond(200, {"Content-Type": "application/json"}, JSON.stringify(version));
        } else {
            xhr.respond(404, {"Content-Type": "application/json"}, '{"errors":["Not found"]}');
        }
    });

    server.respondWith("POST", /rest\/version$/, function(xhr) {
        var newVersion = JSON.parse(xhr.requestBody);
        newVersion.id = newId('1100');
        savedVersions.push(newVersion);
        xhr.respond(200, {"Content-Type": "application/json"}, JSON.stringify(newVersion));
    });

    server.autoRespond = true;
    server.autoRespondAfter = 300;
})();

		var ContextEditRow = AJS.RestfulTable.EditRow.extend({
				render: function (renderData) {
					// Call original render method of Backbone super class
					this.constructor.__super__.render.apply(this, arguments);
     
				}
			});

    new AJS.RestfulTable({
        el: jQuery("#project-config-versions-table"),
        autoFocus: true,
        resources: {
            all: "rest/project/HSP/versions?expand=operations",
            self: "rest/version"
        },
        views: {
					// this breaks stuff
					 	editRow: ContextEditRow
				},
        columns: [
            {
                id: "status",
                header: "Status",
              editView: AJS.RestfulTable.CustomEditView.extend({
							render: function (self) {
								var sel = "<input type='text' value='some custom HTML here' />";
//some custom HTML here
                
								return $.parseHTML(sel);
              } 
						})
            },
            {
                id: "name",
                header: "Version name"
            },
            {
                id: "description",
                header: "Description"
            },
            {
                id: "releaseDate",
                header: "Release date",
                inputAriaLabel: "Release date field"
            }
        ]
    });


(function() {
    var restfulTableEvents = ["ROW_ADDED", "ROW_REMOVED", "EDIT_ROW", "REORDER_SUCCESS", "SERVER_ERROR"];
    restfulTableEvents.forEach(function(eventName) {
        jQuery(document).on(AJS.RestfulTable.Events[eventName], function() {
            console && console.log("RestfulTable event", eventName, "- callback arguments: ", arguments);
            AJS.flag({
                body: "<strong>" + eventName + "</strong> fired on RestfulTable. (Check devtools for more info).",
                close: "auto"
            });
        });
    });
})();
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.