{
  "id": "evidence-office-ledger-table",
  "name": "Ledger Table",
  "theme": "evidence-office",
  "category": "Data & Reports",
  "description": "A wide transaction table with the reference column frozen, a running balance, and totals in a footer row that never scrolls away.",
  "layout": "Full-bleed table in a horizontal scroller with a sticky first column and sticky header; the total row is a real tfoot pinned to the bottom of the scroll box.",
  "modules": [
    {
      "key": "head",
      "name": "Report header",
      "html": "\n<header class=\"rh\"><div><h1>General ledger</h1><p>Cost centre 4120 · 1 April – 30 June</p></div><div class=\"rh-act\"><button type=\"button\">Export CSV</button><button type=\"button\" class=\"pri\">Reconcile</button></div></header>"
    },
    {
      "key": "table",
      "name": "Ledger",
      "html": "\n<div class=\"scroll\">\n  <table>\n    <thead><tr><th scope=\"col\" class=\"stick\">Ref</th><th scope=\"col\">Date</th><th scope=\"col\">Description</th><th scope=\"col\">Account</th><th scope=\"col\" class=\"r\">Debit</th><th scope=\"col\" class=\"r\">Credit</th><th scope=\"col\" class=\"r\">Balance</th></tr></thead>\n    <tbody>\n      <tr><th scope=\"row\" class=\"stick\">JV-1140</th><td>02 Apr</td><td>Opening balance carried forward</td><td>4120-00</td><td class=\"r\">—</td><td class=\"r\">—</td><td class=\"r b\">18,402.11</td></tr>\n      <tr><th scope=\"row\" class=\"stick\">JV-1141</th><td>08 Apr</td><td>Consultee fees, Q1 batch</td><td>4120-14</td><td class=\"r\">2,410.00</td><td class=\"r\">—</td><td class=\"r b\">15,992.11</td></tr>\n      <tr><th scope=\"row\" class=\"stick\">JV-1147</th><td>14 Apr</td><td>Recharge, planning support</td><td>4120-02</td><td class=\"r\">—</td><td class=\"r\">3,100.00</td><td class=\"r b\">19,092.11</td></tr>\n      <tr><th scope=\"row\" class=\"stick\">JV-1152</th><td>27 Apr</td><td>Print and postage</td><td>4120-31</td><td class=\"r\">614.80</td><td class=\"r\">—</td><td class=\"r b\">18,477.31</td></tr>\n      <tr><th scope=\"row\" class=\"stick\">JV-1160</th><td>11 May</td><td>Legal opinion, Ferry Road</td><td>4120-14</td><td class=\"r\">4,850.00</td><td class=\"r\">—</td><td class=\"r b\">13,627.31</td></tr>\n      <tr><th scope=\"row\" class=\"stick\">JV-1166</th><td>02 Jun</td><td>Fee income, householder</td><td>4120-01</td><td class=\"r\">—</td><td class=\"r\">7,220.00</td><td class=\"r b\">20,847.31</td></tr>\n      <tr><th scope=\"row\" class=\"stick\">JV-1171</th><td>21 Jun</td><td>Software, case management</td><td>4120-40</td><td class=\"r\">1,980.00</td><td class=\"r\">—</td><td class=\"r b\">18,867.31</td></tr>\n    </tbody>\n    <tfoot><tr><th scope=\"row\" class=\"stick\">Total</th><td colspan=\"3\">7 entries</td><td class=\"r\">9,854.80</td><td class=\"r\">10,320.00</td><td class=\"r b\">18,867.31</td></tr></tfoot>\n  </table>\n</div>"
    },
    {
      "key": "foot",
      "name": "Provenance",
      "html": "\n<footer class=\"prov\"><div><span>Extracted</span> 30 June, 23:58</div><div><span>By</span> M. Okafor</div><div><span>Basis</span> Accrual, unaudited</div></footer>"
    }
  ],
  "moduleCount": 3,
  "reorderable": true,
  "meta": {
    "id": "evidence-office-ledger-table",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-08-29T18:23:29+09:00",
    "updatedAt": "2026-08-29T18:23:29+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/evidence-office-ledger-table.json",
  "structure": "Full-bleed table in a horizontal scroller with a sticky first column and sticky header; the total row is a real tfoot pinned to the bottom of the scroll box.",
  "html": "<div class=\"dz dz-evidence-office-ledger-table\" data-design=\"evidence-office-ledger-table\" data-theme=\"evidence-office\">\n<section class=\"dz-mod\" data-mod=\"head\" aria-label=\"Report header\">\n<header class=\"rh\"><div><h1>General ledger</h1><p>Cost centre 4120 · 1 April – 30 June</p></div><div class=\"rh-act\"><button type=\"button\">Export CSV</button><button type=\"button\" class=\"pri\">Reconcile</button></div></header></section>\n<section class=\"dz-mod\" data-mod=\"table\" aria-label=\"Ledger\">\n<div class=\"scroll\">\n  <table>\n    <thead><tr><th scope=\"col\" class=\"stick\">Ref</th><th scope=\"col\">Date</th><th scope=\"col\">Description</th><th scope=\"col\">Account</th><th scope=\"col\" class=\"r\">Debit</th><th scope=\"col\" class=\"r\">Credit</th><th scope=\"col\" class=\"r\">Balance</th></tr></thead>\n    <tbody>\n      <tr><th scope=\"row\" class=\"stick\">JV-1140</th><td>02 Apr</td><td>Opening balance carried forward</td><td>4120-00</td><td class=\"r\">—</td><td class=\"r\">—</td><td class=\"r b\">18,402.11</td></tr>\n      <tr><th scope=\"row\" class=\"stick\">JV-1141</th><td>08 Apr</td><td>Consultee fees, Q1 batch</td><td>4120-14</td><td class=\"r\">2,410.00</td><td class=\"r\">—</td><td class=\"r b\">15,992.11</td></tr>\n      <tr><th scope=\"row\" class=\"stick\">JV-1147</th><td>14 Apr</td><td>Recharge, planning support</td><td>4120-02</td><td class=\"r\">—</td><td class=\"r\">3,100.00</td><td class=\"r b\">19,092.11</td></tr>\n      <tr><th scope=\"row\" class=\"stick\">JV-1152</th><td>27 Apr</td><td>Print and postage</td><td>4120-31</td><td class=\"r\">614.80</td><td class=\"r\">—</td><td class=\"r b\">18,477.31</td></tr>\n      <tr><th scope=\"row\" class=\"stick\">JV-1160</th><td>11 May</td><td>Legal opinion, Ferry Road</td><td>4120-14</td><td class=\"r\">4,850.00</td><td class=\"r\">—</td><td class=\"r b\">13,627.31</td></tr>\n      <tr><th scope=\"row\" class=\"stick\">JV-1166</th><td>02 Jun</td><td>Fee income, householder</td><td>4120-01</td><td class=\"r\">—</td><td class=\"r\">7,220.00</td><td class=\"r b\">20,847.31</td></tr>\n      <tr><th scope=\"row\" class=\"stick\">JV-1171</th><td>21 Jun</td><td>Software, case management</td><td>4120-40</td><td class=\"r\">1,980.00</td><td class=\"r\">—</td><td class=\"r b\">18,867.31</td></tr>\n    </tbody>\n    <tfoot><tr><th scope=\"row\" class=\"stick\">Total</th><td colspan=\"3\">7 entries</td><td class=\"r\">9,854.80</td><td class=\"r\">10,320.00</td><td class=\"r b\">18,867.31</td></tr></tfoot>\n  </table>\n</div></section>\n<section class=\"dz-mod\" data-mod=\"foot\" aria-label=\"Provenance\">\n<footer class=\"prov\"><div><span>Extracted</span> 30 June, 23:58</div><div><span>By</span> M. Okafor</div><div><span>Basis</span> Accrual, unaudited</div></footer></section>\n</div>",
  "css": "\n.dz-evidence-office-ledger-table { background: var(--background); color: var(--foreground); font-family: var(--pv-body); padding: 24px 0 20px; }\n.dz-evidence-office-ledger-table .rh { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 0 26px 12px; border-bottom: var(--pv-bw) solid var(--foreground); }\n.dz-evidence-office-ledger-table .rh h1 { font-family: var(--pv-display); font-size: 21px; letter-spacing: -.02em; margin: 0 0 3px; }\n.dz-evidence-office-ledger-table .rh p { margin: 0; font-size: 12.5px; color: var(--muted-foreground); }\n.dz-evidence-office-ledger-table .rh-act { display: flex; gap: 8px; }\n.dz-evidence-office-ledger-table .rh-act button { font: inherit; font-size: 12.5px; padding: 7px 15px; border: var(--pv-bw) solid var(--border); border-radius: var(--pv-radius-sm); background: var(--card); color: var(--foreground); cursor: pointer; transition: background var(--dur) var(--ease); }\n.dz-evidence-office-ledger-table .rh-act button:hover { background: var(--secondary); }\n.dz-evidence-office-ledger-table .rh-act .pri { border-color: var(--primary); color: var(--primary); }\n.dz-evidence-office-ledger-table .scroll { overflow-x: auto; max-height: 340px; overflow-y: auto; margin-top: 0; }\n.dz-evidence-office-ledger-table table { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; font-size: 13px; }\n.dz-evidence-office-ledger-table th, .dz-evidence-office-ledger-table td { padding: 9px 14px; border-bottom: var(--pv-bw) solid var(--border); text-align: left; white-space: nowrap; }\n.dz-evidence-office-ledger-table thead th { position: sticky; top: 0; z-index: 2; background: var(--background); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-foreground); font-weight: 500; border-bottom: var(--pv-bw) solid var(--foreground); }\n.dz-evidence-office-ledger-table .stick { position: sticky; left: 0; background: var(--background); font-family: var(--pv-mono); font-weight: 400; color: var(--primary); text-align: left; border-right: var(--pv-bw) solid var(--border); }\n.dz-evidence-office-ledger-table thead .stick { z-index: 3; color: var(--muted-foreground); }\n.dz-evidence-office-ledger-table .r { text-align: right; font-family: var(--pv-mono); font-variant-numeric: tabular-nums; }\n.dz-evidence-office-ledger-table .b { color: var(--foreground); }\n.dz-evidence-office-ledger-table tbody tr { transition: background var(--dur) var(--ease); }\n.dz-evidence-office-ledger-table tbody tr:hover td, .dz-evidence-office-ledger-table tbody tr:hover .stick { background: var(--secondary); }\n.dz-evidence-office-ledger-table tfoot th, .dz-evidence-office-ledger-table tfoot td { position: sticky; bottom: 0; background: var(--muted); border-top: var(--pv-bw) solid var(--foreground); border-bottom: 0; font-weight: 600; }\n.dz-evidence-office-ledger-table .prov { display: flex; gap: 30px; padding: 12px 26px 0; font-size: 12px; color: var(--muted-foreground); }\n.dz-evidence-office-ledger-table .prov span { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--foreground); margin-right: 6px; }\n@media (prefers-reduced-motion: reduce) { .dz-evidence-office-ledger-table *, .dz-evidence-office-ledger-table *::before, .dz-evidence-office-ledger-table *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }",
  "requiredTheme": "/api/v1/themes/evidence-office.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap"
}