Material-UI List JS

-
Pro Component

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.

Example

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

Table

Note! The table below is an advanced example in order to demonstrate the power of this plugin that can sort items even when columns have many different components such as images, progress bars etc.
Project Budget Status Users Completion
Image placeholder
Argon Design System
$2500 USD pending
Image placeholder Image placeholder Image placeholder Image placeholder
60%
Action Another action Something else here
Image placeholder
Angular Now UI Kit PRO
$1800 USD completed
Image placeholder Image placeholder Image placeholder Image placeholder
100%
Action Another action Something else here
Image placeholder
Black Dashboard
$3150 USD delayed
Image placeholder Image placeholder Image placeholder Image placeholder
72%
Action Another action Something else here
Image placeholder
React Material Dashboard
$4400 USD on schedule
Image placeholder Image placeholder Image placeholder Image placeholder
90%
Action Another action Something else here
Image placeholder
Vue Paper UI Kit PRO
$2200 USD completed
Image placeholder Image placeholder Image placeholder Image placeholder
100%
Action Another action Something else here
Image placeholder
Argon Design System
$2500 USD pending
Image placeholder Image placeholder Image placeholder Image placeholder
60%
Action Another action Something else here
Image placeholder
Angular Now UI Kit PRO
$1800 USD completed
Image placeholder Image placeholder Image placeholder Image placeholder
100%
Action Another action Something else here
Image placeholder
Black Dashboard
$3150 USD delayed
Image placeholder Image placeholder Image placeholder Image placeholder
72%
Action Another action Something else here
Image placeholder
Angular Now UI Kit PRO
$1800 USD completed
Image placeholder Image placeholder Image placeholder Image placeholder
100%
Action Another action Something else here
Image placeholder
Black Dashboard
$3150 USD delayed
Image placeholder Image placeholder Image placeholder Image placeholder
72%
Action Another action Something else here
Image placeholder
React Material Dashboard
$4400 USD on schedule
Image placeholder Image placeholder Image placeholder Image placeholder
90%
Action Another action Something else here 
import React from "react";
// @material-ui/core components
// @material-ui/lab components
// @material-ui/icons components

// core components
import CardLightTableSortable from "components/Cards/Sortable/CardLightTableSortable.js";

const Sortable = () => {
  return (
    <>
      <CardLightTableSortable />
    </>
  );
};

export default Sortable;

Props

If you want to see more examples and properties please check the official List.js Documentation.

You can also check the Official Github Repository.