Use table row

import { useTableRow } from "@sublay/react-js";

// A `type`, not an `interface`: `TableRow` carries an index signature for the
// table's own columns, and an interface gets no implicit one — so an interface
// here fails the `T extends TableRow` constraint.
type EventRow = {
  id: string;
  name: string;
  capacity: number;
};

function EventDetail({ eventId }: { eventId: string | null }) {
  const { row, loading, error, refetch } = useTableRow<EventRow>("Events", eventId);

  if (loading) return <Spinner />;
  // Check `row` before `error`: a transient failure keeps the last loaded row
  // here, and re-rendering it under a banner beats blanking the page.
  if (!row) return error ? <NotFound /> : null;

  return (
    <>
      {error && <StaleBanner onRetry={refetch} />}
      <h1>{row.name}</h1>
    </>
  );
}