<section id="filter-table" class="primitive-showcase group flex w-full scroll-mt-8 flex-col border-b border-dashed border-line px-8 py-10" style="animation:fade-up 600ms cubic-bezier(0.23,1,0.32,1) 240ms both"><div class="mb-3 flex items-start gap-2 sm:items-baseline"><span class="mt-0.5 font-mono text-[11px] text-ink-3 tabular-nums sm:mt-0">13</span><div class="min-w-0 sm:flex sm:items-baseline sm:gap-2"><h3 class="whitespace-nowrap text-[13px] font-semibold text-ink">Filter Table</h3><p class="mt-0.5 text-[12.5px] text-ink-3 text-pretty sm:mt-0 sm:truncate">Status chips that reorganize live data.</p></div></div><div class="primitive-demo-surface relative flex items-center justify-center overflow-hidden rounded-window bg-canvas p-3 shadow-hairline" style="min-height: 277px;"><div class="w-full max-w-120 [&amp;&gt;*]:mx-auto"><div class="w-full max-w-105"><div class="-mx-1 mb-1 flex items-center gap-1 overflow-x-auto px-1 py-1" style="scrollbar-width:none"><button type="button" aria-pressed="true" class="flex h-6.5 shrink-0 items-center gap-1.5 rounded-full px-2.5 text-[12px]
                font-medium transition-[background-color,box-shadow,color] duration-200
                bg-surface text-ink shadow-btn">All<span class="rounded-[4px] px-1 text-[10.5px] tabular-nums
                  bg-field text-ink-2">5</span></button><button type="button" aria-pressed="false" class="flex h-6.5 shrink-0 items-center gap-1.5 rounded-full px-2.5 text-[12px]
                font-medium transition-[background-color,box-shadow,color] duration-200
                text-ink-2 hover:bg-hover"><span class="size-1.5 rounded-full" style="background:#f09a2f"></span>To do<span class="rounded-[4px] px-1 text-[10.5px] tabular-nums
                  text-ink-3">2</span></button><button type="button" aria-pressed="false" class="flex h-6.5 shrink-0 items-center gap-1.5 rounded-full px-2.5 text-[12px]
                font-medium transition-[background-color,box-shadow,color] duration-200
                text-ink-2 hover:bg-hover"><span class="size-1.5 rounded-full" style="background:#16a6c7"></span>In Progress<span class="rounded-[4px] px-1 text-[10.5px] tabular-nums
                  text-ink-3">2</span></button><button type="button" aria-pressed="false" class="flex h-6.5 shrink-0 items-center gap-1.5 rounded-full px-2.5 text-[12px]
                font-medium transition-[background-color,box-shadow,color] duration-200
                text-ink-2 hover:bg-hover"><span class="size-1.5 rounded-full" style="background:#25a878"></span>Completed<span class="rounded-[4px] px-1 text-[10.5px] tabular-nums
                  text-ink-3">1</span></button></div><div aria-label="Scrollable task table" class="overflow-x-auto rounded-card bg-surface shadow-card" role="region" tabindex="0" style="scrollbar-width:none"><div class="min-w-[420px]"><div class="grid grid-cols-[1.3fr_0.6fr_0.95fr_0.9fr] border-b border-line px-3 py-2 text-[11.5px] font-medium text-ink-3"><span>Task name</span><span>Date</span><span>Status</span><span>Advisor</span></div><div class="grid transition-[grid-template-rows,opacity] duration-300" style="grid-template-rows:1fr;opacity:1;transition-timing-function:cubic-bezier(0.23, 1, 0.32, 1)"><div class="overflow-hidden"><div class="grid grid-cols-[1.3fr_0.6fr_0.95fr_0.9fr] items-center border-b border-line px-3 py-2 text-[12px] transition-colors duration-100 last:border-0 hover:bg-hover"><span class="truncate font-medium text-ink">Restock mango sorbet</span><span class="text-ink-2 tabular-nums">Dec 03</span><span><span class="inline-flex h-5 items-center rounded-[5px] px-1.5
                          text-[11px] font-medium filter-status-todo">To do</span></span><span class="truncate text-ink-2">Mango Moon Gelato</span></div></div></div><div class="grid transition-[grid-template-rows,opacity] duration-300" style="grid-template-rows:1fr;opacity:1;transition-timing-function:cubic-bezier(0.23, 1, 0.32, 1)"><div class="overflow-hidden"><div class="grid grid-cols-[1.3fr_0.6fr_0.95fr_0.9fr] items-center border-b border-line px-3 py-2 text-[12px] transition-colors duration-100 last:border-0 hover:bg-hover"><span class="truncate font-medium text-ink">Churn black sesame</span><span class="text-ink-2 tabular-nums">Sep 22</span><span><span class="inline-flex h-5 items-center rounded-[5px] px-1.5
                          text-[11px] font-medium filter-status-progress">In Progress</span></span><span class="truncate text-ink-2">Kumo Creamery</span></div></div></div><div class="grid transition-[grid-template-rows,opacity] duration-300" style="grid-template-rows:1fr;opacity:1;transition-timing-function:cubic-bezier(0.23, 1, 0.32, 1)"><div class="overflow-hidden"><div class="grid grid-cols-[1.3fr_0.6fr_0.95fr_0.9fr] items-center border-b border-line px-3 py-2 text-[12px] transition-colors duration-100 last:border-0 hover:bg-hover"><span class="truncate font-medium text-ink">Print summer menu</span><span class="text-ink-2 tabular-nums">Jan 02</span><span><span class="inline-flex h-5 items-center rounded-[5px] px-1.5
                          text-[11px] font-medium filter-status-todo">To do</span></span><span class="truncate text-ink-2">Coral Coast Sorbet</span></div></div></div><div class="grid transition-[grid-template-rows,opacity] duration-300" style="grid-template-rows:1fr;opacity:1;transition-timing-function:cubic-bezier(0.23, 1, 0.32, 1)"><div class="overflow-hidden"><div class="grid grid-cols-[1.3fr_0.6fr_0.95fr_0.9fr] items-center border-b border-line px-3 py-2 text-[12px] transition-colors duration-100 last:border-0 hover:bg-hover"><span class="truncate font-medium text-ink">Taste-test batch 42</span><span class="text-ink-2 tabular-nums">Nov 08</span><span><span class="inline-flex h-5 items-center rounded-[5px] px-1.5
                          text-[11px] font-medium filter-status-progress">In Progress</span></span><span class="truncate text-ink-2">Maple Orbit</span></div></div></div><div class="grid transition-[grid-template-rows,opacity] duration-300" style="grid-template-rows:1fr;opacity:1;transition-timing-function:cubic-bezier(0.23, 1, 0.32, 1)"><div class="overflow-hidden"><div class="grid grid-cols-[1.3fr_0.6fr_0.95fr_0.9fr] items-center border-b border-line px-3 py-2 text-[12px] transition-colors duration-100 last:border-0 hover:bg-hover"><span class="truncate font-medium text-ink">Order waffle cones</span><span class="text-ink-2 tabular-nums">Apr 14</span><span><span class="inline-flex h-5 items-center rounded-[5px] px-1.5
                          text-[11px] font-medium filter-status-done">Completed</span></span><span class="truncate text-ink-2">Aurora Scoops</span></div></div></div></div></div></div></div><div class="absolute top-3 right-3 flex gap-1 opacity-0 transition-opacity duration-150 group-hover:opacity-100 group-focus-within:opacity-100"><button aria-label="Copy code" class="flex size-7 items-center justify-center rounded-control bg-surface
              shadow-btn transition-colors duration-100 hover:bg-hover
              text-ink-3 hover:text-ink"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="12" height="12" rx="2.5"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg></button><button aria-label="View code" class="flex size-7 items-center justify-center rounded-control bg-surface text-ink-3 shadow-btn transition-colors duration-100 hover:bg-hover hover:text-ink"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 18l6-6-6-6M8 6l-6 6 6 6"></path></svg></button></div></div></section>