This example leverages Bulma CSS, a modern and lightweight framework, to provide clean and responsive styling. It enhances the layout with a Vanilla Grid system, imported through a separate JavaScript file for better modularity and maintainability. Bulma ensures consistent design with its intuitive classes, while Vanilla Grid adds a lightweight and flexible structure for organizing content. This setup combines the power of Bulma's prebuilt components and Vanilla Grid's simplicity, creating an efficient and responsive web page suitable for various screen sizes. By isolating the grid logic in a JavaScript file, the code remains clean and easy to manage.

Table 1

Table 2

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

window.addEventListener('DOMContentLoaded', function(){

    const table1 = document.querySelector("table.table-1");

    new VanillaGrid(table1, {
        itemsPerPage:5,
        info:'Showing :start to :end of :total entries',
        classNames: {
            active:'is-current',
            wrapper: 'is-flex is-justify-content-space-between is-align-items-center',
            nav:"pagination",
            ul: 'pagination-list',
            li:'',
            button:'pagination-link',
        }
    })

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

    new VanillaGrid(table2, {
        itemsPerPage:1,
        info:'Showing :start to :end of :total entries',
        classNames: {
            active:'is-current',
            wrapper: 'is-flex is-justify-content-space-between is-align-items-center',
            nav:"pagination",
            ul: 'pagination-list',
            li:'',
            button:'pagination-link',
            selectDiv:'select',
            select:''
        }
    })

})