Unable to display data in Restful table

I am using Restful Table. However, I am struggling with displaying the data in the table rows. The table is loaded with empty row, upon inspecting I see that the table is injected in the DOM and also the AJAX call is made to the backend that retrieves the data successfully. Any hints on what I am doing wrong?

I have created a servlet that serves the response of type JSON

{
    "id": 1,
    "category": "High"
},
{
    "id": 2,
    "category": "Low"
}

Here is how my velocity template looks like

$webResourceManager.requireResourcesForContext("foo")
$webResourceManager.requireResourcesForContext("plugincontext")
<html>
<head>
    <meta name="decorator" content="admin" />
    <meta name="admin.active.section" content="atl.jira.proj.config" />
    <meta name="admin.active.tab" content="category-config-link" />
    <meta name="projectKey" content="$projectKey" />
    <meta name="projectId" content="$projectId" />
</head>
<html>
<body>
<div class="tabs-pane active-pane" id="tabs-example">
                <form class="aui" id="foo" action="#">
                    <table id="cat-table"></table>
                </form>
            </div>
</body>
</html>

The corresponding JS looks as follows

AJS.$(document).ready(function() {
    AJS.TableExample = {};
    AJS.TableExample.table = new AJS.RestfulTable({
        el: jQuery('#cat-table'),
        autoFocus: false,
        resources: {
            all: AJS.contextPath() + "/rest/helloworldplugin/1.0/category/XYZ/category",
            self: AJS.contextPath() + "/rest/helloworldplugin/1.0/category/XYZ/self"
        },
        columns: [{
                id: "category",
                header: "Name of Category"
            }
        ]
    });
});

My Jira version is 8.21.0

Edit: Update Jira to 9.4.0 and the issue remains.