@lemonadejs/list

Javascript dynamic lists with search and pagination

Official website and documentation is here

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

The JavaScript List is a lightweight library that effortlessly enables you create repeated HTML block of elements from a template based on a given array.

Features

• Lightweight: The lemonade data grid is only about 2 KBytes;
• Customizable: You can define a HTML template;
• Reactive: Any changes to the underlying data are automatically applied to the HTML;
• 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/list

CDN

To use the javascript plugin 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/list/dist/index.min.js"></script>

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

Attributes

Attribute	Description
data: Array	Data should be an array of objects.
pagination?: Number	Enable the pagination and define the number of items per page.
search?: Boolean	Enable the search.
onsearch?: Function	When a search happens.
onchangepage?: Function	When the user changes the page.

License

The LemonadeJS data grid is released under the MIT.

Other Tools

• jSuites
• Jspreadsheet