DataTable

ref #5

package.json

@@ -7,6 +7,8 @@
 	},
 	"dependencies": {
 		"@odit/lfk-client-js": "^0.0.4",
+		"gridjs": "^3.2.0",
+		"nanoid": "^3.1.20",
 		"svelte-i18n": "^3.3.0",
 		"svelte-spa-router": "^3.1.0",
 		"tailwindcss": "^2.0.2",
@@ -14,11 +16,11 @@
 		"validator": "^13.5.2"
 	},
 	"devDependencies": {
-		"snowpack": "3.0.0-rc.2",
 		"@snowpack/plugin-svelte": "^3.4.1",
 		"autoprefixer": "^10.1.0",
 		"postcss": "^8.2.1",
 		"postcss-load-config": "^3.0.0",
+		"snowpack": "3.0.0-rc.2",
 		"svelte": "^3.31.0",
 		"svelte-preprocess": "^4.6.1"
 	}

src/components/Dashboard.svelte

@@ -8,6 +8,7 @@
   import BreadcrumbNav from "./BreadcrumbNav.svelte";
   import NotFound from "./NotFound.svelte";
   import Sidebar from "./Sidebar.svelte";
+  import DataTable from "./DataTable.svelte";
   //
   let isProfileActionsVisible = false;
   let mobile_menu_opened = false;
@@ -296,6 +297,9 @@
   </div>
   <main>
     <div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
+      <div class="mb-8">
+        <DataTable />
+      </div>
       <StatCards />
       <div class="mb-8">
         <Tracks />

src/components/DataTable.svelte

@@ -0,0 +1,29 @@
+<script>
+  import { Grid } from "gridjs";
+  import "gridjs/dist/theme/mermaid.css";
+  import { nanoid } from "nanoid";
+  //
+  const uniq = nanoid();
+  const datatable = new Grid({
+    columns: ["Name", "Email", "Phone Number"],
+    sort: true,
+    search: { enabled: true },
+    data: [
+      ["John", "john@example.com", "(353) 01 222 3333"],
+      ["Mark", "mark@gmail.com", "(01) 22 888 4444"],
+      ["Eoin", "eoin@gmail.com", "0097 22 654 00033"],
+      ["Sarah", "sarahcdd@gmail.com", "+322 876 1233"],
+      ["Afshin", "afshin@mail.com", "(353) 22 87 8356"],
+    ],
+    pagination: {
+      enabled: true,
+      limit: 2,
+      summary: false,
+    },
+  });
+  setTimeout(() => {
+    datatable.render(document.getElementById("wrapper" + uniq));
+  }, 0);
+</script>
+
+<div id="wrapper{uniq}" />