add table scraping log and datatable server side

resources/js/settings/syncronize/syncronize.js

@@ -1,7 +1,36 @@
+import { Grid } from "gridjs/dist/gridjs.umd.js";
+import gridjs from 'gridjs/dist/gridjs.umd.js'
+import 'gridjs/dist/gridjs.umd.js'
+import GlobalConfig from "../../global-config.js";
+
 class SyncronizeTask {
   init(){
+    this.initTableImportDatasources();
     this.onSyncSubmit();
   }
+  initTableImportDatasources(){
+    new Grid({
+      columns: [
+          "ID", "Message", "Response", "Status", "Created",
+      ],
+      pagination: {
+          limit: 15,
+          server: {
+               url: (prev, page, limit) => `${prev}?page=${page}`
+          }
+      },
+      sort: true,
+      search: {
+          server: {
+               url: (prev, page, keyword) => `${prev}?page=${page}&search=${keyword}`
+          }
+      },
+      server: {
+          url: `${GlobalConfig.apiHost}/api/import-datasource`,
+          then: data => data.data.map((item) => [item.id, item.message, item.response_body, item.status, item.created_at])
+      }
+    }).render(document.getElementById("table-import-datasources"));
+  }
   onSyncSubmit(){
     const form = document.getElementById("sync-form");
     if(form){