GridJS constant: An error happened while fetching the data

Question

I'm trying out GridJS and running a super simple test to see how it works for us... but I'm constaintly getting this error: "An error happened while fetching the data" when loading the page, click away and comeback etc. I typucally can resolve with either a refresh or ctrl+f5, but its strange... anyone else have this issue? is there a different way to do this? maybe I'm missing something. here is the code I'm running.

<link href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css" rel="stylesheet" />
<div id="thetable"></div>
<script src="https://unpkg.com/gridjs/dist/gridjs.umd.js"></script>

<script>
new gridjs.Grid({
    columns: [
        {
            name: '',
            formatter: (cell, row) => {
                return gridjs.html(
                    `<button class="btn btn-sm btn-outline-primary" onclick="location.href='/work/work_id/${row.cells[0].data}'"><span class="material-symbols-outlined">Edit</span></button>`
                );
            },
            sort: false
        },
        { 
            name: 'work_id',
            hidden: true
        },  
        "Client", "Matter", "Date", "Initials", "Task Performed", "Time", "Rate"
    ],
    search: true,
    sort: true,
    pagination: {
        limit: 5
    },

    data: () => [
        [null, "13", "ABC Corp", "Bankruptcy", "02/05/2023", "BAL", "Review financial documents", "2.5", "$300"],
        [null, "12", "123 LLC", "Trademark", "02/07/2023", "SPM", "Research trademark availability", "1.3", "$150"],
        [null, "14", "ABC Corp", "Bankruptcy", "02/10/2023", "BAL", "Prepare for client meeting", "1.8", "$300"],
        [null, "59", "XYZ Inc", "Employment", "02/13/2023", "SPM", "Review case documents", "2.2", "$250"],
        [null, "31", "123 LLC", "Trademark", "02/17/2023", "BAL", "Draft trademark application", ".9", "$150"],
        [null, "44", "ABC Corp", "Bankruptcy", "02/20/2023", "BAL", "Client meeting", "1.5", "$300"],
        [null, "74", "XYZ Inc", "Employment", "02/24/2023", "SPM", "Phone call with client", ".8", "$250"], 
        [null, "45", "123 LLC", "Trademark", "02/27/2023", "BAL", "Revise trademark application", ".7", "$150"],
        [null, "55", "ABC Corp", "Bankruptcy", "03/01/2023", "SPM", "Draft legal brief", "2.3", "$300"],
        [null, "23", "XYZ Inc", "Employment", "03/05/2023", "BAL", "Contract review", "1.1", "$250"]
    ]
    
}).render(document.getElementById("thetable"));
</script>

I've looked at all of the config options but I don's see anything that could resolve.

Answer 1

I was having the same problem, but in my pagination, I set only true and this worked.

My Config:

pagination: true,
resizable: true,
search: true,
sort: true,
fixedHeader: true,
width: '90%',
data: {{results|safe}}`