src/components/ui/Table.astro
---
// Table, recovered from blurr-components.pages.dev
---
<div class="tbl-wrap tbl-wrap--striped" data-component="table"> <table class="tbl tbl--md tbl--striped"> <caption class="tbl__caption">Campagne overzicht Q1</caption> <thead class="tbl__head"> <tr> <th class="tbl__th tbl__th--left tbl__th--sortable" style="" data-key="naam" scope="col"> <span class="tbl__th-inner"> Campagne <svg class="tbl__sort-icon" width="12" height="12" viewBox="0 0 12 12" fill="none"> <path d="M6 2v8M3 5l3-3 3 3M3 7l3 3 3-3" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </span> </th><th class="tbl__th tbl__th--left tbl__th--sortable" style="" data-key="platform" scope="col"> <span class="tbl__th-inner"> Platform <svg class="tbl__sort-icon" width="12" height="12" viewBox="0 0 12 12" fill="none"> <path d="M6 2v8M3 5l3-3 3 3M3 7l3 3 3-3" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </span> </th><th class="tbl__th tbl__th--right tbl__th--sortable" style="" data-key="spend" scope="col"> <span class="tbl__th-inner"> Budget <svg class="tbl__sort-icon" width="12" height="12" viewBox="0 0 12 12" fill="none"> <path d="M6 2v8M3 5l3-3 3 3M3 7l3 3 3-3" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </span> </th><th class="tbl__th tbl__th--right tbl__th--sortable" style="" data-key="conversies" scope="col"> <span class="tbl__th-inner"> Conversies <svg class="tbl__sort-icon" width="12" height="12" viewBox="0 0 12 12" fill="none"> <path d="M6 2v8M3 5l3-3 3 3M3 7l3 3 3-3" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </span> </th><th class="tbl__th tbl__th--right tbl__th--sortable" style="" data-key="roas" scope="col"> <span class="tbl__th-inner"> ROAS <svg class="tbl__sort-icon" width="12" height="12" viewBox="0 0 12 12" fill="none"> <path d="M6 2v8M3 5l3-3 3 3M3 7l3 3 3-3" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"></path> </svg> </span> </th> </tr> </thead> <tbody class="tbl__body"> <tr class="tbl__row"> <td class="tbl__td tbl__td--left"> Google Search Brand </td><td class="tbl__td tbl__td--left"> Google Ads </td><td class="tbl__td tbl__td--right"> €1.240 </td><td class="tbl__td tbl__td--right"> 48 </td><td class="tbl__td tbl__td--right"> 4.2× </td> </tr><tr class="tbl__row tbl__row--even"> <td class="tbl__td tbl__td--left"> Meta Awareness </td><td class="tbl__td tbl__td--left"> Meta Ads </td><td class="tbl__td tbl__td--right"> €980 </td><td class="tbl__td tbl__td--right"> 31 </td><td class="tbl__td tbl__td--right"> 3.1× </td> </tr><tr class="tbl__row"> <td class="tbl__td tbl__td--left"> LinkedIn B2B </td><td class="tbl__td tbl__td--left"> LinkedIn </td><td class="tbl__td tbl__td--right"> €640 </td><td class="tbl__td tbl__td--right"> 12 </td><td class="tbl__td tbl__td--right"> 5.8× </td> </tr><tr class="tbl__row tbl__row--even"> <td class="tbl__td tbl__td--left"> Google Display </td><td class="tbl__td tbl__td--left"> Google Ads </td><td class="tbl__td tbl__td--right"> €320 </td><td class="tbl__td tbl__td--right"> 8 </td><td class="tbl__td tbl__td--right"> 2.4× </td> </tr><tr class="tbl__row"> <td class="tbl__td tbl__td--left"> TikTok Video </td><td class="tbl__td tbl__td--left"> TikTok </td><td class="tbl__td tbl__td--right"> €540 </td><td class="tbl__td tbl__td--right"> 19 </td><td class="tbl__td tbl__td--right"> 3.7× </td> </tr> </tbody> </table> </div>
<style>
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius, .5rem);border:1px solid rgba(0,0,0,.08)}
.tbl-wrap--minimal{border:none}
.tbl{width:100%;border-collapse:collapse;font-size:.9375rem;background:var(--color-bg, #fff)}
.tbl--sm{font-size:.8125rem}
.tbl--lg{font-size:1rem}
.tbl__caption{text-align:left;padding:.75rem 1rem;font-size:.875rem;font-weight:600;color:var(--color-muted, #6b7280);caption-side:top}
.tbl__head{border-bottom:2px solid rgba(0,0,0,.08)}
.tbl--sticky .tbl__head th{position:sticky;top:0;z-index:1;background:var(--color-bg, #fff)}
.tbl__th{padding:.75rem 1rem;font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-muted, #6b7280);white-space:nowrap;background:#00000005;text-align:left}
.tbl--sm .tbl__th{padding:.5rem .75rem}
.tbl--lg .tbl__th{padding:1rem 1.25rem}
.tbl__th--center{text-align:center}
.tbl__th--right{text-align:right}
.tbl__th-inner{display:inline-flex;align-items:center;gap:.375rem}
.tbl__sort-icon{opacity:.4;flex-shrink:0}
.tbl__th--sortable:hover .tbl__sort-icon{opacity:1}
[aria-sort=ascending] .tbl__sort-icon,[aria-sort=descending] .tbl__sort-icon{opacity:1;color:var(--color-accent, #6366f1)}
.tbl__row{border-bottom:1px solid rgba(0,0,0,.06);transition:background .1s}
.tbl__row:last-child{border-bottom:none}
.tbl__row:hover,.tbl--striped .tbl__row--even{background:#00000005}
.tbl__td{padding:.875rem 1rem;color:var(--color-primary, #0a0a0a);vertical-align:middle}
.tbl--sm .tbl__td{padding:.5rem .75rem}
.tbl--lg .tbl__td{padding:1.125rem 1.25rem}
.tbl__td--center{text-align:center}
.tbl__td--right{text-align:right}
.tbl--bordered .tbl__th,.tbl--bordered .tbl__td{border:1px solid rgba(0,0,0,.08)}
.tbl--minimal .tbl__th{background:none;border-bottom:2px solid rgba(0,0,0,.1)}
.tbl--minimal .tbl__row{border-bottom:1px solid rgba(0,0,0,.06)}
.tbl__empty{text-align:center;padding:3rem;color:var(--color-muted, #6b7280);font-size:.9375rem}
</style>