vanilla-grid

A simple and lightweight javascript data grid

Demo

Install

npm i vanilla-grid

Usage

HTML

<div id="grid"></div>

SCSS

@import '~vanilla-grid/src/scss/vanilla-grid';

JavaScript

new VanillaGrid('#grid', {
    columns: [{
        data: 'first_name',
        name: 'First Name'
    },{
        data: 'last_name',
        name: 'Last Name'
    },{
        data: 'age',
        name: 'Age',
        render: (data, index, $container) => {
            $container.style.background = '#f7e3c3';
            $container.style.textAlign = 'center';
            return data.age;
        }
    }],
    data: [{
        first_name: 'Dmitry',
        last_name: 'Dim',
        age: 27
    },{
        first_name: 'Andrew',
        last_name:  'Tester',
        age: 30,
        javascript_column: 'WOW'
    },{
        first_name: 'Lena',
        last_name: 'Lena Lena',
        age: 25
    },{
        first_name: 'Cat',
        last_name: 'Cat Cat',
        age: 18
    }],
     events: {
        click: (data) => {
            alert(data.first_name);
        }
     }
});