i18n compatible datatable

src/components/DataTable.svelte

@@ -1,11 +1,13 @@
 <script>
+  import { _, t } from "svelte-i18n";
+  import { getlang } from "./datatable_i18n";
   import { Grid } from "gridjs";
   import "gridjs/dist/theme/mermaid.css";
-  import { nanoid } from "nanoid";
   //
-  const uniq = nanoid();
+  let table;
   const datatable = new Grid({
     columns: ["Name", "Email", "Phone Number"],
+    language: getlang($_("datatable")),
     sort: true,
     search: { enabled: true },
     data: [
@@ -22,8 +24,8 @@
     },
   });
   setTimeout(() => {
-    datatable.render(document.getElementById("wrapper" + uniq));
+    datatable.render(table);
   }, 0);
 </script>
 
-<div id="wrapper{uniq}" />
+<div bind:this={table} />

src/components/datatable_i18n.js

@@ -0,0 +1,24 @@
+export function getlang(langkeys) {
+	return {
+		search: {
+			placeholder: langkeys.search
+		},
+		sort: {
+			sortAsc: langkeys.sort_column_ascending,
+			sortDesc: langkeys.sort_column_descending
+		},
+		pagination: {
+			previous: langkeys.previous,
+			next: langkeys.next,
+			navigate: (page, pages) => `${langkeys.page} ${page} ${langkeys.of} ${pages}`,
+			page: (page) => `${langkeys.page} ${page}`,
+			showing: langkeys.showing,
+			of: langkeys.of,
+			to: langkeys.to,
+			results: langkeys.records
+		},
+		loading: langkeys.loading,
+		noRecordsFound: langkeys.no_matching_records_found,
+		error: langkeys.an_error_happened_while_fetching_the_data
+	};
+}

src/locales/de.json

@@ -21,5 +21,8 @@
   "dont-have-your-email-connected": "Deine E-Mail ist nicht verknüpft?",
   "reset-my-password": "Passwort zurücksetzen",
   "e-mail-adress": "E-Mail-Adresse",
-  "invalid-mail-reset": "Das ist keine gültige E-Mail"
+  "invalid-mail-reset": "Das ist keine gültige E-Mail",
+  "datatable": {
+    "search": "🔍 Suche ..."
+  }
 }

src/locales/en.json

@@ -28,5 +28,20 @@
 	"runners": "runners",
 	"total-scans": "total scans",
 	"total-donations": "total donations",
-  "total-distance": "total distance"
+	"total-distance": "total distance",
+	"datatable": {
+		"search": "🔍 Search...",
+		"sort_column_ascending": "Sort column ascending",
+		"sort_column_descending": "Sort column descending",
+		"previous": "Previous",
+		"next": "Next",
+		"page": "Page",
+		"showing": "Showing",
+		"records": "Records",
+		"of": "of",
+		"to": "to",
+		"loading": "Loading...",
+		"no_matching_records_found": "No matching records found",
+		"an_error_happened_while_fetching_the_data": "An error happened while fetching the data"
+	}
 }