Data Table

Data Tables

Email Role Status Project Actions
user

Evangelina Mcclain

@jstevenson5c
[email protected] Agent Active 165
user

Candice Munoz

@candicemunoz
[email protected] Administrator Active 99
user

Bernard Langley

@bernardlangley
[email protected] Contributor Active 24
user

Kristie Hall

@kristiehall
[email protected] Agent Active 50
user

Bolton Obrien

@boltonobrien
[email protected] Contributor Active 34
user

Dee Alvarado

@deealvarado
[email protected] Administrator Active 99
user

Cervantes Kramer

@cervanteskramer
[email protected] Agent Active 24
user

Dejesus Michael

@dejesusmichael
[email protected] Agent Deactive 50
user

Alissa Nelson

@alissanelson
[email protected] Contributor Deactive 34
user

Anne Nelson

@annenelson
[email protected] Agent Deactive 34

<div class="card bg-white border-0 rounded-10 mb-4">
    <div class="card-body p-4">
        <div class="default-table-area members-list">
            <div class="table-responsive">
                <table class="table align-middle" id="myTable">
                    <thead>
                        <tr>
                            <th scope="col" class="text-primary">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
                                    <label class="form-check-label ms-2" for="flexCheckDefault">Name</label>
                                </div>
                            </th>
                            <th scope="col">Email</th>
                            <th scope="col">Role</th>
                            <th scope="col">Status</th>
                            <th scope="col">Project</th>
                            <th scope="col">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <div class="d-flex align-items-center">
                                    <div class="form-check pe-2">
                                        <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault2">
                                    </div>
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0 lh-1">
                                            <img src="assets/images/user-1.jpg" class="wh-44 rounded-circle" alt="user">
                                        </div>
                                        <div class="flex-grow-1 ms-10">
                                            <h4 class="fw-semibold fs-16 mb-0">Evangelina Mcclain</h4>
                                            <span class="text-gray-light">@jstevenson5c</span>
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <a href="mailto:[email protected]">[email protected]</a>
                            </td>
                            <td>
                                <span>Agent</span>
                            </td>
                            <td>
                                <span class="bg-success bg-opacity-10 text-success fs-13 fw-semibold py-1 px-2 rounded-1">Active</span>
                            </td>
                            <td>
                                <span>165</span>
                            </td>
                            <td>
                                <div class="dropdown action-opt">
                                    <button class="btn bg p-0" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                        <i data-feather="more-horizontal"></i>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-end bg-white border box-shadow">
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="share-2"></i>
                                                Share
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="link-2"></i>
                                                Get Sharable Link
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="edit-3"></i>
                                                Rename
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="download"></i>
                                                Download
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="trash-2"></i>
                                                Remove
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="d-flex align-items-center">
                                    <div class="form-check pe-2">
                                        <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault3">
                                    </div>
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0 lh-1">
                                            <img src="assets/images/user-2.jpg" class="wh-44 rounded-circle" alt="user">
                                        </div>
                                        <div class="flex-grow-1 ms-10">
                                            <h4 class="fw-semibold fs-16 mb-0">Candice Munoz</h4>
                                            <span class="text-gray-light">@candicemunoz</span>
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <a href="mailto:[email protected]">[email protected]</a>
                            </td>
                            <td>
                                <span>Administrator</span>
                            </td>
                            <td>
                                <span class="bg-success bg-opacity-10 text-success fs-13 fw-semibold py-1 px-2 rounded-1">Active</span>
                            </td>
                            <td>
                                <span>99</span>
                            </td>
                            <td>
                                <div class="dropdown action-opt">
                                    <button class="btn bg p-0" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                        <i data-feather="more-horizontal"></i>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-end bg-white border box-shadow">
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="share-2"></i>
                                                Share
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="link-2"></i>
                                                Get Sharable Link
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="edit-3"></i>
                                                Rename
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="download"></i>
                                                Download
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="trash-2"></i>
                                                Remove
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="d-flex align-items-center">
                                    <div class="form-check pe-2">
                                        <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault4">
                                    </div>
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0 lh-1">
                                            <img src="assets/images/user-3.jpg" class="wh-44 rounded-circle" alt="user">
                                        </div>
                                        <div class="flex-grow-1 ms-10">
                                            <h4 class="fw-semibold fs-16 mb-0">Bernard Langley</h4>
                                            <span class="text-gray-light">@bernardlangley</span>
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <a href="mailto:[email protected]">[email protected]</a>
                            </td>
                            <td>
                                <span>Contributor</span>
                            </td>
                            <td>
                                <span class="bg-success bg-opacity-10 text-success fs-13 fw-semibold py-1 px-2 rounded-1">Active</span>
                            </td>
                            <td>
                                <span>24</span>
                            </td>
                            <td>
                                <div class="dropdown action-opt">
                                    <button class="btn bg p-0" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                        <i data-feather="more-horizontal"></i>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-end bg-white border box-shadow">
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="share-2"></i>
                                                Share
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="link-2"></i>
                                                Get Sharable Link
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="edit-3"></i>
                                                Rename
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="download"></i>
                                                Download
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="trash-2"></i>
                                                Remove
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="d-flex align-items-center">
                                    <div class="form-check pe-2">
                                        <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault5">
                                    </div>
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0 lh-1">
                                            <img src="assets/images/user-4.jpg" class="wh-44 rounded-circle" alt="user">
                                        </div>
                                        <div class="flex-grow-1 ms-10">
                                            <h4 class="fw-semibold fs-16 mb-0">Kristie Hall</h4>
                                            <span class="text-gray-light">@kristiehall</span>
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <a href="mailto:[email protected]">[email protected]</a>
                            </td>
                            <td>
                                <span>Agent</span>
                            </td>
                            <td>
                                <span class="bg-success bg-opacity-10 text-success fs-13 fw-semibold py-1 px-2 rounded-1">Active</span>
                            </td>
                            <td>
                                <span>50</span>
                            </td>
                            <td>
                                <div class="dropdown action-opt">
                                    <button class="btn bg p-0" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                        <i data-feather="more-horizontal"></i>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-end bg-white border box-shadow">
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="share-2"></i>
                                                Share
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="link-2"></i>
                                                Get Sharable Link
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="edit-3"></i>
                                                Rename
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="download"></i>
                                                Download
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="trash-2"></i>
                                                Remove
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="d-flex align-items-center">
                                    <div class="form-check pe-2">
                                        <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault6">
                                    </div>
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0 lh-1">
                                            <img src="assets/images/user-5.jpg" class="wh-44 rounded-circle" alt="user">
                                        </div>
                                        <div class="flex-grow-1 ms-10">
                                            <h4 class="fw-semibold fs-16 mb-0">Bolton Obrien</h4>
                                            <span class="text-gray-light">@boltonobrien</span>
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <a href="mailto:[email protected]">[email protected]</a>
                            </td>
                            <td>
                                <span>Contributor</span>
                            </td>
                            <td>
                                <span class="bg-success bg-opacity-10 text-success fs-13 fw-semibold py-1 px-2 rounded-1">Active</span>
                            </td>
                            <td>
                                <span>34</span>
                            </td>
                            <td>
                                <div class="dropdown action-opt">
                                    <button class="btn bg p-0" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                        <i data-feather="more-horizontal"></i>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-end bg-white border box-shadow">
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="share-2"></i>
                                                Share
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="link-2"></i>
                                                Get Sharable Link
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="edit-3"></i>
                                                Rename
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="download"></i>
                                                Download
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="trash-2"></i>
                                                Remove
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="d-flex align-items-center">
                                    <div class="form-check pe-2">
                                        <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault7">
                                    </div>
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0 lh-1">
                                            <img src="assets/images/user-6.jpg" class="wh-44 rounded-circle" alt="user">
                                        </div>
                                        <div class="flex-grow-1 ms-10">
                                            <h4 class="fw-semibold fs-16 mb-0">Dee Alvarado</h4>
                                            <span class="text-gray-light">@deealvarado</span>
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <a href="mailto:[email protected]">[email protected]</a>
                            </td>
                            <td>
                                <span>Administrator</span>
                            </td>
                            <td>
                                <span class="bg-success bg-opacity-10 text-success fs-13 fw-semibold py-1 px-2 rounded-1">Active</span>
                            </td>
                            <td>
                                <span>99</span>
                            </td>
                            <td>
                                <div class="dropdown action-opt">
                                    <button class="btn bg p-0" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                        <i data-feather="more-horizontal"></i>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-end bg-white border box-shadow">
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="share-2"></i>
                                                Share
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="link-2"></i>
                                                Get Sharable Link
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="edit-3"></i>
                                                Rename
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="download"></i>
                                                Download
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="trash-2"></i>
                                                Remove
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="d-flex align-items-center">
                                    <div class="form-check pe-2">
                                        <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault8">
                                    </div>
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0 lh-1">
                                            <img src="assets/images/user-7.jpg" class="wh-44 rounded-circle" alt="user">
                                        </div>
                                        <div class="flex-grow-1 ms-10">
                                            <h4 class="fw-semibold fs-16 mb-0">Cervantes Kramer</h4>
                                            <span class="text-gray-light">@cervanteskramer</span>
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <a href="mailto:[email protected]">[email protected]</a>
                            </td>
                            <td>
                                <span>Agent</span>
                            </td>
                            <td>
                                <span class="bg-success bg-opacity-10 text-success fs-13 fw-semibold py-1 px-2 rounded-1">Active</span>
                            </td>
                            <td>
                                <span>24</span>
                            </td>
                            <td>
                                <div class="dropdown action-opt">
                                    <button class="btn bg p-0" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                        <i data-feather="more-horizontal"></i>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-end bg-white border box-shadow">
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="share-2"></i>
                                                Share
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="link-2"></i>
                                                Get Sharable Link
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="edit-3"></i>
                                                Rename
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="download"></i>
                                                Download
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="trash-2"></i>
                                                Remove
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="d-flex align-items-center">
                                    <div class="form-check pe-2">
                                        <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault9">
                                    </div>
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0 lh-1">
                                            <img src="assets/images/user-8.jpg" class="wh-44 rounded-circle" alt="user">
                                        </div>
                                        <div class="flex-grow-1 ms-10">
                                            <h4 class="fw-semibold fs-16 mb-0">Dejesus Michael</h4>
                                            <span class="text-gray-light">@dejesusmichael</span>
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <a href="mailto:[email protected]">[email protected]</a>
                            </td>
                            <td>
                                <span>Agent</span>
                            </td>
                            <td>
                                <span class="bg-danger bg-opacity-10 text-danger fs-13 fw-semibold py-1 px-2 rounded-1">Deactive</span>
                            </td>
                            <td>
                                <span>50</span>
                            </td>
                            <td>
                                <div class="dropdown action-opt">
                                    <button class="btn bg p-0" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                        <i data-feather="more-horizontal"></i>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-end bg-white border box-shadow">
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="share-2"></i>
                                                Share
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="link-2"></i>
                                                Get Sharable Link
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="edit-3"></i>
                                                Rename
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="download"></i>
                                                Download
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="trash-2"></i>
                                                Remove
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="d-flex align-items-center">
                                    <div class="form-check pe-2">
                                        <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault10">
                                    </div>
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0 lh-1">
                                            <img src="assets/images/user-9.jpg" class="wh-44 rounded-circle" alt="user">
                                        </div>
                                        <div class="flex-grow-1 ms-10">
                                            <h4 class="fw-semibold fs-16 mb-0">Alissa Nelson</h4>
                                            <span class="text-gray-light">@alissanelson</span>
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <a href="mailto:[email protected]">[email protected]</a>
                            </td>
                            <td>
                                <span>Contributor</span>
                            </td>
                            <td>
                                <span class="bg-danger bg-opacity-10 text-danger fs-13 fw-semibold py-1 px-2 rounded-1">Deactive</span>
                            </td>
                            <td>
                                <span>34</span>
                            </td>
                            <td>
                                <div class="dropdown action-opt">
                                    <button class="btn bg p-0" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                        <i data-feather="more-horizontal"></i>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-end bg-white border box-shadow">
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="share-2"></i>
                                                Share
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="link-2"></i>
                                                Get Sharable Link
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="edit-3"></i>
                                                Rename
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="download"></i>
                                                Download
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="trash-2"></i>
                                                Remove
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div class="d-flex align-items-center">
                                    <div class="form-check pe-2">
                                        <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault10">
                                    </div>
                                    <div class="d-flex align-items-center">
                                        <div class="flex-shrink-0 lh-1">
                                            <img src="assets/images/user-34.jpg" class="wh-44 rounded-circle" alt="user">
                                        </div>
                                        <div class="flex-grow-1 ms-10">
                                            <h4 class="fw-semibold fs-16 mb-0">Anne Nelson</h4>
                                            <span class="text-gray-light">@annenelson</span>
                                        </div>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <a href="mailto:[email protected]">[email protected]</a>
                            </td>
                            <td>
                                <span>Agent</span>
                            </td>
                            <td>
                                <span class="bg-danger bg-opacity-10 text-danger fs-13 fw-semibold py-1 px-2 rounded-1">Deactive</span>
                            </td>
                            <td>
                                <span>34</span>
                            </td>
                            <td>
                                <div class="dropdown action-opt">
                                    <button class="btn bg p-0" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                        <i data-feather="more-horizontal"></i>
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-end bg-white border box-shadow">
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="share-2"></i>
                                                Share
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="link-2"></i>
                                                Get Sharable Link
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="edit-3"></i>
                                                Rename
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="download"></i>
                                                Download
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item" href="javascript:;">
                                                <i data-feather="trash-2"></i>
                                                Remove
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>