@marimo-team/islands 0.21.2-dev62 → 0.21.2-dev64

package/dist/{vega-loader.browser-CQ-lnUkI.js → vega-loader.browser-DnqN5nbz.js}

@@ -1,6 +1,6 @@
-import { a as tickStep, n as precisionPrefix_default, r as precisionFixed_default, s as bisector, t as precisionRound_default } from "./precisionRound-BAc-kQ3q.js";
-import { i as formatSpecifier, n as formatPrefix, r as locale_default, t as format$1 } from "./defaultLocale-Bklbu-Tp.js";
-import { C as timeMinute, N as millisecond, S as utcHour, T as second, _ as utcSunday, a as formatLocale, b as utcDay, c as timeMonth, i as utcParse, l as utcMonth, n as timeParse, o as timeYear, p as timeSunday, r as utcFormat, s as utcYear, t as timeFormat, v as timeDay, w as utcMinute, x as timeHour } from "./defaultLocale-CfQ4kBaV.js";
+import { a as tickStep, n as precisionPrefix_default, r as precisionFixed_default, s as bisector, t as precisionRound_default } from "./precisionRound-C-DW449D.js";
+import { i as formatSpecifier, n as formatPrefix, r as locale_default, t as format$1 } from "./defaultLocale-I3_GfJ4U.js";
+import { C as timeMinute, N as millisecond, S as utcHour, T as second, _ as utcSunday, a as formatLocale, b as utcDay, c as timeMonth, i as utcParse, l as utcMonth, n as timeParse, o as timeYear, p as timeSunday, r as utcFormat, s as utcYear, t as timeFormat, v as timeDay, w as utcMinute, x as timeHour } from "./defaultLocale-Dr6Bz4JK.js";
 function accessor(o, P, F) {
   return o.fields = P || [], o.fname = F, o;
 }

package/dist/velocity-BRacwoCp.js

@@ -0,0 +1,4 @@
+import { t as velocity } from "./velocity-toRwXi-i.js";
+export {
+  velocity
+};

package/dist/verilog-CdotQ5hS.js

@@ -0,0 +1,4 @@
+import { t as verilog } from "./verilog-B1fdOBGb.js";
+export {
+  verilog
+};

package/dist/vhdl-CRMFlLc_.js

@@ -0,0 +1,4 @@
+import { t as vhdl } from "./vhdl-D-vWFb2W.js";
+export {
+  vhdl
+};

package/dist/webidl-Bo-4Hfyi.js

@@ -0,0 +1,4 @@
+import { t as webIDL } from "./webidl-QJDW0ZyQ.js";
+export {
+  webIDL
+};

package/dist/xquery-CgMQN-7i.js

@@ -0,0 +1,4 @@
+import { t as xQuery } from "./xquery-DMMT83Vl.js";
+export {
+  xQuery
+};

package/dist/{xychartDiagram-PRI3JC2R-XO8FiQjU.js → xychartDiagram-PRI3JC2R-D-Of-r2y.js}

@@ -1,17 +1,17 @@
 var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
-import "./purify.es-DGenX2XH.js";
-import { t as linear } from "./linear-DIp6l9sg.js";
-import { n as ordinal } from "./ordinal-Dcvf4J1m.js";
-import { t as range } from "./range-BToS7LsA.js";
-import "./defaultLocale-Bklbu-Tp.js";
-import { t as line_default } from "./line-C1k1rG3Z.js";
-import { i as cleanAndMerge } from "./chunk-S3R3BYOJ-BRT9vd1R.js";
-import { n as initRange } from "./init-Ci8VD8ZH.js";
-import { i as log, r as __name } from "./src-CHUphWwL.js";
-import { B as setAccTitle, C as getDiagramTitle, I as sanitizeText, T as getThemeVariables3, U as setDiagramTitle, _ as getAccDescription, a as clear, c as configureSvgSize, d as defaultConfig_default, v as getAccTitle, y as getConfig, z as setAccDescription } from "./chunk-ABZYJK2D-7QYXAAhe.js";
-import { t as selectSvgElement } from "./chunk-EXTU4WIE-BRFl4iNd.js";
-import "./dist-Bymy0kEH.js";
-import { t as computeDimensionOfText } from "./chunk-JA3XYJ7Z-BkrY9SdL.js";
+import "./purify.es-Co_dANLh.js";
+import { t as linear } from "./linear-Cii2AMNm.js";
+import { n as ordinal } from "./ordinal-Bz8O-XbW.js";
+import { t as range } from "./range-Bn3no95s.js";
+import "./defaultLocale-I3_GfJ4U.js";
+import { t as line_default } from "./line-C5s_12ee.js";
+import { i as cleanAndMerge } from "./chunk-S3R3BYOJ-CQOhwRBS.js";
+import { n as initRange } from "./init-uv0kkh4g.js";
+import { i as log, r as __name } from "./src-Bf2iLOlr.js";
+import { B as setAccTitle, C as getDiagramTitle, I as sanitizeText, T as getThemeVariables3, U as setDiagramTitle, _ as getAccDescription, a as clear, c as configureSvgSize, d as defaultConfig_default, v as getAccTitle, y as getConfig, z as setAccDescription } from "./chunk-ABZYJK2D-DFnIGLNd.js";
+import { t as selectSvgElement } from "./chunk-EXTU4WIE-QrN2mPtn.js";
+import "./dist-BGdYVvOu.js";
+import { t as computeDimensionOfText } from "./chunk-JA3XYJ7Z-B9-EWihm.js";
 function band() {
   var e = ordinal().unknown(void 0), w = e.domain, T = e.range, D = 0, O = 1, k, A, j = false, M = 0, N = 0, P = 0.5;
   delete e.unknown;

package/dist/yacas-6ORYe5fj.js

@@ -0,0 +1,4 @@
+import { t as yacas } from "./yacas-CvzqlDJ_.js";
+export {
+  yacas
+};

package/dist/z80-tFLqkB9-.js

@@ -0,0 +1,4 @@
+import { t as z80 } from "./z80-DqdgHy0p.js";
+export {
+  z80
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.21.2-dev62",
+  "version": "0.21.2-dev64",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

package/src/components/app-config/__tests__/get-dirty-values.test.ts

@@ -2,7 +2,7 @@
 
 import { describe, expect, test } from "vitest";
 import type { UserConfig } from "@/core/config/config-schema";
-import { applyManualInjections, getDirtyValues } from "../user-config-form";
+import { applyManualInjections, getDirtyValues } from "../get-dirty-values";
 
 describe("getDirtyValues", () => {
   test("extracts only dirty fields", () => {

package/src/components/app-config/get-dirty-values.ts

@@ -0,0 +1,100 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import type { FieldPath, FieldValues } from "react-hook-form";
+import type { UserConfig } from "@/core/config/config-schema";
+
+/**
+ * Extract only the values that have been modified (dirty) from form state.
+ * This prevents sending unchanged fields that could overwrite backend values.
+ */
+export function getDirtyValues<T extends FieldValues>(
+  values: T,
+  dirtyFields: Partial<Record<keyof T, unknown>>,
+): Partial<T> {
+  const result: Partial<T> = {};
+  for (const key of Object.keys(dirtyFields) as (keyof T)[]) {
+    const dirty = dirtyFields[key];
+    const value = values[key];
+
+    // Skip if the value no longer exists (e.g., deleted from a record)
+    if (value === undefined) {
+      continue;
+    }
+
+    if (dirty === true) {
+      result[key] = value;
+    } else if (typeof dirty === "object" && dirty !== null) {
+      // Nested object - recurse
+      const nested = getDirtyValues(
+        value as FieldValues,
+        dirty as Partial<Record<string, unknown>>,
+      );
+      if (Object.keys(nested).length > 0) {
+        result[key] = nested as T[keyof T];
+      }
+    }
+  }
+  return result;
+}
+
+type ManualInjector = (
+  values: UserConfig,
+  dirtyValues: Partial<UserConfig>,
+) => void;
+
+const modelsAiInjection = (
+  values: UserConfig,
+  dirtyValues: Partial<UserConfig>,
+) => {
+  dirtyValues.ai = {
+    ...dirtyValues.ai,
+    models: {
+      ...dirtyValues.ai?.models,
+      displayed_models: values.ai?.models?.displayed_models ?? [],
+      custom_models: values.ai?.models?.custom_models ?? [],
+    },
+  };
+};
+
+// Some fields (like AI model lists) have empty arrays as default values.
+// If a user explicitly clears them, RHF won't mark them dirty, so we use
+// touchedFields to force-include those values in the payload.
+const MANUAL_INJECT_ENTRIES = [
+  ["ai.models.displayed_models", modelsAiInjection],
+  ["ai.models.custom_models", modelsAiInjection],
+] as const satisfies readonly (readonly [
+  FieldPath<UserConfig>,
+  ManualInjector,
+])[];
+
+const MANUAL_INJECT_FIELDS = new Map(MANUAL_INJECT_ENTRIES);
+
+const isTouchedPath = (
+  touched: unknown,
+  path: FieldPath<UserConfig>,
+): boolean => {
+  if (!touched) {
+    return false;
+  }
+  let current: unknown = touched;
+  for (const segment of path.split(".")) {
+    if (typeof current !== "object" || current === null) {
+      return false;
+    }
+    current = (current as Record<string, unknown>)[segment];
+  }
+  return current === true;
+};
+
+export const applyManualInjections = (opts: {
+  values: UserConfig;
+  dirtyValues: Partial<UserConfig>;
+  touchedFields: unknown;
+}) => {
+  const { values, dirtyValues, touchedFields } = opts;
+  for (const [fieldPath, injector] of MANUAL_INJECT_FIELDS) {
+    if (isTouchedPath(touchedFields, fieldPath)) {
+      injector(values, dirtyValues);
+    }
+  }
+};

package/src/components/app-config/user-config-form.tsx

@@ -15,7 +15,6 @@ import {
 } from "lucide-react";
 import React, { useId, useRef } from "react";
 import { useLocale } from "react-aria";
-import type { FieldPath, FieldValues } from "react-hook-form";
 import { useForm } from "react-hook-form";
 import type z from "zod";
 import { Button } from "@/components/ui/button";
@@ -59,105 +58,10 @@ import { Tooltip } from "../ui/tooltip";
 import { AiConfig } from "./ai-config";
 import { formItemClasses, SettingGroup } from "./common";
 import { DataForm } from "./data-form";
+import { applyManualInjections, getDirtyValues } from "./get-dirty-values";
 import { IsOverridden } from "./is-overridden";
 import { OptionalFeatures } from "./optional-features";
 
-/**
- * Extract only the values that have been modified (dirty) from form state.
- * This prevents sending unchanged fields that could overwrite backend values.
- */
-export function getDirtyValues<T extends FieldValues>(
-  values: T,
-  dirtyFields: Partial<Record<keyof T, unknown>>,
-): Partial<T> {
-  const result: Partial<T> = {};
-  for (const key of Object.keys(dirtyFields) as (keyof T)[]) {
-    const dirty = dirtyFields[key];
-    const value = values[key];
-
-    // Skip if the value no longer exists (e.g., deleted from a record)
-    if (value === undefined) {
-      continue;
-    }
-
-    if (dirty === true) {
-      result[key] = value;
-    } else if (typeof dirty === "object" && dirty !== null) {
-      // Nested object - recurse
-      const nested = getDirtyValues(
-        value as FieldValues,
-        dirty as Partial<Record<string, unknown>>,
-      );
-      if (Object.keys(nested).length > 0) {
-        result[key] = nested as T[keyof T];
-      }
-    }
-  }
-  return result;
-}
-
-type ManualInjector = (
-  values: UserConfig,
-  dirtyValues: Partial<UserConfig>,
-) => void;
-
-const modelsAiInjection = (
-  values: UserConfig,
-  dirtyValues: Partial<UserConfig>,
-) => {
-  dirtyValues.ai = {
-    ...dirtyValues.ai,
-    models: {
-      ...dirtyValues.ai?.models,
-      displayed_models: values.ai?.models?.displayed_models ?? [],
-      custom_models: values.ai?.models?.custom_models ?? [],
-    },
-  };
-};
-
-// Some fields (like AI model lists) have empty arrays as default values.
-// If a user explicitly clears them, RHF won't mark them dirty, so we use
-// touchedFields to force-include those values in the payload.
-const MANUAL_INJECT_ENTRIES = [
-  ["ai.models.displayed_models", modelsAiInjection],
-  ["ai.models.custom_models", modelsAiInjection],
-] as const satisfies readonly (readonly [
-  FieldPath<UserConfig>,
-  ManualInjector,
-])[];
-
-const MANUAL_INJECT_FIELDS = new Map(MANUAL_INJECT_ENTRIES);
-
-const isTouchedPath = (
-  touched: unknown,
-  path: FieldPath<UserConfig>,
-): boolean => {
-  if (!touched) {
-    return false;
-  }
-  let current: unknown = touched;
-  for (const segment of path.split(".")) {
-    if (typeof current !== "object" || current === null) {
-      return false;
-    }
-    current = (current as Record<string, unknown>)[segment];
-  }
-  return current === true;
-};
-
-export const applyManualInjections = (opts: {
-  values: UserConfig;
-  dirtyValues: Partial<UserConfig>;
-  touchedFields: unknown;
-}) => {
-  const { values, dirtyValues, touchedFields } = opts;
-  for (const [fieldPath, injector] of MANUAL_INJECT_FIELDS) {
-    if (isTouchedPath(touchedFields, fieldPath)) {
-      injector(values, dirtyValues);
-    }
-  }
-};
-
 const categories = [
   {
     id: "editor",

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

@@ -222,6 +222,75 @@ describe("generateColumns", () => {
     expect(columns[1].meta?.dataType).toBe("number");
   });
 
+  it("should auto right-align numeric columns", () => {
+    const columns = generateColumns({
+      rowHeaders: [],
+      selection: null,
+      fieldTypes,
+    });
+
+    // "age" is a number column — should auto right-align
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const cell = (columns[1].cell as any)({
+      column: {
+        columnDef: columns[1],
+      },
+      renderValue: () => 25,
+      getValue: () => 25,
+    });
+    expect(cell?.props.className).toContain("text-right");
+
+    // "name" is a string column — should remain left-aligned
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const nameCell = (columns[0].cell as any)({
+      column: {
+        columnDef: columns[0],
+      },
+      renderValue: () => "John",
+      getValue: () => "John",
+    });
+    expect(nameCell?.props.className).not.toContain("text-right");
+  });
+
+  it("should respect explicit textJustifyColumns over auto alignment", () => {
+    const columns = generateColumns({
+      rowHeaders: [],
+      selection: null,
+      fieldTypes,
+      textJustifyColumns: { age: "left" },
+    });
+
+    // "age" is numeric but explicitly set to left
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const cell = (columns[1].cell as any)({
+      column: {
+        columnDef: columns[1],
+      },
+      renderValue: () => 25,
+      getValue: () => 25,
+    });
+    expect(cell?.props.className).not.toContain("text-right");
+  });
+
+  it("should set minFractionDigits from fractionDigitsByColumn", () => {
+    const numericFieldTypes: FieldTypesWithExternalType = [
+      ["price", ["number", "float64"]],
+      ["count", ["integer", "int64"]],
+    ];
+
+    const columns = generateColumns({
+      rowHeaders: [],
+      selection: null,
+      fieldTypes: numericFieldTypes,
+      fractionDigitsByColumn: { price: 2 },
+    });
+
+    // price has 2 fraction digits
+    expect(columns[0].meta?.minFractionDigits).toBe(2);
+    // count not in fractionDigitsByColumn
+    expect(columns[1].meta?.minFractionDigits).toBeUndefined();
+  });
+
   it("should handle text justification and wrapping", () => {
     const columns = generateColumns({
       rowHeaders: [],
@@ -572,6 +641,75 @@ describe("LocaleNumber", () => {
     );
     expect(container.textContent).toMatchInlineSnapshot(`"10,000,000,000"`);
   });
+
+  it("should pad decimals with minFractionDigits", () => {
+    const { container } = render(
+      <I18nProvider locale="en-US">
+        <LocaleNumber value={42} minFractionDigits={2} />
+      </I18nProvider>,
+    );
+    expect(container.textContent).toMatchInlineSnapshot(`"42.00"`);
+  });
+
+  it("should pad to minFractionDigits for numbers with fewer decimals", () => {
+    const { container } = render(
+      <I18nProvider locale="en-US">
+        <LocaleNumber value={1234.5} minFractionDigits={3} />
+      </I18nProvider>,
+    );
+    expect(container.textContent).toMatchInlineSnapshot(`"1,234.500"`);
+  });
+
+  it("should not truncate decimals beyond minFractionDigits", () => {
+    const { container } = render(
+      <I18nProvider locale="en-US">
+        <LocaleNumber value={1.234_56} minFractionDigits={2} />
+      </I18nProvider>,
+    );
+    expect(container.textContent).toMatchInlineSnapshot(`"1.23456"`);
+  });
+});
+
+describe("renderCellValue with boolean values", () => {
+  const createMockColumn = () =>
+    ({
+      id: "active",
+      columnDef: {
+        meta: {
+          dataType: "boolean" as const,
+          dtype: "bool",
+        },
+      },
+      getColumnFormatting: () => undefined,
+      getColumnWrapping: () => undefined,
+      applyColumnFormatting: (value: unknown) => value,
+    }) as unknown as Column<unknown>;
+
+  it("should render true as True", () => {
+    const mockColumn = createMockColumn();
+    const result = renderCellValue({
+      column: mockColumn,
+      renderValue: () => true,
+      getValue: () => true,
+      selectCell: undefined,
+      cellStyles: "",
+    });
+    const { container } = render(result);
+    expect(container.textContent).toBe("True");
+  });
+
+  it("should render false as False", () => {
+    const mockColumn = createMockColumn();
+    const result = renderCellValue({
+      column: mockColumn,
+      renderValue: () => false,
+      getValue: () => false,
+      selectCell: undefined,
+      cellStyles: "",
+    });
+    const { container } = render(result);
+    expect(container.textContent).toBe("False");
+  });
 });
 
 describe("renderCellValue with datetime values", () => {

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/editor/package-alert.tsx

@@ -44,7 +44,7 @@ import {
   type UserConfig,
   UserConfigSchema,
 } from "../../core/config/config-schema";
-import { getDirtyValues } from "../app-config/user-config-form";
+import { getDirtyValues } from "../app-config/get-dirty-values";
 import { Button } from "../ui/button";
 import {
   DropdownMenu,

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,
     ],
   );