jedliGrid by Bartłomiej Jedlikowski

What is jedliGrid?

jedliGrid is lightweight, easy to use, pure (vanilla) JavaScript library to show and manage data in tables.

Compatibility

jedliGrid is made with functionality of ES6 like async/await, i haven't tested it yet on non 'present' browsers, but with some transpiler (like Babel) it should work on older browsers as well

What's new?

v. 1.2.1

Added function update() and updateCol()

How to use:

Install via npm

"npm install jedligrid"

jedliGrid at NPM

Import library

Initialization

Simple html structure

                        
<div data-item="grid">
</div>

Simple initialization

                                    
let grid = new jedliGrid(document.querySelector("[data-item='grid']"));

Functions:

async addRow(amount , target, customParams, content)

Add row to specified place in grid (head/body) params:

amount = int How many rows will be added, by default one
target = array, can contain 'head', 'body' or both Specified where row will be added, by default to both head and body ['head', 'body']
customParams = object Allows to add custom params to specified row
content = object Create cols for all elements in array with custom parameters

example of content object that will be properly transformed to columns:

                            
let contentObject = {
    element1: {
        content: 'content col 1',
        params: {
            customParam1: "Example 1",
            customParam2: "Example 2"
        }
    },
    element2: {
        content: 'content col 2',
        params: {
            customParam1: "Example 1",
            customParam2: "Example 2"
        }
    }
}

async addCol(amount, target, rowIndex, content, customParams)

Add col to specified row params:

amount = int
How many cols will be added, by default one
target = array of strings
Specified where this row is, head or body
rowIndex = int/string (default 0)
Specified index of row where col will be added
content = string/html
Contains what will be added to col
customParams = object
Allows to add custom params to specified row

async addContent(element, content, position)

Add content to specified element (col, or div; not row!) params:

element = DOM element
Element to add content
content = string
Content that will be inserted into element
rowIndex = int/string (default 0)
Specified index of row where col will be added
type = string
Specified place where content will be added Acceptable values:
- beforebegin
- afterbegin
- beforeend (default value)
- afterend

getContent(element)

Get content of specified element. innerHTML if its col, and object if its row params:

element DOM reference

MORE SOON.. WHOLE DOCUMENTATION CAN BE FOUND IN JEDLIGRID.JS AS COMMENTS
Full list of functions:
init()
initRoot()
initHead()
initBody()
initDOM()
setIndex()
updateIndex()
addContent()
getContent()
addCol()
addRow()
deleteElement()
deleteRow()
deleteCol()
destroy()
clear()
clearHead()
clearBody()
getRoot()
getHead()
getBody()
Events:
afterInit
rowClick
colClick