Svelte Datatables

<script>
  import { fade } from "svelte/transition";
  import RouteBreadcrumb from "../../../components/Breadcrumb/RouteBreadcrumb.svelte";
  import BaseHeader from "../../../components/BaseHeader.svelte";
  import BaseButton from "../../../components/BaseButton.svelte";
  import Card from "../../../components/Cards/Card.svelte";
  import BaseCheckbox from "../../../components/Inputs/BaseCheckbox.svelte";
  import clientPaginationMixin from "./PaginatedTables/clientPaginationMixin";
  import Swal from "sweetalert2/dist/sweetalert2.js";
  import users from "./users2";
  export let name = "Paginated tables";
  import { onMount } from "svelte";
  import jQuery from "jquery";
  import "datatables.net-dt/css";
  import dt from "datatables.net";
  import dtCss from "datatables.net-dt";
  import { clickOutside } from "../../../components/clickOutside.js";
  let search = false;
  let currentPage = 1;
  dt(jQuery);
  let tableElement;
  let table;
  let suffix = false;
  let lengthMenu = [5, 10, 15, 50];
  let perPage = 10;
  let total = users.length;
  let info;
  onMount(
    () =>
      (table = jQuery(tableElement).DataTable({
        order: [[1, "asc"]],
        paging: true,
        searching: true,
        ordering: true,
        info: true,
        responsive: true,
        autoWidth: false,
        lengthMenu: [5, 10, 25, 50],
        pageLength: perPage
      })),
    function() {
      let topmenu = document.getElementsByTagName("nav").item(0);
      topmenu.classList.add("bg-success");
      topmenu.classList.add("navbar-dark");
      topmenu.classList.remove("navbar-light");
      let search = document.getElementsByTagName("form").item(0);
      search.classList.remove("navbar-search-dark");
      search.classList.add("navbar-search-light");
    }
  );

  let mixins = clientPaginationMixin;
  let propsToSearch = ["name", "email", "age"];
  let tableColumns = [
    {
      type: "selection"
    },
    {
      prop: "name",
      label: "Name",
      minWidth: 160,
      sortable: true
    },
    {
      prop: "position",
      label: "Position",
      minWidth: 220,
      sortable: true
    },
    {
      prop: "city",
      label: "Office",
      minWidth: 135,
      sortable: true
    },
    {
      prop: "age",
      label: "Age",
      minWidth: 100,
      sortable: true
    },
    {
      prop: "createdAt",
      label: "Start Date",
      minWidth: 150,
      sortable: true
    },
    {
      prop: "salary",
      label: "Salary",
      minWidth: 120,
      sortable: true
    }
  ];
  let tableData = users;
  let selectedRows = [];

  function paginationChange(page) {
    pagination.currentPage = page;
  }

  function handleLike(index, row) {
    Swal.fire({
      title: `you like ${row.name}`,
      buttonStyling: false,
      type: "succes",
      confirmButtonClass: "btn btn-success btn-fill"
    });
  }
  function handleEdit(index, row) {
    Swal.fire({
      title: `You want to edit ${row.name}`,
      buttonsStyling: false,
      confirmButtonClass: "btn btn-info btn-fill"
    });
  }
  function handleDelete(index, row) {
    Swal.fire({
      title: "Are you sure?",
      text: `You won't be able to revert this!`,
      type: "warning",
      showCancelButton: true,
      confirmButtonClass: "btn btn-success btn-fill",
      cancelButtonClass: "btn btn-danger btn-fill",
      confirmButtonText: "Yes, delete it!",
      buttonsStyling: false
    }).then(result => {
      if (result.value) {
        deleteRow(row);
        Swal.fire({
          title: "Deleted!",
          text: `You deleted ${row.name}`,
          type: "success",
          confirmButtonClass: "btn btn-success btn-fill",
          buttonsStyling: false
        });
      }
    });
  }
  function deleteRow(row) {
    let indexToDelete = tableData.findIndex(tableRow => tableRow.id === row.id);
    if (indexToDelete >= 0) {
      tableData.splice(indexToDelete, 1);
    }
  }
  function selectionChange(selectedRows) {
    selectedRows = selectedRows;
  }

  function tableShow(item) {
    table.page.len(item).draw();
    perPage = item;
    suffix = false;
  }

  function handleClickOutside(event) {
    suffix = false;
  }
</script>

<Card
  className="no-border-card"
  bodyClasses="px-0 pb-1"
  footerClasses="pb-2">
  <div slot="header">
    <h3 class="mb-0">Paginated tables</h3>
    <p class="text-sm mb-0">
      This is a client side example of paginated tables using element-ui
      tables.
    </p>
  </div>
  <div>
    <div
      class="col-12 d-flex justify-content-center
      justify-content-sm-between flex-wrap px-0">
      <div
        class="el-select select-primary pagination-select"
        use:clickOutside
        on:click_outside={handleClickOutside}
        style="padding-left: 15px;">
        <!---->
        <div
          class="el-input el-input--suffix {suffix === true ? 'is-focus' : ''}">
          <!---->
          <input
            type="text"
            id="search"
            on:click={() => (suffix = true)}
            readonly="readonly"
            autocomplete="off"
            placeholder={perPage}
            class="el-input__inner text-dark" />
          <!---->
          <span class="el-input__suffix">
            <span class="el-input__suffix-inner">
              <i
                class="el-select__caret el-input__icon el-icon-arrow-up {suffix === true ? 'is-reverse' : ''}" />
              <!---->
              <!---->
            </span>
            <!---->
          </span>
          <!---->
        </div>
        <div
          class="el-select-dropdown el-popper"
          style="display: {suffix === false ? 'none' : ''}; min-width:
          210px;">
          <div class="el-scrollbar" style="">
            <div
              class="el-select-dropdown__wrap el-scrollbar__wrap"
              style="margin-bottom: -17px; margin-right: -17px;">
              <ul class="el-scrollbar__view el-select-dropdown__list">
                <!---->
                {#each lengthMenu as item}
                  <li
                    class="el-select-dropdown__item select-primary {perPage === item ? 'selected' : ''}"
                    on:click={() => tableShow(item)}>
                    <span>{item}</span>
                  </li>
                {/each}
              </ul>
            </div>
            <div class="el-scrollbar__bar is-horizontal">
              <div
                class="el-scrollbar__thumb"
                style="transform: translateX(0%);" />
            </div>
            <div class="el-scrollbar__bar is-vertical">
              <div
                class="el-scrollbar__thumb"
                style="transform: translateY(0%);" />
            </div>
          </div>
          <!---->
        </div>
      </div>
      <div style="padding-right: 15px;">
        <span placeholder="Search...">
          <div class="form-group">
            <!---->
            <div class="input-group {search == true ? 'focused' : ''}">
              <div class="input-group-prepend">
                <span class="input-group-text">
                  <i class="fas fa-search" />
                </span>
              </div>
              <input
                on:focus={() => (search = true)}
                on:blur={() => (search = false)}
                type="text"
                placeholder="Search..."
                on:keyup={table.search(this.value).draw()}
                id="searchTable"
                class="form-control"
                valid="true" />
              <!---->
            </div>
            <div class="valid-feedback" />
            <!---->
          </div>
        </span>
      </div>
      <table
        bind:this={tableElement}
        class="table-responsive table-flush align-items-center
        border-bottom-0 paginatedTable"
        style="width: 100%">
        <thead class="thead-light">
          <tr>
            <th
              class="py-0 pr-0 text-left"
              style="min-width: 48px; width: 5%; padding-left: 1.5rem;">
              <BaseCheckbox />
            </th>
            {#each tableColumns as column, i}
              {#if i !== 0}
                <th
                  class="py-0 {i === 1 ? 'pl-0 text-left' : ''}"
                  style="min-width: {column.minWidth}px; width: 10%;">
                  {column.label}
                  <span class="caret-wrapper">
                    <i class="sort-caret ascending" />
                    <i class="sort-caret descending" />
                  </span>
                </th>
              {/if}
            {/each}
            <th class="py-0" style="width: 15%;">Actions</th>
          </tr>
        </thead>
        <tbody class="tbodyPaginated">
          {#each tableData as user, i}
            <tr class="trPaginated">
              <td
                colspan="1"
                rowspan="1"
                class="tdPaginated pr-0 text-left">
                <BaseCheckbox />
              </td>
              <td
                colspan="1"
                rowspan="1"
                class="tdPaginated pl-0 text-left">
                {user.name}
              </td>
              <td colspan="1" rowspan="1" class="tdPaginated">
                {user.position}
              </td>
              <td colspan="1" rowspan="1" class="tdPaginated">
                {user.city}
              </td>
              <td colspan="1" rowspan="1" class="tdPaginated">
                {user.age}
              </td>
              <td colspan="1" rowspan="1" class="tdPaginated">
                {user.createdAt}
              </td>
              <td colspan="1" rowspan="1" class="tdPaginated">
                {user.salary}
              </td>
              <td colspan="1" rowspan="1" class="tdPaginated">
                <BaseButton
                  className="like btn-link"
                  type="info"
                  size="sm"
                  on:click={() => handleLike(i, user)}
                  icon>
                  <i class="text-white ni ni-like-2" />
                </BaseButton>
                <BaseButton
                  className="edit"
                  type="warning"
                  size="sm"
                  on:click={() => handleEdit(i, user)}
                  icon>
                  <i class="text-white ni ni-ruler-pencil" />
                </BaseButton>
                <BaseButton
                  className="remove btn-link"
                  type="danger"
                  size="sm"
                  on:click={() => handleDelete(i, user)}
                  icon>
                  <i class="text-white ni ni-fat-remove" />
                </BaseButton>
              </td>
            </tr>
          {/each}
        </tbody>
      </table>
    </div>
  </div>
</Card>