Data Table

import { signalsIsland } from "@bext-stack/framework/signals";
import Showcase from "../islands/Showcase";

// A normal PRISM server page. The island below is rendered to HTML on the
// server, then hydrated on the client - only the signal-bound nodes update.
export default function Page() {
  return (
    <main style="max-width:680px;margin:0 auto;padding:48px 20px;font-family:Inter,system-ui,sans-serif;color:#0a0a0a">
      <h1 style="letter-spacing:-0.02em;margin-bottom:4px">Data Table</h1>
      <p style="color:#64748b;margin-top:0">Type to filter: a signal drives a reactive &lt;List&gt;, a live count, and an empty state.</p>
      {signalsIsland("Showcase", Showcase, {})}
    </main>
  );
}

import Showcase from "../components/Showcase";

// A table with a live filter. Typing narrows the rows by name/email;
// a count reflects the matches. Filtering runs in the island.
export default function Page() {
  return (
    <main style={{ maxWidth: 680, margin: "0 auto", padding: "48px 20px", fontFamily: "Inter, system-ui, sans-serif" }}>
      <h1 style={{ letterSpacing: "-0.02em", marginBottom: 4 }}>Data Table</h1>
      <p style={{ color: "#64748b", marginTop: 0 }}>A filterable table of rows.</p>
      <Showcase />
    </main>
  );
}