DataTable

ref #5

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}" />