This example utilizes Bootstrap CSS for a responsive and visually appealing design, offering prebuilt components and styling for fast development. Additionally, a Vanilla Grid system is integrated via a separate JavaScript file to create a flexible, lightweight grid layout. By keeping the Vanilla Grid import in a dedicated script, the code remains modular and easy to maintain. Bootstrap handles the overall styling and responsiveness, while Vanilla Grid provides a streamlined solution for organizing content. This combination ensures a clean, structured, and efficient web design, suitable for various screen sizes and devices.

Table 1

Table 2

          
            import { VanillaGrid } from "@skriptx2/vanillagrid";

window.addEventListener("DOMContentLoaded", function () {
  const table1 = document.querySelector("table.table-1");

  new VanillaGrid(table1, {
    itemsPerPage: 10,
    info: "Showing :start to :end of :total entries",
    classNames: {
      wrapper: "d-flex justify-content-between align-items-center",
      ul: "pagination",
      li: "page-item",
      button: "page-link",
      select: "form-select",
    },
  });

  const table2 = document.querySelector("table.table-2");

  new VanillaGrid(table2, {
    itemsPerPage: 1,
    info: "Showing :start to :end of :total entries",
    classNames: {
      wrapper: "d-flex justify-content-between align-items-center",
      ul: "pagination",
      li: "page-item",
      button: "page-link",
      select: "form-select",
    },
  });
});