Angular List JS

Bootstrap List JS are tiny, invisible and simple, yet powerful and incredibly fast vanilla JavaScript that adds search, sort, filters and flexibility to plain HTML lists, tables, or anything.
Keep reading our Bootstrap List JS examples and learn how to use this plugin.

Usage

JS

In order to use this plugin on your page you will need to include the following script in the “Optional JS” area from the page’s footer:

import List from "list.js";

Initialization

import { Component, OnInit } from '@angular/core';
import List from "list.js";

export class YOUR_CLASS implements OnInit {
  constructor() { }

  ngOnInit(){
    new List(document.getElementById("first-list"), {
      valueNames: ["name", "budget", "status", "completion"],
      listClass: "list"
    });
  }
}

Example

For now we added the sortable functionality only on table. Soon, we will add it on other components too.

Table

Project	Budget	Status	Users	Completion
Argon Design System	$2500 USD	pending		60%	Action Another action Something else here
Angular Now UI Kit PRO	$1800 USD	completed		100%	Action Another action Something else here
Black Dashboard	$3150 USD	delayed		72%	Action Another action Something else here
React Material Dashboard	$4400 USD	on schedule		90%	Action Another action Something else here
Vue Paper UI Kit PRO	$2200 USD	completed		100%	Action Another action Something else here
Argon Design System	$2500 USD	pending		60%	Action Another action Something else here
Angular Now UI Kit PRO	$1800 USD	completed		100%	Action Another action Something else here
Black Dashboard	$3150 USD	delayed		72%	Action Another action Something else here
Angular Now UI Kit PRO	$1800 USD	completed		100%	Action Another action Something else here
Black Dashboard	$3150 USD	delayed		72%	Action Another action Something else here
React Material Dashboard	$4400 USD	on schedule		90%	Action Another action Something else here