Tables

<article class="athena-card p-4">
  <div class="d-flex flex-wrap justify-content-between align-items-center gap-3 mb-3">
    <div>
      <h2 class="h4 mb-1">Athena Rich Table</h2>
      <p class="text-secondary mb-0">Responsive, searchable, export-ready data table.</p>
    </div>
    <div class="athena-filter-bar" role="group" aria-label="Table filters">
      <button class="btn btn-outline-secondary btn-sm" type="button">All</button>
      <button class="btn btn-outline-secondary btn-sm" type="button">Active</button>
      <button class="btn btn-outline-secondary btn-sm" type="button">At Risk</button>
    </div>
  </div>
  <div class="table-responsive">
    <table class="table table-hover align-middle w-100" data-athena-table="rich">
      <caption>Athena Rich Table</caption>
      <thead>
        <tr><th scope="col">Account</th><th scope="col">Owner</th><th scope="col">Status</th><th scope="col">Value</th><th scope="col">Updated</th></tr>
      </thead>
      <tbody>
        <tr><th scope="row">Northstar Labs</th><td>Rina Park</td><td><span class="badge text-bg-success">Healthy</span></td><td>$42,800</td><td>Today</td></tr>
<tr><th scope="row">Orbital Health</th><td>Marco Silva</td><td><span class="badge text-bg-warning">Review</span></td><td>$31,200</td><td>Yesterday</td></tr>
<tr><th scope="row">Civic Cloud</th><td>Aisha Khan</td><td><span class="badge text-bg-danger">At Risk</span></td><td>$18,450</td><td>May 28</td></tr>
<tr><th scope="row">Summit Retail</th><td>Tomas Reed</td><td><span class="badge text-bg-success">Healthy</span></td><td>$25,900</td><td>May 27</td></tr>
<tr><th scope="row">Helio Finance</th><td>Mei Lin</td><td><span class="badge text-bg-info">Pending</span></td><td>$12,700</td><td>May 25</td></tr>
<tr><th scope="row">Atlas Works</th><td>Noah Chen</td><td><span class="badge text-bg-success">Healthy</span></td><td>$36,400</td><td>May 23</td></tr>
      </tbody>
    </table>
  </div>
</article>

    <section class="row g-4 mt-1">

      <div class="col-xl-6">
        <article class="athena-card p-4 h-100">
          <div class="d-flex flex-wrap justify-content-between align-items-start gap-3 mb-3">
            <div>
              <span class="badge text-bg-primary mb-3">table-sm</span>
              <h2 class="h4">Compact Operations Table</h2>
              <p class="text-secondary mb-0">Use compact rows for dense operational views where users scan many records.</p>
            </div>
          </div>
          <div class="table-responsive">
            <table class="table table-sm align-middle">
              <caption>Compact operations table</caption>
              <thead>
                <tr>
                  <th scope="col">Order</th>
                  <th scope="col">Warehouse</th>
                  <th scope="col">Items</th>
                  <th scope="col">State</th>
                </tr>
              </thead>
              <tbody>
                <tr><th scope="row">ORD-1048</th><td>Leeds</td><td>14</td><td><span class="badge text-bg-success">Packed</span></td></tr>
                <tr><th scope="row">ORD-1049</th><td>Bristol</td><td>6</td><td><span class="badge text-bg-warning">Picking</span></td></tr>
                <tr><th scope="row">ORD-1050</th><td>Glasgow</td><td>22</td><td><span class="badge text-bg-info">Queued</span></td></tr>
                <tr><th scope="row">ORD-1051</th><td>Cardiff</td><td>9</td><td><span class="badge text-bg-success">Packed</span></td></tr>
              </tbody>
            </table>
          </div>
        </article>
      </div>

      <div class="col-xl-6">
        <article class="athena-card p-4 h-100">
          <div class="d-flex flex-wrap justify-content-between align-items-start gap-3 mb-3">
            <div>
              <span class="badge text-bg-secondary mb-3">table-striped</span>
              <h2 class="h4">Striped Billing Table</h2>
              <p class="text-secondary mb-0">Striped rows help separate medium-density financial or invoice records.</p>
            </div>
          </div>
          <div class="table-responsive">
            <table class="table table-striped align-middle">
              <caption>Striped billing table</caption>
              <thead>
                <tr>
                  <th scope="col">Invoice</th>
                  <th scope="col">Client</th>
                  <th scope="col">Amount</th>
                  <th scope="col">Due</th>
                </tr>
              </thead>
              <tbody>
                <tr><th scope="row">INV-2401</th><td>Northstar Labs</td><td>GBP 4,200</td><td>12 Jun</td></tr>
                <tr><th scope="row">INV-2402</th><td>Orbital Health</td><td>GBP 3,150</td><td>15 Jun</td></tr>
                <tr><th scope="row">INV-2403</th><td>Civic Cloud</td><td>GBP 2,840</td><td>18 Jun</td></tr>
                <tr><th scope="row">INV-2404</th><td>Summit Retail</td><td>GBP 5,600</td><td>21 Jun</td></tr>
              </tbody>
            </table>
          </div>
        </article>
      </div>

    </section>