@lemonadejs/data-grid

Javascript Data Grid

Official website and documentation is here

Compatible with Vanilla JavaScript, LemonadeJS, React, Vue or Angular.

The JavaScript Data Grid is a lightweight library that effortlessly enables you to embed lightweight data grids into your applications. Compatible with Vanilla JavaScript, LemonadeJS, React, VueJS, and Angular, this versatile component allows you to conveniently load JSON data, define columns, and seamlessly render the grid within your HTML. Enjoy robust features like search, pagination, and editable rows, empowering you to build interactive and feature-rich data grid experiences.

Features

• Lightweight: The lemonade data grid is only about 4 KBytes;
• Customizable: You can define columns and user-defined actions to suit your use case;
• Reactive: Any changes to the underlying data are automatically applied to the HTML, making it easy to keep your grid up-to-date;
• Integration: It can be used as a standalone library or integrated with any modern framework;

Getting Started

You can install using NPM or using directly from a CDN.

npm Installation

To install it in your project using npm, run the following command:

$ npm install @lemonadejs/data-grid

CDN

To use data grid via a CDN, include the following script tags in your HTML file:

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@lemonadejs/data-grid/dist/index.min.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/data-grid/dist/style.min.css" />

Settings

Attribute	Description
data: object[]	The data that will be displayed on the grid based on the columns attribute.
columns: columnItem[]	Each columnItem object represents a column of data to be displayed. For more information about this object, please refer to the 'Column Item' section below.
pagination?: Number	Enable the pagination and define the number of items per page.
search?: Boolean	Enable the search. Default: false
editable?: Boolean	The grid is editable. Default: false
resizable?: Boolean	Enable the resizable functionality, allowing the columns to be resized. Default: false
zebra?: Boolean	Enable the zebra style, highlighting every odd row with a darker color. Default: false
url?: String	Specifies the URL for fetching the data.
remote?: Boolean	Enable the remote functionality. Default: false

Column Item

The columns property regulates the presentation of columns on the JavaScript data grid, specifying characteristics such as the sequence of columns, their width, and the positioning of data within them.

Option	Description
name?: string	Determines the key of the data object to which the column refers.
title: string	Required. Determines the text that will be displayed in the column Header.
width?: string	This option specifies the width of the column and should be provided as a string with the unit of measurement, such as '200px' or '2.5em'. By default, the width is set to '100px'.
align?: string	This option determines the alignment of the text within the cells of the column. It should be provided as a string with a valid entry. The available options are 'left', 'right', 'center', and 'justify'. By default, the alignment is set to 'left'.
render?: function	render(cell, x, y, value, instance) => void

Instance

Property	Description
data: object[]	Change the state of data.
page: Number	Change the page index.
pagination: Number	Enable pagination.
search: Boolean	Enable search.
sort: Function(sortBy: String, sortAsc: Boolean)	Sort the data.
setValue: Function(x: Number	String, y: Number, value: String)

Events

Event	Description
onsearch?: (self) => void	Called when a search happens.
onchangepage?: (self) => void	Called when the user changes the page.
onupdate?: (self, object) => void	Called when cell data is changed.

Usage

There are two ways to instantiate a Data Grid, Programmatically or Dynamically

Programmatically

Create an instance of the data grid by providing the DOM element, and the options object.

<div id="root"></div>
<script>
    const root = document.getElementById('root')
    Datagrid(root, {
        data: [
            { id: 1, person: 'Maria', age: 28 },
            { id: 2, person: 'Carlos', age: 33 }
        ],
        columns: [
            { name: 'person', title: 'Name' },
            { name: 'age', title: 'Age' }
        ]
    })
</script>

Dynamically with LemonadeJS

The LemonadeJS data grid is invoked within the template, with the options being passed as properties.

import Datagrid from '@lemonadejs/data-grid'
import '@lemonadejs/data-grid/dist/style.css';

export default function Component() {
    let self = this;

    self.data = [
        { id: 1, person: 'Maria', age: 28 },
        { id: 2, person: 'Carlos', age: 33 }
    ]

    self.columns = [
        { name: 'person', title: 'Name' },
        { name: 'age', title: 'Age' }
    ]

    return `<Datagrid :data="self.data" :columns="self.columns" />`
}

Using in React

import React, { useRef } from 'react';
import Datagrid from '@lemonadejs/data-grid/dist/react';
import '@lemonadejs/data-grid/dist/style.css';

const data = [
    { id: 1, person: 'Maria', age: 28 },
    { id: 2, person: 'Carlos', age: 33 }
]

const columns = [
    { name: 'person', title: 'Name' },
    { name: 'age', title: 'Age' }
]
export default function App() {
    const datagrid = useRef();

    return (
        <div>
            <Datagrid data={data} colums={columns} ref={datagrid} />
        </div>);
}

Quick example with Vue

<template>
    <div>
        <Datagrid :data="data" :columns="columns"/>
    </div>
</template>

<script>
import Datagrid from '@lemonadejs/data-grid/dist/vue';
import '@lemonadejs/data-grid/dist/style.css';
export default {
    name: 'App',
    components: {
        Datagrid
    },
    data() {
        return {
            data: [
                { id: 1, person: 'Maria', age: 28 },
                { id: 2, person: 'Carlos', age: 33 }
            ],
            columns: [
                { name: 'person', title: 'Name' },
                { name: 'age', title: 'Age' }
            ]
        };   
    }
}
</script>

Configuration

Additionally, you have the option of incorporating pagination and search functionalities by including them in the options. For example:

Datagrid(root, {
    data: [
        { id: 1, person: 'Maria', age: 28 },
        { id: 2, person: 'Carlos', age: 33 }
    ],
    columns: [
        { name: 'person', title: 'Name' },
        { name: 'age', title: 'Age' }
    ],
    pagination: 5, // Each page will contain this quantity of items.
    search: true
})

Examples

Here are a few examples of DataGridLM in action:

• Basic Data Grid Example
• Example with Large Data Sets
• Example with Data Addition and Deletion

License

The LemonadeJS data grid is released under the MIT.

Other Tools

• jSuites
• Jspreadsheet