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
+	};
+}