# Javascript dynamic lists with search and pagination

[Official website and documentation is here](https://lemonadejs.net/library/list)

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:

```bash
$ npm install @lemonadejs/list
```

### CDN

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

```html
<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

-   [jSuites](https://jsuites.net/docs)
-   [Jspreadsheet](https://jspreadsheet.com)