Nextjs 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 | |
|---|---|---|---|---|---|
Argon Design System
|
$2500 USD | pending |
|
60%
|
|
Angular Now UI Kit PRO
|
$1800 USD | completed |
|
100%
|
|
Black Dashboard
|
$3150 USD | delayed |
|
72%
|
|
React Material Dashboard
|
$4400 USD | on schedule |
|
90%
|
|
Vue Paper UI Kit PRO
|
$2200 USD | completed |
|
100%
|
|
|
Argon Design System
|
$2500 USD | pending |
|
60%
|
|
|
Angular Now UI Kit PRO
|
$1800 USD | completed |
|
100%
|
|
|
Black Dashboard
|
$3150 USD | delayed |
|
72%
|
|
|
Angular Now UI Kit PRO
|
$1800 USD | completed |
|
100%
|
|
|
Black Dashboard
|
$3150 USD | delayed |
|
72%
|
|
|
React Material Dashboard
|
$4400 USD | on schedule |
|
90%
|
Copy
import React from "react";
// javascript plugin that creates a sortable object from a dom object
import List from "list.js";
// reactstrap components
import {
Badge,
DropdownToggle,
DropdownMenu,
DropdownItem,
UncontrolledDropdown,
Media,
Progress,
Table,
UncontrolledTooltip,
} from "reactstrap";
function Example() {
const tableRef = React.useRef(null);
React.useEffect(() => {
new List(tableRef.current, {
valueNames: ["name", "budget", "status", "completion"],
listClass: "list",
});
}, []);
return (
<>
<div ref={tableRef}>
<Table className=" align-items-center">
<thead className=" thead-light">
<tr>
<th className=" sort" data-sort="name" scope="col">
Project
</th>
<th className=" sort" data-sort="budget" scope="col">
Budget
</th>
<th className=" sort" data-sort="status" scope="col">
Status
</th>
<th scope="col">Users</th>
<th className=" sort" data-sort="completion" scope="col">
Completion
</th>
<th scope="col"></th>
</tr>
</thead>
<tbody className=" list">
<tr>
<th scope="row">
<Media className=" align-items-center">
<a
className=" avatar rounded-circle mr-3"
href="#pablo"
onClick={(e) => e.preventDefault()}
>
<img
alt="..."
src={require("assets/img/theme/bootstrap.jpg")}
></img>
</a>
<Media>
<span className=" name mb-0 text-sm">
Argon Design System
</span>
</Media>
</Media>
</th>
<td className=" budget">$2500 USD</td>
<td>
<Badge className=" badge-dot mr-4">
<i className=" bg-warning"></i>
<span className=" status">pending</span>
</Badge>
</td>
<td>
<div className=" avatar-group">
<a
className=" avatar avatar-sm rounded-circle"
href="#pablo"
id="tooltip152046164"
onClick={(e) => e.preventDefault()}
>
<img
alt="..."
src={require("assets/img/theme/team-1.jpg")}
></img>
</a>
<UncontrolledTooltip delay={0} target="tooltip152046164">
Ryan Tompson
</UncontrolledTooltip>
<a
className=" avatar avatar-sm rounded-circle"
href="#pablo"
id="tooltip808334512"
onClick={(e) => e.preventDefault()}
>
<img
alt="..."
src={require("assets/img/theme/team-2.jpg")}
></img>
</a>
<UncontrolledTooltip delay={0} target="tooltip808334512">
Romina Hadid
</UncontrolledTooltip>
<a
className=" avatar avatar-sm rounded-circle"
href="#pablo"
id="tooltip226847010"
onClick={(e) => e.preventDefault()}
>
<img
alt="..."
src={require("assets/img/theme/team-3.jpg")}
></img>
</a>
<UncontrolledTooltip delay={0} target="tooltip226847010">
Alexander Smith
</UncontrolledTooltip>
<a
className=" avatar avatar-sm rounded-circle"
href="#pablo"
id="tooltip355235610"
onClick={(e) => e.preventDefault()}
>
<img
alt="..."
src={require("assets/img/theme/team-4.jpg")}
></img>
</a>
<UncontrolledTooltip delay={0} target="tooltip355235610">
Jessica Doe
</UncontrolledTooltip>
</div>
</td>
<td>
<div className=" d-flex align-items-center">
<span className=" completion mr-2">60%</span>
<div>
<Progress max="100" value="60" color="warning"></Progress>
</div>
</div>
</td>
<td className=" text-right">
<UncontrolledDropdown>
<DropdownToggle
className=" btn-icon-only text-light"
color=""
role="button"
size="sm"
>
<i className=" fas fa-ellipsis-v"></i>
</DropdownToggle>
<DropdownMenu className=" dropdown-menu-arrow" right>
<DropdownItem
href="#pablo"
onClick={(e) => e.preventDefault()}
>
Action
</DropdownItem>
<DropdownItem
href="#pablo"
onClick={(e) => e.preventDefault()}
>
Another action
</DropdownItem>
<DropdownItem
href="#pablo"
onClick={(e) => e.preventDefault()}
>
Something else here
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</td>
</tr>
<tr>
<th scope="row">
<Media className=" align-items-center">
<a
className=" avatar rounded-circle mr-3"
href="#pablo"
onClick={(e) => e.preventDefault()}
>
<img
alt="..."
src={require("assets/img/theme/angular.jpg")}
></img>
</a>
<Media>
<span className=" name mb-0 text-sm">
Angular Now UI Kit PRO
</span>
</Media>
</Media>
</th>
<td className=" budget">$1800 USD</td>
<td>
<Badge className=" badge-dot mr-4">
<i className=" bg-success"></i>
<span className=" status">completed</span>
</Badge>
</td>
<td>
<div className=" avatar-group">
<a
className=" avatar avatar-sm rounded-circle"
href="#pablo"
id="tooltip339852057"
onClick={(e) => e.preventDefault()}
>
<img
alt="..."
src={require("assets/img/theme/team-1.jpg")}
></img>
</a>
<UncontrolledTooltip delay={0} target="tooltip339852057">
Ryan Tompson
</UncontrolledTooltip>
<a
className=" avatar avatar-sm rounded-circle"
href="#pablo"
id="tooltip252299999"
onClick={(e) => e.preventDefault()}
>
<img
alt="..."
src={require("assets/img/theme/team-2.jpg")}
></img>
</a>
<UncontrolledTooltip delay={0} target="tooltip252299999">
Romina Hadid
</UncontrolledTooltip>
<a
className=" avatar avatar-sm rounded-circle"
href="#pablo"
id="tooltip712611809"
onClick={(e) => e.preventDefault()}
>
<img
alt="..."
src={require("assets/img/theme/team-3.jpg")}
></img>
</a>
<UncontrolledTooltip delay={0} target="tooltip712611809">
Alexander Smith
</UncontrolledTooltip>
<a
className=" avatar avatar-sm rounded-circle"
href="#pablo"
id="tooltip931526963"
onClick={(e) => e.preventDefault()}
>
<img
alt="..."
src={require("assets/img/theme/team-4.jpg")}
></img>
</a>
<UncontrolledTooltip delay={0} target="tooltip931526963">
Jessica Doe
</UncontrolledTooltip>
</div>
</td>
<td>
<div className=" d-flex align-items-center">
<span className=" completion mr-2">100%</span>
<div>
<Progress max="100" value="100" color="success"></Progress>
</div>
</div>
</td>
<td className=" text-right">
<UncontrolledDropdown>
<DropdownToggle
className=" btn-icon-only text-light"
color=""
role="button"
size="sm"
>
<i className=" fas fa-ellipsis-v"></i>
</DropdownToggle>
<DropdownMenu className=" dropdown-menu-arrow" right>
<DropdownItem
href="#pablo"
onClick={(e) => e.preventDefault()}
>
Action
</DropdownItem>
<DropdownItem
href="#pablo"
onClick={(e) => e.preventDefault()}
>
Another action
</DropdownItem>
<DropdownItem
href="#pablo"
onClick={(e) => e.preventDefault()}
>
Something else here
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</td>
</tr>
<tr>
<th scope="row">
<Media className=" align-items-center">
<a
className=" avatar rounded-circle mr-3"
href="#pablo"
onClick={(e) => e.preventDefault()}
>
<img
alt="..."
src={require("assets/img/theme/sketch.jpg")}
></img>
</a>
<Media>
<span className=" name mb-0 text-sm">Black Dashboard</span>
</Media>
</Media>
</th>
<td className=" budget">$3150 USD</td>
<td>
<Badge className=" badge-dot mr-4">
<i className=" bg-danger"></i>
<span className=" status">delayed</span>
</Badge>
</td>
<td>
<div className=" avatar-group">
<a
className=" avatar avatar-sm rounded-circle"
href="#pablo"
id="tooltip150138334"
onClick={(e) => e.preventDefault()}
>
<img
alt="..."
src={require("assets/img/theme/team-1.jpg")}
></img>
</a>
<UncontrolledTooltip delay={0} target="tooltip150138334">
Ryan Tompson
</UncontrolledTooltip>
<a
className=" avatar avatar-sm rounded-circle"
href="#pablo"
id="tooltip461173539"
onClick={(e) => e.preventDefault()}
>
<img
alt="..."
src={require("assets/img/theme/team-2.jpg")}
></img>
</a>
<UncontrolledTooltip delay={0} target="tooltip461173539">
Romina Hadid
</UncontrolledTooltip>
<a
className=" avatar avatar-sm rounded-circle"
href="#pablo"
id="tooltip48784836"
onClick={(e) => e.preventDefault()}
>
<img
alt="..."
src={require("assets/img/theme/team-3.jpg")}
></img>
</a>
<UncontrolledTooltip delay={0} target="tooltip48784836">
Alexander Smith
</UncontrolledTooltip>
<a
className=" avatar avatar-sm rounded-circle"
href="#pablo"
id="tooltip137062784"
onClick={(e) => e.preventDefault()}
>
<img
alt="..."
src={require("assets/img/theme/team-4.jpg")}
></img>
</a>
<UncontrolledTooltip delay={0} target="tooltip137062784">
Jessica Doe
</UncontrolledTooltip>
</div>
</td>
<td>
<div className=" d-flex align-items-center">
<span className=" completion mr-2">72%</span>
<div>
<Progress max="100" value="72" color="danger"></Progress>
</div>
</div>
</td>
<td className=" text-right">
<UncontrolledDropdown>
<DropdownToggle
className=" btn-icon-only text-light"
color=""
role="button"
size="sm"
>
<i className=" fas fa-ellipsis-v"></i>
</DropdownToggle>
<DropdownMenu className=" dropdown-menu-arrow" right>
<DropdownItem
href="#pablo"
onClick={(e) => e.preventDefault()}
>
Action
</DropdownItem>
<DropdownItem
href="#pablo"
onClick={(e) => e.preventDefault()}
>
Another action
</DropdownItem>
<DropdownItem
href="#pablo"
onClick={(e) => e.preventDefault()}
>
Something else here
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</td>
</tr>
<tr>
<th scope="row">
<Media className=" align-items-center">
<a
className=" avatar rounded-circle mr-3"
href="#pablo"
onClick={(e) => e.preventDefault()}
>
<img
alt="..."
src={require("assets/img/theme/react.jpg")}
></img>
</a>
<Media>
<span className=" name mb-0 text-sm">
React Material Dashboard
</span>
</Media>
</Media>
</th>
<td className=" budget">$4400 USD</td>
<td>
<Badge className=" badge-dot mr-4">
<i className=" bg-info"></i>
<span className=" status">on schedule</span>
</Badge>
</td>
<td>
<div className=" avatar-group">
<a
className=" avatar avatar-sm rounded-circle"
href="#pablo"
id="tooltip493621653"
onClick={(e) => e.preventDefault()}
>
<img
alt="..."
src={require("assets/img/theme/team-1.jpg")}
></img>
</a>
<UncontrolledTooltip delay={0} target="tooltip493621653">
Ryan Tompson
</UncontrolledTooltip>
<a
className=" avatar avatar-sm rounded-circle"
href="#pablo"
id="tooltip617630235"
onClick={(e) => e.preventDefault()}
>
<img
alt="..."
src={require("assets/img/theme/team-2.jpg")}
></img>
</a>
<UncontrolledTooltip delay={0} target="tooltip617630235">
Romina Hadid
</UncontrolledTooltip>
<a
className=" avatar avatar-sm rounded-circle"
href="#pablo"
id="tooltip747914062"
onClick={(e) => e.preventDefault()}
>
<img
alt="..."
src={require("assets/img/theme/team-3.jpg")}
></img>
</a>
<UncontrolledTooltip delay={0} target="tooltip747914062">
Alexander Smith
</UncontrolledTooltip>
<a
className=" avatar avatar-sm rounded-circle"
href="#pablo"
id="tooltip508748484"
onClick={(e) => e.preventDefault()}
>
<img
alt="..."
src={require("assets/img/theme/team-4.jpg")}
></img>
</a>
<UncontrolledTooltip delay={0} target="tooltip508748484">
Jessica Doe
</UncontrolledTooltip>
</div>
</td>
<td>
<div className=" d-flex align-items-center">
<span className=" completion mr-2">90%</span>
<div>
<Progress max="100" value="90" color="info"></Progress>
</div>
</div>
</td>
<td className=" text-right">
<UncontrolledDropdown>
<DropdownToggle
className=" btn-icon-only text-light"
color=""
role="button"
size="sm"
>
<i className=" fas fa-ellipsis-v"></i>
</DropdownToggle>
<DropdownMenu className=" dropdown-menu-arrow" right>
<DropdownItem
href="#pablo"
onClick={(e) => e.preventDefault()}
>
Action
</DropdownItem>
<DropdownItem
href="#pablo"
onClick={(e) => e.preventDefault()}
>
Another action
</DropdownItem>
<DropdownItem
href="#pablo"
onClick={(e) => e.preventDefault()}
>
Something else here
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</td>
</tr>
<tr>
<th scope="row">
<Media className=" align-items-center">
<a
className=" avatar rounded-circle mr-3"
href="#pablo"
onClick={(e) => e.preventDefault()}
>
<img
alt="..."
src={require("assets/img/theme/vue.jpg")}
></img>
</a>
<Media>
<span className=" name mb-0 text-sm">
Vue Paper UI Kit PRO
</span>
</Media>
</Media>
</th>
<td className=" budget">$2200 USD</td>
<td>
<Badge className=" badge-dot mr-4">
<i className=" bg-success"></i>
<span className=" status">completed</span>
</Badge>
</td>
<td>
<div className=" avatar-group">
<a
className=" avatar avatar-sm rounded-circle"
href="#pablo"
id="tooltip864398267"
onClick={(e) => e.preventDefault()}
>
<img
alt="..."
src={require("assets/img/theme/team-1.jpg")}
></img>
</a>
<UncontrolledTooltip delay={0} target="tooltip864398267">
Ryan Tompson
</UncontrolledTooltip>
<a
className=" avatar avatar-sm rounded-circle"
href="#pablo"
id="tooltip378583228"
onClick={(e) => e.preventDefault()}
>
<img
alt="..."
src={require("assets/img/theme/team-2.jpg")}
></img>
</a>
<UncontrolledTooltip delay={0} target="tooltip378583228">
Romina Hadid
</UncontrolledTooltip>
<a
className=" avatar avatar-sm rounded-circle"
href="#pablo"
id="tooltip451481355"
onClick={(e) => e.preventDefault()}
>
<img
alt="..."
src={require("assets/img/theme/team-3.jpg")}
></img>
</a>
<UncontrolledTooltip delay={0} target="tooltip451481355">
Alexander Smith
</UncontrolledTooltip>
<a
className=" avatar avatar-sm rounded-circle"
href="#pablo"
id="tooltip569413158"
onClick={(e) => e.preventDefault()}
>
<img
alt="..."
src={require("assets/img/theme/team-4.jpg")}
></img>
</a>
<UncontrolledTooltip delay={0} target="tooltip569413158">
Jessica Doe
</UncontrolledTooltip>
</div>
</td>
<td>
<div className=" d-flex align-items-center">
<span className=" completion mr-2">100%</span>
<div>
<Progress max="100" value="100" color="success"></Progress>
</div>
</div>
</td>
<td className=" text-right">
<UncontrolledDropdown>
<DropdownToggle
className=" btn-icon-only text-light"
color=""
role="button"
size="sm"
>
<i className=" fas fa-ellipsis-v"></i>
</DropdownToggle>
<DropdownMenu className=" dropdown-menu-arrow" right>
<DropdownItem
href="#pablo"
onClick={(e) => e.preventDefault()}
>
Action
</DropdownItem>
<DropdownItem
href="#pablo"
onClick={(e) => e.preventDefault()}
>
Another action
</DropdownItem>
<DropdownItem
href="#pablo"
onClick={(e) => e.preventDefault()}
>
Something else here
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</td>
</tr>
<tr>
<th scope="row">
<Media className=" align-items-center">
<a
className=" avatar rounded-circle mr-3"
href="#pablo"
onClick={(e) => e.preventDefault()}
>
<img
alt="..."
src={require("assets/img/theme/bootstrap.jpg")}
></img>
</a>
<Media>
<span className=" name mb-0 text-sm">
Argon Design System
</span>
</Media>
</Media>
</th>
<td className=" budget">$2500 USD</td>
<td>
<Badge className=" badge-dot mr-4">
<i className=" bg-warning"></i>
<span className=" status">pending</span>
</Badge>
</td>
<td>
<div className=" avatar-group">
<a
className=" avatar avatar-sm rounded-circle"
href="#pablo"
id="tooltip351291688"
onClick={(e) => e.preventDefault()}
>
<img
alt="..."
src={require("assets/img/theme/team-1.jpg")}
></img>
</a>
<UncontrolledTooltip delay={0} target="tooltip351291688">
Ryan Tompson
</UncontrolledTooltip>
<a
className=" avatar avatar-sm rounded-circle"
href="#pablo"
id="tooltip879110675"
onClick={(e) => e.preventDefault()}
>
<img
alt="..."
src={require("assets/img/theme/team-2.jpg")}
></img>
</a>
<UncontrolledTooltip delay={0} target="tooltip879110675">
Romina Hadid
</UncontrolledTooltip>
<a
className=" avatar avatar-sm rounded-circle"
href="#pablo"
id="tooltip761308987"
onClick={(e) => e.preventDefault()}
>
<img
alt="..."
src={require("assets/img/theme/team-3.jpg")}
></img>
</a>
<UncontrolledTooltip delay={0} target="tooltip761308987">
Alexander Smith
</UncontrolledTooltip>
<a
className=" avatar avatar-sm rounded-circle"
href="#pablo"
id="tooltip327645068"
onClick={(e) => e.preventDefault()}
>
<img
alt="..."
src={require("assets/img/theme/team-4.jpg")}
></img>
</a>
<UncontrolledTooltip delay={0} target="tooltip327645068">
Jessica Doe
</UncontrolledTooltip>
</div>
</td>
<td>
<div className=" d-flex align-items-center">
<span className=" completion mr-2">60%</span>
<div>
<Progress max="100" value="60" color="warning"></Progress>
</div>
</div>
</td>
<td className=" text-right">
<UncontrolledDropdown>
<DropdownToggle
className=" btn-icon-only text-light"
color=""
role="button"
size="sm"
>
<i className=" fas fa-ellipsis-v"></i>
</DropdownToggle>
<DropdownMenu className=" dropdown-menu-arrow" right>
<DropdownItem
href="#pablo"
onClick={(e) => e.preventDefault()}
>
Action
</DropdownItem>
<DropdownItem
href="#pablo"
onClick={(e) => e.preventDefault()}
>
Another action
</DropdownItem>
<DropdownItem
href="#pablo"
onClick={(e) => e.preventDefault()}
>
Something else here
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</td>
</tr>
<tr>
<th scope="row">
<Media className=" align-items-center">
<a
className=" avatar rounded-circle mr-3"
href="#pablo"
onClick={(e) => e.preventDefault()}
>
<img
alt="..."
src={require("assets/img/theme/angular.jpg")}
></img>
</a>
<Media>
<span className=" name mb-0 text-sm">
Angular Now UI Kit PRO
</span>
</Media>
</Media>
</th>
<td className=" budget">$1800 USD</td>
<td>
<Badge className=" badge-dot mr-4">
<i className=" bg-success"></i>
<span className=" status">completed</span>
</Badge>
</td>
<td>
<div className=" avatar-group">
<a
className=" avatar avatar-sm rounded-circle"
href="#pablo"
id="tooltip524469290"
onClick={(e) => e.preventDefault()}
>
<img
alt="..."
src={require("assets/img/theme/team-1.jpg")}
></img>
</a>
<UncontrolledTooltip delay={0} target="tooltip524469290">
Ryan Tompson
</UncontrolledTooltip>
<a
className=" avatar avatar-sm rounded-circle"
href="#pablo"
id="tooltip661561513"
onClick={(e) => e.preventDefault()}
>
<img
alt="..."
src={require("assets/img/theme/team-2.jpg")}
></img>
</a>
<UncontrolledTooltip delay={0} target="tooltip661561513">
Romina Hadid
</UncontrolledTooltip>
<a
className=" avatar avatar-sm rounded-circle"
href="#pablo"
id="tooltip539382567"
onClick={(e) => e.preventDefault()}
>
<img
alt="..."
src={require("assets/img/theme/team-3.jpg")}
></img>
</a>
<UncontrolledTooltip delay={0} target="tooltip539382567">
Alexander Smith
</UncontrolledTooltip>
<a
className=" avatar avatar-sm rounded-circle"
href="#pablo"
id="tooltip360938491"
onClick={(e) => e.preventDefault()}
>
<img
alt="..."
src={require("assets/img/theme/team-4.jpg")}
></img>
</a>
<UncontrolledTooltip delay={0} target="tooltip360938491">
Jessica Doe
</UncontrolledTooltip>
</div>
</td>
<td>
<div className=" d-flex align-items-center">
<span className=" completion mr-2">100%</span>
<div>
<Progress max="100" value="100" color="success"></Progress>
</div>
</div>
</td>
<td className=" text-right">
<UncontrolledDropdown>
<DropdownToggle
className=" btn-icon-only text-light"
color=""
role="button"
size="sm"
>
<i className=" fas fa-ellipsis-v"></i>
</DropdownToggle>
<DropdownMenu className=" dropdown-menu-arrow" right>
<DropdownItem
href="#pablo"
onClick={(e) => e.preventDefault()}
>
Action
</DropdownItem>
<DropdownItem
href="#pablo"
onClick={(e) => e.preventDefault()}
>
Another action
</DropdownItem>
<DropdownItem
href="#pablo"
onClick={(e) => e.preventDefault()}
>
Something else here
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</td>
</tr>
<tr>
<th scope="row">
<Media className=" align-items-center">
<a
className=" avatar rounded-circle mr-3"
href="#pablo"
onClick={(e) => e.preventDefault()}
>
<img
alt="..."
src={require("assets/img/theme/sketch.jpg")}
></img>
</a>
<Media>
<span className=" name mb-0 text-sm">Black Dashboard</span>
</Media>
</Media>
</th>
<td className=" budget">$3150 USD</td>
<td>
<Badge className=" badge-dot mr-4">
<i className=" bg-danger"></i>
<span className=" status">delayed</span>
</Badge>
</td>
<td>
<div className=" avatar-group">
<a
className=" avatar avatar-sm rounded-circle"
href="#pablo"
id="tooltip715957884"
onClick={(e) => e.preventDefault()}
>
<img
alt="..."
src={require("assets/img/theme/team-1.jpg")}
></img>
</a>
<UncontrolledTooltip delay={0} target="tooltip715957884">
Ryan Tompson
</UncontrolledTooltip>
<a
className=" avatar avatar-sm rounded-circle"
href="#pablo"
id="tooltip461864297"
onClick={(e) => e.preventDefault()}
>
<img
alt="..."
src={require("assets/img/theme/team-2.jpg")}
></img>
</a>
<UncontrolledTooltip delay={0} target="tooltip461864297">
Romina Hadid
</UncontrolledTooltip>
<a
className=" avatar avatar-sm rounded-circle"
href="#pablo"
id="tooltip355868791"
onClick={(e) => e.preventDefault()}
>
<img
alt="..."
src={require("assets/img/theme/team-3.jpg")}
></img>
</a>
<UncontrolledTooltip delay={0} target="tooltip355868791">
Alexander Smith
</UncontrolledTooltip>
<a
className=" avatar avatar-sm rounded-circle"
href="#pablo"
id="tooltip877440008"
onClick={(e) => e.preventDefault()}
>
<img
alt="..."
src={require("assets/img/theme/team-4.jpg")}
></img>
</a>
<UncontrolledTooltip delay={0} target="tooltip877440008">
Jessica Doe
</UncontrolledTooltip>
</div>
</td>
<td>
<div className=" d-flex align-items-center">
<span className=" completion mr-2">72%</span>
<div>
<Progress max="100" value="72" color="danger"></Progress>
</div>
</div>
</td>
<td className=" text-right">
<UncontrolledDropdown>
<DropdownToggle
className=" btn-icon-only text-light"
color=""
role="button"
size="sm"
>
<i className=" fas fa-ellipsis-v"></i>
</DropdownToggle>
<DropdownMenu className=" dropdown-menu-arrow" right>
<DropdownItem
href="#pablo"
onClick={(e) => e.preventDefault()}
>
Action
</DropdownItem>
<DropdownItem
href="#pablo"
onClick={(e) => e.preventDefault()}
>
Another action
</DropdownItem>
<DropdownItem
href="#pablo"
onClick={(e) => e.preventDefault()}
>
Something else here
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</td>
</tr>
<tr>
<th scope="row">
<Media className=" align-items-center">
<a
className=" avatar rounded-circle mr-3"
href="#pablo"
onClick={(e) => e.preventDefault()}
>
<img
alt="..."
src={require("assets/img/theme/angular.jpg")}
></img>
</a>
<Media>
<span className=" name mb-0 text-sm">
Angular Now UI Kit PRO
</span>
</Media>
</Media>
</th>
<td className=" budget">$1800 USD</td>
<td>
<Badge className=" badge-dot mr-4">
<i className=" bg-success"></i>
<span className=" status">completed</span>
</Badge>
</td>
<td>
<div className=" avatar-group">
<a
className=" avatar avatar-sm rounded-circle"
href="#pablo"
id="tooltip601028669"
onClick={(e) => e.preventDefault()}
>
<img
alt="..."
src={require("assets/img/theme/team-1.jpg")}
></img>
</a>
<UncontrolledTooltip delay={0} target="tooltip601028669">
Ryan Tompson
</UncontrolledTooltip>
<a
className=" avatar avatar-sm rounded-circle"
href="#pablo"
id="tooltip497130558"
onClick={(e) => e.preventDefault()}
>
<img
alt="..."
src={require("assets/img/theme/team-2.jpg")}
></img>
</a>
<UncontrolledTooltip delay={0} target="tooltip497130558">
Romina Hadid
</UncontrolledTooltip>
<a
className=" avatar avatar-sm rounded-circle"
href="#pablo"
id="tooltip936523116"
onClick={(e) => e.preventDefault()}
>
<img
alt="..."
src={require("assets/img/theme/team-3.jpg")}
></img>
</a>
<UncontrolledTooltip delay={0} target="tooltip936523116">
Alexander Smith
</UncontrolledTooltip>
<a
className=" avatar avatar-sm rounded-circle"
href="#pablo"
id="tooltip245785295"
onClick={(e) => e.preventDefault()}
>
<img
alt="..."
src={require("assets/img/theme/team-4.jpg")}
></img>
</a>
<UncontrolledTooltip delay={0} target="tooltip245785295">
Jessica Doe
</UncontrolledTooltip>
</div>
</td>
<td>
<div className=" d-flex align-items-center">
<span className=" completion mr-2">100%</span>
<div>
<Progress max="100" value="100" color="success"></Progress>
</div>
</div>
</td>
<td className=" text-right">
<UncontrolledDropdown>
<DropdownToggle
className=" btn-icon-only text-light"
color=""
role="button"
size="sm"
>
<i className=" fas fa-ellipsis-v"></i>
</DropdownToggle>
<DropdownMenu className=" dropdown-menu-arrow" right>
<DropdownItem
href="#pablo"
onClick={(e) => e.preventDefault()}
>
Action
</DropdownItem>
<DropdownItem
href="#pablo"
onClick={(e) => e.preventDefault()}
>
Another action
</DropdownItem>
<DropdownItem
href="#pablo"
onClick={(e) => e.preventDefault()}
>
Something else here
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</td>
</tr>
<tr>
<th scope="row">
<Media className=" align-items-center">
<a
className=" avatar rounded-circle mr-3"
href="#pablo"
onClick={(e) => e.preventDefault()}
>
<img
alt="..."
src={require("assets/img/theme/sketch.jpg")}
></img>
</a>
<Media>
<span className=" name mb-0 text-sm">Black Dashboard</span>
</Media>
</Media>
</th>
<td className=" budget">$3150 USD</td>
<td>
<Badge className=" badge-dot mr-4">
<i className=" bg-danger"></i>
<span className=" status">delayed</span>
</Badge>
</td>
<td>
<div className=" avatar-group">
<a
className=" avatar avatar-sm rounded-circle"
href="#pablo"
id="tooltip611128595"
onClick={(e) => e.preventDefault()}
>
<img
alt="..."
src={require("assets/img/theme/team-1.jpg")}
></img>
</a>
<UncontrolledTooltip delay={0} target="tooltip611128595">
Ryan Tompson
</UncontrolledTooltip>
<a
className=" avatar avatar-sm rounded-circle"
href="#pablo"
id="tooltip979240976"
onClick={(e) => e.preventDefault()}
>
<img
alt="..."
src={require("assets/img/theme/team-2.jpg")}
></img>
</a>
<UncontrolledTooltip delay={0} target="tooltip979240976">
Romina Hadid
</UncontrolledTooltip>
<a
className=" avatar avatar-sm rounded-circle"
href="#pablo"
id="tooltip715080058"
onClick={(e) => e.preventDefault()}
>
<img
alt="..."
src={require("assets/img/theme/team-3.jpg")}
></img>
</a>
<UncontrolledTooltip delay={0} target="tooltip715080058">
Alexander Smith
</UncontrolledTooltip>
<a
className=" avatar avatar-sm rounded-circle"
href="#pablo"
id="tooltip996194607"
onClick={(e) => e.preventDefault()}
>
<img
alt="..."
src={require("assets/img/theme/team-4.jpg")}
></img>
</a>
<UncontrolledTooltip delay={0} target="tooltip996194607">
Jessica Doe
</UncontrolledTooltip>
</div>
</td>
<td>
<div className=" d-flex align-items-center">
<span className=" completion mr-2">72%</span>
<div>
<Progress max="100" value="72" color="danger"></Progress>
</div>
</div>
</td>
<td className=" text-right">
<UncontrolledDropdown>
<DropdownToggle
className=" btn-icon-only text-light"
color=""
role="button"
size="sm"
>
<i className=" fas fa-ellipsis-v"></i>
</DropdownToggle>
<DropdownMenu className=" dropdown-menu-arrow" right>
<DropdownItem
href="#pablo"
onClick={(e) => e.preventDefault()}
>
Action
</DropdownItem>
<DropdownItem
href="#pablo"
onClick={(e) => e.preventDefault()}
>
Another action
</DropdownItem>
<DropdownItem
href="#pablo"
onClick={(e) => e.preventDefault()}
>
Something else here
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</td>
</tr>
<tr>
<th scope="row">
<Media className=" align-items-center">
<a
className=" avatar rounded-circle mr-3"
href="#pablo"
onClick={(e) => e.preventDefault()}
>
<img
alt="..."
src={require("assets/img/theme/react.jpg")}
></img>
</a>
<Media>
<span className=" name mb-0 text-sm">
React Material Dashboard
</span>
</Media>
</Media>
</th>
<td className=" budget">$4400 USD</td>
<td>
<Badge className=" badge-dot mr-4">
<i className=" bg-info"></i>
<span className=" status">on schedule</span>
</Badge>
</td>
<td>
<div className=" avatar-group">
<a
className=" avatar avatar-sm rounded-circle"
href="#pablo"
id="tooltip653947095"
onClick={(e) => e.preventDefault()}
>
<img
alt="..."
src={require("assets/img/theme/team-1.jpg")}
></img>
</a>
<UncontrolledTooltip delay={0} target="tooltip653947095">
Ryan Tompson
</UncontrolledTooltip>
<a
className=" avatar avatar-sm rounded-circle"
href="#pablo"
id="tooltip603706997"
onClick={(e) => e.preventDefault()}
>
<img
alt="..."
src={require("assets/img/theme/team-2.jpg")}
></img>
</a>
<UncontrolledTooltip delay={0} target="tooltip603706997">
Romina Hadid
</UncontrolledTooltip>
<a
className=" avatar avatar-sm rounded-circle"
href="#pablo"
id="tooltip674088569"
onClick={(e) => e.preventDefault()}
>
<img
alt="..."
src={require("assets/img/theme/team-3.jpg")}
></img>
</a>
<UncontrolledTooltip delay={0} target="tooltip674088569">
Alexander Smith
</UncontrolledTooltip>
<a
className=" avatar avatar-sm rounded-circle"
href="#pablo"
id="tooltip205058433"
onClick={(e) => e.preventDefault()}
>
<img
alt="..."
src={require("assets/img/theme/team-4.jpg")}
></img>
</a>
<UncontrolledTooltip delay={0} target="tooltip205058433">
Jessica Doe
</UncontrolledTooltip>
</div>
</td>
<td>
<div className=" d-flex align-items-center">
<span className=" completion mr-2">90%</span>
<div>
<Progress max="100" value="90" color="info"></Progress>
</div>
</div>
</td>
<td className=" text-right">
<UncontrolledDropdown>
<DropdownToggle
className=" btn-icon-only text-light"
color=""
role="button"
size="sm"
>
<i className=" fas fa-ellipsis-v"></i>
</DropdownToggle>
<DropdownMenu className=" dropdown-menu-arrow" right>
<DropdownItem
href="#pablo"
onClick={(e) => e.preventDefault()}
>
Action
</DropdownItem>
<DropdownItem
href="#pablo"
onClick={(e) => e.preventDefault()}
>
Another action
</DropdownItem>
<DropdownItem
href="#pablo"
onClick={(e) => e.preventDefault()}
>
Something else here
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</td>
</tr>
</tbody>
</Table>
</div>
</>
);
}
export default Example;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.