diff --git a/apps/webapp/app/components/code/TSQLResultsTable.tsx b/apps/webapp/app/components/code/TSQLResultsTable.tsx
index e12fdc400..a7e3217fb 100644
--- a/apps/webapp/app/components/code/TSQLResultsTable.tsx
+++ b/apps/webapp/app/components/code/TSQLResultsTable.tsx
@@ -57,7 +57,20 @@ function isBooleanType(type: string): boolean {
/**
* Render a cell value based on its type and optional customRenderType
*/
-function CellValue({ value, column }: { value: unknown; column: OutputColumnMetadata }) {
+function CellValue({
+ value,
+ column,
+ prettyFormatting = true,
+}: {
+ value: unknown;
+ column: OutputColumnMetadata;
+ prettyFormatting?: boolean;
+}) {
+ // Plain text mode - render everything as monospace text
+ if (!prettyFormatting) {
+ return
{value === null ? "NULL" : String(value)};
+ }
+
if (value === null) {
return NULL
;
}
@@ -147,9 +160,11 @@ function CellValue({ value, column }: { value: unknown; column: OutputColumnMeta
export function TSQLResultsTable({
rows,
columns,
+ prettyFormatting = true,
}: {
rows: Record[];
columns: OutputColumnMetadata[];
+ prettyFormatting?: boolean;
}) {
if (!rows.length || !columns.length) return null;
@@ -167,7 +182,7 @@ export function TSQLResultsTable({
{columns.map((col) => (
-
+
))}
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx
index 3fb7c64ef..9edb51814 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.query/route.tsx
@@ -17,6 +17,7 @@ import { NavBar, PageTitle } from "~/components/primitives/PageHeader";
import { Paragraph } from "~/components/primitives/Paragraph";
import { Select, SelectItem } from "~/components/primitives/Select";
import { Spinner } from "~/components/primitives/Spinner";
+import { Switch } from "~/components/primitives/Switch";
import { useEnvironment } from "~/hooks/useEnvironment";
import { useOrganization } from "~/hooks/useOrganizations";
import { useProject } from "~/hooks/useProject";
@@ -156,6 +157,7 @@ export default function Page() {
const [query, setQuery] = useState(defaultQuery);
const [scope, setScope] = useState("environment");
+ const [prettyFormatting, setPrettyFormatting] = useState(true);
const isLoading = navigation.state === "submitting" || navigation.state === "loading";
@@ -212,10 +214,16 @@ export default function Page() {
{/* Results */}
-
+
{results?.rows?.length ? `${results.rows.length} Results` : "Results"}
+
{isLoading ? (
@@ -225,7 +233,11 @@ export default function Page() {
) : results?.error ? (
{results.error}
) : results?.rows && results?.columns ? (
-
+
) : (
Run a query to see results here.