Query Cell

Component

About

A notebook-style SQL editor cell with syntax highlighting, line numbers, a run/cancel keyboard shortcut, and a typed results table for exploring query output.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Query Cell to your project and fits it to your theme.

Code

How Query Cell is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";
import { QueryCell, type QueryResult } from "@/components/ui/query-cell";

const SQL = `-- Busiest stations in September
SELECT station, count(*) AS rides, round(avg(minutes), 1) AS avg_minutes
FROM rides
WHERE started_at >= '2026-09-01'
GROUP BY station
ORDER BY rides DESC
LIMIT 6;`;

const RESULT: QueryResult = {
  columns: [
    { name: "station", type: "VARCHAR" },
    { name: "rides", type: "BIGINT" },
    { name: "avg_minutes", type: "DOUBLE" },
  ],
  rows: [
    ["Mutrah Corniche", 4812, 18.4],
    ["Qurum Beach", 3977, 22.1],
    ["Al Mouj Marina", 3120, 14.9],
    ["Ruwi Centre", 2264, 9.7],
    ["Seeb Souq", 1508, 11.2],
    ["Bawshar Dunes", 412, null],
  ],
};

// Simulated engine: resolves with a canned, synthetic result after a short delay.
function run(sql: string, signal: AbortSignal) {
  return new Promise<QueryResult>((resolve, reject) => {
    const timer = setTimeout(() => resolve(RESULT), 380 + Math.random() * 320);
    signal.addEventListener("abort", () => {
      clearTimeout(timer);
      reject(new DOMException("Aborted", "AbortError"));
    });
  });
}

export default function Demo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-[#f4efea] px-4 py-10 sm:px-8">
      <div className="w-full max-w-[52rem]">
        <QueryCell
          defaultSql={SQL}
          run={run}
          title="muscat_bikes.rides"
          locale="en-GB"
        />
      </div>
    </div>
  );
}