@marimo-team/islands 0.23.11-dev24 → 0.23.11-dev26

package/dist/{reveal-component-DXlT6Hso.js → reveal-component-BT7IWgAh.js}

@@ -9,7 +9,7 @@ import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
 import { lt as kioskModeAtom } from "./html-to-image-BJbLjZyG.js";
 import "./chunk-5FQGJX7Z-BbqSm5gU.js";
 import { u as createLucideIcon } from "./dist-Dk6PV_d3.js";
-import { a as DEFAULT_SLIDE_TYPE, c as Slide, ct as PanelResizeHandle, i as DEFAULT_DECK_TRANSITION, in as Expand, ot as Panel, rn as EyeOff, s as SlideSidebar, sn as Code, st as PanelGroup, t as useNotebookCodeAvailable } from "./code-visibility-Cw3yT99u.js";
+import { a as DEFAULT_SLIDE_TYPE, c as Slide, ct as PanelResizeHandle, i as DEFAULT_DECK_TRANSITION, in as Expand, ot as Panel, rn as EyeOff, s as SlideSidebar, sn as Code, st as PanelGroup, t as useNotebookCodeAvailable } from "./code-visibility-CPhtKPn4.js";
 import { X as useDebouncedCallback } from "./input-Cn-SZdXY.js";
 import "./toDate-B4-pUFYh.js";
 import "./react-dom-BTJzcVJ9.js";

package/package.json

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

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

@@ -1082,3 +1082,23 @@ describe("renderCellValue with datetime values", () => {
     });
   });
 });
+
+test("column_widths sets fixed size and meta.width", () => {
+  const cols = generateColumns({
+    rowHeaders: [],
+    selection: null,
+    fieldTypes: [
+      ["a", ["number", "int64"]],
+      ["b", ["string", "str"]],
+    ],
+    columnWidths: { a: 120 },
+  });
+  const a = cols.find((c) => c.id === "a");
+  const b = cols.find((c) => c.id === "b");
+  expect(a?.size).toBe(120);
+  expect(a?.minSize).toBe(120);
+  expect(a?.maxSize).toBe(120);
+  expect(a?.meta?.width).toBe(120);
+  expect(b?.size).toBeUndefined();
+  expect(b?.meta?.width).toBeUndefined();
+});

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

@@ -118,6 +118,7 @@ export function generateColumns<T>({
   showDataTypes,
   calculateTopKRows,
   fractionDigitsByColumn,
+  columnWidths,
 }: {
   rowHeaders: FieldTypesWithExternalType;
   selection: DataTableSelection;
@@ -129,6 +130,7 @@ export function generateColumns<T>({
   showDataTypes?: boolean;
   calculateTopKRows?: CalculateTopKRows;
   fractionDigitsByColumn?: Record<string, number>;
+  columnWidths?: Record<string, number>;
 }): ColumnDef<T>[] {
   // Row-headers are typically index columns
   const rowHeadersSet = new Set(rowHeaders.map(([columnName]) => columnName));
@@ -311,7 +313,20 @@ export function generateColumns<T>({
       // Can only sort if key is defined
       // For example, unnamed index columns, won't be sortable
       enableSorting: !!key,
-      meta: getMeta(key),
+      meta: {
+        ...getMeta(key),
+        width: columnWidths?.[key],
+      },
+      // size seeds the width before measurement; minSize/maxSize pin
+      // getSize() to the fixed width so the per-paint measurement writeback
+      // cannot drift the header width or sticky-pin offsets.
+      ...(columnWidths?.[key] !== undefined
+        ? {
+            size: columnWidths[key],
+            minSize: columnWidths[key],
+            maxSize: columnWidths[key],
+          }
+        : {}),
     }),
   );
 

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

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

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

@@ -141,6 +141,7 @@ export const DataTableBody = <TData,>({
   const renderCells = (cells: Cell<TData, unknown>[]) => {
     return cells.map((cell) => {
       const { className, style: pinningstyle } = getPinningStyles(cell.column);
+      const fixedWidth = cell.column.columnDef.meta?.width;
       const style = Object.assign(
         {},
         cell.getUserStyling?.() || {},
@@ -153,7 +154,8 @@ export const DataTableBody = <TData,>({
           {...getCellDomProps(cell.id)}
           key={cell.id}
           className={cn(
-            "whitespace-pre truncate max-w-[300px] outline-hidden border-r border-r-border/75",
+            "whitespace-pre truncate outline-hidden border-r border-r-border/75",
+            !fixedWidth && "max-w-[300px]",
             cell.column.getColumnWrapping &&
               cell.column.getColumnWrapping?.() === "wrap" &&
               COLUMN_WRAPPING_STYLES,
@@ -297,6 +299,7 @@ function getPinningStyles<TData>(
     isPinned === "left" && column.getIsLastColumn("left");
   const isFirstRightPinnedColumn =
     isPinned === "right" && column.getIsFirstColumn("right");
+  const fixedWidth = column.columnDef.meta?.width;
 
   return {
     className: cn(isPinned && "bg-inherit", "shadow-r z-10"),
@@ -313,6 +316,7 @@ function getPinningStyles<TData>(
       position: isPinned ? "sticky" : "relative",
       zIndex: isPinned ? 1 : 0,
       width: column.getSize(),
+      ...(fixedWidth ? { minWidth: fixedWidth, maxWidth: fixedWidth } : {}),
     },
   };
 }

package/src/plugins/impl/DataTablePlugin.tsx

@@ -195,6 +195,7 @@ interface Data<T> {
   hiddenColumns?: string[];
   textJustifyColumns?: Record<string, "left" | "center" | "right">;
   wrappedColumns?: string[];
+  columnWidths?: Record<string, number>;
   headerTooltip?: Record<string, string>;
   totalColumns: number;
   maxColumns: number | "all";
@@ -274,6 +275,9 @@ export const DataTablePlugin = createPlugin<S>("marimo-table")
         .record(z.string(), z.enum(["left", "center", "right"]))
         .optional(),
       wrappedColumns: z.array(z.string()).optional(),
+      columnWidths: z
+        .record(z.string(), z.number().int().positive())
+        .optional(),
       headerTooltip: z.record(z.string(), z.string()).optional(),
       fieldTypes: columnToFieldTypesSchema.nullish(),
       totalColumns: z.number(),
@@ -848,6 +852,7 @@ const DataTableComponent = ({
   hiddenColumns,
   textJustifyColumns,
   wrappedColumns,
+  columnWidths,
   headerTooltip,
   totalColumns,
   get_row_ids,
@@ -935,6 +940,7 @@ const DataTableComponent = ({
   const memoizedRowHeaders = useDeepCompareMemoize(rowHeaders);
   const memoizedTextJustifyColumns = useDeepCompareMemoize(textJustifyColumns);
   const memoizedWrappedColumns = useDeepCompareMemoize(wrappedColumns);
+  const memoizedColumnWidths = useDeepCompareMemoize(columnWidths);
   const memoizedChartSpecModel = useDeepCompareMemoize(chartSpecModel);
   const fractionDigitsByColumn = useDeepCompareMemoize(computedFractionDigits);
   const shownColumns = memoizedClampedFieldTypes.length;
@@ -953,6 +959,7 @@ const DataTableComponent = ({
         fieldTypes: memoizedClampedFieldTypes,
         textJustifyColumns: memoizedTextJustifyColumns,
         wrappedColumns: memoizedWrappedColumns,
+        columnWidths: memoizedColumnWidths,
         headerTooltip: headerTooltip,
         // Only show data types if they are explicitly set
         showDataTypes: showDataTypes,
@@ -967,6 +974,7 @@ const DataTableComponent = ({
       memoizedClampedFieldTypes,
       memoizedTextJustifyColumns,
       memoizedWrappedColumns,
+      memoizedColumnWidths,
       headerTooltip,
       calculate_top_k_rows,
       fractionDigitsByColumn,