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
$2500 USD
pending
$1800 USD
completed
$3150 USD
delayed
$4400 USD
on schedule
$2200 USD
completed
$2500 USD
pending
$1800 USD
completed
$3150 USD
delayed
$1800 USD
completed
$3150 USD
delayed
$4400 USD
on schedule
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 .