# Order Detail

This is what a detail page looks like when a user clicks "View" on a table row. The URL would be `/account/orders/detail?id=4821` — the `data-param` reads the query string and fetches the matching record.

On a real site this page would be auth-gated with `data-auth: required`, so unauthenticated users are redirected to login first.

```
data: my-orders
data-display: detail
data-param: id
data-key: id
data-auth: required
data-field: Order Number: order_number
data-field: Status: status
data-field: Total: {{currency}}{{amount}}
data-field: Shipping: {{street}}, {{city}}, {{state}} {{zip}}
data-field: Items: items_description
```

<div class="sitemd-data" style="margin:var(--space-lg) 0">
<div class="sitemd-data-content">
<dl class="sitemd-data-detail">
<div class="data-detail-row">
<dt class="data-detail-label">Order Number</dt>
<dd class="data-detail-value">ORD-4821</dd>
</div>
<div class="data-detail-row">
<dt class="data-detail-label">Status</dt>
<dd class="data-detail-value">Shipped</dd>
</div>
<div class="data-detail-row">
<dt class="data-detail-label">Total</dt>
<dd class="data-detail-value">$129.00</dd>
</div>
<div class="data-detail-row">
<dt class="data-detail-label">Shipping</dt>
<dd class="data-detail-value">742 Evergreen Terrace, Springfield, IL 62704</dd>
</div>
<div class="data-detail-row">
<dt class="data-detail-label">Items</dt>
<dd class="data-detail-value">1x Mechanical Keyboard (Cherry MX Brown)</dd>
</div>
</dl>
</div>
</div>

[&larr; Back to Dynamic Data docs](/docs/dynamic-data)