Inquisitive Table

HTML

Author: ahambridge

15 days ago 2,930 B


        <!-- Scroll region -->
        <div class="sm-panel__scroll flex-grow-1">
          <div class="sm-tableWrap">
            <table class="table table-hover align-middle mb-0">
              <thead>
                <tr>
                  <th>Subject</th>
                  <th>Description</th>
                  <th>Status</th>
                  <th class="text-end">Actions</th>
                </tr>
              </thead>

              <tbody id="smSubjectsTbody">
                <!-- JS/PHP will inject rows here -->
                <?php if (count($subjects) === 0): ?>
                  <tr>
                    <td colspan="4" class="text-muted py-4 text-center">
                      No Subjects found.
                    </td>
                  </tr>
                <?php else: ?>
                  <?php foreach ($subjects as $u): ?>
                    <?php
                      $subjectUUID = $u["subjectUUID"];
                      $subjectTitle = $u["subjectTitle"];
                      $subjectDescription = $u["subjectDescription"];
                      $isDisabled = (int)$u["isDisabled"];
                    ?>
                    <tr>
                      <td>
                            <div class="sm-subject__name">
                              <?= htmlspecialchars($subjectTitle) ?>
                            </div>
                            <div class="sm-subject__id">
                              ID: <?= htmlspecialchars($subjectUUID) ?>
                            </div>
                          </div>
                        </div>
                      </td>

                      <td class="text-muted"><?= htmlspecialchars($subjectDescription) ?></td>

                      <td>
                        <?php if ($isDisabled): ?>
                          <span class="badge sm-badge-danger">Disabled</span>
                        <?php else: ?>
                          <span class="badge sm-badge-success">Active</span>
                        <?php endif; ?>
                      </td>

                      <td class="text-end">
                        <div class="sm-actions">
                          <!-- Edit Button -->
                          <button class="btn btn-sm btn-outline-primary">Edit</button>
                          <!-- Disable/Enable Button -->
                          <button class="btn btn-sm btn-outline-warning smToggleDisableBtn" data-subjectuuid="<?= htmlspecialchars($subjectUUID) ?>" data-disabled="<?= $isDisabled?>">
                            <?= $isDisabled ? "Enable" : "Disable" ?>
                          </button>
                        </div>
                      </td>
                    </tr>
                  <?php endforeach; ?>
                <?php endif; ?>

              </tbody>
            </table>
          </div>
        </div>