# Tables

## Component #1

- Preview
- HTML
- CSS
- JS

#### Your team

Name | Status | Access |
--- | --- | --- | ---
###### Amanda Harvey amanda@example.com |  |  |
###### Anne Richard anne@example.com |  |  |
FH ###### Finch Hoot finch@example.com |  |  |
###### David Harrison New david@example.com |  |  |
SD ###### Sean Dean bob@example.com |  |  |
###### Sam Kart sam@example.com |  |  |
###### Ella Marley ella@example.com |  |  |
RD ###### Rachel Doe New rachel@example.com |  |  |
BH ###### Brian Halligan brian@example.com |  |  |

Cancel Save changes

                    <!-- Card -->
                    <div class="card">
                      <div class="card-header">
                        <h5 class="card-header-title">Your team</h5>
                      </div>

                      <!-- Table -->
                      <div class="table-responsive">
                        <table class="table table-borderless table-thead-bordered table-nowrap table-align-middle card-table">
                          <thead class="thead-light">
                            <tr>
                              <th>Name</th>
                              <th>Status</th>
                              <th>Access</th>
                              <th style="width: 5%;"></th>
                            </tr>
                          </thead>

                          <tbody>
                            <tr>
                              <td>
                                <div class="d-flex align-items-center">
                                  <div class="flex-shrink-0">
                                    <img class="avatar avatar-sm avatar-circle" src="../assets/img/160x160/img8.jpg" alt="Image Description">
                                  </div>

                                  <div class="flex-grow-1 ms-3">
                                    <a class="d-inline-block link-dark" href="#">
                                      <h6 class="text-hover-primary mb-0">Amanda Harvey <img class="avatar avatar-xss ms-1" src="../assets/svg/illustrations/top-vendor.svg" alt="Image Description" data-bs-toggle="tooltip" data-bs-placement="top" title="Verified user"></h6>
                                    </a>
                                    <small class="d-block">amanda@example.com</small>
                                  </div>
                                </div>
                              </td>
                              <td>
                                <!-- Select -->
                                <select class="js-select form-select form-select-sm">
                                  <option value="memberStatusLabelActive1" selected data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-success me-2"></span> Active</span>'>Active</option>
                                  <option value="memberStatusLabelInactive1" data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-danger me-2"></span> Inactive</span>'>Inactive</option>
                                </select>
                                <!-- End Select -->
                              </td>
                              <td>
                                <!-- Select -->
                                <select class="js-select form-select form-select-sm">
                                  <option value="memberStatusLabelAdmin1" selected>Admin</option>
                                  <option value="memberStatusLabelCanEdit1">Can edit</option>
                                  <option value="memberStatusLabelCanView1">Can view</option>
                                </select>
                                <!-- End Select -->
                              </td>
                              <td>
                                <a class="text-body" href="javascript:;" data-bs-toggle="tooltip" data-bs-placement="top" title="Locked">
                                  <i class="bi-lock-fill"></i>
                                </a>
                              </td>
                            </tr>

                            <tr>
                              <td>
                                <div class="d-flex align-items-center">
                                  <div class="flex-shrink-0">
                                    <img class="avatar avatar-sm avatar-circle" src="../assets/img/160x160/img7.jpg" alt="Image Description">
                                  </div>

                                  <div class="flex-grow-1 ms-3">
                                    <a class="d-inline-block link-dark" href="#">
                                      <h6 class="text-hover-primary mb-0">Anne Richard</h6>
                                    </a>
                                    <small class="d-block">anne@example.com</small>
                                  </div>
                                </div>
                              </td>
                              <td>
                                <!-- Select -->
                                <select class="js-select form-select form-select-sm">
                                  <option value="memberStatusLabelActive2" data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-success me-2"></span> Active</span>'>Active</option>
                                  <option value="memberStatusLabelInactive2" selected data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-danger me-2"></span> Inactive</span>'>Inactive</option>
                                </select>
                                <!-- End Select -->
                              </td>
                              <td>
                                <!-- Select -->
                                <select class="js-select form-select form-select-sm">
                                  <option value="memberStatusLabelAdmin2">Admin</option>
                                  <option value="memberStatusLabelCanEdit2" selected>Can edit</option>
                                  <option value="memberStatusLabelCanView2">Can view</option>
                                </select>
                                <!-- End Select -->
                              </td>
                              <td>
                                <a class="text-body" href="javascript:;" data-bs-toggle="tooltip" data-bs-placement="top" title="Remove member">
                                  <i class="bi-trash"></i>
                                </a>
                              </td>
                            </tr>

                            <tr>
                              <td>
                                <div class="d-flex align-items-center">
                                  <div class="flex-shrink-0">
                                    <span class="avatar avatar-sm avatar-warning avatar-circle">
                                      <span class="avatar-initials">FH</span>
                                    </span>
                                  </div>

                                  <div class="flex-grow-1 ms-3">
                                    <a class="d-inline-block link-dark" href="#">
                                      <h6 class="text-hover-primary mb-0">Finch Hoot</h6>
                                    </a>
                                    <small class="d-block">finch@example.com</small>
                                  </div>
                                </div>
                              </td>
                              <td>
                                <!-- Select -->
                                <select class="js-select form-select form-select-sm">
                                  <option value="memberStatusLabelActive4" selected data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-success me-2"></span> Active</span>'>Active</option>
                                  <option value="memberStatusLabelInactive4" data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-danger me-2"></span> Inactive</span>'>Inactive</option>
                                </select>
                                <!-- End Select -->
                              </td>
                              <td>
                                <!-- Select -->
                                <select class="js-select form-select form-select-sm">
                                  <option value="memberStatusLabelAdmin4">Admin</option>
                                  <option value="memberStatusLabelCanEdit4">Can edit</option>
                                  <option value="memberStatusLabelCanView4" selected>Can view</option>
                                </select>
                                <!-- End Select -->
                              </td>
                              <td>
                                <a class="text-body" href="javascript:;" data-bs-toggle="tooltip" data-bs-placement="top" title="Remove member">
                                  <i class="bi-trash"></i>
                                </a>
                              </td>
                            </tr>

                            <tr>
                              <td>
                                <div class="d-flex align-items-center">
                                  <div class="flex-shrink-0">
                                    <img class="avatar avatar-sm avatar-circle" src="../assets/img/160x160/img3.jpg" alt="Image Description">
                                  </div>

                                  <div class="flex-grow-1 ms-3">
                                    <a class="d-inline-block link-dark" href="#">
                                      <h6 class="text-hover-primary mb-0">David Harrison <span class="badge badge-soft-info badge-pill ms-1">New</span></h6>
                                    </a>
                                    <small class="d-block">david@example.com</small>
                                  </div>
                                </div>
                              </td>
                              <td>
                                <!-- Select -->
                                <select class="js-select form-select form-select-sm">
                                  <option value="memberStatusLabelActive3" selected data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-success me-2"></span> Active</span>'>Active</option>
                                  <option value="memberStatusLabelInactive3" data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-danger me-2"></span> Inactive</span>'>Inactive</option>
                                </select>
                                <!-- End Select -->
                              </td>
                              <td>
                                <!-- Select -->
                                <select class="js-select form-select form-select-sm">
                                  <option value="memberStatusLabelAdmin3">Admin</option>
                                  <option value="memberStatusLabelCanEdit3" selected>Can edit</option>
                                  <option value="memberStatusLabelCanView3">Can view</option>
                                </select>
                                <!-- End Select -->
                              </td>
                              <td>
                                <a class="text-body" href="javascript:;" data-bs-toggle="tooltip" data-bs-placement="top" title="Remove member">
                                  <i class="bi-trash"></i>
                                </a>
                              </td>
                            </tr>

                            <tr>
                              <td>
                                <div class="d-flex align-items-center">
                                  <div class="flex-shrink-0">
                                    <span class="avatar avatar-sm avatar-danger avatar-circle">
                                      <span class="avatar-initials">SD</span>
                                    </span>
                                  </div>

                                  <div class="flex-grow-1 ms-3">
                                    <a class="d-inline-block link-dark" href="#">
                                      <h6 class="text-hover-primary mb-0">Sean Dean</h6>
                                    </a>
                                    <small class="d-block">bob@example.com</small>
                                  </div>
                                </div>
                              </td>
                              <td>
                                <!-- Select -->
                                <select class="js-select form-select form-select-sm">
                                  <option value="memberStatusLabelActive5" data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-success me-2"></span> Active</span>'>Active</option>
                                  <option value="memberStatusLabelInactive5" selected data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-danger me-2"></span> Inactive</span>'>Inactive</option>
                                </select>
                                <!-- End Select -->
                              </td>
                              <td>
                                <!-- Select -->
                                <select class="js-select form-select form-select-sm">
                                  <option value="memberStatusLabelAdmin5">Admin</option>
                                  <option value="memberStatusLabelCanEdit5" selected>Can edit</option>
                                  <option value="memberStatusLabelCanView5">Can view</option>
                                </select>
                                <!-- End Select -->
                              </td>
                              <td>
                                <a class="text-body" href="javascript:;" data-bs-toggle="tooltip" data-bs-placement="top" title="Remove member">
                                  <i class="bi-trash"></i>
                                </a>
                              </td>
                            </tr>

                            <tr>
                              <td>
                                <div class="d-flex align-items-center">
                                  <div class="flex-shrink-0">
                                    <img class="avatar avatar-sm avatar-circle" src="../assets/img/160x160/img6.jpg" alt="Image Description">
                                  </div>

                                  <div class="flex-grow-1 ms-3">
                                    <a class="d-inline-block link-dark" href="#">
                                      <h6 class="text-hover-primary mb-0">Sam Kart <img class="avatar avatar-xss ms-1" src="../assets/svg/illustrations/top-vendor.svg" alt="Image Description" data-bs-toggle="tooltip" data-bs-placement="top" title="Verified user"></h6>
                                    </a>
                                    <small class="d-block">sam@example.com</small>
                                  </div>
                                </div>
                              </td>
                              <td>
                                <!-- Select -->
                                <select class="js-select form-select form-select-sm">
                                  <option value="memberStatusLabelActive6" data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-success me-2"></span> Active</span>'>Active</option>
                                  <option value="memberStatusLabelInactive6" selected data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-danger me-2"></span> Inactive</span>'>Inactive</option>
                                </select>
                                <!-- End Select -->
                              </td>
                              <td>
                                <!-- Select -->
                                <select class="js-select form-select form-select-sm">
                                  <option value="memberStatusLabelAdmin6">Admin</option>
                                  <option value="memberStatusLabelCanEdit6">Can edit</option>
                                  <option value="memberStatusLabelCanView6" selected>Can view</option>
                                </select>
                                <!-- End Select -->
                              </td>
                              <td>
                                <a class="text-body" href="javascript:;" data-bs-toggle="tooltip" data-bs-placement="top" title="Remove member">
                                  <i class="bi-trash"></i>
                                </a>
                              </td>
                            </tr>

                            <tr>
                              <td>
                                <div class="d-flex align-items-center">
                                  <div class="flex-shrink-0">
                                    <img class="avatar avatar-sm avatar-circle" src="../assets/img/160x160/img10.jpg" alt="Image Description">
                                  </div>

                                  <div class="flex-grow-1 ms-3">
                                    <a class="d-inline-block link-dark" href="#">
                                      <h6 class="text-hover-primary mb-0">Ella Marley</h6>
                                    </a>
                                    <small class="d-block">ella@example.com</small>
                                  </div>
                                </div>
                              </td>
                              <td>
                                <!-- Select -->
                                <select class="js-select form-select form-select-sm">
                                  <option value="memberStatusLabelActive7" selected data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-success me-2"></span> Active</span>'>Active</option>
                                  <option value="memberStatusLabelInactive7" data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-danger me-2"></span> Inactive</span>'>Inactive</option>
                                </select>
                                <!-- End Select -->
                              </td>
                              <td>
                                <!-- Select -->
                                <select class="js-select form-select form-select-sm">
                                  <option value="memberStatusLabelAdmin7">Admin</option>
                                  <option value="memberStatusLabelCanEdit7" selected>Can edit</option>
                                  <option value="memberStatusLabelCanView7">Can view</option>
                                </select>
                                <!-- End Select -->
                              </td>
                              <td>
                                <a class="text-body" href="javascript:;" data-bs-toggle="tooltip" data-bs-placement="top" title="Remove member">
                                  <i class="bi-trash"></i>
                                </a>
                              </td>
                            </tr>

                            <tr>
                              <td>
                                <div class="d-flex align-items-center">
                                  <div class="flex-shrink-0">
                                    <span class="avatar avatar-sm avatar-dark avatar-circle">
                                      <span class="avatar-initials">RD</span>
                                    </span>
                                  </div>

                                  <div class="flex-grow-1 ms-3">
                                    <a class="d-inline-block link-dark" href="#">
                                      <h6 class="text-hover-primary mb-0">Rachel Doe <span class="badge badge-soft-info badge-pill ms-1">New</span></h6>
                                    </a>
                                    <small class="d-block">rachel@example.com</small>
                                  </div>
                                </div>
                              </td>
                              <td>
                                <!-- Select -->
                                <select class="js-select form-select form-select-sm">
                                  <option value="memberStatusLabelActive8" selected data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-success me-2"></span> Active</span>'>Active</option>
                                  <option value="memberStatusLabelInactive8" data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-danger me-2"></span> Inactive</span>'>Inactive</option>
                                </select>
                                <!-- End Select -->
                              </td>
                              <td>
                                <!-- Select -->
                                <select class="js-select form-select form-select-sm">
                                  <option value="memberStatusLabelAdmin8">Admin</option>
                                  <option value="memberStatusLabelCanEdit8" selected>Can edit</option>
                                  <option value="memberStatusLabelCanView8">Can view</option>
                                </select>
                                <!-- End Select -->
                              </td>
                              <td>
                                <a class="text-body" href="javascript:;" data-bs-toggle="tooltip" data-bs-placement="top" title="Remove member">
                                  <i class="bi-trash"></i>
                                </a>
                              </td>
                            </tr>

                            <tr>
                              <td>
                                <div class="d-flex align-items-center">
                                  <div class="flex-shrink-0">
                                    <span class="avatar avatar-sm avatar-primary avatar-circle">
                                      <span class="avatar-initials">BH</span>
                                    </span>
                                  </div>

                                  <div class="flex-grow-1 ms-3">
                                    <a class="d-inline-block link-dark" href="#">
                                      <h6 class="text-hover-primary mb-0">Brian Halligan</h6>
                                    </a>
                                    <small class="d-block">brian@example.com</small>
                                  </div>
                                </div>
                              </td>
                              <td>
                                <!-- Select -->
                                <select class="js-select form-select form-select-sm">
                                  <option value="memberStatusLabelActive9" selected data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-success me-2"></span> Active</span>'>Active</option>
                                  <option value="memberStatusLabelInactive9" data-option-template='<span class="d-flex align-items-center"><span class="legend-indicator bg-danger me-2"></span> Inactive</span>'>Inactive</option>
                                </select>
                                <!-- End Select -->
                              </td>
                              <td>
                                <!-- Select -->
                                <select class="js-select form-select form-select-sm">
                                  <option value="memberStatusLabelAdmin9">Admin</option>
                                  <option value="memberStatusLabelCanEdit9">Can edit</option>
                                  <option value="memberStatusLabelCanView9" selected>Can view</option>
                                </select>
                                <!-- End Select -->
                              </td>
                              <td>
                                <a class="text-body" href="javascript:;" data-bs-toggle="tooltip" data-bs-placement="top" title="Remove member">
                                  <i class="bi-trash"></i>
                                </a>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </div>
                      <!-- End Table -->

                      <!-- Footer -->
                      <div class="card-footer border-top">
                        <div class="d-flex justify-content-end gap-3">
                          <a class="btn btn-white" href="javascript:;">Cancel</a>
                          <a class="btn btn-primary" href="javascript:;">Save changes</a>
                        </div>
                      </div>
                      <!-- End Footer -->
                    </div>
                    <!-- End Card -->

                    <link rel="stylesheet" href="../node_modules/tom-select/dist/css/tom-select.bootstrap5.css">

                    <!-- JS Implementing Plugins -->
                    <script src="../node_modules/tom-select/dist/js/tom-select.complete.min.js"></script>

                    <!-- JS Front -->
                    <script src="../assets/js/hs.tom-select.js"></script>

                    <!-- JS Plugins Init. -->
                    <script>
                      (function() {
                        // INITIALIZATION OF SELECT
                        // =======================================================
                        HSCore.components.HSTomSelect.init('.js-select', {
                          render: {
                            'option': function(data, escape) {
                              return data.optionTemplate
                            },
                            'item': function(data, escape) {
                              return data.optionTemplate
                            }
                          }
                        })
                      })()
                    </script>