sibedas/resources/js/tables/common-table.js

import { Grid } from "gridjs/dist/gridjs.umd.js";
import gridjs from 'gridjs/dist/gridjs.umd.js'
import 'gridjs/dist/gridjs.umd.js'
import GlobalConfig from "../global-config";

class CommonTable {
  init() {
    // this.CommonTableInit();
    this.CommonTableInitWithFetchApi();
  }

  CommonTableInit() {
    new Grid({
      columns: [
        {
           name: 'ID',
           formatter: (function (cell) {
              return gridjs.html('<span class="fw-semibold">' + cell + '</span>');
           })
        },
          "Name",
        {
          name: 'Email',
          formatter: (function (cell) {
              return gridjs.html('<a href="">' + cell + '</a>');
          })
        },
          "Position", "Company", "Country",
        {
          name: 'Actions',
          width: '120px',
          formatter: (function (cell) {
          return gridjs.html(`
                <div class="d-flex justify-items-end gap-10">
                  <a href="#" class="text-primary text-decoration-underline me-2">Details</a>
                  <a href="#" class="text-warning text-decoration-underline me-2">Update</a>
                  <a href="#" class="text-danger text-decoration-underline">Delete</a>
                </div>
              `);
          })
        },
      ],
      pagination: {
        limit: 10
      },
      sort: true,
      search: true,
      data: [
        ["11", "Alice", "alice@example.com", "Software Engineer", "ABC Company", "United States"],
        ["12", "Bob", "bob@example.com", "Product Manager", "XYZ Inc", "Canada"],
        ["13", "Charlie", "charlie@example.com", "Data Analyst", "123 Corp", "Australia"],
        ["14", "David", "david@example.com", "UI/UX Designer", "456 Ltd", "United Kingdom"],
        ["15", "Eve", "eve@example.com", "Marketing Specialist", "789 Enterprises", "France"],
        ["11", "Alice", "alice@example.com", "Software Engineer", "ABC Company", "United States"],
        ["12", "Bob", "bob@example.com", "Product Manager", "XYZ Inc", "Canada"],
        ["13", "Charlie", "charlie@example.com", "Data Analyst", "123 Corp", "Australia"],
        ["14", "David", "david@example.com", "UI/UX Designer", "456 Ltd", "United Kingdom"],
        ["15", "Eve", "eve@example.com", "Marketing Specialist", "789 Enterprises", "France"],
        ["11", "Alice", "alice@example.com", "Software Engineer", "ABC Company", "United States"],
        ["12", "Bob", "bob@example.com", "Product Manager", "XYZ Inc", "Canada"],
        ["13", "Charlie", "charlie@example.com", "Data Analyst", "123 Corp", "Australia"],
        ["14", "David", "david@example.com", "UI/UX Designer", "456 Ltd", "United Kingdom"],
        ["15", "Eve", "eve@example.com", "Marketing Specialist", "789 Enterprises", "France"],
        ["11", "Alice", "alice@example.com", "Software Engineer", "ABC Company", "United States"],
        ["12", "Bob", "bob@example.com", "Product Manager", "XYZ Inc", "Canada"],
        ["13", "Charlie", "charlie@example.com", "Data Analyst", "123 Corp", "Australia"],
        ["14", "David", "david@example.com", "UI/UX Designer", "456 Ltd", "United Kingdom"],
        ["15", "Eve", "eve@example.com", "Marketing Specialist", "789 Enterprises", "France"],
        ["16", "Frank", "frank@example.com", "HR Manager", "ABC Company", "Germany"],
        ["17", "Grace", "grace@example.com", "Financial Analyst", "XYZ Inc", "Japan"],
        ["18", "Hannah", "hannah@example.com", "Sales Representative", "123 Corp", "Brazil"],
        ["19", "Ian", "ian@example.com", "Software Developer", "456 Ltd", "India"],
        ["20", "Jane", "jane@example.com", "Operations Manager", "789 Enterprises", "China"]
      ]
    }).render(document.getElementById("common-table"));
  }

  CommonTableInitWithFetchApi(){
    fetch(`${GlobalConfig.apiHost}/users`)
    .then((response) => response.json())
    .then((data) => {
      console.log("check log response");
      console.log(data.data);
      new Grid({
        columns: [
          {
            name: 'id',
            formatter: (function (cell) {
              return gridjs.html('<span class="fw-semibold">' + cell + '</span>');
            })
          },
            "name",
          {
            name: 'email',
            formatter: (function (cell) {
              return gridjs.html('<a href="">' + cell + '</a>');
            })
          },
            "position", "firstname", "lastname",
          {
            name: 'Actions',
            width: '120px',
            formatter: (function (cell) {
            return gridjs.html(`
                <div class="d-flex justify-items-end gap-10">
                  <a href="#" class="text-primary text-decoration-underline me-2">Details</a>
                  <a href="#" class="text-warning text-decoration-underline me-2">Update</a>
                  <a href="#" class="text-danger text-decoration-underline">Delete</a>
                </div>
              `);
            })
          },
        ],
        pagination: {
          limit: 10
        },
        sort: true,
        search: true,
        data: data.data
      }).render(document.getElementById("common-table"));
    })
    .catch((error) => console.error("Error fetching data: " + error));
  }
}

document.addEventListener('DOMContentLoaded', function (e) {
  new CommonTable().init();
});