Show list of key value pairs in Gijgo subgrid on expand

I have the following data in a Gijgo grid,

The main grid shows the Fields Id, ItemBC, ParItemBC etc.. fine
But I want to show the ParamDetails in the subgrid in detailTemplate, but not able to show this. Tried many things with the detailTemplate but not able to show the details in the subgrid.

Data:

{
"records":  
    [
        {
            "Id":33321,         
            "ItemBC":"000463712",
            "ParItemBC":"000118974",            
            "Status":"1",
            "CreatedBy":"u228",
            "CreationDate":"/Date(1695848400000)/",
            "OId":1,
            "ParamDetails":
            [
                {
                    "PName":"Param1",
                    "PValue":"33.5"
                },
                {
                    "PName":"Param2",
                    "PValue":"493.4"
                },
                {
                    "PName":"Param3",
                    "PValue":"88"
                },
                {
                    "PName":"Param8",
                    "PValue":"Testing Param8"
                }
            ]
        }
    ]
}

JavaScript:

$(document).ready(function () {
            grid = $('#grid').grid({
                async: true,
                dataSource: '/Search/ListPages',
                uiLibrary: "bootstrap4",
                columnReorder: true,
                fontSize: '13px',               
                iconsLibrary: 'fontawesome',
                columns: [                    
                    { field: 'Id', sortable: true, width: 60 },                    
                    { field: 'ItemBC', title: 'ItemBC', sortable: true, width: 80 },
                    { field: 'ParItemBC', title: 'ParentItemBC', sortable: true, width: 80},
                    { field: 'Status', title: 'Status', width: 100 },
                    { field: 'CreatedBy', title: 'CreatedBy', width: 70, cssClass: 'label-primary' },        
                    { field: 'CreationDate', title: 'CreationDate', width: 80 }               
                ],

                detailTemplate: '<div></div>',
                icons: {
                    expandRow: '<i class="fa fa-plus-circle"></i>',
                    collapseRow: '<i class="fa fa-minus-circle"></i>'
                },

                pager: { enable: true, limit: 5, sizes: [2, 5, 10, 20] }
            });

            grid.on('detailExpand', function (e, $detailWrapper, record) {
                var subggrid = $detailWrapper.append('<table id="subgrid"/>').find('table').grid({
                    dataSource: record,
                    columns: [
                        { title: 'PName',  renderer: function (value, record) { return record.ParamDetails.PName; }},
                        { title: 'PValue', renderer: function (value, record) { return record.ParamDetails.PValue; }}
                    ],
                });               
            });
            grid.on('detailCollapse', function (e, $detailWrapper, record) {
                $detailWrapper.empty();
            });

            $("#btnSearch").on("click", Search);
            $("#search").keyup(function (event) {
                if (event.keyCode === 13) {
                    $("#btnSearch").click();
                }
            });
        });

Any help is appreciated.

Thanks.