Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@lemonadejs/list

hodeware605.0.0TypeScript support: included

LemonadeJS list extension. A useful 1.5Kb listing library with search and pagination.

javascript template with search and pagination, javascript router, lemonadejs plugins, js, library, javascript plugins

readme

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<Object> 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