Nextjs Tables
Our Nextjs Tables are designed to be opt-in due to the
widespread use of tables across third-party widgets like calendars
and date pickers.
Keep reading some Nextjs Tables examples to see how these tables
work.
Examples
| 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%
|
import React from "react";
// reactstrap components
import {
Badge,
DropdownToggle,
DropdownMenu,
DropdownItem,
UncontrolledDropdown,
Media,
Progress,
Table,
UncontrolledTooltip,
} from "reactstrap";
function Example() {
return (
<>
<Table responsive 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>
</>
);
}
export default Example;Dark Tables Example
| 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%
|
import React from "react";
// reactstrap components
import {
Badge,
DropdownToggle,
DropdownMenu,
DropdownItem,
UncontrolledDropdown,
Media,
Progress,
Table,
UncontrolledTooltip,
} from "reactstrap";
function Example() {
return (
<>
<Table responsive className=" align-items-center table-dark">
<thead className=" thead-dark">
<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 color="" 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 color="" 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 color="" 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 color="" 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 color="" 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 color="" 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 color="" 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 color="" 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 color="" 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 color="" 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 color="" 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>
</>
);
}
export default Example;Props
If you want to see more examples and properties please check the official Reactstrap Documentation.