Skip to component content

Data Table

Build live server-rendered work queues with search, facets, sorting, selection, bulk actions, column visibility, pagination, and responsive card views.

1280 x 900
Open standalone 
<div class="moo-examples-page" data-moo-example-tasks>
  <header class="moo-component-header moo-component-header--has-actions" aria-labelledby="tasks">
    <div class="moo-component-header__title-row">
      <h1 class="fw-semibold" id="tasks">Data Table</h1>
      <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#tasks-new-sheet">
        <i class="lucide lucide-plus" data-icon="inline-start" aria-hidden="true"></i>
        New Task
      </button>
    </div>
    <p class="moo-page-description text-body-secondary mb-0">Build live server-rendered work queues with search, facets, sorting, selection, bulk actions, column visibility, pagination, and responsive card views.</p>
  </header>
  <div class="datatable datatable--responsive-auto datatable--responsive-cards-active datatable--tasks" id="examples-tasks-datatable" data-datatable-page-size="10" data-datatable-filter-mode="picker" data-datatable-view="auto" data-datatable-responsive-breakpoint="md">
    <div class="datatable-toolbar" data-datatable-toolbar>
      <div class="datatable-toolbar-query">
        <div class="datatable-search-filter">
          <div class="input-group input-group-sm datatable-searchbar">
            <span class="datatable-search-icon" aria-hidden="true">
              <i class="lucide lucide-search" data-icon="inline-start" aria-hidden="true"></i>
            </span>
            <input class="form-control datatable-search" type="search" placeholder="Search tasks..." aria-label="Search tasks..." data-datatable-search>
            <button class="btn btn-ghost btn-icon-sm datatable-filter-picker-trigger" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" data-bs-offset="0,8" aria-expanded="false" aria-label="Open filters" data-datatable-filter-menu-trigger>
              <i class="lucide lucide-list-filter" data-icon="inline-start" aria-hidden="true"></i>
            </button>
            <ul class="dropdown-menu dropdown-menu-end datatable-search-filter-menu">
              <li class="datatable-filter-panel" data-datatable-filter-panel="facets">
                <h6 class="dropdown-header">Filter by</h6>
              </li>
              <li class="datatable-filter-panel" data-datatable-filter-panel="facets">
                <button class="dropdown-item datatable-filter-group" type="button" data-datatable-filter-group="status">
                  <span>Status</span>
                  <span class="datatable-filter-group-summary ms-auto small text-body-secondary" data-datatable-filter-group-summary="status" hidden></span>
                  <i class="lucide lucide-chevron-right" data-icon="inline-end" aria-hidden="true"></i>
                </button>
              </li>
              <li class="datatable-filter-panel" data-datatable-filter-panel="facets">
                <button class="dropdown-item datatable-filter-group" type="button" data-datatable-filter-group="priority">
                  <span>Priority</span>
                  <span class="datatable-filter-group-summary ms-auto small text-body-secondary" data-datatable-filter-group-summary="priority" hidden></span>
                  <i class="lucide lucide-chevron-right" data-icon="inline-end" aria-hidden="true"></i>
                </button>
              </li>
              <li class="datatable-filter-panel" data-datatable-filter-panel="facets">
                <button class="dropdown-item datatable-filter-group" type="button" data-datatable-filter-group="tag">
                  <span>Tag</span>
                  <span class="datatable-filter-group-summary ms-auto small text-body-secondary" data-datatable-filter-group-summary="tag" hidden></span>
                  <i class="lucide lucide-chevron-right" data-icon="inline-end" aria-hidden="true"></i>
                </button>
              </li>
              <li class="datatable-filter-panel" data-datatable-filter-panel="options" data-datatable-filter-panel-key="status" hidden>
                <button class="dropdown-item datatable-filter-panel-back" type="button" data-datatable-filter-back>
                  <i class="lucide lucide-chevron-left" data-icon="inline-start" aria-hidden="true"></i>
                  <span>Status</span>
                </button>
                <ul class="datatable-filter-options no-scrollbar scroll-fade-y">
                  <li>
                    <button class="dropdown-item dropdown-item-check datatable-filter-picker-item" type="button" data-datatable-filter-option="open" data-datatable-filter-option-key="status" aria-pressed="false">
                      <span class="dropdown-item-check__indicator" aria-hidden="true">
                        <i class="lucide lucide-check" data-icon="inline-start" aria-hidden="true"></i>
                      </span>
                      <i class="lucide lucide-circle" data-icon="inline-start" aria-hidden="true"></i>
                      <span data-datatable-filter-option-label>Open</span>
                      <span class="ms-auto small text-body-secondary">8</span>
                    </button>
                  </li>
                  <li>
                    <button class="dropdown-item dropdown-item-check datatable-filter-picker-item" type="button" data-datatable-filter-option="in-progress" data-datatable-filter-option-key="status" aria-pressed="false">
                      <span class="dropdown-item-check__indicator" aria-hidden="true">
                        <i class="lucide lucide-check" data-icon="inline-start" aria-hidden="true"></i>
                      </span>
                      <i class="lucide lucide-loader" data-icon="inline-start" aria-hidden="true"></i>
                      <span data-datatable-filter-option-label>In progress</span>
                      <span class="ms-auto small text-body-secondary">7</span>
                    </button>
                  </li>
                  <li>
                    <button class="dropdown-item dropdown-item-check datatable-filter-picker-item" type="button" data-datatable-filter-option="blocked" data-datatable-filter-option-key="status" aria-pressed="false">
                      <span class="dropdown-item-check__indicator" aria-hidden="true">
                        <i class="lucide lucide-check" data-icon="inline-start" aria-hidden="true"></i>
                      </span>
                      <i class="lucide lucide-circle-alert" data-icon="inline-start" aria-hidden="true"></i>
                      <span data-datatable-filter-option-label>Blocked</span>
                      <span class="ms-auto small text-body-secondary">4</span>
                    </button>
                  </li>
                  <li>
                    <button class="dropdown-item dropdown-item-check datatable-filter-picker-item" type="button" data-datatable-filter-option="done" data-datatable-filter-option-key="status" aria-pressed="false">
                      <span class="dropdown-item-check__indicator" aria-hidden="true">
                        <i class="lucide lucide-check" data-icon="inline-start" aria-hidden="true"></i>
                      </span>
                      <i class="lucide lucide-circle-check" data-icon="inline-start" aria-hidden="true"></i>
                      <span data-datatable-filter-option-label>Done</span>
                      <span class="ms-auto small text-body-secondary">5</span>
                    </button>
                  </li>
                </ul>
              </li>
              <li class="datatable-filter-panel" data-datatable-filter-panel="options" data-datatable-filter-panel-key="priority" hidden>
                <button class="dropdown-item datatable-filter-panel-back" type="button" data-datatable-filter-back>
                  <i class="lucide lucide-chevron-left" data-icon="inline-start" aria-hidden="true"></i>
                  <span>Priority</span>
                </button>
                <ul class="datatable-filter-options no-scrollbar scroll-fade-y">
                  <li>
                    <button class="dropdown-item dropdown-item-check datatable-filter-picker-item" type="button" data-datatable-filter-option="high" data-datatable-filter-option-key="priority" aria-pressed="false">
                      <span class="dropdown-item-check__indicator" aria-hidden="true">
                        <i class="lucide lucide-check" data-icon="inline-start" aria-hidden="true"></i>
                      </span>
                      <i class="lucide lucide-arrow-up" data-icon="inline-start" aria-hidden="true"></i>
                      <span data-datatable-filter-option-label>High</span>
                      <span class="ms-auto small text-body-secondary">8</span>
                    </button>
                  </li>
                  <li>
                    <button class="dropdown-item dropdown-item-check datatable-filter-picker-item" type="button" data-datatable-filter-option="medium" data-datatable-filter-option-key="priority" aria-pressed="false">
                      <span class="dropdown-item-check__indicator" aria-hidden="true">
                        <i class="lucide lucide-check" data-icon="inline-start" aria-hidden="true"></i>
                      </span>
                      <i class="lucide lucide-minus" data-icon="inline-start" aria-hidden="true"></i>
                      <span data-datatable-filter-option-label>Medium</span>
                      <span class="ms-auto small text-body-secondary">10</span>
                    </button>
                  </li>
                  <li>
                    <button class="dropdown-item dropdown-item-check datatable-filter-picker-item" type="button" data-datatable-filter-option="low" data-datatable-filter-option-key="priority" aria-pressed="false">
                      <span class="dropdown-item-check__indicator" aria-hidden="true">
                        <i class="lucide lucide-check" data-icon="inline-start" aria-hidden="true"></i>
                      </span>
                      <i class="lucide lucide-arrow-down" data-icon="inline-start" aria-hidden="true"></i>
                      <span data-datatable-filter-option-label>Low</span>
                      <span class="ms-auto small text-body-secondary">6</span>
                    </button>
                  </li>
                </ul>
              </li>
              <li class="datatable-filter-panel" data-datatable-filter-panel="options" data-datatable-filter-panel-key="tag" hidden>
                <button class="dropdown-item datatable-filter-panel-back" type="button" data-datatable-filter-back>
                  <i class="lucide lucide-chevron-left" data-icon="inline-start" aria-hidden="true"></i>
                  <span>Tag</span>
                </button>
                <ul class="datatable-filter-options no-scrollbar scroll-fade-y">
                  <li>
                    <button class="dropdown-item dropdown-item-check datatable-filter-picker-item" type="button" data-datatable-filter-option="docs" data-datatable-filter-option-key="tag" aria-pressed="false">
                      <span class="dropdown-item-check__indicator" aria-hidden="true">
                        <i class="lucide lucide-check" data-icon="inline-start" aria-hidden="true"></i>
                      </span>
                      <span data-datatable-filter-option-label>Docs</span>
                      <span class="ms-auto small text-body-secondary">5</span>
                    </button>
                  </li>
                  <li>
                    <button class="dropdown-item dropdown-item-check datatable-filter-picker-item" type="button" data-datatable-filter-option="a11y" data-datatable-filter-option-key="tag" aria-pressed="false">
                      <span class="dropdown-item-check__indicator" aria-hidden="true">
                        <i class="lucide lucide-check" data-icon="inline-start" aria-hidden="true"></i>
                      </span>
                      <span data-datatable-filter-option-label>A11y</span>
                      <span class="ms-auto small text-body-secondary">6</span>
                    </button>
                  </li>
                  <li>
                    <button class="dropdown-item dropdown-item-check datatable-filter-picker-item" type="button" data-datatable-filter-option="visual" data-datatable-filter-option-key="tag" aria-pressed="false">
                      <span class="dropdown-item-check__indicator" aria-hidden="true">
                        <i class="lucide lucide-check" data-icon="inline-start" aria-hidden="true"></i>
                      </span>
                      <span data-datatable-filter-option-label>Visual</span>
                      <span class="ms-auto small text-body-secondary">6</span>
                    </button>
                  </li>
                  <li>
                    <button class="dropdown-item dropdown-item-check datatable-filter-picker-item" type="button" data-datatable-filter-option="site" data-datatable-filter-option-key="tag" aria-pressed="false">
                      <span class="dropdown-item-check__indicator" aria-hidden="true">
                        <i class="lucide lucide-check" data-icon="inline-start" aria-hidden="true"></i>
                      </span>
                      <span data-datatable-filter-option-label>Site</span>
                      <span class="ms-auto small text-body-secondary">4</span>
                    </button>
                  </li>
                  <li>
                    <button class="dropdown-item dropdown-item-check datatable-filter-picker-item" type="button" data-datatable-filter-option="core" data-datatable-filter-option-key="tag" aria-pressed="false">
                      <span class="dropdown-item-check__indicator" aria-hidden="true">
                        <i class="lucide lucide-check" data-icon="inline-start" aria-hidden="true"></i>
                      </span>
                      <span data-datatable-filter-option-label>Core</span>
                      <span class="ms-auto small text-body-secondary">3</span>
                    </button>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="datatable-toolbar-filters" role="group" aria-label="Table filters">
        <div class="dropdown datatable-facet" data-datatable-facet="status" hidden>
          <button class="btn btn-sm datatable-facet-trigger" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
            <i class="lucide lucide-circle-plus" data-icon="inline-start" aria-hidden="true"></i>
            <span>Status</span>
            <span class="datatable-facet-summary" data-datatable-facet-summary hidden></span>
          </button>
          <ul class="dropdown-menu datatable-facet-menu">
            <li class="datatable-facet-options-wrap">
              <ul class="datatable-facet-options no-scrollbar scroll-fade-y">
                <li>
                  <button class="dropdown-item datatable-facet-item" type="button" data-datatable-facet-option="open" aria-pressed="false">
                    <span class="datatable-facet-item__indicator" aria-hidden="true">
                      <i class="lucide lucide-check" data-icon="inline-start" aria-hidden="true"></i>
                    </span>
                    <i class="lucide lucide-circle" data-icon="inline-start" aria-hidden="true"></i>
                    <span data-datatable-facet-option-label>Open</span>
                    <span class="ms-auto small text-body-secondary">8</span>
                  </button>
                </li>
                <li>
                  <button class="dropdown-item datatable-facet-item" type="button" data-datatable-facet-option="in-progress" aria-pressed="false">
                    <span class="datatable-facet-item__indicator" aria-hidden="true">
                      <i class="lucide lucide-check" data-icon="inline-start" aria-hidden="true"></i>
                    </span>
                    <i class="lucide lucide-loader" data-icon="inline-start" aria-hidden="true"></i>
                    <span data-datatable-facet-option-label>In progress</span>
                    <span class="ms-auto small text-body-secondary">7</span>
                  </button>
                </li>
                <li>
                  <button class="dropdown-item datatable-facet-item" type="button" data-datatable-facet-option="blocked" aria-pressed="false">
                    <span class="datatable-facet-item__indicator" aria-hidden="true">
                      <i class="lucide lucide-check" data-icon="inline-start" aria-hidden="true"></i>
                    </span>
                    <i class="lucide lucide-circle-alert" data-icon="inline-start" aria-hidden="true"></i>
                    <span data-datatable-facet-option-label>Blocked</span>
                    <span class="ms-auto small text-body-secondary">4</span>
                  </button>
                </li>
                <li>
                  <button class="dropdown-item datatable-facet-item" type="button" data-datatable-facet-option="done" aria-pressed="false">
                    <span class="datatable-facet-item__indicator" aria-hidden="true">
                      <i class="lucide lucide-check" data-icon="inline-start" aria-hidden="true"></i>
                    </span>
                    <i class="lucide lucide-circle-check" data-icon="inline-start" aria-hidden="true"></i>
                    <span data-datatable-facet-option-label>Done</span>
                    <span class="ms-auto small text-body-secondary">5</span>
                  </button>
                </li>
              </ul>
            </li>
            <li>
              <hr class="dropdown-divider">
            </li>
            <li>
              <button class="dropdown-item" type="button" data-datatable-facet-clear>
                <span>Clear filters</span>
              </button>
            </li>
          </ul>
        </div>
        <div class="dropdown datatable-facet" data-datatable-facet="priority" hidden>
          <button class="btn btn-sm datatable-facet-trigger" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
            <i class="lucide lucide-circle-plus" data-icon="inline-start" aria-hidden="true"></i>
            <span>Priority</span>
            <span class="datatable-facet-summary" data-datatable-facet-summary hidden></span>
          </button>
          <ul class="dropdown-menu datatable-facet-menu">
            <li class="datatable-facet-options-wrap">
              <ul class="datatable-facet-options no-scrollbar scroll-fade-y">
                <li>
                  <button class="dropdown-item datatable-facet-item" type="button" data-datatable-facet-option="high" aria-pressed="false">
                    <span class="datatable-facet-item__indicator" aria-hidden="true">
                      <i class="lucide lucide-check" data-icon="inline-start" aria-hidden="true"></i>
                    </span>
                    <i class="lucide lucide-arrow-up" data-icon="inline-start" aria-hidden="true"></i>
                    <span data-datatable-facet-option-label>High</span>
                    <span class="ms-auto small text-body-secondary">8</span>
                  </button>
                </li>
                <li>
                  <button class="dropdown-item datatable-facet-item" type="button" data-datatable-facet-option="medium" aria-pressed="false">
                    <span class="datatable-facet-item__indicator" aria-hidden="true">
                      <i class="lucide lucide-check" data-icon="inline-start" aria-hidden="true"></i>
                    </span>
                    <i class="lucide lucide-minus" data-icon="inline-start" aria-hidden="true"></i>
                    <span data-datatable-facet-option-label>Medium</span>
                    <span class="ms-auto small text-body-secondary">10</span>
                  </button>
                </li>
                <li>
                  <button class="dropdown-item datatable-facet-item" type="button" data-datatable-facet-option="low" aria-pressed="false">
                    <span class="datatable-facet-item__indicator" aria-hidden="true">
                      <i class="lucide lucide-check" data-icon="inline-start" aria-hidden="true"></i>
                    </span>
                    <i class="lucide lucide-arrow-down" data-icon="inline-start" aria-hidden="true"></i>
                    <span data-datatable-facet-option-label>Low</span>
                    <span class="ms-auto small text-body-secondary">6</span>
                  </button>
                </li>
              </ul>
            </li>
            <li>
              <hr class="dropdown-divider">
            </li>
            <li>
              <button class="dropdown-item" type="button" data-datatable-facet-clear>
                <span>Clear filters</span>
              </button>
            </li>
          </ul>
        </div>
        <div class="dropdown datatable-facet" data-datatable-facet="tag" hidden>
          <button class="btn btn-sm datatable-facet-trigger" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
            <i class="lucide lucide-circle-plus" data-icon="inline-start" aria-hidden="true"></i>
            <span>Tag</span>
            <span class="datatable-facet-summary" data-datatable-facet-summary hidden></span>
          </button>
          <ul class="dropdown-menu datatable-facet-menu">
            <li class="datatable-facet-options-wrap">
              <ul class="datatable-facet-options no-scrollbar scroll-fade-y">
                <li>
                  <button class="dropdown-item datatable-facet-item" type="button" data-datatable-facet-option="docs" aria-pressed="false">
                    <span class="datatable-facet-item__indicator" aria-hidden="true">
                      <i class="lucide lucide-check" data-icon="inline-start" aria-hidden="true"></i>
                    </span>
                    <span data-datatable-facet-option-label>Docs</span>
                    <span class="ms-auto small text-body-secondary">5</span>
                  </button>
                </li>
                <li>
                  <button class="dropdown-item datatable-facet-item" type="button" data-datatable-facet-option="a11y" aria-pressed="false">
                    <span class="datatable-facet-item__indicator" aria-hidden="true">
                      <i class="lucide lucide-check" data-icon="inline-start" aria-hidden="true"></i>
                    </span>
                    <span data-datatable-facet-option-label>A11y</span>
                    <span class="ms-auto small text-body-secondary">6</span>
                  </button>
                </li>
                <li>
                  <button class="dropdown-item datatable-facet-item" type="button" data-datatable-facet-option="visual" aria-pressed="false">
                    <span class="datatable-facet-item__indicator" aria-hidden="true">
                      <i class="lucide lucide-check" data-icon="inline-start" aria-hidden="true"></i>
                    </span>
                    <span data-datatable-facet-option-label>Visual</span>
                    <span class="ms-auto small text-body-secondary">6</span>
                  </button>
                </li>
                <li>
                  <button class="dropdown-item datatable-facet-item" type="button" data-datatable-facet-option="site" aria-pressed="false">
                    <span class="datatable-facet-item__indicator" aria-hidden="true">
                      <i class="lucide lucide-check" data-icon="inline-start" aria-hidden="true"></i>
                    </span>
                    <span data-datatable-facet-option-label>Site</span>
                    <span class="ms-auto small text-body-secondary">4</span>
                  </button>
                </li>
                <li>
                  <button class="dropdown-item datatable-facet-item" type="button" data-datatable-facet-option="core" aria-pressed="false">
                    <span class="datatable-facet-item__indicator" aria-hidden="true">
                      <i class="lucide lucide-check" data-icon="inline-start" aria-hidden="true"></i>
                    </span>
                    <span data-datatable-facet-option-label>Core</span>
                    <span class="ms-auto small text-body-secondary">3</span>
                  </button>
                </li>
              </ul>
            </li>
            <li>
              <hr class="dropdown-divider">
            </li>
            <li>
              <button class="dropdown-item" type="button" data-datatable-facet-clear>
                <span>Clear filters</span>
              </button>
            </li>
          </ul>
        </div>
        <button type="button" class="btn btn-ghost btn-sm datatable-reset" hidden data-datatable-reset>
          Reset
          <i class="lucide lucide-x" data-icon="inline-end" aria-hidden="true"></i>
        </button>
      </div>
      <div class="datatable-toolbar-actions">
        <div class="datatable-layout-switch">
          <div class="btn-group btn-group-sm datatable-view-toggle" role="group" aria-label="Table or card view">
            <input type="radio" class="btn-check" name="examples-tasks-datatable-view" id="examples-tasks-datatable-view-table" value="table" autocomplete="off" checked>
            <label class="btn btn-outline-secondary datatable-view-option" for="examples-tasks-datatable-view-table">
              <i class="lucide lucide-table" data-icon="inline-start" aria-hidden="true"></i>
              <span class="visually-hidden">Table</span>
            </label>
            <input type="radio" class="btn-check" name="examples-tasks-datatable-view" id="examples-tasks-datatable-view-cards" value="cards" autocomplete="off">
            <label class="btn btn-outline-secondary datatable-view-option" for="examples-tasks-datatable-view-cards">
              <i class="lucide lucide-layout-grid" data-icon="inline-start" aria-hidden="true"></i>
              <span class="visually-hidden">Cards</span>
            </label>
          </div>
          <script>
            (function () { var root = document.currentScript.closest("[data-datatable-view]"); if (!root) return; var breakpoint = getComputedStyle(root).getPropertyValue("--moo-datatable-responsive-breakpoint").trim(); var auto = root.hasAttribute("data-datatable-responsive-breakpoint"); if (auto && !breakpoint) return; var wide = !auto || window.matchMedia("(min-width: " + breakpoint + ")").matches; var key = "moo-datatable-view:" + root.id + (auto ? (wide ? ":wide" : ":narrow") : ""); var view = auto ? (wide ? "table" : "cards") : root.dataset.datatableView; var stored; try { stored = window.localStorage.getItem(key); } catch (_) {} if (stored === "table" || stored === "cards") view = stored; root.dataset.datatableView = view; var inputs = root.querySelectorAll(".datatable-view-toggle input"); for (var i = 0; i < inputs.length; i++) { inputs[i].checked = inputs[i].value === view; } })();
          </script>
        </div>
        <div class="dropdown datatable-view">
          <button class="btn btn-outline-secondary btn-sm datatable-view-trigger" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false" aria-label="View columns">
            <i class="lucide lucide-sliders-horizontal" data-icon="inline-start" aria-hidden="true"></i>
            <span class="datatable-view-trigger-label">View</span>
          </button>
          <ul class="dropdown-menu dropdown-menu-end">
            <li>
              <h6 class="dropdown-header">Toggle columns</h6>
            </li>
            <li>
              <button class="dropdown-item dropdown-item-check active" type="button" data-bs-toggle="button" aria-pressed="true" data-datatable-column-toggle="status">
                <span class="dropdown-item-check__indicator" aria-hidden="true">
                  <i class="lucide lucide-check" data-icon="inline-start" aria-hidden="true"></i>
                </span>
                <span>Status</span>
              </button>
            </li>
            <li>
              <button class="dropdown-item dropdown-item-check active" type="button" data-bs-toggle="button" aria-pressed="true" data-datatable-column-toggle="priority">
                <span class="dropdown-item-check__indicator" aria-hidden="true">
                  <i class="lucide lucide-check" data-icon="inline-start" aria-hidden="true"></i>
                </span>
                <span>Priority</span>
              </button>
            </li>
            <li>
              <button class="dropdown-item dropdown-item-check active" type="button" data-bs-toggle="button" aria-pressed="true" data-datatable-column-toggle="assignee">
                <span class="dropdown-item-check__indicator" aria-hidden="true">
                  <i class="lucide lucide-check" data-icon="inline-start" aria-hidden="true"></i>
                </span>
                <span>Assignee</span>
              </button>
            </li>
            <li>
              <button class="dropdown-item dropdown-item-check active" type="button" data-bs-toggle="button" aria-pressed="true" data-datatable-column-toggle="due">
                <span class="dropdown-item-check__indicator" aria-hidden="true">
                  <i class="lucide lucide-check" data-icon="inline-start" aria-hidden="true"></i>
                </span>
                <span>Due</span>
              </button>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="datatable-frame">
      <div class="table-responsive scrollbar-thin scroll-fade-x">
        <table class="table align-middle datatable-table" id="examples-tasks-datatable-table">
          <thead>
            <tr>
              <th scope="col" class="datatable-col-select">
                <label class="form-check datatable-select-all datatable-select-all-table">
                  <input class="form-check-input" type="checkbox" id="examples-tasks-datatable-table-select-visible" aria-label="Select visible tasks" aria-controls="examples-tasks-datatable-table" data-datatable-select-all>
                </label>
              </th>
              <th scope="col" class="datatable-col" data-datatable-column="task" data-datatable-column-fixed="true" data-datatable-sort-state="none" aria-sort="none" style="width: max(22rem, 16rem);">
                <div class="dropdown datatable-sort">
                  <button class="btn btn-ghost btn-sm datatable-sort-trigger" type="button" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Sort by Task" data-datatable-sort-key="task">
                    <span>Task</span>
                    <span class="datatable-sort-icon datatable-sort-icon-none" aria-hidden="true">
                      <i class="lucide lucide-chevrons-up-down" data-icon="inline-end" aria-hidden="true"></i>
                    </span>
                    <span class="datatable-sort-icon datatable-sort-icon-asc" aria-hidden="true">
                      <i class="lucide lucide-arrow-up" data-icon="inline-end" aria-hidden="true"></i>
                    </span>
                    <span class="datatable-sort-icon datatable-sort-icon-desc" aria-hidden="true">
                      <i class="lucide lucide-arrow-down" data-icon="inline-end" aria-hidden="true"></i>
                    </span>
                  </button>
                  <ul class="dropdown-menu">
                    <li>
                      <button class="dropdown-item" type="button" data-datatable-sort-action="asc">
                        <i class="lucide lucide-arrow-up" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Asc</span>
                      </button>
                    </li>
                    <li>
                      <button class="dropdown-item" type="button" data-datatable-sort-action="desc">
                        <i class="lucide lucide-arrow-down" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Desc</span>
                      </button>
                    </li>
                  </ul>
                </div>
              </th>
              <th scope="col" class="datatable-col" data-datatable-column="status" data-datatable-sort-state="none" aria-sort="none" style="width: 9rem;">
                <div class="dropdown datatable-sort">
                  <button class="btn btn-ghost btn-sm datatable-sort-trigger" type="button" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Sort by Status" data-datatable-sort-key="status">
                    <span>Status</span>
                    <span class="datatable-sort-icon datatable-sort-icon-none" aria-hidden="true">
                      <i class="lucide lucide-chevrons-up-down" data-icon="inline-end" aria-hidden="true"></i>
                    </span>
                    <span class="datatable-sort-icon datatable-sort-icon-asc" aria-hidden="true">
                      <i class="lucide lucide-arrow-up" data-icon="inline-end" aria-hidden="true"></i>
                    </span>
                    <span class="datatable-sort-icon datatable-sort-icon-desc" aria-hidden="true">
                      <i class="lucide lucide-arrow-down" data-icon="inline-end" aria-hidden="true"></i>
                    </span>
                  </button>
                  <ul class="dropdown-menu">
                    <li>
                      <button class="dropdown-item" type="button" data-datatable-sort-action="asc">
                        <i class="lucide lucide-arrow-up" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Asc</span>
                      </button>
                    </li>
                    <li>
                      <button class="dropdown-item" type="button" data-datatable-sort-action="desc">
                        <i class="lucide lucide-arrow-down" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Desc</span>
                      </button>
                    </li>
                    <li>
                      <hr class="dropdown-divider">
                    </li>
                    <li>
                      <button class="dropdown-item" type="button" data-datatable-sort-action="hide">
                        <i class="lucide lucide-eye-off" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Hide</span>
                      </button>
                    </li>
                  </ul>
                </div>
              </th>
              <th scope="col" class="datatable-col" data-datatable-column="priority" data-datatable-sort-state="none" aria-sort="none" style="width: 9rem;">
                <div class="dropdown datatable-sort">
                  <button class="btn btn-ghost btn-sm datatable-sort-trigger" type="button" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Sort by Priority" data-datatable-sort-key="priority">
                    <span>Priority</span>
                    <span class="datatable-sort-icon datatable-sort-icon-none" aria-hidden="true">
                      <i class="lucide lucide-chevrons-up-down" data-icon="inline-end" aria-hidden="true"></i>
                    </span>
                    <span class="datatable-sort-icon datatable-sort-icon-asc" aria-hidden="true">
                      <i class="lucide lucide-arrow-up" data-icon="inline-end" aria-hidden="true"></i>
                    </span>
                    <span class="datatable-sort-icon datatable-sort-icon-desc" aria-hidden="true">
                      <i class="lucide lucide-arrow-down" data-icon="inline-end" aria-hidden="true"></i>
                    </span>
                  </button>
                  <ul class="dropdown-menu">
                    <li>
                      <button class="dropdown-item" type="button" data-datatable-sort-action="asc">
                        <i class="lucide lucide-arrow-up" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Asc</span>
                      </button>
                    </li>
                    <li>
                      <button class="dropdown-item" type="button" data-datatable-sort-action="desc">
                        <i class="lucide lucide-arrow-down" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Desc</span>
                      </button>
                    </li>
                    <li>
                      <hr class="dropdown-divider">
                    </li>
                    <li>
                      <button class="dropdown-item" type="button" data-datatable-sort-action="hide">
                        <i class="lucide lucide-eye-off" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Hide</span>
                      </button>
                    </li>
                  </ul>
                </div>
              </th>
              <th scope="col" class="datatable-col" data-datatable-column="assignee" data-datatable-sort-state="none" aria-sort="none" style="width: 11rem;">
                <div class="dropdown datatable-sort">
                  <button class="btn btn-ghost btn-sm datatable-sort-trigger" type="button" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Sort by Assignee" data-datatable-sort-key="assignee">
                    <span>Assignee</span>
                    <span class="datatable-sort-icon datatable-sort-icon-none" aria-hidden="true">
                      <i class="lucide lucide-chevrons-up-down" data-icon="inline-end" aria-hidden="true"></i>
                    </span>
                    <span class="datatable-sort-icon datatable-sort-icon-asc" aria-hidden="true">
                      <i class="lucide lucide-arrow-up" data-icon="inline-end" aria-hidden="true"></i>
                    </span>
                    <span class="datatable-sort-icon datatable-sort-icon-desc" aria-hidden="true">
                      <i class="lucide lucide-arrow-down" data-icon="inline-end" aria-hidden="true"></i>
                    </span>
                  </button>
                  <ul class="dropdown-menu">
                    <li>
                      <button class="dropdown-item" type="button" data-datatable-sort-action="asc">
                        <i class="lucide lucide-arrow-up" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Asc</span>
                      </button>
                    </li>
                    <li>
                      <button class="dropdown-item" type="button" data-datatable-sort-action="desc">
                        <i class="lucide lucide-arrow-down" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Desc</span>
                      </button>
                    </li>
                    <li>
                      <hr class="dropdown-divider">
                    </li>
                    <li>
                      <button class="dropdown-item" type="button" data-datatable-sort-action="hide">
                        <i class="lucide lucide-eye-off" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Hide</span>
                      </button>
                    </li>
                  </ul>
                </div>
              </th>
              <th scope="col" class="datatable-col" data-datatable-column="due" data-datatable-sort-state="none" aria-sort="none" style="width: 7rem;">
                <div class="dropdown datatable-sort">
                  <button class="btn btn-ghost btn-sm datatable-sort-trigger" type="button" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Sort by Due" data-datatable-sort-key="due">
                    <span>Due</span>
                    <span class="datatable-sort-icon datatable-sort-icon-none" aria-hidden="true">
                      <i class="lucide lucide-chevrons-up-down" data-icon="inline-end" aria-hidden="true"></i>
                    </span>
                    <span class="datatable-sort-icon datatable-sort-icon-asc" aria-hidden="true">
                      <i class="lucide lucide-arrow-up" data-icon="inline-end" aria-hidden="true"></i>
                    </span>
                    <span class="datatable-sort-icon datatable-sort-icon-desc" aria-hidden="true">
                      <i class="lucide lucide-arrow-down" data-icon="inline-end" aria-hidden="true"></i>
                    </span>
                  </button>
                  <ul class="dropdown-menu">
                    <li>
                      <button class="dropdown-item" type="button" data-datatable-sort-action="asc">
                        <i class="lucide lucide-arrow-up" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Asc</span>
                      </button>
                    </li>
                    <li>
                      <button class="dropdown-item" type="button" data-datatable-sort-action="desc">
                        <i class="lucide lucide-arrow-down" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Desc</span>
                      </button>
                    </li>
                    <li>
                      <hr class="dropdown-divider">
                    </li>
                    <li>
                      <button class="dropdown-item" type="button" data-datatable-sort-action="hide">
                        <i class="lucide lucide-eye-off" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Hide</span>
                      </button>
                    </li>
                  </ul>
                </div>
              </th>
              <th scope="col" class="datatable-col text-end" data-datatable-column="actions" data-datatable-column-fixed="true" style="width: 4rem;">
                <span class="visually-hidden">Row actions</span>
              </th>
            </tr>
          </thead>
          <tbody>
            <tr id="tsk-126" data-datatable-row data-datatable-search="TSK-126 Dark mode token contrast audit A11y Open High Alan Turing Aug 09" data-datatable-facet-status="open" data-datatable-facet-priority="high" data-datatable-facet-tag="a11y">
              <td class="datatable-col-select">
                <label class="form-check datatable-checkbox-target">
                  <input class="form-check-input" type="checkbox" id="examples-tasks-datatable-tsk-126-table-select" aria-label="Select TSK-126" data-datatable-select-row>
                </label>
              </td>
              <td class="datatable-col" data-datatable-column="task" data-datatable-sort-value="dark mode token contrast audit">
                <div class="datatable-item-cell">
                  <span class="text-truncate">Dark mode token contrast audit</span>
                  <span class="badge border text-body-secondary rounded-pill">A11y</span>
                </div>
              </td>
              <td class="datatable-col" data-datatable-column="status" data-datatable-sort-value="0">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-circle" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>Open</span>
                </span>
              </td>
              <td class="datatable-col" data-datatable-column="priority" data-datatable-sort-value="0">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-arrow-up" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>High</span>
                </span>
              </td>
              <td class="datatable-col" data-datatable-column="assignee" data-datatable-sort-value="alan turing">Alan Turing</td>
              <td class="datatable-col" data-datatable-column="due" data-datatable-sort-value="9">
                <span class="text-nowrap text-body-secondary">Aug 09</span>
              </td>
              <td class="datatable-col text-end" data-datatable-column="actions">
                <div class="table-row-actions dropdown">
                  <button
                        class="btn btn-ghost btn-icon-sm"
                        type="button"
                        data-bs-toggle="dropdown"
                        aria-expanded="false"
                        aria-label="Task actions for Dark mode token contrast audit"
                      >
                    <i class="lucide lucide-ellipsis-vertical" data-icon="inline-start" aria-hidden="true"></i>
                  </button>
                  <ul class="dropdown-menu dropdown-menu-end">
                    <li>
                      <button class="dropdown-item" type="button" data-moo-task-edit>
                        <i class="lucide lucide-pencil" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Edit</span>
                      </button>
                    </li>
                    <li>
                      <button class="dropdown-item" type="button" data-moo-task-copy>
                        <i class="lucide lucide-copy" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Copy link</span>
                      </button>
                    </li>
                    <li>
                      <hr class="dropdown-divider">
                    </li>
                    <li>
                      <button class="dropdown-item" type="button" data-variant="destructive" data-moo-task-delete>
                        <i class="lucide lucide-trash-2" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Delete task</span>
                      </button>
                    </li>
                  </ul>
                </div>
              </td>
            </tr>
            <tr id="tsk-125" data-datatable-row data-datatable-search="TSK-125 Installation guide screenshot refresh Docs In progress Medium Betty Holberton Aug 16" data-datatable-facet-status="in-progress" data-datatable-facet-priority="medium" data-datatable-facet-tag="docs">
              <td class="datatable-col-select">
                <label class="form-check datatable-checkbox-target">
                  <input class="form-check-input" type="checkbox" id="examples-tasks-datatable-tsk-125-table-select" aria-label="Select TSK-125" data-datatable-select-row>
                </label>
              </td>
              <td class="datatable-col" data-datatable-column="task" data-datatable-sort-value="installation guide screenshot refresh">
                <div class="datatable-item-cell">
                  <span class="text-truncate">Installation guide screenshot refresh</span>
                  <span class="badge border text-body-secondary rounded-pill">Docs</span>
                </div>
              </td>
              <td class="datatable-col" data-datatable-column="status" data-datatable-sort-value="1">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-loader" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>In progress</span>
                </span>
              </td>
              <td class="datatable-col" data-datatable-column="priority" data-datatable-sort-value="1">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-minus" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>Medium</span>
                </span>
              </td>
              <td class="datatable-col" data-datatable-column="assignee" data-datatable-sort-value="betty holberton">Betty Holberton</td>
              <td class="datatable-col" data-datatable-column="due" data-datatable-sort-value="16">
                <span class="text-nowrap text-body-secondary">Aug 16</span>
              </td>
              <td class="datatable-col text-end" data-datatable-column="actions">
                <div class="table-row-actions dropdown">
                  <button
                        class="btn btn-ghost btn-icon-sm"
                        type="button"
                        data-bs-toggle="dropdown"
                        aria-expanded="false"
                        aria-label="Task actions for Installation guide screenshot refresh"
                      >
                    <i class="lucide lucide-ellipsis-vertical" data-icon="inline-start" aria-hidden="true"></i>
                  </button>
                  <ul class="dropdown-menu dropdown-menu-end">
                    <li>
                      <button class="dropdown-item" type="button" data-moo-task-edit>
                        <i class="lucide lucide-pencil" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Edit</span>
                      </button>
                    </li>
                    <li>
                      <button class="dropdown-item" type="button" data-moo-task-copy>
                        <i class="lucide lucide-copy" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Copy link</span>
                      </button>
                    </li>
                    <li>
                      <hr class="dropdown-divider">
                    </li>
                    <li>
                      <button class="dropdown-item" type="button" data-variant="destructive" data-moo-task-delete>
                        <i class="lucide lucide-trash-2" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Delete task</span>
                      </button>
                    </li>
                  </ul>
                </div>
              </td>
            </tr>
            <tr id="tsk-123" data-datatable-row data-datatable-search="TSK-123 Card view bulk bar overlap Visual Blocked High Jean Sammet Aug 10" data-datatable-facet-status="blocked" data-datatable-facet-priority="high" data-datatable-facet-tag="visual">
              <td class="datatable-col-select">
                <label class="form-check datatable-checkbox-target">
                  <input class="form-check-input" type="checkbox" id="examples-tasks-datatable-tsk-123-table-select" aria-label="Select TSK-123" data-datatable-select-row>
                </label>
              </td>
              <td class="datatable-col" data-datatable-column="task" data-datatable-sort-value="card view bulk bar overlap">
                <div class="datatable-item-cell">
                  <span class="text-truncate">Card view bulk bar overlap</span>
                  <span class="badge border text-body-secondary rounded-pill">Visual</span>
                </div>
              </td>
              <td class="datatable-col" data-datatable-column="status" data-datatable-sort-value="2">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-circle-alert" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>Blocked</span>
                </span>
              </td>
              <td class="datatable-col" data-datatable-column="priority" data-datatable-sort-value="0">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-arrow-up" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>High</span>
                </span>
              </td>
              <td class="datatable-col" data-datatable-column="assignee" data-datatable-sort-value="jean sammet">Jean Sammet</td>
              <td class="datatable-col" data-datatable-column="due" data-datatable-sort-value="10">
                <span class="text-nowrap text-body-secondary">Aug 10</span>
              </td>
              <td class="datatable-col text-end" data-datatable-column="actions">
                <div class="table-row-actions dropdown">
                  <button
                        class="btn btn-ghost btn-icon-sm"
                        type="button"
                        data-bs-toggle="dropdown"
                        aria-expanded="false"
                        aria-label="Task actions for Card view bulk bar overlap"
                      >
                    <i class="lucide lucide-ellipsis-vertical" data-icon="inline-start" aria-hidden="true"></i>
                  </button>
                  <ul class="dropdown-menu dropdown-menu-end">
                    <li>
                      <button class="dropdown-item" type="button" data-moo-task-edit>
                        <i class="lucide lucide-pencil" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Edit</span>
                      </button>
                    </li>
                    <li>
                      <button class="dropdown-item" type="button" data-moo-task-copy>
                        <i class="lucide lucide-copy" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Copy link</span>
                      </button>
                    </li>
                    <li>
                      <hr class="dropdown-divider">
                    </li>
                    <li>
                      <button class="dropdown-item" type="button" data-variant="destructive" data-moo-task-delete>
                        <i class="lucide lucide-trash-2" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Delete task</span>
                      </button>
                    </li>
                  </ul>
                </div>
              </td>
            </tr>
            <tr id="tsk-122" data-datatable-row data-datatable-search="TSK-122 Examples index meta descriptions Docs Open Low Frances Allen Aug 25" data-datatable-facet-status="open" data-datatable-facet-priority="low" data-datatable-facet-tag="docs">
              <td class="datatable-col-select">
                <label class="form-check datatable-checkbox-target">
                  <input class="form-check-input" type="checkbox" id="examples-tasks-datatable-tsk-122-table-select" aria-label="Select TSK-122" data-datatable-select-row>
                </label>
              </td>
              <td class="datatable-col" data-datatable-column="task" data-datatable-sort-value="examples index meta descriptions">
                <div class="datatable-item-cell">
                  <span class="text-truncate">Examples index meta descriptions</span>
                  <span class="badge border text-body-secondary rounded-pill">Docs</span>
                </div>
              </td>
              <td class="datatable-col" data-datatable-column="status" data-datatable-sort-value="0">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-circle" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>Open</span>
                </span>
              </td>
              <td class="datatable-col" data-datatable-column="priority" data-datatable-sort-value="2">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-arrow-down" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>Low</span>
                </span>
              </td>
              <td class="datatable-col" data-datatable-column="assignee" data-datatable-sort-value="frances allen">Frances Allen</td>
              <td class="datatable-col" data-datatable-column="due" data-datatable-sort-value="25">
                <span class="text-nowrap text-body-secondary">Aug 25</span>
              </td>
              <td class="datatable-col text-end" data-datatable-column="actions">
                <div class="table-row-actions dropdown">
                  <button
                        class="btn btn-ghost btn-icon-sm"
                        type="button"
                        data-bs-toggle="dropdown"
                        aria-expanded="false"
                        aria-label="Task actions for Examples index meta descriptions"
                      >
                    <i class="lucide lucide-ellipsis-vertical" data-icon="inline-start" aria-hidden="true"></i>
                  </button>
                  <ul class="dropdown-menu dropdown-menu-end">
                    <li>
                      <button class="dropdown-item" type="button" data-moo-task-edit>
                        <i class="lucide lucide-pencil" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Edit</span>
                      </button>
                    </li>
                    <li>
                      <button class="dropdown-item" type="button" data-moo-task-copy>
                        <i class="lucide lucide-copy" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Copy link</span>
                      </button>
                    </li>
                    <li>
                      <hr class="dropdown-divider">
                    </li>
                    <li>
                      <button class="dropdown-item" type="button" data-variant="destructive" data-moo-task-delete>
                        <i class="lucide lucide-trash-2" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Delete task</span>
                      </button>
                    </li>
                  </ul>
                </div>
              </td>
            </tr>
            <tr id="tsk-121" data-datatable-row data-datatable-search="TSK-121 Search funnel icon alignment Visual In progress Medium Karen Spärck Jones Aug 17" data-datatable-facet-status="in-progress" data-datatable-facet-priority="medium" data-datatable-facet-tag="visual">
              <td class="datatable-col-select">
                <label class="form-check datatable-checkbox-target">
                  <input class="form-check-input" type="checkbox" id="examples-tasks-datatable-tsk-121-table-select" aria-label="Select TSK-121" data-datatable-select-row>
                </label>
              </td>
              <td class="datatable-col" data-datatable-column="task" data-datatable-sort-value="search funnel icon alignment">
                <div class="datatable-item-cell">
                  <span class="text-truncate">Search funnel icon alignment</span>
                  <span class="badge border text-body-secondary rounded-pill">Visual</span>
                </div>
              </td>
              <td class="datatable-col" data-datatable-column="status" data-datatable-sort-value="1">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-loader" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>In progress</span>
                </span>
              </td>
              <td class="datatable-col" data-datatable-column="priority" data-datatable-sort-value="1">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-minus" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>Medium</span>
                </span>
              </td>
              <td class="datatable-col" data-datatable-column="assignee" data-datatable-sort-value="karen spärck jones">Karen Spärck Jones</td>
              <td class="datatable-col" data-datatable-column="due" data-datatable-sort-value="17">
                <span class="text-nowrap text-body-secondary">Aug 17</span>
              </td>
              <td class="datatable-col text-end" data-datatable-column="actions">
                <div class="table-row-actions dropdown">
                  <button
                        class="btn btn-ghost btn-icon-sm"
                        type="button"
                        data-bs-toggle="dropdown"
                        aria-expanded="false"
                        aria-label="Task actions for Search funnel icon alignment"
                      >
                    <i class="lucide lucide-ellipsis-vertical" data-icon="inline-start" aria-hidden="true"></i>
                  </button>
                  <ul class="dropdown-menu dropdown-menu-end">
                    <li>
                      <button class="dropdown-item" type="button" data-moo-task-edit>
                        <i class="lucide lucide-pencil" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Edit</span>
                      </button>
                    </li>
                    <li>
                      <button class="dropdown-item" type="button" data-moo-task-copy>
                        <i class="lucide lucide-copy" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Copy link</span>
                      </button>
                    </li>
                    <li>
                      <hr class="dropdown-divider">
                    </li>
                    <li>
                      <button class="dropdown-item" type="button" data-variant="destructive" data-moo-task-delete>
                        <i class="lucide lucide-trash-2" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Delete task</span>
                      </button>
                    </li>
                  </ul>
                </div>
              </td>
            </tr>
            <tr id="tsk-120" data-datatable-row data-datatable-search="TSK-120 Offcanvas scroll lock on iOS Core Blocked High Barbara Liskov Aug 09" data-datatable-facet-status="blocked" data-datatable-facet-priority="high" data-datatable-facet-tag="core">
              <td class="datatable-col-select">
                <label class="form-check datatable-checkbox-target">
                  <input class="form-check-input" type="checkbox" id="examples-tasks-datatable-tsk-120-table-select" aria-label="Select TSK-120" data-datatable-select-row>
                </label>
              </td>
              <td class="datatable-col" data-datatable-column="task" data-datatable-sort-value="offcanvas scroll lock on ios">
                <div class="datatable-item-cell">
                  <span class="text-truncate">Offcanvas scroll lock on iOS</span>
                  <span class="badge border text-body-secondary rounded-pill">Core</span>
                </div>
              </td>
              <td class="datatable-col" data-datatable-column="status" data-datatable-sort-value="2">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-circle-alert" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>Blocked</span>
                </span>
              </td>
              <td class="datatable-col" data-datatable-column="priority" data-datatable-sort-value="0">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-arrow-up" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>High</span>
                </span>
              </td>
              <td class="datatable-col" data-datatable-column="assignee" data-datatable-sort-value="barbara liskov">Barbara Liskov</td>
              <td class="datatable-col" data-datatable-column="due" data-datatable-sort-value="9">
                <span class="text-nowrap text-body-secondary">Aug 09</span>
              </td>
              <td class="datatable-col text-end" data-datatable-column="actions">
                <div class="table-row-actions dropdown">
                  <button
                        class="btn btn-ghost btn-icon-sm"
                        type="button"
                        data-bs-toggle="dropdown"
                        aria-expanded="false"
                        aria-label="Task actions for Offcanvas scroll lock on iOS"
                      >
                    <i class="lucide lucide-ellipsis-vertical" data-icon="inline-start" aria-hidden="true"></i>
                  </button>
                  <ul class="dropdown-menu dropdown-menu-end">
                    <li>
                      <button class="dropdown-item" type="button" data-moo-task-edit>
                        <i class="lucide lucide-pencil" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Edit</span>
                      </button>
                    </li>
                    <li>
                      <button class="dropdown-item" type="button" data-moo-task-copy>
                        <i class="lucide lucide-copy" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Copy link</span>
                      </button>
                    </li>
                    <li>
                      <hr class="dropdown-divider">
                    </li>
                    <li>
                      <button class="dropdown-item" type="button" data-variant="destructive" data-moo-task-delete>
                        <i class="lucide lucide-trash-2" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Delete task</span>
                      </button>
                    </li>
                  </ul>
                </div>
              </td>
            </tr>
            <tr id="tsk-119" data-datatable-row data-datatable-search="TSK-119 RTL sidebar flyout placement A11y Done Medium Adele Goldberg Aug 04" data-datatable-facet-status="done" data-datatable-facet-priority="medium" data-datatable-facet-tag="a11y">
              <td class="datatable-col-select">
                <label class="form-check datatable-checkbox-target">
                  <input class="form-check-input" type="checkbox" id="examples-tasks-datatable-tsk-119-table-select" aria-label="Select TSK-119" data-datatable-select-row>
                </label>
              </td>
              <td class="datatable-col" data-datatable-column="task" data-datatable-sort-value="rtl sidebar flyout placement">
                <div class="datatable-item-cell">
                  <span class="text-truncate">RTL sidebar flyout placement</span>
                  <span class="badge border text-body-secondary rounded-pill">A11y</span>
                </div>
              </td>
              <td class="datatable-col" data-datatable-column="status" data-datatable-sort-value="3">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-circle-check" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>Done</span>
                </span>
              </td>
              <td class="datatable-col" data-datatable-column="priority" data-datatable-sort-value="1">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-minus" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>Medium</span>
                </span>
              </td>
              <td class="datatable-col" data-datatable-column="assignee" data-datatable-sort-value="adele goldberg">Adele Goldberg</td>
              <td class="datatable-col" data-datatable-column="due" data-datatable-sort-value="4">
                <span class="text-nowrap text-body-secondary">Aug 04</span>
              </td>
              <td class="datatable-col text-end" data-datatable-column="actions">
                <div class="table-row-actions dropdown">
                  <button
                        class="btn btn-ghost btn-icon-sm"
                        type="button"
                        data-bs-toggle="dropdown"
                        aria-expanded="false"
                        aria-label="Task actions for RTL sidebar flyout placement"
                      >
                    <i class="lucide lucide-ellipsis-vertical" data-icon="inline-start" aria-hidden="true"></i>
                  </button>
                  <ul class="dropdown-menu dropdown-menu-end">
                    <li>
                      <button class="dropdown-item" type="button" data-moo-task-edit>
                        <i class="lucide lucide-pencil" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Edit</span>
                      </button>
                    </li>
                    <li>
                      <button class="dropdown-item" type="button" data-moo-task-copy>
                        <i class="lucide lucide-copy" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Copy link</span>
                      </button>
                    </li>
                    <li>
                      <hr class="dropdown-divider">
                    </li>
                    <li>
                      <button class="dropdown-item" type="button" data-variant="destructive" data-moo-task-delete>
                        <i class="lucide lucide-trash-2" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Delete task</span>
                      </button>
                    </li>
                  </ul>
                </div>
              </td>
            </tr>
            <tr id="tsk-118" data-datatable-row data-datatable-search="TSK-118 Draft Examples section copy Docs In progress High Ada Lovelace Aug 12" data-datatable-facet-status="in-progress" data-datatable-facet-priority="high" data-datatable-facet-tag="docs">
              <td class="datatable-col-select">
                <label class="form-check datatable-checkbox-target">
                  <input class="form-check-input" type="checkbox" id="examples-tasks-datatable-tsk-118-table-select" aria-label="Select TSK-118" data-datatable-select-row>
                </label>
              </td>
              <td class="datatable-col" data-datatable-column="task" data-datatable-sort-value="draft examples section copy">
                <div class="datatable-item-cell">
                  <span class="text-truncate">Draft Examples section copy</span>
                  <span class="badge border text-body-secondary rounded-pill">Docs</span>
                </div>
              </td>
              <td class="datatable-col" data-datatable-column="status" data-datatable-sort-value="1">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-loader" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>In progress</span>
                </span>
              </td>
              <td class="datatable-col" data-datatable-column="priority" data-datatable-sort-value="0">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-arrow-up" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>High</span>
                </span>
              </td>
              <td class="datatable-col" data-datatable-column="assignee" data-datatable-sort-value="ada lovelace">Ada Lovelace</td>
              <td class="datatable-col" data-datatable-column="due" data-datatable-sort-value="12">
                <span class="text-nowrap text-body-secondary">Aug 12</span>
              </td>
              <td class="datatable-col text-end" data-datatable-column="actions">
                <div class="table-row-actions dropdown">
                  <button
                        class="btn btn-ghost btn-icon-sm"
                        type="button"
                        data-bs-toggle="dropdown"
                        aria-expanded="false"
                        aria-label="Task actions for Draft Examples section copy"
                      >
                    <i class="lucide lucide-ellipsis-vertical" data-icon="inline-start" aria-hidden="true"></i>
                  </button>
                  <ul class="dropdown-menu dropdown-menu-end">
                    <li>
                      <button class="dropdown-item" type="button" data-moo-task-edit>
                        <i class="lucide lucide-pencil" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Edit</span>
                      </button>
                    </li>
                    <li>
                      <button class="dropdown-item" type="button" data-moo-task-copy>
                        <i class="lucide lucide-copy" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Copy link</span>
                      </button>
                    </li>
                    <li>
                      <hr class="dropdown-divider">
                    </li>
                    <li>
                      <button class="dropdown-item" type="button" data-variant="destructive" data-moo-task-delete>
                        <i class="lucide lucide-trash-2" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Delete task</span>
                      </button>
                    </li>
                  </ul>
                </div>
              </td>
            </tr>
            <tr id="tsk-117" data-datatable-row data-datatable-search="TSK-117 Sidebar icon-rail contrast pass A11y Open High Grace Hopper Aug 08" data-datatable-facet-status="open" data-datatable-facet-priority="high" data-datatable-facet-tag="a11y">
              <td class="datatable-col-select">
                <label class="form-check datatable-checkbox-target">
                  <input class="form-check-input" type="checkbox" id="examples-tasks-datatable-tsk-117-table-select" aria-label="Select TSK-117" data-datatable-select-row>
                </label>
              </td>
              <td class="datatable-col" data-datatable-column="task" data-datatable-sort-value="sidebar icon-rail contrast pass">
                <div class="datatable-item-cell">
                  <span class="text-truncate">Sidebar icon-rail contrast pass</span>
                  <span class="badge border text-body-secondary rounded-pill">A11y</span>
                </div>
              </td>
              <td class="datatable-col" data-datatable-column="status" data-datatable-sort-value="0">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-circle" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>Open</span>
                </span>
              </td>
              <td class="datatable-col" data-datatable-column="priority" data-datatable-sort-value="0">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-arrow-up" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>High</span>
                </span>
              </td>
              <td class="datatable-col" data-datatable-column="assignee" data-datatable-sort-value="grace hopper">Grace Hopper</td>
              <td class="datatable-col" data-datatable-column="due" data-datatable-sort-value="8">
                <span class="text-nowrap text-body-secondary">Aug 08</span>
              </td>
              <td class="datatable-col text-end" data-datatable-column="actions">
                <div class="table-row-actions dropdown">
                  <button
                        class="btn btn-ghost btn-icon-sm"
                        type="button"
                        data-bs-toggle="dropdown"
                        aria-expanded="false"
                        aria-label="Task actions for Sidebar icon-rail contrast pass"
                      >
                    <i class="lucide lucide-ellipsis-vertical" data-icon="inline-start" aria-hidden="true"></i>
                  </button>
                  <ul class="dropdown-menu dropdown-menu-end">
                    <li>
                      <button class="dropdown-item" type="button" data-moo-task-edit>
                        <i class="lucide lucide-pencil" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Edit</span>
                      </button>
                    </li>
                    <li>
                      <button class="dropdown-item" type="button" data-moo-task-copy>
                        <i class="lucide lucide-copy" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Copy link</span>
                      </button>
                    </li>
                    <li>
                      <hr class="dropdown-divider">
                    </li>
                    <li>
                      <button class="dropdown-item" type="button" data-variant="destructive" data-moo-task-delete>
                        <i class="lucide lucide-trash-2" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Delete task</span>
                      </button>
                    </li>
                  </ul>
                </div>
              </td>
            </tr>
            <tr id="tsk-116" data-datatable-row data-datatable-search="TSK-116 Utilities page anchor offsets Site Open Medium Dana Ulery Aug 20" data-datatable-facet-status="open" data-datatable-facet-priority="medium" data-datatable-facet-tag="site">
              <td class="datatable-col-select">
                <label class="form-check datatable-checkbox-target">
                  <input class="form-check-input" type="checkbox" id="examples-tasks-datatable-tsk-116-table-select" aria-label="Select TSK-116" data-datatable-select-row>
                </label>
              </td>
              <td class="datatable-col" data-datatable-column="task" data-datatable-sort-value="utilities page anchor offsets">
                <div class="datatable-item-cell">
                  <span class="text-truncate">Utilities page anchor offsets</span>
                  <span class="badge border text-body-secondary rounded-pill">Site</span>
                </div>
              </td>
              <td class="datatable-col" data-datatable-column="status" data-datatable-sort-value="0">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-circle" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>Open</span>
                </span>
              </td>
              <td class="datatable-col" data-datatable-column="priority" data-datatable-sort-value="1">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-minus" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>Medium</span>
                </span>
              </td>
              <td class="datatable-col" data-datatable-column="assignee" data-datatable-sort-value="dana ulery">Dana Ulery</td>
              <td class="datatable-col" data-datatable-column="due" data-datatable-sort-value="20">
                <span class="text-nowrap text-body-secondary">Aug 20</span>
              </td>
              <td class="datatable-col text-end" data-datatable-column="actions">
                <div class="table-row-actions dropdown">
                  <button
                        class="btn btn-ghost btn-icon-sm"
                        type="button"
                        data-bs-toggle="dropdown"
                        aria-expanded="false"
                        aria-label="Task actions for Utilities page anchor offsets"
                      >
                    <i class="lucide lucide-ellipsis-vertical" data-icon="inline-start" aria-hidden="true"></i>
                  </button>
                  <ul class="dropdown-menu dropdown-menu-end">
                    <li>
                      <button class="dropdown-item" type="button" data-moo-task-edit>
                        <i class="lucide lucide-pencil" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Edit</span>
                      </button>
                    </li>
                    <li>
                      <button class="dropdown-item" type="button" data-moo-task-copy>
                        <i class="lucide lucide-copy" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Copy link</span>
                      </button>
                    </li>
                    <li>
                      <hr class="dropdown-divider">
                    </li>
                    <li>
                      <button class="dropdown-item" type="button" data-variant="destructive" data-moo-task-delete>
                        <i class="lucide lucide-trash-2" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Delete task</span>
                      </button>
                    </li>
                  </ul>
                </div>
              </td>
            </tr>
            <tr id="tsk-115" data-datatable-row data-datatable-search="TSK-115 Data table card view spacing Visual In progress Medium Katherine Johnson Aug 14" data-datatable-facet-status="in-progress" data-datatable-facet-priority="medium" data-datatable-facet-tag="visual" hidden>
              <td class="datatable-col-select">
                <label class="form-check datatable-checkbox-target">
                  <input class="form-check-input" type="checkbox" id="examples-tasks-datatable-tsk-115-table-select" aria-label="Select TSK-115" data-datatable-select-row>
                </label>
              </td>
              <td class="datatable-col" data-datatable-column="task" data-datatable-sort-value="data table card view spacing">
                <div class="datatable-item-cell">
                  <span class="text-truncate">Data table card view spacing</span>
                  <span class="badge border text-body-secondary rounded-pill">Visual</span>
                </div>
              </td>
              <td class="datatable-col" data-datatable-column="status" data-datatable-sort-value="1">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-loader" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>In progress</span>
                </span>
              </td>
              <td class="datatable-col" data-datatable-column="priority" data-datatable-sort-value="1">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-minus" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>Medium</span>
                </span>
              </td>
              <td class="datatable-col" data-datatable-column="assignee" data-datatable-sort-value="katherine johnson">Katherine Johnson</td>
              <td class="datatable-col" data-datatable-column="due" data-datatable-sort-value="14">
                <span class="text-nowrap text-body-secondary">Aug 14</span>
              </td>
              <td class="datatable-col text-end" data-datatable-column="actions">
                <div class="table-row-actions dropdown">
                  <button
                        class="btn btn-ghost btn-icon-sm"
                        type="button"
                        data-bs-toggle="dropdown"
                        aria-expanded="false"
                        aria-label="Task actions for Data table card view spacing"
                      >
                    <i class="lucide lucide-ellipsis-vertical" data-icon="inline-start" aria-hidden="true"></i>
                  </button>
                  <ul class="dropdown-menu dropdown-menu-end">
                    <li>
                      <button class="dropdown-item" type="button" data-moo-task-edit>
                        <i class="lucide lucide-pencil" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Edit</span>
                      </button>
                    </li>
                    <li>
                      <button class="dropdown-item" type="button" data-moo-task-copy>
                        <i class="lucide lucide-copy" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Copy link</span>
                      </button>
                    </li>
                    <li>
                      <hr class="dropdown-divider">
                    </li>
                    <li>
                      <button class="dropdown-item" type="button" data-variant="destructive" data-moo-task-delete>
                        <i class="lucide lucide-trash-2" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Delete task</span>
                      </button>
                    </li>
                  </ul>
                </div>
              </td>
            </tr>
            <tr id="tsk-114" data-datatable-row data-datatable-search="TSK-114 Command palette RTL traversal A11y Blocked High Radia Perlman Aug 11" data-datatable-facet-status="blocked" data-datatable-facet-priority="high" data-datatable-facet-tag="a11y" hidden>
              <td class="datatable-col-select">
                <label class="form-check datatable-checkbox-target">
                  <input class="form-check-input" type="checkbox" id="examples-tasks-datatable-tsk-114-table-select" aria-label="Select TSK-114" data-datatable-select-row>
                </label>
              </td>
              <td class="datatable-col" data-datatable-column="task" data-datatable-sort-value="command palette rtl traversal">
                <div class="datatable-item-cell">
                  <span class="text-truncate">Command palette RTL traversal</span>
                  <span class="badge border text-body-secondary rounded-pill">A11y</span>
                </div>
              </td>
              <td class="datatable-col" data-datatable-column="status" data-datatable-sort-value="2">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-circle-alert" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>Blocked</span>
                </span>
              </td>
              <td class="datatable-col" data-datatable-column="priority" data-datatable-sort-value="0">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-arrow-up" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>High</span>
                </span>
              </td>
              <td class="datatable-col" data-datatable-column="assignee" data-datatable-sort-value="radia perlman">Radia Perlman</td>
              <td class="datatable-col" data-datatable-column="due" data-datatable-sort-value="11">
                <span class="text-nowrap text-body-secondary">Aug 11</span>
              </td>
              <td class="datatable-col text-end" data-datatable-column="actions">
                <div class="table-row-actions dropdown">
                  <button
                        class="btn btn-ghost btn-icon-sm"
                        type="button"
                        data-bs-toggle="dropdown"
                        aria-expanded="false"
                        aria-label="Task actions for Command palette RTL traversal"
                      >
                    <i class="lucide lucide-ellipsis-vertical" data-icon="inline-start" aria-hidden="true"></i>
                  </button>
                  <ul class="dropdown-menu dropdown-menu-end">
                    <li>
                      <button class="dropdown-item" type="button" data-moo-task-edit>
                        <i class="lucide lucide-pencil" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Edit</span>
                      </button>
                    </li>
                    <li>
                      <button class="dropdown-item" type="button" data-moo-task-copy>
                        <i class="lucide lucide-copy" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Copy link</span>
                      </button>
                    </li>
                    <li>
                      <hr class="dropdown-divider">
                    </li>
                    <li>
                      <button class="dropdown-item" type="button" data-variant="destructive" data-moo-task-delete>
                        <i class="lucide lucide-trash-2" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Delete task</span>
                      </button>
                    </li>
                  </ul>
                </div>
              </td>
            </tr>
            <tr id="tsk-113" data-datatable-row data-datatable-search="TSK-113 Icon sprite tree-shaking check Core In progress Low Susan Kare Aug 21" data-datatable-facet-status="in-progress" data-datatable-facet-priority="low" data-datatable-facet-tag="core" hidden>
              <td class="datatable-col-select">
                <label class="form-check datatable-checkbox-target">
                  <input class="form-check-input" type="checkbox" id="examples-tasks-datatable-tsk-113-table-select" aria-label="Select TSK-113" data-datatable-select-row>
                </label>
              </td>
              <td class="datatable-col" data-datatable-column="task" data-datatable-sort-value="icon sprite tree-shaking check">
                <div class="datatable-item-cell">
                  <span class="text-truncate">Icon sprite tree-shaking check</span>
                  <span class="badge border text-body-secondary rounded-pill">Core</span>
                </div>
              </td>
              <td class="datatable-col" data-datatable-column="status" data-datatable-sort-value="1">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-loader" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>In progress</span>
                </span>
              </td>
              <td class="datatable-col" data-datatable-column="priority" data-datatable-sort-value="2">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-arrow-down" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>Low</span>
                </span>
              </td>
              <td class="datatable-col" data-datatable-column="assignee" data-datatable-sort-value="susan kare">Susan Kare</td>
              <td class="datatable-col" data-datatable-column="due" data-datatable-sort-value="21">
                <span class="text-nowrap text-body-secondary">Aug 21</span>
              </td>
              <td class="datatable-col text-end" data-datatable-column="actions">
                <div class="table-row-actions dropdown">
                  <button
                        class="btn btn-ghost btn-icon-sm"
                        type="button"
                        data-bs-toggle="dropdown"
                        aria-expanded="false"
                        aria-label="Task actions for Icon sprite tree-shaking check"
                      >
                    <i class="lucide lucide-ellipsis-vertical" data-icon="inline-start" aria-hidden="true"></i>
                  </button>
                  <ul class="dropdown-menu dropdown-menu-end">
                    <li>
                      <button class="dropdown-item" type="button" data-moo-task-edit>
                        <i class="lucide lucide-pencil" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Edit</span>
                      </button>
                    </li>
                    <li>
                      <button class="dropdown-item" type="button" data-moo-task-copy>
                        <i class="lucide lucide-copy" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Copy link</span>
                      </button>
                    </li>
                    <li>
                      <hr class="dropdown-divider">
                    </li>
                    <li>
                      <button class="dropdown-item" type="button" data-variant="destructive" data-moo-task-delete>
                        <i class="lucide lucide-trash-2" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Delete task</span>
                      </button>
                    </li>
                  </ul>
                </div>
              </td>
            </tr>
            <tr id="tsk-112" data-datatable-row data-datatable-search="TSK-112 Theme toggle persistence audit Site Done Medium Margaret Hamilton Aug 05" data-datatable-facet-status="done" data-datatable-facet-priority="medium" data-datatable-facet-tag="site" hidden>
              <td class="datatable-col-select">
                <label class="form-check datatable-checkbox-target">
                  <input class="form-check-input" type="checkbox" id="examples-tasks-datatable-tsk-112-table-select" aria-label="Select TSK-112" data-datatable-select-row>
                </label>
              </td>
              <td class="datatable-col" data-datatable-column="task" data-datatable-sort-value="theme toggle persistence audit">
                <div class="datatable-item-cell">
                  <span class="text-truncate">Theme toggle persistence audit</span>
                  <span class="badge border text-body-secondary rounded-pill">Site</span>
                </div>
              </td>
              <td class="datatable-col" data-datatable-column="status" data-datatable-sort-value="3">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-circle-check" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>Done</span>
                </span>
              </td>
              <td class="datatable-col" data-datatable-column="priority" data-datatable-sort-value="1">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-minus" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>Medium</span>
                </span>
              </td>
              <td class="datatable-col" data-datatable-column="assignee" data-datatable-sort-value="margaret hamilton">Margaret Hamilton</td>
              <td class="datatable-col" data-datatable-column="due" data-datatable-sort-value="5">
                <span class="text-nowrap text-body-secondary">Aug 05</span>
              </td>
              <td class="datatable-col text-end" data-datatable-column="actions">
                <div class="table-row-actions dropdown">
                  <button
                        class="btn btn-ghost btn-icon-sm"
                        type="button"
                        data-bs-toggle="dropdown"
                        aria-expanded="false"
                        aria-label="Task actions for Theme toggle persistence audit"
                      >
                    <i class="lucide lucide-ellipsis-vertical" data-icon="inline-start" aria-hidden="true"></i>
                  </button>
                  <ul class="dropdown-menu dropdown-menu-end">
                    <li>
                      <button class="dropdown-item" type="button" data-moo-task-edit>
                        <i class="lucide lucide-pencil" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Edit</span>
                      </button>
                    </li>
                    <li>
                      <button class="dropdown-item" type="button" data-moo-task-copy>
                        <i class="lucide lucide-copy" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Copy link</span>
                      </button>
                    </li>
                    <li>
                      <hr class="dropdown-divider">
                    </li>
                    <li>
                      <button class="dropdown-item" type="button" data-variant="destructive" data-moo-task-delete>
                        <i class="lucide lucide-trash-2" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Delete task</span>
                      </button>
                    </li>
                  </ul>
                </div>
              </td>
            </tr>
            <tr id="tsk-111" data-datatable-row data-datatable-search="TSK-111 Changelog entry template Docs Done Low Erna Schneider Hoover Aug 03" data-datatable-facet-status="done" data-datatable-facet-priority="low" data-datatable-facet-tag="docs" hidden>
              <td class="datatable-col-select">
                <label class="form-check datatable-checkbox-target">
                  <input class="form-check-input" type="checkbox" id="examples-tasks-datatable-tsk-111-table-select" aria-label="Select TSK-111" data-datatable-select-row>
                </label>
              </td>
              <td class="datatable-col" data-datatable-column="task" data-datatable-sort-value="changelog entry template">
                <div class="datatable-item-cell">
                  <span class="text-truncate">Changelog entry template</span>
                  <span class="badge border text-body-secondary rounded-pill">Docs</span>
                </div>
              </td>
              <td class="datatable-col" data-datatable-column="status" data-datatable-sort-value="3">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-circle-check" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>Done</span>
                </span>
              </td>
              <td class="datatable-col" data-datatable-column="priority" data-datatable-sort-value="2">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-arrow-down" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>Low</span>
                </span>
              </td>
              <td class="datatable-col" data-datatable-column="assignee" data-datatable-sort-value="erna schneider hoover">Erna Schneider Hoover</td>
              <td class="datatable-col" data-datatable-column="due" data-datatable-sort-value="3">
                <span class="text-nowrap text-body-secondary">Aug 03</span>
              </td>
              <td class="datatable-col text-end" data-datatable-column="actions">
                <div class="table-row-actions dropdown">
                  <button
                        class="btn btn-ghost btn-icon-sm"
                        type="button"
                        data-bs-toggle="dropdown"
                        aria-expanded="false"
                        aria-label="Task actions for Changelog entry template"
                      >
                    <i class="lucide lucide-ellipsis-vertical" data-icon="inline-start" aria-hidden="true"></i>
                  </button>
                  <ul class="dropdown-menu dropdown-menu-end">
                    <li>
                      <button class="dropdown-item" type="button" data-moo-task-edit>
                        <i class="lucide lucide-pencil" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Edit</span>
                      </button>
                    </li>
                    <li>
                      <button class="dropdown-item" type="button" data-moo-task-copy>
                        <i class="lucide lucide-copy" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Copy link</span>
                      </button>
                    </li>
                    <li>
                      <hr class="dropdown-divider">
                    </li>
                    <li>
                      <button class="dropdown-item" type="button" data-variant="destructive" data-moo-task-delete>
                        <i class="lucide lucide-trash-2" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Delete task</span>
                      </button>
                    </li>
                  </ul>
                </div>
              </td>
            </tr>
            <tr id="tsk-110" data-datatable-row data-datatable-search="TSK-110 Focus-visible ring on dark A11y Open High Evelyn Berezin Aug 11" data-datatable-facet-status="open" data-datatable-facet-priority="high" data-datatable-facet-tag="a11y" hidden>
              <td class="datatable-col-select">
                <label class="form-check datatable-checkbox-target">
                  <input class="form-check-input" type="checkbox" id="examples-tasks-datatable-tsk-110-table-select" aria-label="Select TSK-110" data-datatable-select-row>
                </label>
              </td>
              <td class="datatable-col" data-datatable-column="task" data-datatable-sort-value="focus-visible ring on dark">
                <div class="datatable-item-cell">
                  <span class="text-truncate">Focus-visible ring on dark</span>
                  <span class="badge border text-body-secondary rounded-pill">A11y</span>
                </div>
              </td>
              <td class="datatable-col" data-datatable-column="status" data-datatable-sort-value="0">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-circle" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>Open</span>
                </span>
              </td>
              <td class="datatable-col" data-datatable-column="priority" data-datatable-sort-value="0">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-arrow-up" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>High</span>
                </span>
              </td>
              <td class="datatable-col" data-datatable-column="assignee" data-datatable-sort-value="evelyn berezin">Evelyn Berezin</td>
              <td class="datatable-col" data-datatable-column="due" data-datatable-sort-value="11">
                <span class="text-nowrap text-body-secondary">Aug 11</span>
              </td>
              <td class="datatable-col text-end" data-datatable-column="actions">
                <div class="table-row-actions dropdown">
                  <button
                        class="btn btn-ghost btn-icon-sm"
                        type="button"
                        data-bs-toggle="dropdown"
                        aria-expanded="false"
                        aria-label="Task actions for Focus-visible ring on dark"
                      >
                    <i class="lucide lucide-ellipsis-vertical" data-icon="inline-start" aria-hidden="true"></i>
                  </button>
                  <ul class="dropdown-menu dropdown-menu-end">
                    <li>
                      <button class="dropdown-item" type="button" data-moo-task-edit>
                        <i class="lucide lucide-pencil" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Edit</span>
                      </button>
                    </li>
                    <li>
                      <button class="dropdown-item" type="button" data-moo-task-copy>
                        <i class="lucide lucide-copy" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Copy link</span>
                      </button>
                    </li>
                    <li>
                      <hr class="dropdown-divider">
                    </li>
                    <li>
                      <button class="dropdown-item" type="button" data-variant="destructive" data-moo-task-delete>
                        <i class="lucide lucide-trash-2" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Delete task</span>
                      </button>
                    </li>
                  </ul>
                </div>
              </td>
            </tr>
            <tr id="tsk-109" data-datatable-row data-datatable-search="TSK-109 Badge tone inventory on dark Visual Open Low Mary Jackson Aug 19" data-datatable-facet-status="open" data-datatable-facet-priority="low" data-datatable-facet-tag="visual" hidden>
              <td class="datatable-col-select">
                <label class="form-check datatable-checkbox-target">
                  <input class="form-check-input" type="checkbox" id="examples-tasks-datatable-tsk-109-table-select" aria-label="Select TSK-109" data-datatable-select-row>
                </label>
              </td>
              <td class="datatable-col" data-datatable-column="task" data-datatable-sort-value="badge tone inventory on dark">
                <div class="datatable-item-cell">
                  <span class="text-truncate">Badge tone inventory on dark</span>
                  <span class="badge border text-body-secondary rounded-pill">Visual</span>
                </div>
              </td>
              <td class="datatable-col" data-datatable-column="status" data-datatable-sort-value="0">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-circle" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>Open</span>
                </span>
              </td>
              <td class="datatable-col" data-datatable-column="priority" data-datatable-sort-value="2">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-arrow-down" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>Low</span>
                </span>
              </td>
              <td class="datatable-col" data-datatable-column="assignee" data-datatable-sort-value="mary jackson">Mary Jackson</td>
              <td class="datatable-col" data-datatable-column="due" data-datatable-sort-value="19">
                <span class="text-nowrap text-body-secondary">Aug 19</span>
              </td>
              <td class="datatable-col text-end" data-datatable-column="actions">
                <div class="table-row-actions dropdown">
                  <button
                        class="btn btn-ghost btn-icon-sm"
                        type="button"
                        data-bs-toggle="dropdown"
                        aria-expanded="false"
                        aria-label="Task actions for Badge tone inventory on dark"
                      >
                    <i class="lucide lucide-ellipsis-vertical" data-icon="inline-start" aria-hidden="true"></i>
                  </button>
                  <ul class="dropdown-menu dropdown-menu-end">
                    <li>
                      <button class="dropdown-item" type="button" data-moo-task-edit>
                        <i class="lucide lucide-pencil" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Edit</span>
                      </button>
                    </li>
                    <li>
                      <button class="dropdown-item" type="button" data-moo-task-copy>
                        <i class="lucide lucide-copy" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Copy link</span>
                      </button>
                    </li>
                    <li>
                      <hr class="dropdown-divider">
                    </li>
                    <li>
                      <button class="dropdown-item" type="button" data-variant="destructive" data-moo-task-delete>
                        <i class="lucide lucide-trash-2" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Delete task</span>
                      </button>
                    </li>
                  </ul>
                </div>
              </td>
            </tr>
            <tr id="tsk-108" data-datatable-row data-datatable-search="TSK-108 Sticky table header shadow Visual In progress Medium Klara von Neumann Aug 18" data-datatable-facet-status="in-progress" data-datatable-facet-priority="medium" data-datatable-facet-tag="visual" hidden>
              <td class="datatable-col-select">
                <label class="form-check datatable-checkbox-target">
                  <input class="form-check-input" type="checkbox" id="examples-tasks-datatable-tsk-108-table-select" aria-label="Select TSK-108" data-datatable-select-row>
                </label>
              </td>
              <td class="datatable-col" data-datatable-column="task" data-datatable-sort-value="sticky table header shadow">
                <div class="datatable-item-cell">
                  <span class="text-truncate">Sticky table header shadow</span>
                  <span class="badge border text-body-secondary rounded-pill">Visual</span>
                </div>
              </td>
              <td class="datatable-col" data-datatable-column="status" data-datatable-sort-value="1">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-loader" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>In progress</span>
                </span>
              </td>
              <td class="datatable-col" data-datatable-column="priority" data-datatable-sort-value="1">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-minus" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>Medium</span>
                </span>
              </td>
              <td class="datatable-col" data-datatable-column="assignee" data-datatable-sort-value="klara von neumann">Klara von Neumann</td>
              <td class="datatable-col" data-datatable-column="due" data-datatable-sort-value="18">
                <span class="text-nowrap text-body-secondary">Aug 18</span>
              </td>
              <td class="datatable-col text-end" data-datatable-column="actions">
                <div class="table-row-actions dropdown">
                  <button
                        class="btn btn-ghost btn-icon-sm"
                        type="button"
                        data-bs-toggle="dropdown"
                        aria-expanded="false"
                        aria-label="Task actions for Sticky table header shadow"
                      >
                    <i class="lucide lucide-ellipsis-vertical" data-icon="inline-start" aria-hidden="true"></i>
                  </button>
                  <ul class="dropdown-menu dropdown-menu-end">
                    <li>
                      <button class="dropdown-item" type="button" data-moo-task-edit>
                        <i class="lucide lucide-pencil" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Edit</span>
                      </button>
                    </li>
                    <li>
                      <button class="dropdown-item" type="button" data-moo-task-copy>
                        <i class="lucide lucide-copy" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Copy link</span>
                      </button>
                    </li>
                    <li>
                      <hr class="dropdown-divider">
                    </li>
                    <li>
                      <button class="dropdown-item" type="button" data-variant="destructive" data-moo-task-delete>
                        <i class="lucide lucide-trash-2" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Delete task</span>
                      </button>
                    </li>
                  </ul>
                </div>
              </td>
            </tr>
            <tr id="tsk-107" data-datatable-row data-datatable-search="TSK-107 Sheet focus return smoke test Core Done High Joan Clarke Aug 06" data-datatable-facet-status="done" data-datatable-facet-priority="high" data-datatable-facet-tag="core" hidden>
              <td class="datatable-col-select">
                <label class="form-check datatable-checkbox-target">
                  <input class="form-check-input" type="checkbox" id="examples-tasks-datatable-tsk-107-table-select" aria-label="Select TSK-107" data-datatable-select-row>
                </label>
              </td>
              <td class="datatable-col" data-datatable-column="task" data-datatable-sort-value="sheet focus return smoke test">
                <div class="datatable-item-cell">
                  <span class="text-truncate">Sheet focus return smoke test</span>
                  <span class="badge border text-body-secondary rounded-pill">Core</span>
                </div>
              </td>
              <td class="datatable-col" data-datatable-column="status" data-datatable-sort-value="3">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-circle-check" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>Done</span>
                </span>
              </td>
              <td class="datatable-col" data-datatable-column="priority" data-datatable-sort-value="0">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-arrow-up" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>High</span>
                </span>
              </td>
              <td class="datatable-col" data-datatable-column="assignee" data-datatable-sort-value="joan clarke">Joan Clarke</td>
              <td class="datatable-col" data-datatable-column="due" data-datatable-sort-value="6">
                <span class="text-nowrap text-body-secondary">Aug 06</span>
              </td>
              <td class="datatable-col text-end" data-datatable-column="actions">
                <div class="table-row-actions dropdown">
                  <button
                        class="btn btn-ghost btn-icon-sm"
                        type="button"
                        data-bs-toggle="dropdown"
                        aria-expanded="false"
                        aria-label="Task actions for Sheet focus return smoke test"
                      >
                    <i class="lucide lucide-ellipsis-vertical" data-icon="inline-start" aria-hidden="true"></i>
                  </button>
                  <ul class="dropdown-menu dropdown-menu-end">
                    <li>
                      <button class="dropdown-item" type="button" data-moo-task-edit>
                        <i class="lucide lucide-pencil" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Edit</span>
                      </button>
                    </li>
                    <li>
                      <button class="dropdown-item" type="button" data-moo-task-copy>
                        <i class="lucide lucide-copy" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Copy link</span>
                      </button>
                    </li>
                    <li>
                      <hr class="dropdown-divider">
                    </li>
                    <li>
                      <button class="dropdown-item" type="button" data-variant="destructive" data-moo-task-delete>
                        <i class="lucide lucide-trash-2" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Delete task</span>
                      </button>
                    </li>
                  </ul>
                </div>
              </td>
            </tr>
            <tr id="tsk-106" data-datatable-row data-datatable-search="TSK-106 Contributing guide code fences Docs Open Low Tim Berners-Lee Aug 26" data-datatable-facet-status="open" data-datatable-facet-priority="low" data-datatable-facet-tag="docs" hidden>
              <td class="datatable-col-select">
                <label class="form-check datatable-checkbox-target">
                  <input class="form-check-input" type="checkbox" id="examples-tasks-datatable-tsk-106-table-select" aria-label="Select TSK-106" data-datatable-select-row>
                </label>
              </td>
              <td class="datatable-col" data-datatable-column="task" data-datatable-sort-value="contributing guide code fences">
                <div class="datatable-item-cell">
                  <span class="text-truncate">Contributing guide code fences</span>
                  <span class="badge border text-body-secondary rounded-pill">Docs</span>
                </div>
              </td>
              <td class="datatable-col" data-datatable-column="status" data-datatable-sort-value="0">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-circle" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>Open</span>
                </span>
              </td>
              <td class="datatable-col" data-datatable-column="priority" data-datatable-sort-value="2">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-arrow-down" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>Low</span>
                </span>
              </td>
              <td class="datatable-col" data-datatable-column="assignee" data-datatable-sort-value="tim berners-lee">Tim Berners-Lee</td>
              <td class="datatable-col" data-datatable-column="due" data-datatable-sort-value="26">
                <span class="text-nowrap text-body-secondary">Aug 26</span>
              </td>
              <td class="datatable-col text-end" data-datatable-column="actions">
                <div class="table-row-actions dropdown">
                  <button
                        class="btn btn-ghost btn-icon-sm"
                        type="button"
                        data-bs-toggle="dropdown"
                        aria-expanded="false"
                        aria-label="Task actions for Contributing guide code fences"
                      >
                    <i class="lucide lucide-ellipsis-vertical" data-icon="inline-start" aria-hidden="true"></i>
                  </button>
                  <ul class="dropdown-menu dropdown-menu-end">
                    <li>
                      <button class="dropdown-item" type="button" data-moo-task-edit>
                        <i class="lucide lucide-pencil" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Edit</span>
                      </button>
                    </li>
                    <li>
                      <button class="dropdown-item" type="button" data-moo-task-copy>
                        <i class="lucide lucide-copy" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Copy link</span>
                      </button>
                    </li>
                    <li>
                      <hr class="dropdown-divider">
                    </li>
                    <li>
                      <button class="dropdown-item" type="button" data-variant="destructive" data-moo-task-delete>
                        <i class="lucide lucide-trash-2" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Delete task</span>
                      </button>
                    </li>
                  </ul>
                </div>
              </td>
            </tr>
            <tr id="tsk-105" data-datatable-row data-datatable-search="TSK-105 Navbar dropdown keyboard pass A11y In progress Medium Dorothy Vaughan Aug 15" data-datatable-facet-status="in-progress" data-datatable-facet-priority="medium" data-datatable-facet-tag="a11y" hidden>
              <td class="datatable-col-select">
                <label class="form-check datatable-checkbox-target">
                  <input class="form-check-input" type="checkbox" id="examples-tasks-datatable-tsk-105-table-select" aria-label="Select TSK-105" data-datatable-select-row>
                </label>
              </td>
              <td class="datatable-col" data-datatable-column="task" data-datatable-sort-value="navbar dropdown keyboard pass">
                <div class="datatable-item-cell">
                  <span class="text-truncate">Navbar dropdown keyboard pass</span>
                  <span class="badge border text-body-secondary rounded-pill">A11y</span>
                </div>
              </td>
              <td class="datatable-col" data-datatable-column="status" data-datatable-sort-value="1">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-loader" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>In progress</span>
                </span>
              </td>
              <td class="datatable-col" data-datatable-column="priority" data-datatable-sort-value="1">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-minus" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>Medium</span>
                </span>
              </td>
              <td class="datatable-col" data-datatable-column="assignee" data-datatable-sort-value="dorothy vaughan">Dorothy Vaughan</td>
              <td class="datatable-col" data-datatable-column="due" data-datatable-sort-value="15">
                <span class="text-nowrap text-body-secondary">Aug 15</span>
              </td>
              <td class="datatable-col text-end" data-datatable-column="actions">
                <div class="table-row-actions dropdown">
                  <button
                        class="btn btn-ghost btn-icon-sm"
                        type="button"
                        data-bs-toggle="dropdown"
                        aria-expanded="false"
                        aria-label="Task actions for Navbar dropdown keyboard pass"
                      >
                    <i class="lucide lucide-ellipsis-vertical" data-icon="inline-start" aria-hidden="true"></i>
                  </button>
                  <ul class="dropdown-menu dropdown-menu-end">
                    <li>
                      <button class="dropdown-item" type="button" data-moo-task-edit>
                        <i class="lucide lucide-pencil" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Edit</span>
                      </button>
                    </li>
                    <li>
                      <button class="dropdown-item" type="button" data-moo-task-copy>
                        <i class="lucide lucide-copy" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Copy link</span>
                      </button>
                    </li>
                    <li>
                      <hr class="dropdown-divider">
                    </li>
                    <li>
                      <button class="dropdown-item" type="button" data-variant="destructive" data-moo-task-delete>
                        <i class="lucide lucide-trash-2" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Delete task</span>
                      </button>
                    </li>
                  </ul>
                </div>
              </td>
            </tr>
            <tr id="tsk-104" data-datatable-row data-datatable-search="TSK-104 Badge pill radius tokens Site Done Medium Dennis Ritchie Aug 02" data-datatable-facet-status="done" data-datatable-facet-priority="medium" data-datatable-facet-tag="site" hidden>
              <td class="datatable-col-select">
                <label class="form-check datatable-checkbox-target">
                  <input class="form-check-input" type="checkbox" id="examples-tasks-datatable-tsk-104-table-select" aria-label="Select TSK-104" data-datatable-select-row>
                </label>
              </td>
              <td class="datatable-col" data-datatable-column="task" data-datatable-sort-value="badge pill radius tokens">
                <div class="datatable-item-cell">
                  <span class="text-truncate">Badge pill radius tokens</span>
                  <span class="badge border text-body-secondary rounded-pill">Site</span>
                </div>
              </td>
              <td class="datatable-col" data-datatable-column="status" data-datatable-sort-value="3">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-circle-check" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>Done</span>
                </span>
              </td>
              <td class="datatable-col" data-datatable-column="priority" data-datatable-sort-value="1">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-minus" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>Medium</span>
                </span>
              </td>
              <td class="datatable-col" data-datatable-column="assignee" data-datatable-sort-value="dennis ritchie">Dennis Ritchie</td>
              <td class="datatable-col" data-datatable-column="due" data-datatable-sort-value="2">
                <span class="text-nowrap text-body-secondary">Aug 02</span>
              </td>
              <td class="datatable-col text-end" data-datatable-column="actions">
                <div class="table-row-actions dropdown">
                  <button
                        class="btn btn-ghost btn-icon-sm"
                        type="button"
                        data-bs-toggle="dropdown"
                        aria-expanded="false"
                        aria-label="Task actions for Badge pill radius tokens"
                      >
                    <i class="lucide lucide-ellipsis-vertical" data-icon="inline-start" aria-hidden="true"></i>
                  </button>
                  <ul class="dropdown-menu dropdown-menu-end">
                    <li>
                      <button class="dropdown-item" type="button" data-moo-task-edit>
                        <i class="lucide lucide-pencil" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Edit</span>
                      </button>
                    </li>
                    <li>
                      <button class="dropdown-item" type="button" data-moo-task-copy>
                        <i class="lucide lucide-copy" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Copy link</span>
                      </button>
                    </li>
                    <li>
                      <hr class="dropdown-divider">
                    </li>
                    <li>
                      <button class="dropdown-item" type="button" data-variant="destructive" data-moo-task-delete>
                        <i class="lucide lucide-trash-2" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Delete task</span>
                      </button>
                    </li>
                  </ul>
                </div>
              </td>
            </tr>
            <tr id="tsk-103" data-datatable-row data-datatable-search="TSK-103 Blocks preview frame reload Site Open Low Hedy Lamarr Aug 22" data-datatable-facet-status="open" data-datatable-facet-priority="low" data-datatable-facet-tag="site" hidden>
              <td class="datatable-col-select">
                <label class="form-check datatable-checkbox-target">
                  <input class="form-check-input" type="checkbox" id="examples-tasks-datatable-tsk-103-table-select" aria-label="Select TSK-103" data-datatable-select-row>
                </label>
              </td>
              <td class="datatable-col" data-datatable-column="task" data-datatable-sort-value="blocks preview frame reload">
                <div class="datatable-item-cell">
                  <span class="text-truncate">Blocks preview frame reload</span>
                  <span class="badge border text-body-secondary rounded-pill">Site</span>
                </div>
              </td>
              <td class="datatable-col" data-datatable-column="status" data-datatable-sort-value="0">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-circle" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>Open</span>
                </span>
              </td>
              <td class="datatable-col" data-datatable-column="priority" data-datatable-sort-value="2">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-arrow-down" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>Low</span>
                </span>
              </td>
              <td class="datatable-col" data-datatable-column="assignee" data-datatable-sort-value="hedy lamarr">Hedy Lamarr</td>
              <td class="datatable-col" data-datatable-column="due" data-datatable-sort-value="22">
                <span class="text-nowrap text-body-secondary">Aug 22</span>
              </td>
              <td class="datatable-col text-end" data-datatable-column="actions">
                <div class="table-row-actions dropdown">
                  <button
                        class="btn btn-ghost btn-icon-sm"
                        type="button"
                        data-bs-toggle="dropdown"
                        aria-expanded="false"
                        aria-label="Task actions for Blocks preview frame reload"
                      >
                    <i class="lucide lucide-ellipsis-vertical" data-icon="inline-start" aria-hidden="true"></i>
                  </button>
                  <ul class="dropdown-menu dropdown-menu-end">
                    <li>
                      <button class="dropdown-item" type="button" data-moo-task-edit>
                        <i class="lucide lucide-pencil" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Edit</span>
                      </button>
                    </li>
                    <li>
                      <button class="dropdown-item" type="button" data-moo-task-copy>
                        <i class="lucide lucide-copy" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Copy link</span>
                      </button>
                    </li>
                    <li>
                      <hr class="dropdown-divider">
                    </li>
                    <li>
                      <button class="dropdown-item" type="button" data-variant="destructive" data-moo-task-delete>
                        <i class="lucide lucide-trash-2" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Delete task</span>
                      </button>
                    </li>
                  </ul>
                </div>
              </td>
            </tr>
            <tr id="tsk-101" data-datatable-row data-datatable-search="TSK-101 Pagination boundary contrast Visual Blocked Medium Annie Easley Aug 13" data-datatable-facet-status="blocked" data-datatable-facet-priority="medium" data-datatable-facet-tag="visual" hidden>
              <td class="datatable-col-select">
                <label class="form-check datatable-checkbox-target">
                  <input class="form-check-input" type="checkbox" id="examples-tasks-datatable-tsk-101-table-select" aria-label="Select TSK-101" data-datatable-select-row>
                </label>
              </td>
              <td class="datatable-col" data-datatable-column="task" data-datatable-sort-value="pagination boundary contrast">
                <div class="datatable-item-cell">
                  <span class="text-truncate">Pagination boundary contrast</span>
                  <span class="badge border text-body-secondary rounded-pill">Visual</span>
                </div>
              </td>
              <td class="datatable-col" data-datatable-column="status" data-datatable-sort-value="2">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-circle-alert" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>Blocked</span>
                </span>
              </td>
              <td class="datatable-col" data-datatable-column="priority" data-datatable-sort-value="1">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-minus" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>Medium</span>
                </span>
              </td>
              <td class="datatable-col" data-datatable-column="assignee" data-datatable-sort-value="annie easley">Annie Easley</td>
              <td class="datatable-col" data-datatable-column="due" data-datatable-sort-value="13">
                <span class="text-nowrap text-body-secondary">Aug 13</span>
              </td>
              <td class="datatable-col text-end" data-datatable-column="actions">
                <div class="table-row-actions dropdown">
                  <button
                        class="btn btn-ghost btn-icon-sm"
                        type="button"
                        data-bs-toggle="dropdown"
                        aria-expanded="false"
                        aria-label="Task actions for Pagination boundary contrast"
                      >
                    <i class="lucide lucide-ellipsis-vertical" data-icon="inline-start" aria-hidden="true"></i>
                  </button>
                  <ul class="dropdown-menu dropdown-menu-end">
                    <li>
                      <button class="dropdown-item" type="button" data-moo-task-edit>
                        <i class="lucide lucide-pencil" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Edit</span>
                      </button>
                    </li>
                    <li>
                      <button class="dropdown-item" type="button" data-moo-task-copy>
                        <i class="lucide lucide-copy" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Copy link</span>
                      </button>
                    </li>
                    <li>
                      <hr class="dropdown-divider">
                    </li>
                    <li>
                      <button class="dropdown-item" type="button" data-variant="destructive" data-moo-task-delete>
                        <i class="lucide lucide-trash-2" data-icon="inline-start" aria-hidden="true"></i>
                        <span>Delete task</span>
                      </button>
                    </li>
                  </ul>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="datatable-card-frame">
      <div class="datatable-frame-header">
        <div class="form-check datatable-select-all">
          <input class="form-check-input" type="checkbox" id="examples-tasks-datatable-cards-select-visible" aria-controls="examples-tasks-datatable-table" data-datatable-select-all>
          <label class="form-check-label" for="examples-tasks-datatable-cards-select-visible">Select visible tasks</label>
        </div>
      </div>
      <div class="datatable-cards" data-datatable-cards aria-label="Responsive examples-tasks-datatable-table cards">
        <article class="datatable-card" data-datatable-card data-datatable-card-for="tsk-126">
          <div class="datatable-card-header">
            <label class="form-check datatable-card-select datatable-checkbox-target">
              <input class="form-check-input" type="checkbox" id="examples-tasks-datatable-tsk-126-card-select" aria-label="Select TSK-126" data-datatable-select-row>
            </label>
            <div class="datatable-card-heading">
              <div class="datatable-card-title">Dark mode token contrast audit</div>
            </div>
            <div class="datatable-card-actions">
              <div class="table-row-actions dropdown">
                <button
                      class="btn btn-ghost btn-icon-sm"
                      type="button"
                      data-bs-toggle="dropdown"
                      aria-expanded="false"
                      aria-label="Task actions for Dark mode token contrast audit"
                    >
                  <i class="lucide lucide-ellipsis-vertical" data-icon="inline-start" aria-hidden="true"></i>
                </button>
                <ul class="dropdown-menu dropdown-menu-end">
                  <li>
                    <button class="dropdown-item" type="button" data-moo-task-edit>
                      <i class="lucide lucide-pencil" data-icon="inline-start" aria-hidden="true"></i>
                      <span>Edit</span>
                    </button>
                  </li>
                  <li>
                    <button class="dropdown-item" type="button" data-moo-task-copy>
                      <i class="lucide lucide-copy" data-icon="inline-start" aria-hidden="true"></i>
                      <span>Copy link</span>
                    </button>
                  </li>
                  <li>
                    <hr class="dropdown-divider">
                  </li>
                  <li>
                    <button class="dropdown-item" type="button" data-variant="destructive" data-moo-task-delete>
                      <i class="lucide lucide-trash-2" data-icon="inline-start" aria-hidden="true"></i>
                      <span>Delete task</span>
                    </button>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <dl class="datatable-card-list">
            <div class="datatable-card-row" data-datatable-detail-column="status">
              <dt>Status</dt>
              <dd class="datatable-card-value">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-circle" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>Open</span>
                </span>
              </dd>
            </div>
            <div class="datatable-card-row" data-datatable-detail-column="priority">
              <dt>Priority</dt>
              <dd class="datatable-card-value">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-arrow-up" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>High</span>
                </span>
              </dd>
            </div>
            <div class="datatable-card-row" data-datatable-detail-column="assignee">
              <dt>Assignee</dt>
              <dd class="datatable-card-value">Alan Turing</dd>
            </div>
            <div class="datatable-card-row" data-datatable-detail-column="due">
              <dt>Due</dt>
              <dd class="datatable-card-value">
                <span class="text-nowrap text-body-secondary">Aug 09</span>
              </dd>
            </div>
          </dl>
        </article>
        <article class="datatable-card" data-datatable-card data-datatable-card-for="tsk-125">
          <div class="datatable-card-header">
            <label class="form-check datatable-card-select datatable-checkbox-target">
              <input class="form-check-input" type="checkbox" id="examples-tasks-datatable-tsk-125-card-select" aria-label="Select TSK-125" data-datatable-select-row>
            </label>
            <div class="datatable-card-heading">
              <div class="datatable-card-title">Installation guide screenshot refresh</div>
            </div>
            <div class="datatable-card-actions">
              <div class="table-row-actions dropdown">
                <button
                      class="btn btn-ghost btn-icon-sm"
                      type="button"
                      data-bs-toggle="dropdown"
                      aria-expanded="false"
                      aria-label="Task actions for Installation guide screenshot refresh"
                    >
                  <i class="lucide lucide-ellipsis-vertical" data-icon="inline-start" aria-hidden="true"></i>
                </button>
                <ul class="dropdown-menu dropdown-menu-end">
                  <li>
                    <button class="dropdown-item" type="button" data-moo-task-edit>
                      <i class="lucide lucide-pencil" data-icon="inline-start" aria-hidden="true"></i>
                      <span>Edit</span>
                    </button>
                  </li>
                  <li>
                    <button class="dropdown-item" type="button" data-moo-task-copy>
                      <i class="lucide lucide-copy" data-icon="inline-start" aria-hidden="true"></i>
                      <span>Copy link</span>
                    </button>
                  </li>
                  <li>
                    <hr class="dropdown-divider">
                  </li>
                  <li>
                    <button class="dropdown-item" type="button" data-variant="destructive" data-moo-task-delete>
                      <i class="lucide lucide-trash-2" data-icon="inline-start" aria-hidden="true"></i>
                      <span>Delete task</span>
                    </button>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <dl class="datatable-card-list">
            <div class="datatable-card-row" data-datatable-detail-column="status">
              <dt>Status</dt>
              <dd class="datatable-card-value">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-loader" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>In progress</span>
                </span>
              </dd>
            </div>
            <div class="datatable-card-row" data-datatable-detail-column="priority">
              <dt>Priority</dt>
              <dd class="datatable-card-value">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-minus" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>Medium</span>
                </span>
              </dd>
            </div>
            <div class="datatable-card-row" data-datatable-detail-column="assignee">
              <dt>Assignee</dt>
              <dd class="datatable-card-value">Betty Holberton</dd>
            </div>
            <div class="datatable-card-row" data-datatable-detail-column="due">
              <dt>Due</dt>
              <dd class="datatable-card-value">
                <span class="text-nowrap text-body-secondary">Aug 16</span>
              </dd>
            </div>
          </dl>
        </article>
        <article class="datatable-card" data-datatable-card data-datatable-card-for="tsk-123">
          <div class="datatable-card-header">
            <label class="form-check datatable-card-select datatable-checkbox-target">
              <input class="form-check-input" type="checkbox" id="examples-tasks-datatable-tsk-123-card-select" aria-label="Select TSK-123" data-datatable-select-row>
            </label>
            <div class="datatable-card-heading">
              <div class="datatable-card-title">Card view bulk bar overlap</div>
            </div>
            <div class="datatable-card-actions">
              <div class="table-row-actions dropdown">
                <button
                      class="btn btn-ghost btn-icon-sm"
                      type="button"
                      data-bs-toggle="dropdown"
                      aria-expanded="false"
                      aria-label="Task actions for Card view bulk bar overlap"
                    >
                  <i class="lucide lucide-ellipsis-vertical" data-icon="inline-start" aria-hidden="true"></i>
                </button>
                <ul class="dropdown-menu dropdown-menu-end">
                  <li>
                    <button class="dropdown-item" type="button" data-moo-task-edit>
                      <i class="lucide lucide-pencil" data-icon="inline-start" aria-hidden="true"></i>
                      <span>Edit</span>
                    </button>
                  </li>
                  <li>
                    <button class="dropdown-item" type="button" data-moo-task-copy>
                      <i class="lucide lucide-copy" data-icon="inline-start" aria-hidden="true"></i>
                      <span>Copy link</span>
                    </button>
                  </li>
                  <li>
                    <hr class="dropdown-divider">
                  </li>
                  <li>
                    <button class="dropdown-item" type="button" data-variant="destructive" data-moo-task-delete>
                      <i class="lucide lucide-trash-2" data-icon="inline-start" aria-hidden="true"></i>
                      <span>Delete task</span>
                    </button>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <dl class="datatable-card-list">
            <div class="datatable-card-row" data-datatable-detail-column="status">
              <dt>Status</dt>
              <dd class="datatable-card-value">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-circle-alert" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>Blocked</span>
                </span>
              </dd>
            </div>
            <div class="datatable-card-row" data-datatable-detail-column="priority">
              <dt>Priority</dt>
              <dd class="datatable-card-value">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-arrow-up" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>High</span>
                </span>
              </dd>
            </div>
            <div class="datatable-card-row" data-datatable-detail-column="assignee">
              <dt>Assignee</dt>
              <dd class="datatable-card-value">Jean Sammet</dd>
            </div>
            <div class="datatable-card-row" data-datatable-detail-column="due">
              <dt>Due</dt>
              <dd class="datatable-card-value">
                <span class="text-nowrap text-body-secondary">Aug 10</span>
              </dd>
            </div>
          </dl>
        </article>
        <article class="datatable-card" data-datatable-card data-datatable-card-for="tsk-122">
          <div class="datatable-card-header">
            <label class="form-check datatable-card-select datatable-checkbox-target">
              <input class="form-check-input" type="checkbox" id="examples-tasks-datatable-tsk-122-card-select" aria-label="Select TSK-122" data-datatable-select-row>
            </label>
            <div class="datatable-card-heading">
              <div class="datatable-card-title">Examples index meta descriptions</div>
            </div>
            <div class="datatable-card-actions">
              <div class="table-row-actions dropdown">
                <button
                      class="btn btn-ghost btn-icon-sm"
                      type="button"
                      data-bs-toggle="dropdown"
                      aria-expanded="false"
                      aria-label="Task actions for Examples index meta descriptions"
                    >
                  <i class="lucide lucide-ellipsis-vertical" data-icon="inline-start" aria-hidden="true"></i>
                </button>
                <ul class="dropdown-menu dropdown-menu-end">
                  <li>
                    <button class="dropdown-item" type="button" data-moo-task-edit>
                      <i class="lucide lucide-pencil" data-icon="inline-start" aria-hidden="true"></i>
                      <span>Edit</span>
                    </button>
                  </li>
                  <li>
                    <button class="dropdown-item" type="button" data-moo-task-copy>
                      <i class="lucide lucide-copy" data-icon="inline-start" aria-hidden="true"></i>
                      <span>Copy link</span>
                    </button>
                  </li>
                  <li>
                    <hr class="dropdown-divider">
                  </li>
                  <li>
                    <button class="dropdown-item" type="button" data-variant="destructive" data-moo-task-delete>
                      <i class="lucide lucide-trash-2" data-icon="inline-start" aria-hidden="true"></i>
                      <span>Delete task</span>
                    </button>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <dl class="datatable-card-list">
            <div class="datatable-card-row" data-datatable-detail-column="status">
              <dt>Status</dt>
              <dd class="datatable-card-value">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-circle" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>Open</span>
                </span>
              </dd>
            </div>
            <div class="datatable-card-row" data-datatable-detail-column="priority">
              <dt>Priority</dt>
              <dd class="datatable-card-value">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-arrow-down" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>Low</span>
                </span>
              </dd>
            </div>
            <div class="datatable-card-row" data-datatable-detail-column="assignee">
              <dt>Assignee</dt>
              <dd class="datatable-card-value">Frances Allen</dd>
            </div>
            <div class="datatable-card-row" data-datatable-detail-column="due">
              <dt>Due</dt>
              <dd class="datatable-card-value">
                <span class="text-nowrap text-body-secondary">Aug 25</span>
              </dd>
            </div>
          </dl>
        </article>
        <article class="datatable-card" data-datatable-card data-datatable-card-for="tsk-121">
          <div class="datatable-card-header">
            <label class="form-check datatable-card-select datatable-checkbox-target">
              <input class="form-check-input" type="checkbox" id="examples-tasks-datatable-tsk-121-card-select" aria-label="Select TSK-121" data-datatable-select-row>
            </label>
            <div class="datatable-card-heading">
              <div class="datatable-card-title">Search funnel icon alignment</div>
            </div>
            <div class="datatable-card-actions">
              <div class="table-row-actions dropdown">
                <button
                      class="btn btn-ghost btn-icon-sm"
                      type="button"
                      data-bs-toggle="dropdown"
                      aria-expanded="false"
                      aria-label="Task actions for Search funnel icon alignment"
                    >
                  <i class="lucide lucide-ellipsis-vertical" data-icon="inline-start" aria-hidden="true"></i>
                </button>
                <ul class="dropdown-menu dropdown-menu-end">
                  <li>
                    <button class="dropdown-item" type="button" data-moo-task-edit>
                      <i class="lucide lucide-pencil" data-icon="inline-start" aria-hidden="true"></i>
                      <span>Edit</span>
                    </button>
                  </li>
                  <li>
                    <button class="dropdown-item" type="button" data-moo-task-copy>
                      <i class="lucide lucide-copy" data-icon="inline-start" aria-hidden="true"></i>
                      <span>Copy link</span>
                    </button>
                  </li>
                  <li>
                    <hr class="dropdown-divider">
                  </li>
                  <li>
                    <button class="dropdown-item" type="button" data-variant="destructive" data-moo-task-delete>
                      <i class="lucide lucide-trash-2" data-icon="inline-start" aria-hidden="true"></i>
                      <span>Delete task</span>
                    </button>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <dl class="datatable-card-list">
            <div class="datatable-card-row" data-datatable-detail-column="status">
              <dt>Status</dt>
              <dd class="datatable-card-value">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-loader" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>In progress</span>
                </span>
              </dd>
            </div>
            <div class="datatable-card-row" data-datatable-detail-column="priority">
              <dt>Priority</dt>
              <dd class="datatable-card-value">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-minus" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>Medium</span>
                </span>
              </dd>
            </div>
            <div class="datatable-card-row" data-datatable-detail-column="assignee">
              <dt>Assignee</dt>
              <dd class="datatable-card-value">Karen Spärck Jones</dd>
            </div>
            <div class="datatable-card-row" data-datatable-detail-column="due">
              <dt>Due</dt>
              <dd class="datatable-card-value">
                <span class="text-nowrap text-body-secondary">Aug 17</span>
              </dd>
            </div>
          </dl>
        </article>
        <article class="datatable-card" data-datatable-card data-datatable-card-for="tsk-120">
          <div class="datatable-card-header">
            <label class="form-check datatable-card-select datatable-checkbox-target">
              <input class="form-check-input" type="checkbox" id="examples-tasks-datatable-tsk-120-card-select" aria-label="Select TSK-120" data-datatable-select-row>
            </label>
            <div class="datatable-card-heading">
              <div class="datatable-card-title">Offcanvas scroll lock on iOS</div>
            </div>
            <div class="datatable-card-actions">
              <div class="table-row-actions dropdown">
                <button
                      class="btn btn-ghost btn-icon-sm"
                      type="button"
                      data-bs-toggle="dropdown"
                      aria-expanded="false"
                      aria-label="Task actions for Offcanvas scroll lock on iOS"
                    >
                  <i class="lucide lucide-ellipsis-vertical" data-icon="inline-start" aria-hidden="true"></i>
                </button>
                <ul class="dropdown-menu dropdown-menu-end">
                  <li>
                    <button class="dropdown-item" type="button" data-moo-task-edit>
                      <i class="lucide lucide-pencil" data-icon="inline-start" aria-hidden="true"></i>
                      <span>Edit</span>
                    </button>
                  </li>
                  <li>
                    <button class="dropdown-item" type="button" data-moo-task-copy>
                      <i class="lucide lucide-copy" data-icon="inline-start" aria-hidden="true"></i>
                      <span>Copy link</span>
                    </button>
                  </li>
                  <li>
                    <hr class="dropdown-divider">
                  </li>
                  <li>
                    <button class="dropdown-item" type="button" data-variant="destructive" data-moo-task-delete>
                      <i class="lucide lucide-trash-2" data-icon="inline-start" aria-hidden="true"></i>
                      <span>Delete task</span>
                    </button>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <dl class="datatable-card-list">
            <div class="datatable-card-row" data-datatable-detail-column="status">
              <dt>Status</dt>
              <dd class="datatable-card-value">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-circle-alert" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>Blocked</span>
                </span>
              </dd>
            </div>
            <div class="datatable-card-row" data-datatable-detail-column="priority">
              <dt>Priority</dt>
              <dd class="datatable-card-value">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-arrow-up" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>High</span>
                </span>
              </dd>
            </div>
            <div class="datatable-card-row" data-datatable-detail-column="assignee">
              <dt>Assignee</dt>
              <dd class="datatable-card-value">Barbara Liskov</dd>
            </div>
            <div class="datatable-card-row" data-datatable-detail-column="due">
              <dt>Due</dt>
              <dd class="datatable-card-value">
                <span class="text-nowrap text-body-secondary">Aug 09</span>
              </dd>
            </div>
          </dl>
        </article>
        <article class="datatable-card" data-datatable-card data-datatable-card-for="tsk-119">
          <div class="datatable-card-header">
            <label class="form-check datatable-card-select datatable-checkbox-target">
              <input class="form-check-input" type="checkbox" id="examples-tasks-datatable-tsk-119-card-select" aria-label="Select TSK-119" data-datatable-select-row>
            </label>
            <div class="datatable-card-heading">
              <div class="datatable-card-title">RTL sidebar flyout placement</div>
            </div>
            <div class="datatable-card-actions">
              <div class="table-row-actions dropdown">
                <button
                      class="btn btn-ghost btn-icon-sm"
                      type="button"
                      data-bs-toggle="dropdown"
                      aria-expanded="false"
                      aria-label="Task actions for RTL sidebar flyout placement"
                    >
                  <i class="lucide lucide-ellipsis-vertical" data-icon="inline-start" aria-hidden="true"></i>
                </button>
                <ul class="dropdown-menu dropdown-menu-end">
                  <li>
                    <button class="dropdown-item" type="button" data-moo-task-edit>
                      <i class="lucide lucide-pencil" data-icon="inline-start" aria-hidden="true"></i>
                      <span>Edit</span>
                    </button>
                  </li>
                  <li>
                    <button class="dropdown-item" type="button" data-moo-task-copy>
                      <i class="lucide lucide-copy" data-icon="inline-start" aria-hidden="true"></i>
                      <span>Copy link</span>
                    </button>
                  </li>
                  <li>
                    <hr class="dropdown-divider">
                  </li>
                  <li>
                    <button class="dropdown-item" type="button" data-variant="destructive" data-moo-task-delete>
                      <i class="lucide lucide-trash-2" data-icon="inline-start" aria-hidden="true"></i>
                      <span>Delete task</span>
                    </button>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <dl class="datatable-card-list">
            <div class="datatable-card-row" data-datatable-detail-column="status">
              <dt>Status</dt>
              <dd class="datatable-card-value">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-circle-check" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>Done</span>
                </span>
              </dd>
            </div>
            <div class="datatable-card-row" data-datatable-detail-column="priority">
              <dt>Priority</dt>
              <dd class="datatable-card-value">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-minus" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>Medium</span>
                </span>
              </dd>
            </div>
            <div class="datatable-card-row" data-datatable-detail-column="assignee">
              <dt>Assignee</dt>
              <dd class="datatable-card-value">Adele Goldberg</dd>
            </div>
            <div class="datatable-card-row" data-datatable-detail-column="due">
              <dt>Due</dt>
              <dd class="datatable-card-value">
                <span class="text-nowrap text-body-secondary">Aug 04</span>
              </dd>
            </div>
          </dl>
        </article>
        <article class="datatable-card" data-datatable-card data-datatable-card-for="tsk-118">
          <div class="datatable-card-header">
            <label class="form-check datatable-card-select datatable-checkbox-target">
              <input class="form-check-input" type="checkbox" id="examples-tasks-datatable-tsk-118-card-select" aria-label="Select TSK-118" data-datatable-select-row>
            </label>
            <div class="datatable-card-heading">
              <div class="datatable-card-title">Draft Examples section copy</div>
            </div>
            <div class="datatable-card-actions">
              <div class="table-row-actions dropdown">
                <button
                      class="btn btn-ghost btn-icon-sm"
                      type="button"
                      data-bs-toggle="dropdown"
                      aria-expanded="false"
                      aria-label="Task actions for Draft Examples section copy"
                    >
                  <i class="lucide lucide-ellipsis-vertical" data-icon="inline-start" aria-hidden="true"></i>
                </button>
                <ul class="dropdown-menu dropdown-menu-end">
                  <li>
                    <button class="dropdown-item" type="button" data-moo-task-edit>
                      <i class="lucide lucide-pencil" data-icon="inline-start" aria-hidden="true"></i>
                      <span>Edit</span>
                    </button>
                  </li>
                  <li>
                    <button class="dropdown-item" type="button" data-moo-task-copy>
                      <i class="lucide lucide-copy" data-icon="inline-start" aria-hidden="true"></i>
                      <span>Copy link</span>
                    </button>
                  </li>
                  <li>
                    <hr class="dropdown-divider">
                  </li>
                  <li>
                    <button class="dropdown-item" type="button" data-variant="destructive" data-moo-task-delete>
                      <i class="lucide lucide-trash-2" data-icon="inline-start" aria-hidden="true"></i>
                      <span>Delete task</span>
                    </button>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <dl class="datatable-card-list">
            <div class="datatable-card-row" data-datatable-detail-column="status">
              <dt>Status</dt>
              <dd class="datatable-card-value">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-loader" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>In progress</span>
                </span>
              </dd>
            </div>
            <div class="datatable-card-row" data-datatable-detail-column="priority">
              <dt>Priority</dt>
              <dd class="datatable-card-value">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-arrow-up" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>High</span>
                </span>
              </dd>
            </div>
            <div class="datatable-card-row" data-datatable-detail-column="assignee">
              <dt>Assignee</dt>
              <dd class="datatable-card-value">Ada Lovelace</dd>
            </div>
            <div class="datatable-card-row" data-datatable-detail-column="due">
              <dt>Due</dt>
              <dd class="datatable-card-value">
                <span class="text-nowrap text-body-secondary">Aug 12</span>
              </dd>
            </div>
          </dl>
        </article>
        <article class="datatable-card" data-datatable-card data-datatable-card-for="tsk-117">
          <div class="datatable-card-header">
            <label class="form-check datatable-card-select datatable-checkbox-target">
              <input class="form-check-input" type="checkbox" id="examples-tasks-datatable-tsk-117-card-select" aria-label="Select TSK-117" data-datatable-select-row>
            </label>
            <div class="datatable-card-heading">
              <div class="datatable-card-title">Sidebar icon-rail contrast pass</div>
            </div>
            <div class="datatable-card-actions">
              <div class="table-row-actions dropdown">
                <button
                      class="btn btn-ghost btn-icon-sm"
                      type="button"
                      data-bs-toggle="dropdown"
                      aria-expanded="false"
                      aria-label="Task actions for Sidebar icon-rail contrast pass"
                    >
                  <i class="lucide lucide-ellipsis-vertical" data-icon="inline-start" aria-hidden="true"></i>
                </button>
                <ul class="dropdown-menu dropdown-menu-end">
                  <li>
                    <button class="dropdown-item" type="button" data-moo-task-edit>
                      <i class="lucide lucide-pencil" data-icon="inline-start" aria-hidden="true"></i>
                      <span>Edit</span>
                    </button>
                  </li>
                  <li>
                    <button class="dropdown-item" type="button" data-moo-task-copy>
                      <i class="lucide lucide-copy" data-icon="inline-start" aria-hidden="true"></i>
                      <span>Copy link</span>
                    </button>
                  </li>
                  <li>
                    <hr class="dropdown-divider">
                  </li>
                  <li>
                    <button class="dropdown-item" type="button" data-variant="destructive" data-moo-task-delete>
                      <i class="lucide lucide-trash-2" data-icon="inline-start" aria-hidden="true"></i>
                      <span>Delete task</span>
                    </button>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <dl class="datatable-card-list">
            <div class="datatable-card-row" data-datatable-detail-column="status">
              <dt>Status</dt>
              <dd class="datatable-card-value">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-circle" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>Open</span>
                </span>
              </dd>
            </div>
            <div class="datatable-card-row" data-datatable-detail-column="priority">
              <dt>Priority</dt>
              <dd class="datatable-card-value">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-arrow-up" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>High</span>
                </span>
              </dd>
            </div>
            <div class="datatable-card-row" data-datatable-detail-column="assignee">
              <dt>Assignee</dt>
              <dd class="datatable-card-value">Grace Hopper</dd>
            </div>
            <div class="datatable-card-row" data-datatable-detail-column="due">
              <dt>Due</dt>
              <dd class="datatable-card-value">
                <span class="text-nowrap text-body-secondary">Aug 08</span>
              </dd>
            </div>
          </dl>
        </article>
        <article class="datatable-card" data-datatable-card data-datatable-card-for="tsk-116">
          <div class="datatable-card-header">
            <label class="form-check datatable-card-select datatable-checkbox-target">
              <input class="form-check-input" type="checkbox" id="examples-tasks-datatable-tsk-116-card-select" aria-label="Select TSK-116" data-datatable-select-row>
            </label>
            <div class="datatable-card-heading">
              <div class="datatable-card-title">Utilities page anchor offsets</div>
            </div>
            <div class="datatable-card-actions">
              <div class="table-row-actions dropdown">
                <button
                      class="btn btn-ghost btn-icon-sm"
                      type="button"
                      data-bs-toggle="dropdown"
                      aria-expanded="false"
                      aria-label="Task actions for Utilities page anchor offsets"
                    >
                  <i class="lucide lucide-ellipsis-vertical" data-icon="inline-start" aria-hidden="true"></i>
                </button>
                <ul class="dropdown-menu dropdown-menu-end">
                  <li>
                    <button class="dropdown-item" type="button" data-moo-task-edit>
                      <i class="lucide lucide-pencil" data-icon="inline-start" aria-hidden="true"></i>
                      <span>Edit</span>
                    </button>
                  </li>
                  <li>
                    <button class="dropdown-item" type="button" data-moo-task-copy>
                      <i class="lucide lucide-copy" data-icon="inline-start" aria-hidden="true"></i>
                      <span>Copy link</span>
                    </button>
                  </li>
                  <li>
                    <hr class="dropdown-divider">
                  </li>
                  <li>
                    <button class="dropdown-item" type="button" data-variant="destructive" data-moo-task-delete>
                      <i class="lucide lucide-trash-2" data-icon="inline-start" aria-hidden="true"></i>
                      <span>Delete task</span>
                    </button>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <dl class="datatable-card-list">
            <div class="datatable-card-row" data-datatable-detail-column="status">
              <dt>Status</dt>
              <dd class="datatable-card-value">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-circle" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>Open</span>
                </span>
              </dd>
            </div>
            <div class="datatable-card-row" data-datatable-detail-column="priority">
              <dt>Priority</dt>
              <dd class="datatable-card-value">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-minus" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>Medium</span>
                </span>
              </dd>
            </div>
            <div class="datatable-card-row" data-datatable-detail-column="assignee">
              <dt>Assignee</dt>
              <dd class="datatable-card-value">Dana Ulery</dd>
            </div>
            <div class="datatable-card-row" data-datatable-detail-column="due">
              <dt>Due</dt>
              <dd class="datatable-card-value">
                <span class="text-nowrap text-body-secondary">Aug 20</span>
              </dd>
            </div>
          </dl>
        </article>
        <article class="datatable-card" data-datatable-card data-datatable-card-for="tsk-115" hidden>
          <div class="datatable-card-header">
            <label class="form-check datatable-card-select datatable-checkbox-target">
              <input class="form-check-input" type="checkbox" id="examples-tasks-datatable-tsk-115-card-select" aria-label="Select TSK-115" data-datatable-select-row>
            </label>
            <div class="datatable-card-heading">
              <div class="datatable-card-title">Data table card view spacing</div>
            </div>
            <div class="datatable-card-actions">
              <div class="table-row-actions dropdown">
                <button
                      class="btn btn-ghost btn-icon-sm"
                      type="button"
                      data-bs-toggle="dropdown"
                      aria-expanded="false"
                      aria-label="Task actions for Data table card view spacing"
                    >
                  <i class="lucide lucide-ellipsis-vertical" data-icon="inline-start" aria-hidden="true"></i>
                </button>
                <ul class="dropdown-menu dropdown-menu-end">
                  <li>
                    <button class="dropdown-item" type="button" data-moo-task-edit>
                      <i class="lucide lucide-pencil" data-icon="inline-start" aria-hidden="true"></i>
                      <span>Edit</span>
                    </button>
                  </li>
                  <li>
                    <button class="dropdown-item" type="button" data-moo-task-copy>
                      <i class="lucide lucide-copy" data-icon="inline-start" aria-hidden="true"></i>
                      <span>Copy link</span>
                    </button>
                  </li>
                  <li>
                    <hr class="dropdown-divider">
                  </li>
                  <li>
                    <button class="dropdown-item" type="button" data-variant="destructive" data-moo-task-delete>
                      <i class="lucide lucide-trash-2" data-icon="inline-start" aria-hidden="true"></i>
                      <span>Delete task</span>
                    </button>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <dl class="datatable-card-list">
            <div class="datatable-card-row" data-datatable-detail-column="status">
              <dt>Status</dt>
              <dd class="datatable-card-value">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-loader" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>In progress</span>
                </span>
              </dd>
            </div>
            <div class="datatable-card-row" data-datatable-detail-column="priority">
              <dt>Priority</dt>
              <dd class="datatable-card-value">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-minus" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>Medium</span>
                </span>
              </dd>
            </div>
            <div class="datatable-card-row" data-datatable-detail-column="assignee">
              <dt>Assignee</dt>
              <dd class="datatable-card-value">Katherine Johnson</dd>
            </div>
            <div class="datatable-card-row" data-datatable-detail-column="due">
              <dt>Due</dt>
              <dd class="datatable-card-value">
                <span class="text-nowrap text-body-secondary">Aug 14</span>
              </dd>
            </div>
          </dl>
        </article>
        <article class="datatable-card" data-datatable-card data-datatable-card-for="tsk-114" hidden>
          <div class="datatable-card-header">
            <label class="form-check datatable-card-select datatable-checkbox-target">
              <input class="form-check-input" type="checkbox" id="examples-tasks-datatable-tsk-114-card-select" aria-label="Select TSK-114" data-datatable-select-row>
            </label>
            <div class="datatable-card-heading">
              <div class="datatable-card-title">Command palette RTL traversal</div>
            </div>
            <div class="datatable-card-actions">
              <div class="table-row-actions dropdown">
                <button
                      class="btn btn-ghost btn-icon-sm"
                      type="button"
                      data-bs-toggle="dropdown"
                      aria-expanded="false"
                      aria-label="Task actions for Command palette RTL traversal"
                    >
                  <i class="lucide lucide-ellipsis-vertical" data-icon="inline-start" aria-hidden="true"></i>
                </button>
                <ul class="dropdown-menu dropdown-menu-end">
                  <li>
                    <button class="dropdown-item" type="button" data-moo-task-edit>
                      <i class="lucide lucide-pencil" data-icon="inline-start" aria-hidden="true"></i>
                      <span>Edit</span>
                    </button>
                  </li>
                  <li>
                    <button class="dropdown-item" type="button" data-moo-task-copy>
                      <i class="lucide lucide-copy" data-icon="inline-start" aria-hidden="true"></i>
                      <span>Copy link</span>
                    </button>
                  </li>
                  <li>
                    <hr class="dropdown-divider">
                  </li>
                  <li>
                    <button class="dropdown-item" type="button" data-variant="destructive" data-moo-task-delete>
                      <i class="lucide lucide-trash-2" data-icon="inline-start" aria-hidden="true"></i>
                      <span>Delete task</span>
                    </button>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <dl class="datatable-card-list">
            <div class="datatable-card-row" data-datatable-detail-column="status">
              <dt>Status</dt>
              <dd class="datatable-card-value">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-circle-alert" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>Blocked</span>
                </span>
              </dd>
            </div>
            <div class="datatable-card-row" data-datatable-detail-column="priority">
              <dt>Priority</dt>
              <dd class="datatable-card-value">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-arrow-up" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>High</span>
                </span>
              </dd>
            </div>
            <div class="datatable-card-row" data-datatable-detail-column="assignee">
              <dt>Assignee</dt>
              <dd class="datatable-card-value">Radia Perlman</dd>
            </div>
            <div class="datatable-card-row" data-datatable-detail-column="due">
              <dt>Due</dt>
              <dd class="datatable-card-value">
                <span class="text-nowrap text-body-secondary">Aug 11</span>
              </dd>
            </div>
          </dl>
        </article>
        <article class="datatable-card" data-datatable-card data-datatable-card-for="tsk-113" hidden>
          <div class="datatable-card-header">
            <label class="form-check datatable-card-select datatable-checkbox-target">
              <input class="form-check-input" type="checkbox" id="examples-tasks-datatable-tsk-113-card-select" aria-label="Select TSK-113" data-datatable-select-row>
            </label>
            <div class="datatable-card-heading">
              <div class="datatable-card-title">Icon sprite tree-shaking check</div>
            </div>
            <div class="datatable-card-actions">
              <div class="table-row-actions dropdown">
                <button
                      class="btn btn-ghost btn-icon-sm"
                      type="button"
                      data-bs-toggle="dropdown"
                      aria-expanded="false"
                      aria-label="Task actions for Icon sprite tree-shaking check"
                    >
                  <i class="lucide lucide-ellipsis-vertical" data-icon="inline-start" aria-hidden="true"></i>
                </button>
                <ul class="dropdown-menu dropdown-menu-end">
                  <li>
                    <button class="dropdown-item" type="button" data-moo-task-edit>
                      <i class="lucide lucide-pencil" data-icon="inline-start" aria-hidden="true"></i>
                      <span>Edit</span>
                    </button>
                  </li>
                  <li>
                    <button class="dropdown-item" type="button" data-moo-task-copy>
                      <i class="lucide lucide-copy" data-icon="inline-start" aria-hidden="true"></i>
                      <span>Copy link</span>
                    </button>
                  </li>
                  <li>
                    <hr class="dropdown-divider">
                  </li>
                  <li>
                    <button class="dropdown-item" type="button" data-variant="destructive" data-moo-task-delete>
                      <i class="lucide lucide-trash-2" data-icon="inline-start" aria-hidden="true"></i>
                      <span>Delete task</span>
                    </button>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <dl class="datatable-card-list">
            <div class="datatable-card-row" data-datatable-detail-column="status">
              <dt>Status</dt>
              <dd class="datatable-card-value">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-loader" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>In progress</span>
                </span>
              </dd>
            </div>
            <div class="datatable-card-row" data-datatable-detail-column="priority">
              <dt>Priority</dt>
              <dd class="datatable-card-value">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-arrow-down" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>Low</span>
                </span>
              </dd>
            </div>
            <div class="datatable-card-row" data-datatable-detail-column="assignee">
              <dt>Assignee</dt>
              <dd class="datatable-card-value">Susan Kare</dd>
            </div>
            <div class="datatable-card-row" data-datatable-detail-column="due">
              <dt>Due</dt>
              <dd class="datatable-card-value">
                <span class="text-nowrap text-body-secondary">Aug 21</span>
              </dd>
            </div>
          </dl>
        </article>
        <article class="datatable-card" data-datatable-card data-datatable-card-for="tsk-112" hidden>
          <div class="datatable-card-header">
            <label class="form-check datatable-card-select datatable-checkbox-target">
              <input class="form-check-input" type="checkbox" id="examples-tasks-datatable-tsk-112-card-select" aria-label="Select TSK-112" data-datatable-select-row>
            </label>
            <div class="datatable-card-heading">
              <div class="datatable-card-title">Theme toggle persistence audit</div>
            </div>
            <div class="datatable-card-actions">
              <div class="table-row-actions dropdown">
                <button
                      class="btn btn-ghost btn-icon-sm"
                      type="button"
                      data-bs-toggle="dropdown"
                      aria-expanded="false"
                      aria-label="Task actions for Theme toggle persistence audit"
                    >
                  <i class="lucide lucide-ellipsis-vertical" data-icon="inline-start" aria-hidden="true"></i>
                </button>
                <ul class="dropdown-menu dropdown-menu-end">
                  <li>
                    <button class="dropdown-item" type="button" data-moo-task-edit>
                      <i class="lucide lucide-pencil" data-icon="inline-start" aria-hidden="true"></i>
                      <span>Edit</span>
                    </button>
                  </li>
                  <li>
                    <button class="dropdown-item" type="button" data-moo-task-copy>
                      <i class="lucide lucide-copy" data-icon="inline-start" aria-hidden="true"></i>
                      <span>Copy link</span>
                    </button>
                  </li>
                  <li>
                    <hr class="dropdown-divider">
                  </li>
                  <li>
                    <button class="dropdown-item" type="button" data-variant="destructive" data-moo-task-delete>
                      <i class="lucide lucide-trash-2" data-icon="inline-start" aria-hidden="true"></i>
                      <span>Delete task</span>
                    </button>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <dl class="datatable-card-list">
            <div class="datatable-card-row" data-datatable-detail-column="status">
              <dt>Status</dt>
              <dd class="datatable-card-value">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-circle-check" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>Done</span>
                </span>
              </dd>
            </div>
            <div class="datatable-card-row" data-datatable-detail-column="priority">
              <dt>Priority</dt>
              <dd class="datatable-card-value">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-minus" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>Medium</span>
                </span>
              </dd>
            </div>
            <div class="datatable-card-row" data-datatable-detail-column="assignee">
              <dt>Assignee</dt>
              <dd class="datatable-card-value">Margaret Hamilton</dd>
            </div>
            <div class="datatable-card-row" data-datatable-detail-column="due">
              <dt>Due</dt>
              <dd class="datatable-card-value">
                <span class="text-nowrap text-body-secondary">Aug 05</span>
              </dd>
            </div>
          </dl>
        </article>
        <article class="datatable-card" data-datatable-card data-datatable-card-for="tsk-111" hidden>
          <div class="datatable-card-header">
            <label class="form-check datatable-card-select datatable-checkbox-target">
              <input class="form-check-input" type="checkbox" id="examples-tasks-datatable-tsk-111-card-select" aria-label="Select TSK-111" data-datatable-select-row>
            </label>
            <div class="datatable-card-heading">
              <div class="datatable-card-title">Changelog entry template</div>
            </div>
            <div class="datatable-card-actions">
              <div class="table-row-actions dropdown">
                <button
                      class="btn btn-ghost btn-icon-sm"
                      type="button"
                      data-bs-toggle="dropdown"
                      aria-expanded="false"
                      aria-label="Task actions for Changelog entry template"
                    >
                  <i class="lucide lucide-ellipsis-vertical" data-icon="inline-start" aria-hidden="true"></i>
                </button>
                <ul class="dropdown-menu dropdown-menu-end">
                  <li>
                    <button class="dropdown-item" type="button" data-moo-task-edit>
                      <i class="lucide lucide-pencil" data-icon="inline-start" aria-hidden="true"></i>
                      <span>Edit</span>
                    </button>
                  </li>
                  <li>
                    <button class="dropdown-item" type="button" data-moo-task-copy>
                      <i class="lucide lucide-copy" data-icon="inline-start" aria-hidden="true"></i>
                      <span>Copy link</span>
                    </button>
                  </li>
                  <li>
                    <hr class="dropdown-divider">
                  </li>
                  <li>
                    <button class="dropdown-item" type="button" data-variant="destructive" data-moo-task-delete>
                      <i class="lucide lucide-trash-2" data-icon="inline-start" aria-hidden="true"></i>
                      <span>Delete task</span>
                    </button>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <dl class="datatable-card-list">
            <div class="datatable-card-row" data-datatable-detail-column="status">
              <dt>Status</dt>
              <dd class="datatable-card-value">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-circle-check" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>Done</span>
                </span>
              </dd>
            </div>
            <div class="datatable-card-row" data-datatable-detail-column="priority">
              <dt>Priority</dt>
              <dd class="datatable-card-value">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-arrow-down" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>Low</span>
                </span>
              </dd>
            </div>
            <div class="datatable-card-row" data-datatable-detail-column="assignee">
              <dt>Assignee</dt>
              <dd class="datatable-card-value">Erna Schneider Hoover</dd>
            </div>
            <div class="datatable-card-row" data-datatable-detail-column="due">
              <dt>Due</dt>
              <dd class="datatable-card-value">
                <span class="text-nowrap text-body-secondary">Aug 03</span>
              </dd>
            </div>
          </dl>
        </article>
        <article class="datatable-card" data-datatable-card data-datatable-card-for="tsk-110" hidden>
          <div class="datatable-card-header">
            <label class="form-check datatable-card-select datatable-checkbox-target">
              <input class="form-check-input" type="checkbox" id="examples-tasks-datatable-tsk-110-card-select" aria-label="Select TSK-110" data-datatable-select-row>
            </label>
            <div class="datatable-card-heading">
              <div class="datatable-card-title">Focus-visible ring on dark</div>
            </div>
            <div class="datatable-card-actions">
              <div class="table-row-actions dropdown">
                <button
                      class="btn btn-ghost btn-icon-sm"
                      type="button"
                      data-bs-toggle="dropdown"
                      aria-expanded="false"
                      aria-label="Task actions for Focus-visible ring on dark"
                    >
                  <i class="lucide lucide-ellipsis-vertical" data-icon="inline-start" aria-hidden="true"></i>
                </button>
                <ul class="dropdown-menu dropdown-menu-end">
                  <li>
                    <button class="dropdown-item" type="button" data-moo-task-edit>
                      <i class="lucide lucide-pencil" data-icon="inline-start" aria-hidden="true"></i>
                      <span>Edit</span>
                    </button>
                  </li>
                  <li>
                    <button class="dropdown-item" type="button" data-moo-task-copy>
                      <i class="lucide lucide-copy" data-icon="inline-start" aria-hidden="true"></i>
                      <span>Copy link</span>
                    </button>
                  </li>
                  <li>
                    <hr class="dropdown-divider">
                  </li>
                  <li>
                    <button class="dropdown-item" type="button" data-variant="destructive" data-moo-task-delete>
                      <i class="lucide lucide-trash-2" data-icon="inline-start" aria-hidden="true"></i>
                      <span>Delete task</span>
                    </button>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <dl class="datatable-card-list">
            <div class="datatable-card-row" data-datatable-detail-column="status">
              <dt>Status</dt>
              <dd class="datatable-card-value">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-circle" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>Open</span>
                </span>
              </dd>
            </div>
            <div class="datatable-card-row" data-datatable-detail-column="priority">
              <dt>Priority</dt>
              <dd class="datatable-card-value">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-arrow-up" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>High</span>
                </span>
              </dd>
            </div>
            <div class="datatable-card-row" data-datatable-detail-column="assignee">
              <dt>Assignee</dt>
              <dd class="datatable-card-value">Evelyn Berezin</dd>
            </div>
            <div class="datatable-card-row" data-datatable-detail-column="due">
              <dt>Due</dt>
              <dd class="datatable-card-value">
                <span class="text-nowrap text-body-secondary">Aug 11</span>
              </dd>
            </div>
          </dl>
        </article>
        <article class="datatable-card" data-datatable-card data-datatable-card-for="tsk-109" hidden>
          <div class="datatable-card-header">
            <label class="form-check datatable-card-select datatable-checkbox-target">
              <input class="form-check-input" type="checkbox" id="examples-tasks-datatable-tsk-109-card-select" aria-label="Select TSK-109" data-datatable-select-row>
            </label>
            <div class="datatable-card-heading">
              <div class="datatable-card-title">Badge tone inventory on dark</div>
            </div>
            <div class="datatable-card-actions">
              <div class="table-row-actions dropdown">
                <button
                      class="btn btn-ghost btn-icon-sm"
                      type="button"
                      data-bs-toggle="dropdown"
                      aria-expanded="false"
                      aria-label="Task actions for Badge tone inventory on dark"
                    >
                  <i class="lucide lucide-ellipsis-vertical" data-icon="inline-start" aria-hidden="true"></i>
                </button>
                <ul class="dropdown-menu dropdown-menu-end">
                  <li>
                    <button class="dropdown-item" type="button" data-moo-task-edit>
                      <i class="lucide lucide-pencil" data-icon="inline-start" aria-hidden="true"></i>
                      <span>Edit</span>
                    </button>
                  </li>
                  <li>
                    <button class="dropdown-item" type="button" data-moo-task-copy>
                      <i class="lucide lucide-copy" data-icon="inline-start" aria-hidden="true"></i>
                      <span>Copy link</span>
                    </button>
                  </li>
                  <li>
                    <hr class="dropdown-divider">
                  </li>
                  <li>
                    <button class="dropdown-item" type="button" data-variant="destructive" data-moo-task-delete>
                      <i class="lucide lucide-trash-2" data-icon="inline-start" aria-hidden="true"></i>
                      <span>Delete task</span>
                    </button>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <dl class="datatable-card-list">
            <div class="datatable-card-row" data-datatable-detail-column="status">
              <dt>Status</dt>
              <dd class="datatable-card-value">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-circle" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>Open</span>
                </span>
              </dd>
            </div>
            <div class="datatable-card-row" data-datatable-detail-column="priority">
              <dt>Priority</dt>
              <dd class="datatable-card-value">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-arrow-down" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>Low</span>
                </span>
              </dd>
            </div>
            <div class="datatable-card-row" data-datatable-detail-column="assignee">
              <dt>Assignee</dt>
              <dd class="datatable-card-value">Mary Jackson</dd>
            </div>
            <div class="datatable-card-row" data-datatable-detail-column="due">
              <dt>Due</dt>
              <dd class="datatable-card-value">
                <span class="text-nowrap text-body-secondary">Aug 19</span>
              </dd>
            </div>
          </dl>
        </article>
        <article class="datatable-card" data-datatable-card data-datatable-card-for="tsk-108" hidden>
          <div class="datatable-card-header">
            <label class="form-check datatable-card-select datatable-checkbox-target">
              <input class="form-check-input" type="checkbox" id="examples-tasks-datatable-tsk-108-card-select" aria-label="Select TSK-108" data-datatable-select-row>
            </label>
            <div class="datatable-card-heading">
              <div class="datatable-card-title">Sticky table header shadow</div>
            </div>
            <div class="datatable-card-actions">
              <div class="table-row-actions dropdown">
                <button
                      class="btn btn-ghost btn-icon-sm"
                      type="button"
                      data-bs-toggle="dropdown"
                      aria-expanded="false"
                      aria-label="Task actions for Sticky table header shadow"
                    >
                  <i class="lucide lucide-ellipsis-vertical" data-icon="inline-start" aria-hidden="true"></i>
                </button>
                <ul class="dropdown-menu dropdown-menu-end">
                  <li>
                    <button class="dropdown-item" type="button" data-moo-task-edit>
                      <i class="lucide lucide-pencil" data-icon="inline-start" aria-hidden="true"></i>
                      <span>Edit</span>
                    </button>
                  </li>
                  <li>
                    <button class="dropdown-item" type="button" data-moo-task-copy>
                      <i class="lucide lucide-copy" data-icon="inline-start" aria-hidden="true"></i>
                      <span>Copy link</span>
                    </button>
                  </li>
                  <li>
                    <hr class="dropdown-divider">
                  </li>
                  <li>
                    <button class="dropdown-item" type="button" data-variant="destructive" data-moo-task-delete>
                      <i class="lucide lucide-trash-2" data-icon="inline-start" aria-hidden="true"></i>
                      <span>Delete task</span>
                    </button>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <dl class="datatable-card-list">
            <div class="datatable-card-row" data-datatable-detail-column="status">
              <dt>Status</dt>
              <dd class="datatable-card-value">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-loader" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>In progress</span>
                </span>
              </dd>
            </div>
            <div class="datatable-card-row" data-datatable-detail-column="priority">
              <dt>Priority</dt>
              <dd class="datatable-card-value">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-minus" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>Medium</span>
                </span>
              </dd>
            </div>
            <div class="datatable-card-row" data-datatable-detail-column="assignee">
              <dt>Assignee</dt>
              <dd class="datatable-card-value">Klara von Neumann</dd>
            </div>
            <div class="datatable-card-row" data-datatable-detail-column="due">
              <dt>Due</dt>
              <dd class="datatable-card-value">
                <span class="text-nowrap text-body-secondary">Aug 18</span>
              </dd>
            </div>
          </dl>
        </article>
        <article class="datatable-card" data-datatable-card data-datatable-card-for="tsk-107" hidden>
          <div class="datatable-card-header">
            <label class="form-check datatable-card-select datatable-checkbox-target">
              <input class="form-check-input" type="checkbox" id="examples-tasks-datatable-tsk-107-card-select" aria-label="Select TSK-107" data-datatable-select-row>
            </label>
            <div class="datatable-card-heading">
              <div class="datatable-card-title">Sheet focus return smoke test</div>
            </div>
            <div class="datatable-card-actions">
              <div class="table-row-actions dropdown">
                <button
                      class="btn btn-ghost btn-icon-sm"
                      type="button"
                      data-bs-toggle="dropdown"
                      aria-expanded="false"
                      aria-label="Task actions for Sheet focus return smoke test"
                    >
                  <i class="lucide lucide-ellipsis-vertical" data-icon="inline-start" aria-hidden="true"></i>
                </button>
                <ul class="dropdown-menu dropdown-menu-end">
                  <li>
                    <button class="dropdown-item" type="button" data-moo-task-edit>
                      <i class="lucide lucide-pencil" data-icon="inline-start" aria-hidden="true"></i>
                      <span>Edit</span>
                    </button>
                  </li>
                  <li>
                    <button class="dropdown-item" type="button" data-moo-task-copy>
                      <i class="lucide lucide-copy" data-icon="inline-start" aria-hidden="true"></i>
                      <span>Copy link</span>
                    </button>
                  </li>
                  <li>
                    <hr class="dropdown-divider">
                  </li>
                  <li>
                    <button class="dropdown-item" type="button" data-variant="destructive" data-moo-task-delete>
                      <i class="lucide lucide-trash-2" data-icon="inline-start" aria-hidden="true"></i>
                      <span>Delete task</span>
                    </button>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <dl class="datatable-card-list">
            <div class="datatable-card-row" data-datatable-detail-column="status">
              <dt>Status</dt>
              <dd class="datatable-card-value">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-circle-check" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>Done</span>
                </span>
              </dd>
            </div>
            <div class="datatable-card-row" data-datatable-detail-column="priority">
              <dt>Priority</dt>
              <dd class="datatable-card-value">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-arrow-up" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>High</span>
                </span>
              </dd>
            </div>
            <div class="datatable-card-row" data-datatable-detail-column="assignee">
              <dt>Assignee</dt>
              <dd class="datatable-card-value">Joan Clarke</dd>
            </div>
            <div class="datatable-card-row" data-datatable-detail-column="due">
              <dt>Due</dt>
              <dd class="datatable-card-value">
                <span class="text-nowrap text-body-secondary">Aug 06</span>
              </dd>
            </div>
          </dl>
        </article>
        <article class="datatable-card" data-datatable-card data-datatable-card-for="tsk-106" hidden>
          <div class="datatable-card-header">
            <label class="form-check datatable-card-select datatable-checkbox-target">
              <input class="form-check-input" type="checkbox" id="examples-tasks-datatable-tsk-106-card-select" aria-label="Select TSK-106" data-datatable-select-row>
            </label>
            <div class="datatable-card-heading">
              <div class="datatable-card-title">Contributing guide code fences</div>
            </div>
            <div class="datatable-card-actions">
              <div class="table-row-actions dropdown">
                <button
                      class="btn btn-ghost btn-icon-sm"
                      type="button"
                      data-bs-toggle="dropdown"
                      aria-expanded="false"
                      aria-label="Task actions for Contributing guide code fences"
                    >
                  <i class="lucide lucide-ellipsis-vertical" data-icon="inline-start" aria-hidden="true"></i>
                </button>
                <ul class="dropdown-menu dropdown-menu-end">
                  <li>
                    <button class="dropdown-item" type="button" data-moo-task-edit>
                      <i class="lucide lucide-pencil" data-icon="inline-start" aria-hidden="true"></i>
                      <span>Edit</span>
                    </button>
                  </li>
                  <li>
                    <button class="dropdown-item" type="button" data-moo-task-copy>
                      <i class="lucide lucide-copy" data-icon="inline-start" aria-hidden="true"></i>
                      <span>Copy link</span>
                    </button>
                  </li>
                  <li>
                    <hr class="dropdown-divider">
                  </li>
                  <li>
                    <button class="dropdown-item" type="button" data-variant="destructive" data-moo-task-delete>
                      <i class="lucide lucide-trash-2" data-icon="inline-start" aria-hidden="true"></i>
                      <span>Delete task</span>
                    </button>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <dl class="datatable-card-list">
            <div class="datatable-card-row" data-datatable-detail-column="status">
              <dt>Status</dt>
              <dd class="datatable-card-value">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-circle" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>Open</span>
                </span>
              </dd>
            </div>
            <div class="datatable-card-row" data-datatable-detail-column="priority">
              <dt>Priority</dt>
              <dd class="datatable-card-value">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-arrow-down" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>Low</span>
                </span>
              </dd>
            </div>
            <div class="datatable-card-row" data-datatable-detail-column="assignee">
              <dt>Assignee</dt>
              <dd class="datatable-card-value">Tim Berners-Lee</dd>
            </div>
            <div class="datatable-card-row" data-datatable-detail-column="due">
              <dt>Due</dt>
              <dd class="datatable-card-value">
                <span class="text-nowrap text-body-secondary">Aug 26</span>
              </dd>
            </div>
          </dl>
        </article>
        <article class="datatable-card" data-datatable-card data-datatable-card-for="tsk-105" hidden>
          <div class="datatable-card-header">
            <label class="form-check datatable-card-select datatable-checkbox-target">
              <input class="form-check-input" type="checkbox" id="examples-tasks-datatable-tsk-105-card-select" aria-label="Select TSK-105" data-datatable-select-row>
            </label>
            <div class="datatable-card-heading">
              <div class="datatable-card-title">Navbar dropdown keyboard pass</div>
            </div>
            <div class="datatable-card-actions">
              <div class="table-row-actions dropdown">
                <button
                      class="btn btn-ghost btn-icon-sm"
                      type="button"
                      data-bs-toggle="dropdown"
                      aria-expanded="false"
                      aria-label="Task actions for Navbar dropdown keyboard pass"
                    >
                  <i class="lucide lucide-ellipsis-vertical" data-icon="inline-start" aria-hidden="true"></i>
                </button>
                <ul class="dropdown-menu dropdown-menu-end">
                  <li>
                    <button class="dropdown-item" type="button" data-moo-task-edit>
                      <i class="lucide lucide-pencil" data-icon="inline-start" aria-hidden="true"></i>
                      <span>Edit</span>
                    </button>
                  </li>
                  <li>
                    <button class="dropdown-item" type="button" data-moo-task-copy>
                      <i class="lucide lucide-copy" data-icon="inline-start" aria-hidden="true"></i>
                      <span>Copy link</span>
                    </button>
                  </li>
                  <li>
                    <hr class="dropdown-divider">
                  </li>
                  <li>
                    <button class="dropdown-item" type="button" data-variant="destructive" data-moo-task-delete>
                      <i class="lucide lucide-trash-2" data-icon="inline-start" aria-hidden="true"></i>
                      <span>Delete task</span>
                    </button>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <dl class="datatable-card-list">
            <div class="datatable-card-row" data-datatable-detail-column="status">
              <dt>Status</dt>
              <dd class="datatable-card-value">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-loader" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>In progress</span>
                </span>
              </dd>
            </div>
            <div class="datatable-card-row" data-datatable-detail-column="priority">
              <dt>Priority</dt>
              <dd class="datatable-card-value">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-minus" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>Medium</span>
                </span>
              </dd>
            </div>
            <div class="datatable-card-row" data-datatable-detail-column="assignee">
              <dt>Assignee</dt>
              <dd class="datatable-card-value">Dorothy Vaughan</dd>
            </div>
            <div class="datatable-card-row" data-datatable-detail-column="due">
              <dt>Due</dt>
              <dd class="datatable-card-value">
                <span class="text-nowrap text-body-secondary">Aug 15</span>
              </dd>
            </div>
          </dl>
        </article>
        <article class="datatable-card" data-datatable-card data-datatable-card-for="tsk-104" hidden>
          <div class="datatable-card-header">
            <label class="form-check datatable-card-select datatable-checkbox-target">
              <input class="form-check-input" type="checkbox" id="examples-tasks-datatable-tsk-104-card-select" aria-label="Select TSK-104" data-datatable-select-row>
            </label>
            <div class="datatable-card-heading">
              <div class="datatable-card-title">Badge pill radius tokens</div>
            </div>
            <div class="datatable-card-actions">
              <div class="table-row-actions dropdown">
                <button
                      class="btn btn-ghost btn-icon-sm"
                      type="button"
                      data-bs-toggle="dropdown"
                      aria-expanded="false"
                      aria-label="Task actions for Badge pill radius tokens"
                    >
                  <i class="lucide lucide-ellipsis-vertical" data-icon="inline-start" aria-hidden="true"></i>
                </button>
                <ul class="dropdown-menu dropdown-menu-end">
                  <li>
                    <button class="dropdown-item" type="button" data-moo-task-edit>
                      <i class="lucide lucide-pencil" data-icon="inline-start" aria-hidden="true"></i>
                      <span>Edit</span>
                    </button>
                  </li>
                  <li>
                    <button class="dropdown-item" type="button" data-moo-task-copy>
                      <i class="lucide lucide-copy" data-icon="inline-start" aria-hidden="true"></i>
                      <span>Copy link</span>
                    </button>
                  </li>
                  <li>
                    <hr class="dropdown-divider">
                  </li>
                  <li>
                    <button class="dropdown-item" type="button" data-variant="destructive" data-moo-task-delete>
                      <i class="lucide lucide-trash-2" data-icon="inline-start" aria-hidden="true"></i>
                      <span>Delete task</span>
                    </button>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <dl class="datatable-card-list">
            <div class="datatable-card-row" data-datatable-detail-column="status">
              <dt>Status</dt>
              <dd class="datatable-card-value">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-circle-check" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>Done</span>
                </span>
              </dd>
            </div>
            <div class="datatable-card-row" data-datatable-detail-column="priority">
              <dt>Priority</dt>
              <dd class="datatable-card-value">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-minus" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>Medium</span>
                </span>
              </dd>
            </div>
            <div class="datatable-card-row" data-datatable-detail-column="assignee">
              <dt>Assignee</dt>
              <dd class="datatable-card-value">Dennis Ritchie</dd>
            </div>
            <div class="datatable-card-row" data-datatable-detail-column="due">
              <dt>Due</dt>
              <dd class="datatable-card-value">
                <span class="text-nowrap text-body-secondary">Aug 02</span>
              </dd>
            </div>
          </dl>
        </article>
        <article class="datatable-card" data-datatable-card data-datatable-card-for="tsk-103" hidden>
          <div class="datatable-card-header">
            <label class="form-check datatable-card-select datatable-checkbox-target">
              <input class="form-check-input" type="checkbox" id="examples-tasks-datatable-tsk-103-card-select" aria-label="Select TSK-103" data-datatable-select-row>
            </label>
            <div class="datatable-card-heading">
              <div class="datatable-card-title">Blocks preview frame reload</div>
            </div>
            <div class="datatable-card-actions">
              <div class="table-row-actions dropdown">
                <button
                      class="btn btn-ghost btn-icon-sm"
                      type="button"
                      data-bs-toggle="dropdown"
                      aria-expanded="false"
                      aria-label="Task actions for Blocks preview frame reload"
                    >
                  <i class="lucide lucide-ellipsis-vertical" data-icon="inline-start" aria-hidden="true"></i>
                </button>
                <ul class="dropdown-menu dropdown-menu-end">
                  <li>
                    <button class="dropdown-item" type="button" data-moo-task-edit>
                      <i class="lucide lucide-pencil" data-icon="inline-start" aria-hidden="true"></i>
                      <span>Edit</span>
                    </button>
                  </li>
                  <li>
                    <button class="dropdown-item" type="button" data-moo-task-copy>
                      <i class="lucide lucide-copy" data-icon="inline-start" aria-hidden="true"></i>
                      <span>Copy link</span>
                    </button>
                  </li>
                  <li>
                    <hr class="dropdown-divider">
                  </li>
                  <li>
                    <button class="dropdown-item" type="button" data-variant="destructive" data-moo-task-delete>
                      <i class="lucide lucide-trash-2" data-icon="inline-start" aria-hidden="true"></i>
                      <span>Delete task</span>
                    </button>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <dl class="datatable-card-list">
            <div class="datatable-card-row" data-datatable-detail-column="status">
              <dt>Status</dt>
              <dd class="datatable-card-value">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-circle" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>Open</span>
                </span>
              </dd>
            </div>
            <div class="datatable-card-row" data-datatable-detail-column="priority">
              <dt>Priority</dt>
              <dd class="datatable-card-value">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-arrow-down" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>Low</span>
                </span>
              </dd>
            </div>
            <div class="datatable-card-row" data-datatable-detail-column="assignee">
              <dt>Assignee</dt>
              <dd class="datatable-card-value">Hedy Lamarr</dd>
            </div>
            <div class="datatable-card-row" data-datatable-detail-column="due">
              <dt>Due</dt>
              <dd class="datatable-card-value">
                <span class="text-nowrap text-body-secondary">Aug 22</span>
              </dd>
            </div>
          </dl>
        </article>
        <article class="datatable-card" data-datatable-card data-datatable-card-for="tsk-101" hidden>
          <div class="datatable-card-header">
            <label class="form-check datatable-card-select datatable-checkbox-target">
              <input class="form-check-input" type="checkbox" id="examples-tasks-datatable-tsk-101-card-select" aria-label="Select TSK-101" data-datatable-select-row>
            </label>
            <div class="datatable-card-heading">
              <div class="datatable-card-title">Pagination boundary contrast</div>
            </div>
            <div class="datatable-card-actions">
              <div class="table-row-actions dropdown">
                <button
                      class="btn btn-ghost btn-icon-sm"
                      type="button"
                      data-bs-toggle="dropdown"
                      aria-expanded="false"
                      aria-label="Task actions for Pagination boundary contrast"
                    >
                  <i class="lucide lucide-ellipsis-vertical" data-icon="inline-start" aria-hidden="true"></i>
                </button>
                <ul class="dropdown-menu dropdown-menu-end">
                  <li>
                    <button class="dropdown-item" type="button" data-moo-task-edit>
                      <i class="lucide lucide-pencil" data-icon="inline-start" aria-hidden="true"></i>
                      <span>Edit</span>
                    </button>
                  </li>
                  <li>
                    <button class="dropdown-item" type="button" data-moo-task-copy>
                      <i class="lucide lucide-copy" data-icon="inline-start" aria-hidden="true"></i>
                      <span>Copy link</span>
                    </button>
                  </li>
                  <li>
                    <hr class="dropdown-divider">
                  </li>
                  <li>
                    <button class="dropdown-item" type="button" data-variant="destructive" data-moo-task-delete>
                      <i class="lucide lucide-trash-2" data-icon="inline-start" aria-hidden="true"></i>
                      <span>Delete task</span>
                    </button>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <dl class="datatable-card-list">
            <div class="datatable-card-row" data-datatable-detail-column="status">
              <dt>Status</dt>
              <dd class="datatable-card-value">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-circle-alert" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>Blocked</span>
                </span>
              </dd>
            </div>
            <div class="datatable-card-row" data-datatable-detail-column="priority">
              <dt>Priority</dt>
              <dd class="datatable-card-value">
                <span class="datatable-icon-label text-nowrap text-body-secondary">
                  <i class="lucide lucide-minus" data-icon="inline-start" aria-hidden="true"></i>
                  <span data-datatable-cell-label>Medium</span>
                </span>
              </dd>
            </div>
            <div class="datatable-card-row" data-datatable-detail-column="assignee">
              <dt>Assignee</dt>
              <dd class="datatable-card-value">Annie Easley</dd>
            </div>
            <div class="datatable-card-row" data-datatable-detail-column="due">
              <dt>Due</dt>
              <dd class="datatable-card-value">
                <span class="text-nowrap text-body-secondary">Aug 13</span>
              </dd>
            </div>
          </dl>
        </article>
      </div>
    </div>
    <div class="datatable-empty p-0 border-0" data-datatable-empty hidden role="status" aria-live="polite">
      <div class="empty-state">
        <div class="empty-state-header">
          <h3 class="empty-state-title">No matching results</h3>
          <p class="empty-state-description">Try a different search or clear the active filters.</p>
        </div>
        <div class="empty-state-actions">
          <button type="button" class="btn btn-outline-secondary btn-sm" data-datatable-empty-reset>
            Clear filters
            <i class="lucide lucide-x" data-icon="inline-end" aria-hidden="true"></i>
          </button>
        </div>
      </div>
    </div>
    <div class="datatable-pagination mt-3" data-datatable-pagination>
      <div class="datatable-page-size d-flex align-items-center gap-2">
        <div class="dropdown datatable-page-size-control">
          <button class="btn btn-outline-secondary btn-sm datatable-page-size-trigger" type="button" id="examples-tasks-datatable-page-size" data-bs-toggle="dropdown" aria-expanded="false" aria-labelledby="examples-tasks-datatable-page-size-label examples-tasks-datatable-page-size-value">
            <span id="examples-tasks-datatable-page-size-value" data-datatable-page-size-value>10</span>
            <i class="lucide lucide-chevron-down" data-icon="inline-end" aria-hidden="true"></i>
          </button>
          <ul class="dropdown-menu datatable-page-size-menu">
            <li>
              <button class="dropdown-item dropdown-item-check dropdown-item-check--radio active" type="button" data-datatable-page-size-option="10" aria-pressed="true">
                <span class="dropdown-item-check__indicator" aria-hidden="true">
                  <i class="lucide lucide-check" data-icon="inline-start" aria-hidden="true"></i>
                </span>
                <span>10</span>
              </button>
            </li>
            <li>
              <button class="dropdown-item dropdown-item-check dropdown-item-check--radio" type="button" data-datatable-page-size-option="20" aria-pressed="false">
                <span class="dropdown-item-check__indicator" aria-hidden="true">
                  <i class="lucide lucide-check" data-icon="inline-start" aria-hidden="true"></i>
                </span>
                <span>20</span>
              </button>
            </li>
            <li>
              <button class="dropdown-item dropdown-item-check dropdown-item-check--radio" type="button" data-datatable-page-size-option="30" aria-pressed="false">
                <span class="dropdown-item-check__indicator" aria-hidden="true">
                  <i class="lucide lucide-check" data-icon="inline-start" aria-hidden="true"></i>
                </span>
                <span>30</span>
              </button>
            </li>
            <li>
              <button class="dropdown-item dropdown-item-check dropdown-item-check--radio" type="button" data-datatable-page-size-option="40" aria-pressed="false">
                <span class="dropdown-item-check__indicator" aria-hidden="true">
                  <i class="lucide lucide-check" data-icon="inline-start" aria-hidden="true"></i>
                </span>
                <span>40</span>
              </button>
            </li>
            <li>
              <button class="dropdown-item dropdown-item-check dropdown-item-check--radio" type="button" data-datatable-page-size-option="50" aria-pressed="false">
                <span class="dropdown-item-check__indicator" aria-hidden="true">
                  <i class="lucide lucide-check" data-icon="inline-start" aria-hidden="true"></i>
                </span>
                <span>50</span>
              </button>
            </li>
          </ul>
        </div>
        <span class="small text-body-secondary text-nowrap" id="examples-tasks-datatable-page-size-label">Rows per page</span>
      </div>
      <span class="datatable-results-summary small text-body-secondary" data-datatable-results-summary role="status" aria-live="polite">Showing 1-10 of 24</span>
      <nav aria-label="Table pagination" class="datatable-page-nav">
        <ul class="pagination pagination-sm mb-0">
          <li class="page-item disabled">
            <button type="button" class="page-link" aria-label="Go to first page" data-datatable-page-first disabled>
              <i class="lucide lucide-chevrons-left" data-icon="inline-start" aria-hidden="true"></i>
            </button>
          </li>
          <li class="page-item disabled">
            <button type="button" class="page-link" aria-label="Go to previous page" data-datatable-page-prev disabled>
              <i class="lucide lucide-chevron-left" data-icon="inline-start" aria-hidden="true"></i>
            </button>
          </li>
          <li class="page-item active" aria-current="page" data-datatable-page-number="1">
            <button type="button" class="page-link" aria-label="Go to page 1" data-datatable-page-go="1">1</button>
          </li>
          <li class="page-item" data-datatable-page-number="2">
            <button type="button" class="page-link" aria-label="Go to page 2" data-datatable-page-go="2">2</button>
          </li>
          <li class="page-item" data-datatable-page-number="3">
            <button type="button" class="page-link" aria-label="Go to page 3" data-datatable-page-go="3">3</button>
          </li>
          <template data-datatable-page-numbers></template>
          <li class="page-item">
            <button type="button" class="page-link" aria-label="Go to next page" data-datatable-page-next>
              <i class="lucide lucide-chevron-right" data-icon="inline-start" aria-hidden="true"></i>
            </button>
          </li>
          <li class="page-item">
            <button type="button" class="page-link" aria-label="Go to last page" data-datatable-page-last>
              <i class="lucide lucide-chevrons-right" data-icon="inline-start" aria-hidden="true"></i>
            </button>
          </li>
        </ul>
      </nav>
    </div>
    <div class="datatable-bulk-actions" data-datatable-bulk-actions hidden role="status" aria-live="polite" aria-atomic="true">
      <button type="button" class="btn btn-outline-secondary btn-icon-xs rounded-circle" data-datatable-bulk-clear aria-label="Clear selection" data-bs-placement="top" data-bs-title="Clear selection <kbd>
        Escape
      </kbd>
      " data-bs-html="true">
      <i class="lucide lucide-x" data-icon="inline-start" aria-hidden="true"></i>
    </button>
    <div class="vr" aria-hidden="true"></div>
    <span class="datatable-bulk-summary small" data-datatable-bulk-summary>
      <span class="badge text-bg-dark rounded-pill" data-datatable-bulk-count>0</span>
      <span>tasks selected</span>
    </span>
    <div class="vr" aria-hidden="true"></div>
    <div class="dropdown">
      <button class="btn btn-outline-secondary btn-icon-sm" type="button" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Update status" data-bs-placement="top" data-bs-title="Update status">
        <i class="lucide lucide-circle-check-big" data-icon="inline-start" aria-hidden="true"></i>
      </button>
      <ul class="dropdown-menu">
        <li>
          <button class="dropdown-item" type="button" data-datatable-bulk-update="status" data-datatable-bulk-update-value="open">
            <i class="lucide lucide-circle" data-icon="inline-start" aria-hidden="true"></i>
            <span>Open</span>
          </button>
        </li>
        <li>
          <button class="dropdown-item" type="button" data-datatable-bulk-update="status" data-datatable-bulk-update-value="in-progress">
            <i class="lucide lucide-loader" data-icon="inline-start" aria-hidden="true"></i>
            <span>In progress</span>
          </button>
        </li>
        <li>
          <button class="dropdown-item" type="button" data-datatable-bulk-update="status" data-datatable-bulk-update-value="blocked">
            <i class="lucide lucide-circle-alert" data-icon="inline-start" aria-hidden="true"></i>
            <span>Blocked</span>
          </button>
        </li>
        <li>
          <button class="dropdown-item" type="button" data-datatable-bulk-update="status" data-datatable-bulk-update-value="done">
            <i class="lucide lucide-circle-check" data-icon="inline-start" aria-hidden="true"></i>
            <span>Done</span>
          </button>
        </li>
      </ul>
    </div>
    <div class="dropdown">
      <button class="btn btn-outline-secondary btn-icon-sm" type="button" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Set priority" data-bs-placement="top" data-bs-title="Set priority">
        <i class="lucide lucide-flag" data-icon="inline-start" aria-hidden="true"></i>
      </button>
      <ul class="dropdown-menu">
        <li>
          <button class="dropdown-item" type="button" data-datatable-bulk-update="priority" data-datatable-bulk-update-value="high">
            <i class="lucide lucide-arrow-up" data-icon="inline-start" aria-hidden="true"></i>
            <span>High</span>
          </button>
        </li>
        <li>
          <button class="dropdown-item" type="button" data-datatable-bulk-update="priority" data-datatable-bulk-update-value="medium">
            <i class="lucide lucide-minus" data-icon="inline-start" aria-hidden="true"></i>
            <span>Medium</span>
          </button>
        </li>
        <li>
          <button class="dropdown-item" type="button" data-datatable-bulk-update="priority" data-datatable-bulk-update-value="low">
            <i class="lucide lucide-arrow-down" data-icon="inline-start" aria-hidden="true"></i>
            <span>Low</span>
          </button>
        </li>
      </ul>
    </div>
    <button type="button" class="btn btn-icon-sm btn-danger" data-datatable-bulk-action="delete" aria-label="Delete tasks" data-bs-placement="top" data-bs-title="Delete tasks">
      <i class="lucide lucide-trash-2" data-icon="inline-start" aria-hidden="true"></i>
    </button>
  </div>
</div>
<template data-moo-task-skeleton>
  <div data-moo-task-skeleton-item>
    <table>
      <tbody>
        <tr data-datatable-row>
          <td class="datatable-col-select">
            <label class="form-check datatable-checkbox-target">
              <input class="form-check-input" type="checkbox" id="examples-tasks-datatable-skeleton-table-select" aria-label="Select row" data-datatable-select-row>
            </label>
          </td>
          <td class="datatable-col" data-datatable-column="task">
            <div class="datatable-item-cell">
              <span class="text-truncate" data-moo-fill="title"></span>
              <span data-moo-badge="tag">
                <span class="badge border text-body-secondary rounded-pill">Tag</span>
              </span>
            </div>
          </td>
          <td class="datatable-col" data-datatable-column="status">
            <span class="datatable-icon-label text-nowrap text-body-secondary" data-moo-choice="status">
              <i class="lucide lucide-circle" data-icon="inline-start" aria-hidden="true"></i>
              <span data-datatable-cell-label>Open</span>
            </span>
          </td>
          <td class="datatable-col" data-datatable-column="priority">
            <span class="datatable-icon-label text-nowrap text-body-secondary" data-moo-choice="priority">
              <i class="lucide lucide-minus" data-icon="inline-start" aria-hidden="true"></i>
              <span data-datatable-cell-label>Medium</span>
            </span>
          </td>
          <td class="datatable-col" data-datatable-column="assignee">
            <span data-moo-fill="assignee"></span>
          </td>
          <td class="datatable-col" data-datatable-column="due">
            <span class="text-nowrap text-body-secondary" data-moo-fill="due"></span>
          </td>
          <td class="datatable-col text-end" data-datatable-column="actions">
            <div class="table-row-actions dropdown">
              <button
                    class="btn btn-ghost btn-icon-sm"
                    type="button"
                    data-bs-toggle="dropdown"
                    aria-expanded="false"
                    aria-label="Task actions"
                  >
                <i class="lucide lucide-ellipsis-vertical" data-icon="inline-start" aria-hidden="true"></i>
              </button>
              <ul class="dropdown-menu dropdown-menu-end">
                <li>
                  <button class="dropdown-item" type="button" data-moo-task-edit>
                    <i class="lucide lucide-pencil" data-icon="inline-start" aria-hidden="true"></i>
                    <span>Edit</span>
                  </button>
                </li>
                <li>
                  <button class="dropdown-item" type="button" data-moo-task-copy>
                    <i class="lucide lucide-copy" data-icon="inline-start" aria-hidden="true"></i>
                    <span>Copy link</span>
                  </button>
                </li>
                <li>
                  <hr class="dropdown-divider">
                </li>
                <li>
                  <button class="dropdown-item" type="button" data-variant="destructive" data-moo-task-delete>
                    <i class="lucide lucide-trash-2" data-icon="inline-start" aria-hidden="true"></i>
                    <span>Delete task</span>
                  </button>
                </li>
              </ul>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
    <article class="datatable-card" data-datatable-card>
      <div class="datatable-card-header">
        <label class="form-check datatable-card-select datatable-checkbox-target">
          <input class="form-check-input" type="checkbox" id="examples-tasks-datatable-skeleton-card-select" aria-label="Select row" data-datatable-select-row>
        </label>
        <div class="datatable-card-heading">
          <div class="datatable-card-title" data-moo-fill="title"></div>
        </div>
        <div class="datatable-card-actions">
          <div class="table-row-actions dropdown">
            <button
                  class="btn btn-ghost btn-icon-sm"
                  type="button"
                  data-bs-toggle="dropdown"
                  aria-expanded="false"
                  aria-label="Task actions"
                >
              <i class="lucide lucide-ellipsis-vertical" data-icon="inline-start" aria-hidden="true"></i>
            </button>
            <ul class="dropdown-menu dropdown-menu-end">
              <li>
                <button class="dropdown-item" type="button" data-moo-task-edit>
                  <i class="lucide lucide-pencil" data-icon="inline-start" aria-hidden="true"></i>
                  <span>Edit</span>
                </button>
              </li>
              <li>
                <button class="dropdown-item" type="button" data-moo-task-copy>
                  <i class="lucide lucide-copy" data-icon="inline-start" aria-hidden="true"></i>
                  <span>Copy link</span>
                </button>
              </li>
              <li>
                <hr class="dropdown-divider">
              </li>
              <li>
                <button class="dropdown-item" type="button" data-variant="destructive" data-moo-task-delete>
                  <i class="lucide lucide-trash-2" data-icon="inline-start" aria-hidden="true"></i>
                  <span>Delete task</span>
                </button>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <dl class="datatable-card-list">
        <div class="datatable-card-row" data-datatable-detail-column="status">
          <dt>Status</dt>
          <dd class="datatable-card-value">
            <span class="datatable-icon-label text-nowrap text-body-secondary" data-moo-choice="status">
              <i class="lucide lucide-circle" data-icon="inline-start" aria-hidden="true"></i>
              <span data-datatable-cell-label>Open</span>
            </span>
          </dd>
        </div>
        <div class="datatable-card-row" data-datatable-detail-column="priority">
          <dt>Priority</dt>
          <dd class="datatable-card-value">
            <span class="datatable-icon-label text-nowrap text-body-secondary" data-moo-choice="priority">
              <i class="lucide lucide-minus" data-icon="inline-start" aria-hidden="true"></i>
              <span data-datatable-cell-label>Medium</span>
            </span>
          </dd>
        </div>
        <div class="datatable-card-row" data-datatable-detail-column="assignee">
          <dt>Assignee</dt>
          <dd class="datatable-card-value">
            <span data-moo-fill="assignee"></span>
          </dd>
        </div>
        <div class="datatable-card-row" data-datatable-detail-column="due">
          <dt>Due</dt>
          <dd class="datatable-card-value">
            <span class="text-nowrap text-body-secondary" data-moo-fill="due"></span>
          </dd>
        </div>
      </dl>
    </article>
  </div>
</template>
<div
    class="offcanvas offcanvas-end sheet"
    tabindex="-1"
    id="tasks-new-sheet"
      aria-label="Task details"
  >
  <div class="offcanvas-header">
    <h2 class="offcanvas-title" id="tasks-new-sheet-title">New task</h2>
    <button type="button" class="btn-close" aria-label="Close" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body scroll-fade-y no-scrollbar">
    <form class="field-form vstack gap-3">
      <p class="text-body-secondary mb-0" data-moo-task-sheet-copy>Fill in the details and add the task — it appears in the table right away. This is a live demo, so nothing is stored.</p>
      <div class="field">
        <label class="form-label" for="tasks-new-title">
          Title
          <span class="text-danger">*</span>
        </label>
        <input class="form-control" id="tasks-new-title" type="text" placeholder="e.g. Draft release notes" required>
      </div>
      <div class="field-group">
        <div class="field">
          <label class="form-label" for="tasks-new-tag">Tag</label>
          <select class="form-select" id="tasks-new-tag" data-selected="docs">
            <option value="docs" selected>Docs</option>
            <option value="a11y">A11y</option>
            <option value="visual">Visual</option>
            <option value="site">Site</option>
            <option value="core">Core</option>
          </select>
        </div>
        <div class="field">
          <label class="form-label" for="tasks-new-status">Status</label>
          <select class="form-select" id="tasks-new-status" data-selected="open">
            <option value="open" selected>Open</option>
            <option value="in-progress">In progress</option>
            <option value="blocked">Blocked</option>
            <option value="done">Done</option>
          </select>
        </div>
      </div>
      <div class="field-group">
        <div class="field">
          <label class="form-label" for="tasks-new-priority">Priority</label>
          <select class="form-select" id="tasks-new-priority" data-selected="medium">
            <option value="high">High</option>
            <option value="medium" selected>Medium</option>
            <option value="low">Low</option>
          </select>
        </div>
        <div class="field">
          <label class="form-label" for="tasks-new-due">Due</label>
          <input class="form-control" id="tasks-new-due" type="text" placeholder="e.g. Aug 21">
        </div>
      </div>
      <div class="field">
        <label class="form-label" for="tasks-new-assignee">Assignee</label>
        <input class="form-control" id="tasks-new-assignee" type="text" placeholder="e.g. Ada Lovelace">
      </div>
      <div class="d-flex justify-content-end gap-2 mt-auto pt-3">
        <button class="btn btn-outline-secondary" type="button" data-bs-dismiss="offcanvas">Cancel</button>
        <button class="btn btn-primary moo-task-sheet-submit" type="submit">Add task</button>
      </div>
    </form>
  </div>
</div>
<div
    class="modal fade modal--alert"
    id="tasks-delete-dialog"
    tabindex="-1"
      aria-labelledby="tasks-delete-dialog-title"
aria-describedby="tasks-delete-dialog-description"    aria-hidden="true"
data-bs-backdrop="static" data-bs-keyboard="false"  >
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header modal-header--alert">
        <span class="btn btn-icon-sm btn-outline-secondary flex-shrink-0" aria-hidden="true">
          <i class="lucide lucide-trash-2" data-icon="inline-start" aria-hidden="true"></i>
        </span>
        <div class="modal-header__content">
          <h1 class="modal-title" id="tasks-delete-dialog-title">Delete this task?</h1>
          <p class="modal-description" id="tasks-delete-dialog-description">This action cannot be undone.</p>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-outline-secondary" type="button" data-bs-dismiss="modal">Cancel</button>
        <button class="btn btn-danger moo-task-delete-confirm" type="button" data-bs-dismiss="modal">Delete</button>
      </div>
    </div>
  </div>
</div>
</div>

Usage

Use .datatable when users need to scan, compare, filter, sort, select, and page through server-rendered records without losing ordinary table semantics. Keep the base structure as Bootstrap table markup with meaningful column headers, row ids, and visible labels for every toolbar control.

Compose the surface from the same component contracts used elsewhere: search uses a Bootstrap form control, facets and row actions use Dropdown Menu, selection uses Checkbox, status uses Badge, overflow help can use Tooltip, empty results use the shared Empty component, and the footer uses Bootstrap pagination markup. That keeps each interactive part inspectable and replaceable instead of hiding the table inside a single opaque widget.

Render every row on the server first. The optional Moo UI runtime should only reorder, filter, paginate, select, or hide existing markup in the browser; it should not become the source of truth for the row data.

Responsive modes

Use the full table when comparison across columns matters. Use responsive cards when the same data should stay readable on tablet and mobile without squeezing every column into one narrow row. Use the user toggle when the layout should be the reader's own choice instead of a breakpoint the developer picked, the way Odoo's List/Kanban switcher works. Use auto to combine a responsive default with independent reader choices for narrow and wide screens.

Mode Behavior
Scroll Default. Keeps every column in the table and adds a horizontal scroll fade to Bootstrap's .table-responsive viewport.
Cards Opt-in. Keeps the desktop table unchanged, then renders each paginated row as a mobile card with a primary header and compact label/value metadata below the configured Bootstrap breakpoint.
Toggle Opt-in. Renders both the table and the card list at once and adds a Table/Cards toggle to the toolbar so the reader picks, independent of viewport. The choice persists per table id in localStorage.
Auto Opt-in with .datatable--responsive-auto, initial data-datatable-view="auto" and data-datatable-responsive-breakpoint="lg". Defaults to Cards below the configured breakpoint and Table at or above it. Set the breakpoint to sm, md, xl or xxl when needed. Table/Cards controls retain separate preferences for both width ranges, including when storage is blocked. Old global Toggle preferences are ignored in Auto mode.

Readable column widths

Catalog compositions give the first data column a minimum of 16rem. Selection and action columns are excluded. In the catalog's internal Jinja producer, which is not an npm API, set a column's min_width to a trusted CSS length to protect its readable width, or to false to remove the default. Several columns can have minima. For example, {key: 'name', min_width: false} and {key: 'reference', min_width: '20rem'} move protection to the reference column.

width remains the preferred width; the larger of that width and min_width is used. Without a minimum, the original width is retained. Native table layout can distribute extra space, and the existing responsive frame scrolls when space is insufficient. Cards retain their own layout. Preferred width declarations containing %, including percentage calculations, retain native table sizing and do not use minimum protection. Protected width declarations and minima must resolve to CSS lengths; use min_width: false for other native width values.

Hosts that generate their own HTML can use the existing header width declaration, for example <th style="width: max(0px, 16rem);">. Keep a preferred percentage width as a native declaration such as <th style="width: 50%;">.

Composition

The table surface is intentionally built from smaller public contracts. Facets and row actions are Dropdown Menu, selection uses Checkbox, the floating action bar uses Button and Tooltip, status chips use Badge, and empty results use Empty. The footer uses Bootstrap pagination markup.

Feature Contract
Facets Dropdown Menu buttons toggle values stored on each row with data-datatable-facet-* attributes.
Sorting Column headers expose aria-sort, neutral icons, and active asc/desc icons.
Visibility The View dropdown toggles hideable columns without removing their data from the DOM.
Selection Checkbox macro instances keep row and page selection state; the bulk bar appears only when rows are selected.
Empty The shared .empty-state surface sits inside [data-datatable-empty]. DataTable owns its message, visibility, and clear-filters action.
Pagination Bootstrap pagination buttons move through the current filtered row set.

HTML Anatomy

These hooks describe the rendered public HTML. They are safe for server-rendered apps to generate directly or through their own template helpers.

Selector Purpose
Root
.datatable Root element for one interactive table instance and its page-size default.
Toolbar
[data-datatable-toolbar] Search, facets, reset action, and column visibility controls.
[data-datatable-search] Search input that filters against each row's server-rendered search string.
[data-datatable-facet] Facet dropdown root that groups multi-select filter options by key.
.datatable-view-toggle Table/Cards toolbar control so the reader, not only the breakpoint, picks the layout.
Table Surface
.datatable-frame Rounded, bordered table viewport around Bootstrap's responsive table wrapper.
.table-responsive.scroll-fade-x Horizontal viewport for full-width tables when every column should remain inspectable.
th[data-datatable-column] Column ownership hook used by sorting, hiding, and cell updates.
tr[data-datatable-row] Server-rendered row with search text, facet values, and stable id.
[data-datatable-select-row] Native checkbox for row selection.
td[data-datatable-sort-value] Optional sort value that avoids parsing rich cell content.
Cards
.datatable-card-frame Responsive card list that mirrors table rows with title and action areas in the card header, then secondary fields in the card body.
[data-datatable-cards] Responsive card viewport kept in pagination, sorting, filtering, selection, and column-visibility sync with the table.
State & Actions
[data-datatable-empty] DataTable-owned live region containing the shared .empty-state component. DataTable controls its message and visibility; clear filters is offered when existing rows are filtered out.
[data-datatable-results-summary] Live page-range summary such as Showing 1-10 of 24, or No results when nothing matches.
[data-datatable-select-all] Selects or clears the current page rows from the shared toolbar, keeping the control in the same place in table and card views.
[data-datatable-bulk-actions] Fixed selection toolbar shown after at least one row is selected.
Pagination
[data-datatable-pagination] Pagination region that owns page size and page navigation controls. 
<div class="datatable" data-datatable-page-size="10">
  <div class="datatable-toolbar">
    <input class="form-control form-control-sm datatable-search" type="search" data-datatable-search>
  </div>
  <div class="datatable-frame">
    <div class="table-responsive">
      <table class="table datatable-table">
        <thead>
          <tr>
            <th scope="col" data-datatable-column="item" aria-sort="ascending">
              <button class="btn btn-ghost btn-sm datatable-sort-trigger" type="button" data-bs-toggle="dropdown" data-datatable-sort-key="item">Item</button>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr id="review-1042" data-datatable-row data-datatable-search="REV-1042 Combobox keyboard pass" data-datatable-facet-status="ready">
            <td data-datatable-column="item" data-datatable-sort-value="combobox keyboard pass">Combobox keyboard pass</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div class="datatable-empty p-0 border-0" data-datatable-empty hidden role="status" aria-live="polite">
    <div class="empty-state">
      <div class="empty-state-header">
        <h3 class="empty-state-title">No matching results</h3>
        <p class="empty-state-description">Try a different search or clear the active filters.</p>
      </div>
      <div class="empty-state-actions">
        <button class="btn btn-outline-secondary btn-sm" type="button" data-datatable-empty-reset>
          Clear filters
          <i class="lucide lucide-x" data-icon="inline-end" aria-hidden="true"></i>
        </button>
      </div>
    </div>
  </div>
</div>

JavaScript

Bootstrap ships table styles, not a table behavior plugin. Moo UI owns the optional Data Table module because sorting, free-text filtering, faceted filtering, column visibility, row selection, bulk actions, and pagination do not have a Bootstrap plugin counterpart.

Importing the module has no document-wide side effect. Initialize only a .datatable root your application owns; repeated initialization returns the same instance, and dispose() releases listeners and Bootstrap tooltip instances owned by the table. 

import DataTable from "@wpmoo/ui/datatable.js";

const element = document.querySelector(".datatable");

if (element) {
  const table = DataTable.getOrCreateInstance(element);

  // Later, release listeners and tooltip instances.
  table.dispose();
}

Features

Enable features by rendering the matching public hooks. The runtime reads those hooks from existing HTML instead of fetching data or mounting a client-side table.

Feature How to activate it
Faceted filters Pass facet definitions and row facet attributes such as data-datatable-facet-status.
Sortable columns Mark sortable headers with data-datatable-sort-key and give cells stable data-datatable-sort-value values when rich markup is used.
Column visibility Keep optional columns in the View dropdown. Identity and row-action columns stay fixed and do not appear as visibility toggles.
Responsive cards Render the card frame alongside the table so mobile and tablet rows can show title and actions in the header, then secondary fields below.
Reader-controlled layout Render .datatable-view-toggle with table and card frames; the reader's choice persists per table id in localStorage, independent of viewport.
Row selection Render native row checkboxes with stable row ids. Table rows and responsive cards receive selected-state feedback, while the bulk bar announces the current selection.
Bulk actions Use button or dropdown actions with data-datatable-bulk-action or data-datatable-bulk-update.
Empty and result feedback The runtime announces the current range and shows the shared Empty surface when no rows match. It offers clear filters for filtered results; when no rows remain, it shows No rows to display without a filter action.
Pagination Set the default page size on the root and let the footer controls move through the filtered row set.

Component reference

Status
Accepted
Runtime
optional Moo UI ESM
Markup
Moo UI documented extension
Reference

Data Table composes Bootstrap's table, dropdown, form, and pagination markup; for the base table structure see the Bootstrap Tables documentation.

For faceted filters, row actions, and bulk-action menus, see the Bootstrap Dropdown documentation.

For the shared empty-result surface, typography, and actions, see the Empty component documentation.

Pages
Home Introduction Installation Layout Examples Account Appearance FAQ Forgot Password Overview Pricing Profile Sign In Sign Up Tasks Users Components Blocks Charts Utilities Support & Evidence Contributing AI Usage Changelog License
Components
Accordion Alert Alert Dialog Avatar Badge Breadcrumb Button Button Group Card Chart Checkbox Close Button Collapsible Combobox Context Menu Data Table Date Picker Dialog Dropdown Menu Empty Field Form Input Input Group Kbd Menubar Native Select Navigation Pagination Popover Progress Radio Group Separator Sheet Sidebar Skeleton Slider Spinner Switch Table Table of Contents Tabs Textarea Toast Toggle Group Tooltip Typography
Utilities
Border Scroll Fade
Blocks
Accordion Panels Sidebar (Floating) Sidebar (Inset)
↵ Go to Page

Settings

Theme
Choose how Moo UI looks on this device.
Sidebar
Choose how the sidebar sits on the page.
Theme Builder
Tune catalog tokens and chart colors for this browser.
Base color
Theme color
Chart color
Heading font
Body font
Radius
Direction
Choose the reading direction. RTL flips the layout live.
Reset

Restore the default appearance.