@marimo-team/frontend 0.21.2-dev63 → 0.21.2-dev69

package/src/components/data-table/columns.tsx

@@ -112,6 +112,7 @@ export function generateColumns<T>({
   headerTooltip,
   showDataTypes,
   calculateTopKRows,
+  fractionDigitsByColumn,
 }: {
   rowHeaders: FieldTypesWithExternalType;
   selection: DataTableSelection;
@@ -122,6 +123,7 @@ export function generateColumns<T>({
   headerTooltip?: Record<string, string>;
   showDataTypes?: boolean;
   calculateTopKRows?: CalculateTopKRows;
+  fractionDigitsByColumn?: Record<string, number>;
 }): ColumnDef<T>[] {
   // Row-headers are typically index columns
   const rowHeadersSet = new Set(rowHeaders.map(([columnName]) => columnName));
@@ -138,6 +140,7 @@ export function generateColumns<T>({
         rowHeader: isRowHeader,
         dtype: types?.[1],
         dataType: types?.[0],
+        minFractionDigits: fractionDigitsByColumn?.[key],
       };
     }
 
@@ -146,9 +149,23 @@ export function generateColumns<T>({
       filterType: getFilterTypeForFieldType(types[0]),
       dtype: types[1],
       dataType: types[0],
+      minFractionDigits: fractionDigitsByColumn?.[key],
     };
   };
 
+  const getJustify = (key: string): "left" | "center" | "right" | undefined => {
+    // Explicit user override takes precedence
+    if (textJustifyColumns?.[key]) {
+      return textJustifyColumns[key];
+    }
+    // Auto right-align numeric columns
+    const dataType = getMeta(key).dataType;
+    if (dataType === "number" || dataType === "integer") {
+      return "right";
+    }
+    return undefined;
+  };
+
   const columnKeys: string[] = [
     ...rowHeadersSet,
     ...fieldTypes.map(([columnName]) => columnName),
@@ -186,7 +203,7 @@ export function generateColumns<T>({
             </div>
           ) : null;
 
-        const justify = textJustifyColumns?.[key];
+        const justify = getJustify(key);
 
         const headerWithType = (
           <div
@@ -254,18 +271,21 @@ export function generateColumns<T>({
           cell.toggleSelected?.();
         }
 
-        const justify = textJustifyColumns?.[key];
+        const justify = getJustify(key);
         const wrapped = wrappedColumns?.includes(key);
         const isCellSelected = cell?.getIsSelected?.() || false;
         const canSelectCell =
           (selection === "single-cell" || selection === "multi-cell") &&
           !isCellSelected;
 
+        const dataType = column.columnDef.meta?.dataType;
+        const isNumeric = dataType === "number" || dataType === "integer";
         const cellStyles = getCellStyleClass(
           justify,
           wrapped,
           canSelectCell,
           isCellSelected,
+          isNumeric,
         );
 
         const renderedCell = renderCellValue({
@@ -430,6 +450,7 @@ function getCellStyleClass(
   wrapped: boolean | undefined,
   canSelectCell: boolean,
   isSelected: boolean,
+  isNumeric?: boolean,
 ): string {
   return cn(
     canSelectCell && "cursor-pointer",
@@ -438,6 +459,7 @@ function getCellStyleClass(
     "w-full",
     "text-left",
     "truncate",
+    isNumeric && "tabular-nums",
     justify === "center" && "text-center",
     justify === "right" && "text-right",
     wrapped && `${COLUMN_WRAPPING_STYLES} break-words`,
@@ -589,7 +611,18 @@ export function renderCellValue<TData, TValue>({
   if (typeof value === "number") {
     return (
       <div onClick={selectCell} className={cellStyles}>
-        <LocaleNumber value={value} />
+        <LocaleNumber
+          value={value}
+          minFractionDigits={column.columnDef.meta?.minFractionDigits}
+        />
+      </div>
+    );
+  }
+
+  if (typeof value === "boolean") {
+    return (
+      <div onClick={selectCell} className={cellStyles}>
+        {value ? "True" : "False"}
       </div>
     );
   }
@@ -635,9 +668,16 @@ export function renderCellValue<TData, TValue>({
   );
 }
 
-export const LocaleNumber = ({ value }: { value: number }) => {
+export const LocaleNumber = ({
+  value,
+  minFractionDigits,
+}: {
+  value: number;
+  minFractionDigits?: number;
+}) => {
   const { locale } = useLocale();
   const format = useNumberFormatter({
+    minimumFractionDigits: minFractionDigits,
     maximumFractionDigits: maxFractionalDigits(locale),
   });
   return format.format(value);

package/src/components/data-table/filters.ts

@@ -16,6 +16,7 @@ declare module "@tanstack/react-table" {
     dtype?: string;
     dataType?: DataType;
     filterType?: FilterType;
+    minFractionDigits?: number;
   }
 }
 

package/src/components/datasources/datasources.tsx

@@ -28,6 +28,7 @@ import {
   INTERNAL_SQL_ENGINES,
 } from "@/core/datasets/engines";
 import {
+  PreviewSQLSchemaList,
   PreviewSQLTable,
   PreviewSQLTableList,
 } from "@/core/datasets/request-registry";
@@ -80,6 +81,7 @@ const INDENT = {
   database: "pl-4",
   schemaEmpty: "pl-8",
   schema: "pl-7",
+  schemaLoading: "pl-8",
   tableLoading: "pl-11",
   tableSchemaless: "pl-8",
   tableWithSchema: "pl-12",
@@ -369,6 +371,49 @@ const SchemaList: React.FC<{
   hasSearch,
   searchValue,
 }) => {
+  const { addSchemaList } = useDataSourceActions();
+  const [schemasRequested, setSchemasRequested] = React.useState(false);
+
+  // Custom loading state, we need to wait for the data to propagate once requested
+  // useAsyncData's loading state may return false before data has propagated
+  const [schemasLoading, setSchemasLoading] = React.useState(false);
+
+  const { isPending, error } = useAsyncData(async () => {
+    if (schemas.length === 0 && engineName && !schemasRequested) {
+      setSchemasRequested(true);
+      setSchemasLoading(true);
+      try {
+        const previewSchemaList = await PreviewSQLSchemaList.request({
+          engine: engineName,
+          database: databaseName,
+        });
+
+        addSchemaList({
+          schemas: previewSchemaList.schemas ?? [],
+          sqlSchemaContext: {
+            engine: engineName,
+            database: databaseName,
+          },
+        });
+      } finally {
+        setSchemasLoading(false);
+      }
+    }
+  }, [schemas.length, engineName, databaseName, schemasRequested]);
+
+  if (isPending || schemasLoading) {
+    return (
+      <LoadingState
+        message="Loading schemas..."
+        className={INDENT.schemaLoading}
+      />
+    );
+  }
+
+  if (error) {
+    return <ErrorState error={error} className={INDENT.schemaLoading} />;
+  }
+
   if (schemas.length === 0) {
     return (
       <EmptyState

package/src/components/markdown/markdown-renderer.tsx

@@ -1,7 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import { EditorView } from "@codemirror/view";
-import { math } from "@streamdown/math";
 import { useAtomValue } from "jotai";
 import { BetweenHorizontalStartIcon } from "lucide-react";
 import { memo, Suspense, useState } from "react";
@@ -13,6 +12,7 @@ import { useLastFocusedCellId } from "@/core/cells/focus";
 import { MarkdownLanguageAdapter } from "@/core/codemirror/language/languages/markdown";
 import { SQLLanguageAdapter } from "@/core/codemirror/language/languages/sql/sql";
 import { autoInstantiateAtom } from "@/core/config/config";
+import { useAsyncData } from "@/hooks/useAsyncData";
 import { LazyAnyLanguageCodeMirror } from "@/plugins/impl/code/LazyAnyLanguageCodeMirror";
 import { useTheme } from "@/theme/useTheme";
 import { copyToClipboard } from "@/utils/copy";
@@ -166,11 +166,27 @@ const COMPONENTS: Components = {
   },
 };
 
+// Lazy-load the math plugin to keep katex (~264 KB) out of the critical path.
+// The first render works without math; once loaded, it re-renders with math support.
+let mathPluginCache: StreamdownProps["plugins"] | undefined;
+const useMathPlugin = () => {
+  const { data: plugins } = useAsyncData(async () => {
+    if (mathPluginCache) {
+      return mathPluginCache;
+    }
+    const mod = await import("@streamdown/math");
+    mathPluginCache = { math: mod.math };
+    return mathPluginCache;
+  }, []);
+  return plugins;
+};
+
 export const MarkdownRenderer = memo(({ content }: { content: string }) => {
+  const plugins = useMathPlugin();
   return (
     <Streamdown
       components={COMPONENTS}
-      plugins={{ math }}
+      plugins={plugins}
       className="mo-markdown-renderer"
     >
       {content}

package/src/core/datasets/__tests__/data-source.test.ts

@@ -1,7 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import { beforeEach, describe, expect, it } from "vitest";
 import { variableName } from "@/__tests__/branded";
-import type { DataTable } from "@/core/kernel/messages";
+import type { DatabaseSchema, DataTable } from "@/core/kernel/messages";
 import type { VariableName } from "@/core/variables/types";
 import {
   type DataSourceConnection,
@@ -209,6 +209,93 @@ describe("filtering data sources", () => {
   });
 });
 
+describe("add schema list", () => {
+  const connections: DataSourceConnection[] = [
+    {
+      name: "conn1" as ConnectionName,
+      source: "sqlite",
+      display_name: "SQLite DB",
+      dialect: "sqlite",
+      databases: [
+        {
+          name: "db1",
+          schemas: [],
+          dialect: "sqlite",
+        },
+      ],
+    },
+  ];
+
+  // Helper function to add schema list
+  const addSchemaList = (
+    schemas: DatabaseSchema[],
+    engine: string,
+    database: string,
+  ) => {
+    return reducer(baseState, {
+      type: "addSchemaList",
+      payload: {
+        schemas,
+        sqlSchemaContext: { engine, database },
+      },
+    });
+  };
+
+  let baseState: DataSourceState;
+
+  beforeEach(() => {
+    baseState = addConnection(connections, baseState);
+    expect(baseState.connectionsMap.size).toBe(defaultConnSize + 1);
+  });
+
+  it("adds schema list to a specific database", () => {
+    const schemaList: DatabaseSchema[] = [
+      { name: "public", tables: [] },
+      { name: "analytics", tables: [] },
+    ];
+    const newState = addSchemaList(schemaList, "conn1", "db1");
+
+    const conn1 = newState.connectionsMap.get("conn1" as ConnectionName);
+    const db1 = conn1?.databases.find((db) => db.name === "db1");
+    expect(db1?.schemas).toEqual(schemaList);
+  });
+
+  it("updates schema list for a database", () => {
+    const schemaList: DatabaseSchema[] = [
+      { name: "public", tables: [] },
+      { name: "analytics", tables: [] },
+    ];
+    const newState = addSchemaList(schemaList, "conn1", "db1");
+
+    const conn1 = newState.connectionsMap.get("conn1" as ConnectionName);
+    const db1 = conn1?.databases.find((db) => db.name === "db1");
+    expect(db1?.schemas).toEqual(schemaList);
+
+    // update with new schema list
+    const newSchemaList: DatabaseSchema[] = [
+      { name: "public", tables: [] },
+      { name: "sales", tables: [] },
+    ];
+    const updatedState = addSchemaList(newSchemaList, "conn1", "db1");
+
+    const newConn = updatedState.connectionsMap.get("conn1" as ConnectionName);
+    const newDb1 = newConn?.databases.find((db) => db.name === "db1");
+    expect(newDb1?.schemas).toEqual(newSchemaList);
+  });
+
+  it("does not add schema list if database does not exist", () => {
+    const schemaList: DatabaseSchema[] = [
+      { name: "public", tables: [] },
+      { name: "analytics", tables: [] },
+    ];
+    const newState = addSchemaList(schemaList, "conn1", "non_existent_db");
+
+    const conn1 = newState.connectionsMap.get("conn1" as ConnectionName);
+    const db1 = conn1?.databases.find((db) => db.name === "db1");
+    expect(db1?.schemas.length).toBe(0);
+  });
+});
+
 describe("add table list", () => {
   const connections: DataSourceConnection[] = [
     {

package/src/core/datasets/data-source-connections.ts

@@ -5,6 +5,7 @@ import { isSchemaless } from "@/components/datasources/utils";
 import { createReducerAndAtoms } from "@/utils/createReducer";
 import { Logger } from "@/utils/Logger";
 import type {
+  DatabaseSchema,
   DataSourceConnection as DataSourceConnectionType,
   DataTable,
 } from "../kernel/messages";
@@ -43,6 +44,11 @@ export interface DataSourceState {
   connectionsMap: ConnectionsMap;
 }
 
+export interface SQLSchemaContext {
+  engine: string;
+  database: string;
+}
+
 export interface SQLTableContext {
   engine: string;
   database: string;
@@ -134,6 +140,44 @@ const {
     };
   },
 
+  // Add schema list to a specific database in a connection
+  addSchemaList: (
+    state: DataSourceState,
+    opts: {
+      schemas: DatabaseSchema[];
+      sqlSchemaContext: SQLSchemaContext;
+    },
+  ): DataSourceState => {
+    const { schemas, sqlSchemaContext } = opts;
+    const { connectionsMap, latestEngineSelected } = state;
+    const connectionName = sqlSchemaContext.engine as ConnectionName;
+    const conn = connectionsMap.get(connectionName);
+
+    if (!conn) {
+      return state;
+    }
+
+    const newMap = new Map(connectionsMap);
+    const newConn: DataSourceConnection = {
+      ...conn,
+      databases: conn.databases.map((db) => {
+        if (db.name !== sqlSchemaContext.database) {
+          return db;
+        }
+        return {
+          ...db,
+          schemas: schemas,
+        };
+      }),
+    };
+    newMap.set(connectionName, newConn);
+
+    return {
+      latestEngineSelected: latestEngineSelected,
+      connectionsMap: newMap,
+    };
+  },
+
   // Add table list to a specific schema in a connection
   addTableList: (
     state: DataSourceState,

package/src/core/datasets/request-registry.ts

@@ -1,5 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import type {
+  SQLSchemaListPreview,
   SQLTableListPreview,
   SQLTablePreview,
   ValidateSQLResult,
@@ -8,6 +9,7 @@ import { CachingRequestRegistry } from "../network/CachingRequestRegistry";
 import { DeferredRequestRegistry } from "../network/DeferredRequestRegistry";
 import { getRequestClient } from "../network/requests";
 import type {
+  ListSQLSchemasRequest,
   ListSQLTablesRequest,
   PreviewSQLTableRequest,
   ValidateSQLRequest,
@@ -28,6 +30,17 @@ export const PreviewSQLTable = new DeferredRequestRegistry<
   });
 });
 
+export const PreviewSQLSchemaList = new DeferredRequestRegistry<
+  Omit<ListSQLSchemasRequest, "requestId">,
+  SQLSchemaListPreview
+>("sql-schema-list-preview", async (requestId, req) => {
+  const client = getRequestClient();
+  await client.previewSQLSchemaList({
+    requestId: requestId,
+    ...req,
+  });
+});
+
 export const PreviewSQLTableList = new DeferredRequestRegistry<
   Omit<ListSQLTablesRequest, "requestId">,
   SQLTableListPreview

package/src/core/islands/bridge.ts

@@ -169,6 +169,7 @@ export class IslandsPyodideBridge implements RunRequests, EditRequests {
   previewDatasetColumn = throwNotImplemented;
   previewSQLTable = throwNotImplemented;
   previewSQLTableList = throwNotImplemented;
+  previewSQLSchemaList = throwNotImplemented;
   previewDataSourceConnection = throwNotImplemented;
   validateSQL = throwNotImplemented;
   openFile = throwNotImplemented;

package/src/core/islands/main.ts

@@ -121,6 +121,7 @@ export async function initialize() {
       case "data-column-preview":
       case "sql-table-preview":
       case "sql-table-list-preview":
+      case "sql-schema-list-preview":
       case "datasets":
       case "data-source-connections":
       case "validate-sql-result":

package/src/core/kernel/messages.ts

@@ -41,6 +41,8 @@ export type DataColumnPreview = NotificationMessageData<"data-column-preview">;
 export type SQLTablePreview = NotificationMessageData<"sql-table-preview">;
 export type SQLTableListPreview =
   NotificationMessageData<"sql-table-list-preview">;
+export type SQLSchemaListPreview =
+  NotificationMessageData<"sql-schema-list-preview">;
 export type ValidateSQLResult = NotificationMessageData<"validate-sql-result">;
 export type SecretKeysResult = NotificationMessageData<"secret-keys-result">;
 export type StartupLogs = NotificationMessageData<"startup-logs">;

package/src/core/network/requests-lazy.ts

@@ -112,6 +112,7 @@ const ACTIONS: Record<keyof AllRequests, Action> = {
   previewDatasetColumn: "waitForConnectionOpen",
   previewSQLTable: "waitForConnectionOpen",
   previewSQLTableList: "waitForConnectionOpen",
+  previewSQLSchemaList: "waitForConnectionOpen",
   previewDataSourceConnection: "waitForConnectionOpen",
   validateSQL: "waitForConnectionOpen",
   listStorageEntries: "waitForConnectionOpen",

package/src/core/network/requests-network.ts

@@ -244,6 +244,14 @@ export function createNetworkRequests(): EditRequests & RunRequests {
         })
         .then(handleResponseReturnNull);
     },
+    previewSQLSchemaList: (request) => {
+      return getClient()
+        .POST("/api/datasources/preview_sql_schema_list", {
+          body: request,
+          params: getParams(),
+        })
+        .then(handleResponseReturnNull);
+    },
     previewDataSourceConnection: (request) => {
       return getClient()
         .POST("/api/datasources/preview_datasource_connection", {

package/src/core/network/requests-static.ts

@@ -57,6 +57,7 @@ export function createStaticRequests(): EditRequests & RunRequests {
     previewDatasetColumn: throwNotInEditMode,
     previewSQLTable: throwNotInEditMode,
     previewSQLTableList: throwNotInEditMode,
+    previewSQLSchemaList: throwNotInEditMode,
     previewDataSourceConnection: throwNotInEditMode,
     validateSQL: throwNotInEditMode,
     openFile: throwNotInEditMode,

package/src/core/network/requests-toasting.tsx

@@ -42,6 +42,7 @@ export function createErrorToastingRequests(
     previewDatasetColumn: "Failed to fetch data sources",
     previewSQLTable: "Failed to fetch SQL table",
     previewSQLTableList: "Failed to fetch SQL table list",
+    previewSQLSchemaList: "Failed to fetch SQL schema list",
     previewDataSourceConnection: "Failed to preview data source connection",
     validateSQL: "Failed to validate SQL",
     openFile: "Failed to open file",

package/src/core/network/types.ts

@@ -59,6 +59,7 @@ export type PreviewDatasetColumnRequest =
   schemas["PreviewDatasetColumnRequest"];
 export type PreviewSQLTableRequest = schemas["PreviewSQLTableRequest"];
 export type ListSQLTablesRequest = schemas["ListSQLTablesRequest"];
+export type ListSQLSchemasRequest = schemas["ListSQLSchemasRequest"];
 export type ListDataSourceConnectionRequest =
   schemas["ListDataSourceConnectionRequest"];
 export type ValidateSQLRequest = schemas["ValidateSQLRequest"];
@@ -151,6 +152,7 @@ export interface EditRequests {
   previewDatasetColumn: (request: PreviewDatasetColumnRequest) => Promise<null>;
   previewSQLTable: (request: PreviewSQLTableRequest) => Promise<null>;
   previewSQLTableList: (request: ListSQLTablesRequest) => Promise<null>;
+  previewSQLSchemaList: (request: ListSQLSchemasRequest) => Promise<null>;
   previewDataSourceConnection: (
     request: ListDataSourceConnectionRequest,
   ) => Promise<null>;

package/src/core/wasm/bridge.ts

@@ -523,6 +523,16 @@ export class PyodideBridge implements RunRequests, EditRequests {
     return null;
   };
 
+  previewSQLSchemaList: EditRequests["previewSQLSchemaList"] = async (
+    request,
+  ) => {
+    await this.putControlRequest({
+      type: "list-sql-schemas",
+      ...request,
+    });
+    return null;
+  };
+
   previewDataSourceConnection: EditRequests["previewDataSourceConnection"] =
     async (request) => {
       await this.putControlRequest({

package/src/core/websocket/useMarimoKernelConnection.tsx

@@ -37,6 +37,7 @@ import { useSetAppConfig } from "../config/config";
 import { useDataSourceActions } from "../datasets/data-source-connections";
 import type { ConnectionName } from "../datasets/engines";
 import {
+  PreviewSQLSchemaList,
   PreviewSQLTable,
   PreviewSQLTableList,
   ValidateSQL,
@@ -288,6 +289,9 @@ export function useMarimoKernelConnection(opts: {
       case "sql-table-list-preview":
         PreviewSQLTableList.resolve(msg.data.request_id, msg.data);
         return;
+      case "sql-schema-list-preview":
+        PreviewSQLSchemaList.resolve(msg.data.request_id, msg.data);
+        return;
       case "validate-sql-result":
         ValidateSQL.resolve(msg.data.request_id as RequestId, msg.data);
         return;

package/src/plugins/impl/DataTablePlugin.tsx

@@ -874,10 +874,35 @@ const DataTableComponent = ({
     return memoizedUnclampedFieldTypes.slice(0, maxColumns);
   }, [maxColumns, memoizedUnclampedFieldTypes]);
 
+  // Compute max fractional digits per numeric column for consistent formatting.
+  const computedFractionDigits = useMemo(() => {
+    const result: Record<string, number> = {};
+    if (data && data.length > 0) {
+      for (const [colName, types] of memoizedClampedFieldTypes) {
+        if (types[0] === "number") {
+          let maxDecimals = 0;
+          for (const row of data) {
+            const val = (row as Record<string, unknown>)[colName];
+            if (typeof val === "number" && Number.isFinite(val)) {
+              const str = String(val);
+              const dotIdx = str.indexOf(".");
+              if (dotIdx !== -1) {
+                maxDecimals = Math.max(maxDecimals, str.length - dotIdx - 1);
+              }
+            }
+          }
+          result[colName] = maxDecimals;
+        }
+      }
+    }
+    return result;
+  }, [data, memoizedClampedFieldTypes]);
+
   const memoizedRowHeaders = useDeepCompareMemoize(rowHeaders);
   const memoizedTextJustifyColumns = useDeepCompareMemoize(textJustifyColumns);
   const memoizedWrappedColumns = useDeepCompareMemoize(wrappedColumns);
   const memoizedChartSpecModel = useDeepCompareMemoize(chartSpecModel);
+  const fractionDigitsByColumn = useDeepCompareMemoize(computedFractionDigits);
   const shownColumns = memoizedClampedFieldTypes.length;
 
   // If the field types are not set, we don't show them
@@ -898,6 +923,7 @@ const DataTableComponent = ({
         // Only show data types if they are explicitly set
         showDataTypes: showDataTypes,
         calculateTopKRows: calculate_top_k_rows,
+        fractionDigitsByColumn: fractionDigitsByColumn,
       }),
     [
       selection,
@@ -909,6 +935,7 @@ const DataTableComponent = ({
       memoizedWrappedColumns,
       headerTooltip,
       calculate_top_k_rows,
+      fractionDigitsByColumn,
     ],
   );