<script>
  import { _, json } from "svelte-i18n";
  import { getlang } from "./datatable_i18n";
  import { Grid } from "gridjs";
  import "gridjs/dist/theme/mermaid.css";
  //
  let table;
  const datatable = new Grid({
    columns: ["Name", "Email", "Phone Number"],
    language: getlang($json("datatable")),
    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(table);
  }, 0);
</script>

<div bind:this={table} />
