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