Filtering performed by the backend.
| Order | Customer | Status | Total |
|---|---|---|---|
| #1042 | A. Whitfield | Shipped | £64.00 |
| #1041 | R. Okafor | Processing | £128.50 |
| #1040 | M. Iqbal | Shipped | £22.00 |
| #1039 | S. Novak | Refunded | £40.00 |
<div class="ssf" data-status="all" style="--accent:#241430;">
<div class="ssf__bar">
<div class="ssf__pills" role="group" aria-label="Filter by status">
<button type="button" class="ssf__pill ssf__pill--all">All</button>
<button type="button" class="ssf__pill ssf__pill--shipped">Shipped</button>
<button type="button" class="ssf__pill ssf__pill--processing">Processing</button>
<button type="button" class="ssf__pill ssf__pill--refunded">Refunded</button>
</div>
<span class="ssf__status" role="status">Server round-trip: 220ms</span>
</div>
<div class="ssf__scroll">
<table class="ssf__table">
<caption>Customer orders</caption>
<thead><tr><th scope="col">Order</th><th scope="col">Customer</th><th scope="col">Status</th><th scope="col">Total</th></tr></thead>
<tbody>
<tr data-row-status="shipped"><td>#1042</td><td>A. Whitfield</td><td>Shipped</td><td>£64.00</td></tr>
<tr data-row-status="processing"><td>#1041</td><td>R. Okafor</td><td>Processing</td><td>£128.50</td></tr>
<tr data-row-status="shipped"><td>#1040</td><td>M. Iqbal</td><td>Shipped</td><td>£22.00</td></tr>
<tr data-row-status="refunded"><td>#1039</td><td>S. Novak</td><td>Refunded</td><td>£40.00</td></tr>
</tbody>
</table>
</div>
</div>
<style>
.ssf { font: 14px system-ui, sans-serif; color: #241430; background: #FAF7F2; max-width: 480px; border: 1px solid #24143020; border-radius: 10px; overflow: hidden; }
.ssf__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-bottom: 1px solid #24143020; }
.ssf__pills { display: flex; gap: 6px; flex-wrap: wrap; }
.ssf__pill { border: 1px solid #24143040; background: #FAF7F2; color: #241430; padding: 5px 10px; border-radius: 999px; font: inherit; font-size: 12px; cursor: pointer; }
.ssf__pill:hover { background: #24143010; }
.ssf__pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ssf[data-status="all"] .ssf__pill--all,
.ssf[data-status="shipped"] .ssf__pill--shipped,
.ssf[data-status="processing"] .ssf__pill--processing,
.ssf[data-status="refunded"] .ssf__pill--refunded { background: var(--accent); color: #FAF7F2; border-color: var(--accent); }
.ssf__status { font-size: 12px; color: #241430a0; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ssf__spinner { width: 10px; height: 10px; border-radius: 50%; border: 2px solid #24143030; border-top-color: var(--accent); }
@keyframes ssf-spin { to { transform: rotate(360deg); } }
.ssf--loading .ssf__scroll { opacity: .5; }
.ssf__scroll { overflow-x: auto; }
@media (prefers-reduced-motion: no-preference) {
.ssf__spinner { animation: ssf-spin .2s linear infinite; }
.ssf__scroll { transition: opacity .15s; }
}
.ssf__table { border-collapse: collapse; width: 100%; }
.ssf__table caption { text-align: left; font-weight: 600; padding: 10px 14px; }
.ssf__table th, .ssf__table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid #24143020; white-space: nowrap; }
.ssf__table th { background: var(--accent); color: #FAF7F2; }
.ssf[data-status="shipped"] tbody tr:not([data-row-status="shipped"]) { display: none; }
.ssf[data-status="processing"] tbody tr:not([data-row-status="processing"]) { display: none; }
.ssf[data-status="refunded"] tbody tr:not([data-row-status="refunded"]) { display: none; }
</style><div class="max-w-[480px] rounded-[10px] border border-[#24143020] font-sans text-sm text-[#241430] bg-[#FAF7F2] overflow-hidden" data-status="all" style="--accent:#241430;">
<div class="flex flex-wrap items-center justify-between gap-2 px-3.5 py-2.5 border-b border-[#24143020]">
<div class="flex gap-1.5 flex-wrap" role="group" aria-label="Filter by status">
<button type="button" class="ssf__pill ssf__pill--all border border-[#24143040] bg-[#FAF7F2] text-[#241430] px-2.5 py-1 rounded-full text-xs">All</button>
<button type="button" class="ssf__pill ssf__pill--shipped border border-[#24143040] bg-[#FAF7F2] text-[#241430] px-2.5 py-1 rounded-full text-xs">Shipped</button>
<button type="button" class="ssf__pill ssf__pill--processing border border-[#24143040] bg-[#FAF7F2] text-[#241430] px-2.5 py-1 rounded-full text-xs">Processing</button>
<button type="button" class="ssf__pill ssf__pill--refunded border border-[#24143040] bg-[#FAF7F2] text-[#241430] px-2.5 py-1 rounded-full text-xs">Refunded</button>
</div>
<span role="status" class="text-xs text-[#241430a0] inline-flex items-center gap-1.5 whitespace-nowrap">Server round-trip: 220ms</span>
</div>
<div class="ssf__scroll overflow-x-auto motion-safe:transition-opacity">
<table class="border-collapse w-full">
<caption class="text-left font-semibold px-3.5 py-2.5">Customer orders</caption>
<thead><tr class="text-[#FAF7F2]" style="background:#241430">
<th scope="col" class="p-3.5 text-left whitespace-nowrap">Order</th>
<th scope="col" class="p-3.5 text-left whitespace-nowrap">Customer</th>
<th scope="col" class="p-3.5 text-left whitespace-nowrap">Status</th>
<th scope="col" class="p-3.5 text-left whitespace-nowrap">Total</th>
</tr></thead>
<tbody>
<tr data-row-status="shipped"><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">#1042</td><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">A. Whitfield</td><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">Shipped</td><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">£64.00</td></tr>
<tr data-row-status="processing"><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">#1041</td><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">R. Okafor</td><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">Processing</td><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">£128.50</td></tr>
<tr data-row-status="shipped"><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">#1040</td><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">M. Iqbal</td><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">Shipped</td><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">£22.00</td></tr>
<tr data-row-status="refunded"><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">#1039</td><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">S. Novak</td><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">Refunded</td><td class="p-3.5 border-b border-[#24143020] whitespace-nowrap">£40.00</td></tr>
</tbody>
</table>
</div>
</div>
<style>
[data-status="all"] .ssf__pill--all,
[data-status="shipped"] .ssf__pill--shipped,
[data-status="processing"] .ssf__pill--processing,
[data-status="refunded"] .ssf__pill--refunded { background: var(--accent); color: #FAF7F2; border-color: var(--accent); }
[data-status="shipped"] tbody tr:not([data-row-status="shipped"]) { display: none; }
[data-status="processing"] tbody tr:not([data-row-status="processing"]) { display: none; }
[data-status="refunded"] tbody tr:not([data-row-status="refunded"]) { display: none; }
</style>function ServerSideFiltering({
caption = "Customer orders",
accent = "#241430",
status = "all",
loading = false,
latency = 220,
}) {
const rows = [
["#1042", "A. Whitfield", "shipped", "£64.00"],
["#1041", "R. Okafor", "processing", "£128.50"],
["#1040", "M. Iqbal", "shipped", "£22.00"],
["#1039", "S. Novak", "refunded", "£40.00"],
];
const visible = rows.filter((r) => status === "all" || r[2] === status);
const cell = { padding: "10px 14px", borderBottom: "1px solid #24143020", whiteSpace: "nowrap" };
const pill = (key, label) => (
<button key={key} type="button" style={{
border: `1px solid ${status === key ? accent : "#24143040"}`, background: status === key ? accent : "#FAF7F2",
color: status === key ? "#FAF7F2" : "#241430", padding: "5px 10px", borderRadius: 999, font: "inherit", fontSize: 12, cursor: "pointer",
}}>{label}</button>
);
return (
<div style={{ maxWidth: 480, borderRadius: 10, border: "1px solid #24143020", overflow: "hidden", font: "14px system-ui, sans-serif", color: "#241430", background: "#FAF7F2" }}>
<div style={{ display: "flex", flexWrap: "wrap", alignItems: "center", justifyContent: "space-between", gap: 8, padding: "10px 14px", borderBottom: "1px solid #24143020" }}>
<div role="group" aria-label="Filter by status" style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
{pill("all", "All")}{pill("shipped", "Shipped")}{pill("processing", "Processing")}{pill("refunded", "Refunded")}
</div>
<span role="status" style={{ fontSize: 12, color: "#241430a0", display: "inline-flex", alignItems: "center", gap: 6, whiteSpace: "nowrap" }}>
{loading ? <>Filtering…</> : <>Server round-trip: {latency}ms</>}
</span>
</div>
<div className="ssf-table-wrap" style={{ overflowX: "auto", opacity: loading ? .5 : 1 }}>
<table style={{ borderCollapse: "collapse", width: "100%" }}>
<caption style={{ textAlign: "left", fontWeight: 600, padding: "10px 14px" }}>{caption}</caption>
<thead>
<tr style={{ background: accent, color: "#FAF7F2" }}>
{["Order", "Customer", "Status", "Total"].map((h) => <th key={h} scope="col" style={cell}>{h}</th>)}
</tr>
</thead>
<tbody>
{visible.map((row) => (
<tr key={row[0]}>
<td style={cell}>{row[0]}</td><td style={cell}>{row[1]}</td>
<td style={cell}>{row[2][0].toUpperCase() + row[2].slice(1)}</td><td style={cell}>{row[3]}</td>
</tr>
))}
</tbody>
</table>
</div>
<style>{`
@media (prefers-reduced-motion: no-preference) {
.ssf-table-wrap { transition: opacity .15s; }
}
`}</style>
</div>
);
}