Grid Js

OverviewOfficial Website

Grid.js is a Free and open-source JavaScript table plugin. It works with most JavaScript frameworks.

CSS
<!-- gridjs css -->
<link rel="stylesheet" href="assets/libs/gridjs/theme/mermaid.min.css">
Javascript
<!-- gridjs js -->
<script src="assets/libs/gridjs/gridjs.umd.js"></script>
Initjs (Custom js)
<!-- gridjs init -->
<script src="assets/js/pages/gridjs.init.js"></script>
Add Package
yarn add gridjs --save
Remove Package
yarn remove gridjs or you can remove package by removing specific package from package.json
Examples
Title Javascript
Base Example
new gridjs.Grid({
    columns: [
        {
            name: 'ID',
            formatter: (function (cell) {
                return gridjs.html('' + cell + '');
            })
        },
        "Name", 
        {
            name: 'Email',
            formatter: (function (cell) {
                return gridjs.html('' + cell + '');
            })
        },
        "Position", "Company", "Country",
        {
            name: 'Actions',
            width: '120px',
            formatter: (function (cell) {
                return gridjs.html("" +
                "Details" +
                "");
            })
        },
    ],
    pagination: {
        limit: 5
    },
    sort: true,
    search: true,
    data: [
        ["01", "Jonathan", "jonathan@example.com","Senior Implementation Architect", 
        "Hauck Inc", "Holy See"],
        ["02", "Harold", "harold@example.com", "Forward Creative Coordinator",
        "Metz Inc", "Iran"],
        ["03", "Shannon", "shannon@example.com","Legacy Functionality Associate",
            "Zemlak Group", "South Georgia"],
        ["04", "Robert", "robert@example.com","Product Accounts Technician",
            "Hoeger", "San Marino"],
        ["05", "Noel", "noel@example.com","Customer Data Director",
            "Howell - Rippin", "Germany"],
        ["06", "Traci", "traci@example.com","Corporate Identity Director",
            "Koelpin - Goldner", "Vanuatu"],
        ["07", "Kerry", "kerry@example.com","Lead Applications Associate",
            "Feeney, Langworth and Tremblay", "Niger"],
        ["08", "Patsy", "patsy@example.com","Dynamic Assurance Director",
            "Streich Group", "Niue"],
        ["09", "Cathy", "cathy@example.com","Customer Data Director",
            "Ebert, Schamberger and Johnston", "Mexico"],
        ["10", "Tyrone", "tyrone@example.com", "Senior Response Liaison",
            "Raynor, Rolfson and Daugherty", "Qatar"],
    ]
}).render(document.getElementById("table-gridjs"));

Card Table
new gridjs.Grid({
columns: ["Name", "Email", "Position", "Company", "Country"],
sort: true,
pagination: {
    limit: 5
},
data: [
    ["Jonathan", "jonathan@example.com", "Senior Implementation Architect",
        "Hauck Inc", "Holy See"],
    ["Harold", "harold@example.com", "Forward Creative Coordinator",
        "Metz Inc", "Iran"],
    ["Shannon", "shannon@example.com", "Legacy Functionality Associate",
        "Zemlak Group", "South Georgia"],
    ["Robert", "robert@example.com", "Product Accounts Technician",
        "Hoeger", "San Marino"],
    ["Noel", "noel@example.com", "Customer Data Director",
        "Howell - Rippin", "Germany"],
    ["Traci", "traci@example.com", "Corporate Identity Director",
        "Koelpin - Goldner", "Vanuatu"],
    ["Kerry", "kerry@example.com", "Lead Applications Associate",
        "Feeney, Langworth and Tremblay", "Niger"],
    ["Patsy", "patsy@example.com", "Dynamic Assurance Director",
        "Streich Group", "Niue"],
    ["Cathy", "cathy@example.com", "Customer Data Director",
        "Ebert, Schamberger and Johnston", "Mexico"],
    ["Tyrone", "tyrone@example.com", "Senior Response Liaison",
        "Raynor, Rolfson and Daugherty", "Qatar"],
]
}).render(document.getElementById("table-card"));
Pagination
new gridjs.Grid({
    columns: [{
        name: 'ID',
        width: '120px',
        formatter: (function (cell) {
            return gridjs.html('' + cell + '');
        })
    },"Name", "Date", "Total", "Status",
    {
        name: 'Actions',
        width: '100px',
        formatter: (function (cell) {
            return gridjs.html("");
        })
    },
],
    pagination: {
        limit: 5
    },

    data: [
        ["#VL2111", "Jonathan", "07 Oct, 2021", "$24.05", "Paid",],
        ["#VL2110", "Harold", "07 Oct, 2021", "$26.15", "Paid"],
        ["#VL2109", "Shannon", "06 Oct, 2021", "$21.25", "Refund"],
        ["#VL2108", "Robert", "05 Oct, 2021", "$25.03", "Paid"],
        ["#VL2107", "Noel", "05 Oct, 2021", "$22.61", "Paid"],
        ["#VL2106", "Traci", "04 Oct, 2021", "$24.05", "Paid"],
        ["#VL2105", "Kerry", "04 Oct, 2021", "$26.15", "Paid"],
        ["#VL2104", "Patsy", "04 Oct, 2021", "$21.25", "Refund"],
        ["#VL2103", "Cathy", "03 Oct, 2021", "$22.61", "Paid"],
        ["#VL2102", "Tyrone", "03 Oct, 2021", "$25.03", "Paid"],
    ]
}).render(document.getElementById("table-pagination"));
Search
new gridjs.Grid({
    columns: ["Name", "Email", "Position", "Company", "Country"],
    pagination: {
        limit: 5
    },
    search: true,
    data: [
        ["Jonathan", "jonathan@example.com", "Senior Implementation Architect",
        "Hauck Inc", "Holy See"],
        ["Harold", "harold@example.com", "Forward Creative Coordinator",
         "Metz Inc", "Iran"],
        ["Shannon", "shannon@example.com", "Legacy Functionality Associate",
         "Zemlak Group", "South Georgia"],
        ["Robert", "robert@example.com", "Product Accounts Technician",
         "Hoeger", "San Marino"],
        ["Noel", "noel@example.com", "Customer Data Director",
         "Howell - Rippin", "Germany"],
        ["Traci", "traci@example.com", "Corporate Identity Director",
         "Koelpin - Goldner", "Vanuatu"],
        ["Kerry", "kerry@example.com", "Lead Applications Associate",
         "Feeney, Langworth and Tremblay", "Niger"],
        ["Patsy", "patsy@example.com", "Dynamic Assurance Director",
         "Streich Group", "Niue"],
        ["Cathy", "cathy@example.com", "Customer Data Director",
         "Ebert, Schamberger and Johnston", "Mexico"],
        ["Tyrone", "tyrone@example.com", "Senior Response Liaison",
         "Raynor, Rolfson and Daugherty", "Qatar"],
    ]
}).render(document.getElementById("table-search"));
Sorting
new gridjs.Grid({
    columns: ["Name", "Email", "Position", "Company", "Country"],
    pagination: {
        limit: 5
    },
    sort: true,
    data: [
        ["Jonathan", "jonathan@example.com", "Senior Implementation Architect",
         "Hauck Inc", "Holy See"],
        ["Harold", "harold@example.com", "Forward Creative Coordinator",
         "Metz Inc", "Iran"],
        ["Shannon", "shannon@example.com", "Legacy Functionality Associate",
         "Zemlak Group", "South Georgia"],
        ["Robert", "robert@example.com", "Product Accounts Technician",
         "Hoeger", "San Marino"],
        ["Noel", "noel@example.com", "Customer Data Director",
         "Howell - Rippin", "Germany"],
        ["Traci", "traci@example.com", "Corporate Identity Director",
         "Koelpin - Goldner", "Vanuatu"],
        ["Kerry", "kerry@example.com", "Lead Applications Associate",
         "Feeney, Langworth and Tremblay", "Niger"],
        ["Patsy", "patsy@example.com", "Dynamic Assurance Director",
         "Streich Group", "Niue"],
        ["Cathy", "cathy@example.com", "Customer Data Director",
         "Ebert, Schamberger and Johnston", "Mexico"],
        ["Tyrone", "tyrone@example.com", "Senior Response Liaison"
        , "Raynor, Rolfson and Daugherty", "Qatar"],
    ]
}).render(document.getElementById("table-sorting"));
Loading State
vnew gridjs.Grid({
    columns: ["Name", "Email", "Position", "Company", "Country"],
    pagination: {
        limit: 5
    },
    sort: true,
    data: function () {
        return new Promise(function (resolve) {
            setTimeout(function () {
                resolve([
                    ["Jonathan", "jonathan@example.com", "Senior Implementation Architect",
                     "Hauck Inc", "Holy See"],
                    ["Harold", "harold@example.com", "Forward Creative Coordinator",
                     "Metz Inc", "Iran"],
                    ["Shannon", "shannon@example.com", "Legacy Functionality Associate",
                     "Zemlak Group", "South Georgia"],
                    ["Robert", "robert@example.com", "Product Accounts Technician",
                     "Hoeger", "San Marino"],
                    ["Noel", "noel@example.com", "Customer Data Director",
                     "Howell - Rippin", "Germany"],
                    ["Traci", "traci@example.com", "Corporate Identity Director",
                     "Koelpin - Goldner", "Vanuatu"],
                    ["Kerry", "kerry@example.com", "Lead Applications Associate",
                     "Feeney, Langworth and Tremblay", "Niger"],
                    ["Patsy", "patsy@example.com", "Dynamic Assurance Director",
                     "Streich Group", "Niue"],
                    ["Cathy", "cathy@example.com", "Customer Data Director",
                     "Ebert, Schamberger and Johnston", "Mexico"],
                    ["Tyrone", "tyrone@example.com", "Senior Response Liaison",
                     "Raynor, Rolfson and Daugherty", "Qatar"]
                ])
            }, 2000);
        });
    }
}).render(document.getElementById("table-loading-state"));
Fixed Header
new gridjs.Grid({
    columns: ["Name", "Email", "Position", "Company", "Country"],
    sort: true,
    pagination: true,
    fixedHeader: true,
    height: '400px',
    data: [
        ["Jonathan", "jonathan@example.com", "Senior Implementation Architect",
         "Hauck Inc", "Holy See"],
        ["Harold", "harold@example.com", "Forward Creative Coordinator",
         "Metz Inc", "Iran"],
        ["Shannon", "shannon@example.com", "Legacy Functionality Associate",
         "Zemlak Group", "South Georgia"],
        ["Robert", "robert@example.com", "Product Accounts Technician",
         "Hoeger", "San Marino"],
        ["Noel", "noel@example.com", "Customer Data Director", 
        "Howell - Rippin", "Germany"],
        ["Traci", "traci@example.com", "Corporate Identity Director",
         "Koelpin - Goldner", "Vanuatu"],
        ["Kerry", "kerry@example.com", "Lead Applications Associate",
         "Feeney, Langworth and Tremblay", "Niger"],
        ["Patsy", "patsy@example.com", "Dynamic Assurance Director",
         "Streich Group", "Niue"],
        ["Cathy", "cathy@example.com", "Customer Data Director",
         "Ebert, Schamberger and Johnston", "Mexico"],
        ["Tyrone", "tyrone@example.com", "Senior Response Liaison",
         "Raynor, Rolfson and Daugherty", "Qatar"],
    ]
}).render(document.getElementById("table-fixed-header"));
Hidden Columns
new gridjs.Grid({
    columns: ["Name", "Email", "Position", "Company",
        {
            name: 'Country',
            hidden: true
        },],
    pagination: {
        limit: 5
    },
    sort: true,
    data: [
        ["Jonathan", "jonathan@example.com", "Senior Implementation Architect",
         "Hauck Inc", "Holy See"],
        ["Harold", "harold@example.com", "Forward Creative Coordinator",
         "Metz Inc", "Iran"],
        ["Shannon", "shannon@example.com", "Legacy Functionality Associate",
         "Zemlak Group", "South Georgia"],
        ["Robert", "robert@example.com", "Product Accounts Technician",
         "Hoeger", "San Marino"],
        ["Noel", "noel@example.com", "Customer Data Director",
         "Howell - Rippin", "Germany"],
        ["Traci", "traci@example.com", "Corporate Identity Director",
         "Koelpin - Goldner", "Vanuatu"],
        ["Kerry", "kerry@example.com", "Lead Applications Associate",
         "Feeney, Langworth and Tremblay", "Niger"],
        ["Patsy", "patsy@example.com", "Dynamic Assurance Director",
         "Streich Group", "Niue"],
        ["Cathy", "cathy@example.com", "Customer Data Director",
         "Ebert, Schamberger and Johnston", "Mexico"],
        ["Tyrone", "tyrone@example.com", "Senior Response Liaison",
         "Raynor, Rolfson and Daugherty", "Qatar"],
    ]
}).render(document.getElementById("table-hidden-column"));
© Velzon.
Design & Develop by Themesbrand