How to Use Metronic 9 Datatable Remote Data Source with Request Header
Hello, is there a way for KT datatable to call remote data source api with request header, eg. if the api request must include token header? I already check in the documentation for datatable in metronic 9, but the example only covers api call without request header. Also, for the json response format, should I follow the format of example that includes page, pageCount, etc, or can I use only data needed for datatable?
Thank you.
Replies (3)
Hi
Yes, for server-side pagination to work correctly with KTDataTable, the API response needs to include certain metadata about the total number of records. Based on the code, here's what your API response should look like:
{
"data": [
// Your data array here
{ "id": 1, "name": "Example 1" },
{ "id": 2, "name": "Example 2" }
// ...
],
"totalCount": 100 // Total number of records (across all pages)
}The key fields are:
- data: Array containing the records for the current page
- totalCount: Total number of records available (across all pages)
If your API returns a different format, you can use the mapResponse configuration option to transform the response:
const dataTableOptions = {
apiEndpoint: "https://your-api-endpoint.com/data",
requestHeaders: {
"Authorization": "Bearer your-auth-token-here"
},
mapResponse: function(response) {
return {
// Transform your API response to match the expected format
data: response.items, // or whatever your data array is called
totalCount: response.total // or whatever your total count field is called
};
},
// other options...
};The "1-NaN of undefined" error occurs because the component can't find the total count of records in the response, which it needs to calculate pagination properly.
Also, when making requests to your API, KTDataTable will automatically include these query parameters:
- page: Current page number
- size: Number of records per page
- sortField: Field to sort by (if sorting is enabled)
- sortOrder: Sort direction ('asc' or 'desc')
Make sure your API handles these parameters to return the correct page of data.
Hi Abudzar Ali
Sorry for the delay. The KTDataTable component accepts a requestHeaders configuration option that lets you specify custom headers for the API requests:
const dataTableOptions = {
apiEndpoint: "https://your-api-endpoint.com/data",
requestHeaders: {
"Content-Type": "application/json", // Override the default content type if needed
"Authorization": "Bearer your-auth-token-here",
"X-Custom-Header": "CustomValue"
},
pageSize: 10,
// other options...
};
const dataTable = new KTDataTable(element, dataTableOptions);By default, the component sets 'Content-Type': 'application/x-www-form-urlencoded', but you can override this if your API requires a different content type.
Thank you and sorry for the late response. I already succeeded in implementing requestHeaders for KTDatatable configuration and shown the data, but the pagination is not working because it shows "1-NaN of undefined" on pagination part. Should i also include the number of data (count) in the json response for the api url, or maybe there are some mandatory response value that needed for KTDatatable api url, especially in server side pagination case?
