jsGrid is loading rows with empty cells

Good day fellow programmers. I have a little problem with jsGrid. I'm trying to load data into the jsGrid from a Spring MVC controller. It loads all the rows into the table, but the cells are blank and I cannot figure out why. Let me show you...

So here is my jsGrid setup:

$('#transactionTable').jsGrid({
    width: '100%',
    height: '600px',

    autoload: true,
    loadIndication: true,
    loadMessage: 'Loading transactions...',
    loadShading: true,
    inserting: false,
    editing: false,
    sorting: true,
    paging: true,

    fields: [
        { name: 'Id', type: 'text', width: 120, align: 'center' },
        { name: 'Amount', type: 'text', width: 250, align: 'center' },
        { name: 'Category', type: 'text', width: 120, align: 'center' },
        { name: 'Transaction Date', type: 'text', width: 100, align: 'center' }
    ],

    noDataContent: 'No Transactions',

    controller: {
        loadData: function (filter) {
            return $.ajax({
                method: 'GET',
                url: '/api/v1/transactions',
                dataType: 'json',
                headers: {
                    'X-CSRF-TOKEN': $('#token').val()
                },
                data: filter
            });
        }
    }
})

Here is an example response that I get from the ajax call:

[{"id": 97522428, "amount": 38146.51, "category": "Other Income", "transactionDate": "2020-02-06"}]

The above response is only 1 item, there are in fact 500 results, hence the amount of entries in the table.

This is what the table looks like after loading the data: Table

So you can see that it does load all the rows, but the cells are empty... I followed their documentation and I've searched the internet far and wide but could not find an answer. Has anyone experienced this issue before?

I had the same issue and worked out a solution myself. The clue lies in your example response that you are getting from the ajax call. So, the solution is - try changing your fields definition as -

 fields: [
        { name: 'id', type: 'text', width: 120, align: 'center' },
        { name: 'amount', type: 'text', width: 250, align: 'center' },
        { name: 'category', type: 'text', width: 120, align: 'center' },
        { name: 'transactionDate', type: 'text', width: 100, align: 'center' }
    ],

Use 'title' if you want to display the header different -

 fields: [
        { name: 'id', title='ID', type: 'text', width: 120, align: 'center' },
        { name: 'amount', title='Amount', type: 'text', width: 250, align: 'center' },
        { name: 'category', title='Category', type: 'text', width: 120, align: 'center' },
        { name: 'transactionDate', title='Transaction Date', type: 'text', width: 100, align: 'center' }
    ],

I am not sure why the names are changed to 'id' or 'transactionDate' although (I assume) your controller returns 'Id' and 'TransactionDate'.