List with search and pagination

Pico Library This library has about 1.5 KBytes

The LemonadeJS List is a library to create elements with search and pagination. It helps transform an array of objects into a list of HTML elements based on a defined template. It brings search and pagination natively, and it is possible to bind extended methods to extend its features.

Documentation


Installation

npm install @lemonadejs/list

Attributes

Attribute Description
data: Array<Object>Data should be an array of objects.
pagination?: NumberEnable the pagination and define the number of items per page.
search?: BooleanEnable the search.
onsearch?: FunctionWhen a search happens.
onchangepage?: FunctionWhen the user changes the page.


Important points

  • Reserved self properties: This library will create a item for each position of the data array. Each item will have its own self and a few reserved properties such as self.el and self.parent.
  • Template: The content of the component <List>all code here</List> is the template which will serve to create the items from the list. It is important you have only one root element.

Examples

Basic example




Source code


Browser
NPM
<html>
<script src="https://lemonadejs.net/v2/lemonade.js"></script>
<script src="https://lemonadejs.net/v2/packages/list/index.js"></script>
<div id='root'></div>
<script>
var Component = function() {
    var self = {};
    self.rows = [
        { name:"bulbasaur", id: 1 },
        { name:"ivysaur", id: 2 },
        { name:"venusaur", id: 3 },
        { name:"charmander", id: 4 },
        { name:"charmeleon", id: 5 },
        { name:"charizard", id: 6 },
        { name:"squirtle", id: 7 },
        { name:"wartortle", id: 8 },
        { name:"blastoise", id: 9 },
        { name:"caterpie", id: 10 },
        { name:"metapod", id: 11 },
        { name:"butterfree", id: 12 },
        { name:"weedle", id: 13 },
        { name:"kakuna", id: 14 },
        { name:"beedrill", id: 15 },
        { name:"pidgey", id: 16 },
        { name:"pidgeotto", id: 17 },
        { name:"pidgeot", id: 18 },
        { name:"rattata", id: 19 },
        { name:"raticate", id: 20 }
    ];

    var template = `
        <>
            <List data="{{self.rows}}" search="true" pagination="5">
                <div class="card">
                    <img src="{{'/templates/default/img/pokemon/' + self.id + '.svg' }}" />
                    <div>{{self.name}}</div>
                </div>
            </List>
        </>`;

    return lemonade.element(template, self, { List });
}

lemonade.render(Component, document.getElementById('root'));
</script>
</style>
</html>

Custom CSS for this example


.cards .list-content {
  display: flex;
  max-width: 600px;
}
.card {
  width: 80px;
  height: 80px;
  margin: 5px;
  text-align: center;
  font-size: 0.8em
}
.card img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

import lemonade from "lemonadejs";
import List from "@lemonadejs/list";

import "./style.css";

export default function Component() {
    let self = {};
    self.rows = [
        { name:"bulbasaur", id: 1 },
        { name:"ivysaur", id: 2 },
        { name:"venusaur", id: 3 },
        { name:"charmander", id: 4 },
        { name:"charmeleon", id: 5 },
        { name:"charizard", id: 6 },
        { name:"squirtle", id: 7 },
        { name:"wartortle", id: 8 },
        { name:"blastoise", id: 9 },
        { name:"caterpie", id: 10 },
        { name:"metapod", id: 11 },
        { name:"butterfree", id: 12 },
        { name:"weedle", id: 13 },
        { name:"kakuna", id: 14 },
        { name:"beedrill", id: 15 },
        { name:"pidgey", id: 16 },
        { name:"pidgeotto", id: 17 },
        { name:"pidgeot", id: 18 },
        { name:"rattata", id: 19 },
        { name:"raticate", id: 20 }
    ];

    let template = `
        <>
            <List data="{{self.rows}}" search="true" pagination="5">
                <div class="card">
                    <img src="{{'/templates/default/img/pokemon/' + self.id + '.svg' }}" />
                    <div>{{self.name}}</div>
                </div>
            </List>
        </>`;

    return lemonade.element(template, self, { List });
}


Example with operations

The next example implements two operations on the array of objects.



Source code

<html>
<script src="https://lemonadejs.net/v2/lemonade.js"></script>
<script src="https://lemonadejs.net/v2/packages/list/index.js"></script>
<div id='root'></div>
<script>
var Countries = function() {
    let self = {};

    self.countries = [
        { "name": "Australia" },
        { "name": "Austria" },
        { "name": "Chile" },
    ];

    self.add = function() {
        // Add the country
        self.countries.push({ name: self.name.value });
        // Refresh the array
        self.refresh('countries');
    }

    self.delete = function(s) {
        // Find and delete the position based on the self given
        self.countries.splice(self.countries.indexOf(s), 1);
        // Refresh the array
        self.refresh('countries');
    }

    var template = `
        <>
            <List data="{{self.countries}}" search="false" delete="{{self.delete}}">
                <div class="p4">
                    <span style="width: 200px; display: inline-block">{{self.name}}</span>
                    <input type="button"
                        onclick="self.parent.delete(self)" value="Delete" style="width: 80px;" />
                <div>
            </List>
            <br/>
            <div class="p4">
                <input type="text" @ref="self.name" placeholder="Add new item" style="width: 200px;" />
                <input type="button" value="Add" onclick="self.add()" style="width: 80px;" />
            </div>
        </>`;

    return lemonade.element(template, self, { List });
}
lemonade.render(Countries, document.getElementById('root'));
</script>
</html>