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
Image placeholder
Argon Design System
$2500 USD pending
60%
Image placeholder
Angular Now UI Kit PRO
$1800 USD completed
100%
Image placeholder
Black Dashboard
$3150 USD delayed
72%
Image placeholder
React Material Dashboard
$4400 USD on schedule
90%
Image placeholder
Vue Paper UI Kit PRO
$2200 USD completed
100%
Image placeholder
Argon Design System
$2500 USD pending
60%
Image placeholder
Angular Now UI Kit PRO
$1800 USD completed
100%
Image placeholder
Black Dashboard
$3150 USD delayed
72%
Image placeholder
Angular Now UI Kit PRO
$1800 USD completed
100%
Image placeholder
Black Dashboard
$3150 USD delayed
72%
Image placeholder
React Material Dashboard
$4400 USD on schedule
90%
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.