Data Loading Error - Unable to process data due to invalid data type Expecting: array Received: string

Question

I am new to tabulator and i wanted to know why this is isn't working my data response is like this

[{"UserId":2,"Name":"John Doe","WorkingMinutes":0,"WorkingHours":"4:37","Date":"2018-05-15T08:35:20"},
{"UserId":14,"Name":"John Doe","WorkingMinutes":0,"WorkingHours":"0:47","Date":"2018-05-15T08:36:10"},
{"UserId":8,"Name":"John Doe","WorkingMinutes":0,"WorkingHours":"1:20","Date":"2018-05-15T08:37:47"},
{"UserId":16,"Name":"John Doe","WorkingMinutes":0,"WorkingHours":"2:55 (Nuk ka Deklaruar Pauze)","Date":"2018-05-15T08:37:52"},
{"UserId":11,"Name":"John Doe","WorkingMinutes":0,"WorkingHours":"2:54 (Nuk ka Deklaruar Pauze)","Date":"2018-05-15T08:38:03"},
{"UserId":1,"Name":"John Doe","WorkingMinutes":0,"WorkingHours":"2:38 (Nuk ka Deklaruar Pauze)","Date":"2018-05-15T08:49:23"}]

(the names are all the same for purpose of privacy)

And this is my javascript

      <script type="text/javascript">
var table = new Tabulator("#MyTable", {
    ajaxURL: "@Url.Action("WorkingHours", "Dashboard")",
    height: "292px",
    layout: "fitColumns",
    pagination: "local",
    paginationSize: 20,
    movableColumns: true,
    columns: [
        { title: "UserId", field: "Id", formatter: "star", align: "center", width: 100 },
        { title: "Name", field: "name", width: 200 },
        { title: "Working Minutes", field: "progress", sorter: "number" },
        { title: "Working Hours", field: "progress" , sorter : "number" },
        { title: "Date", field: "dob", align: "center", sorter: "date" },
    ],
});

I checked the console and the response and it said this : Data Loading Error - Unable to process data due to invalid data type Expecting: array Received: string and then the data that is in the begging of the question. And yes me method returns a string but it is json.

Answer 1

The data you are returning is in the format needed for an Un-Paginated Table

For paginated data it needs the following format:

{
    "last_page":15, //the total number of available pages (this value must be greater than 0)
    "data":[ // an array of row data objects
        {id:1, name:"bob", age:"23"}, //example row data object
    ]
}

Full documentation on how to use remote pagination can be found on the Tabulator Website