@lemonadejs/data-grid NPM

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`
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	This option allows you to override the default rendering of the column and instead render a specific value. It is particularly useful for rendering HTML elements or components. In the context of this property, the keyword 'self' refers to the current row being rendered.

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)	Set the value of a cell.

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'

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" />`
}

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
})