quickgrid

Quick and simple jquery data grid. Will be extended with new featues soon. Currently supports the following:

• filtering
• sorting
• add/edit/remove rows
• callbacks for onaddrowclick/onrowclick/oneditrowclick/onrowdelete that can be overriden with your custom behaviour
• events on add/update/delete rows

Usage

    $(domElement).quickGrid({
        data: [
            {
                property1: value,
                property2: value
            },
            {
                property1: value,
                property2: value
            }
        ],
        columns: {
            property1: {
                visible: false,
                title: "Title"
            },
            property2: {
                title: function (key) {
                    return "Title";
                }
            }
        }
    })

How to include:

Install

Execute npm install quickgrid to download package to node_modules

include from html

quickgrid.min.js already includes basic inline styles so you can just include it as script after jquery

<script src="node_modules\jquery\dist\jquery.min.js"></script>        
<script src="node_modules\quickgrid\dist\quickgrid.min.js"></script>

or to include non-minified version

<link href="node_modules\quickgrid\src\quickgrid.css" rel="stylesheet">
<script src="node_modules\jquery\dist\jquery.min.js"></script>        
<script src="node_modules\quickgrid\src\quickgrid.js"></script>

include as es6 module

index.html

<script type="module" src="main.js"></script>

main.js

import './node_modules/jquery/dist/jquery.js'
import './node_modules/quickgrid/dist/quickgrid.min.js';

//now you can use quickgrid here 
$(function(){
    $('<div></div>').appendTo('body').quickGrid({
        data : [ ... ]
    })
})

Events

qgrd:updaterow
    arguments: row data, row number
qgrd:addrow
    arguments: row data
qgrd:updaterow
    arguments: row data, row number

Callbacks

can be passed when initializing plugin to override default behaviour: Example:

    $(domElement).quickGrid({
        data: [
            //...
        ],
        onrowclick: function (rowdata, rownum) {
            alert ("row " + rownum + " clicked");
        },
    })

onaddrowclick        
onrowclick
    arguments: row data, row number
oneditrowclick
    arguments: row data, row number
onrowdelete
    arguments: row data, row number

Column settings

can be passed when initializing plugin using columns propoerty: Example:

    $(domElement).quickGrid({
        data: [
            {
                property1: value,
                property2: value
            }
            //...
        ],
        columns: {
            property1: {
                visible: false,
                title: "Title"
            }
        }
    })

visible: boolean
    set column visibility, default is true
title: string or function
    set column header caption