@marimo-team/islands 0.19.10-dev35 → 0.19.10-dev39

package/dist/main.js

@@ -62110,7 +62110,7 @@ Defaulting to \`null\`.`;
     }
   ];
   const DownloadAs = (e) => {
-    let r = (0, import_compiler_runtime$104.c)(18), { locale: c } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7(), d;
+    let r = (0, import_compiler_runtime$104.c)(19), { locale: c } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7(), d;
     r[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (d = (0, import_jsx_runtime.jsxs)(Button, {
       "data-testid": "download-as-button",
       size: "xs",
@@ -62159,31 +62159,31 @@ Defaulting to \`null\`.`;
       children: f
     }), r[6] = O) : O = r[6];
     let M;
-    r[7] === v ? M = r[8] : (M = options.map((e2) => (0, import_jsx_runtime.jsxs)(DropdownMenuItem, {
+    r[7] !== v || r[8] !== e.downloadFileName ? (M = options.map((r2) => (0, import_jsx_runtime.jsxs)(DropdownMenuItem, {
       onSelect: async () => {
-        let r2 = await v(e2.format), c2 = e2.format;
-        downloadByURL(r2, `download.${c2}`);
+        let c2 = await v(r2.format), d2 = r2.format, f2 = (e.downloadFileName ?? "").trim();
+        downloadByURL(c2, `${Filenames.withoutExtension(f2) || "download"}.${d2}`);
       },
       children: [
-        (0, import_jsx_runtime.jsx)(e2.icon, {
+        (0, import_jsx_runtime.jsx)(r2.icon, {
           className: "mo-dropdown-icon"
         }),
-        e2.label
+        r2.label
       ]
-    }, e2.label)), r[7] = v, r[8] = M);
+    }, r2.label)), r[7] = v, r[8] = e.downloadFileName, r[9] = M) : M = r[9];
     let I;
-    r[9] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (I = (0, import_jsx_runtime.jsx)(DropdownMenuSeparator, {}), r[9] = I) : I = r[9];
+    r[10] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (I = (0, import_jsx_runtime.jsx)(DropdownMenuSeparator, {}), r[10] = I) : I = r[10];
     let z;
-    r[10] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (z = (0, import_jsx_runtime.jsxs)(DropdownMenuSubTrigger, {
+    r[11] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (z = (0, import_jsx_runtime.jsxs)(DropdownMenuSubTrigger, {
       children: [
         (0, import_jsx_runtime.jsx)(ClipboardList, {
           className: "mo-dropdown-icon"
         }),
         "Copy to clipboard"
       ]
-    }), r[10] = z) : z = r[10];
+    }), r[11] = z) : z = r[11];
     let G;
-    r[11] === S ? G = r[12] : (G = clipboardOptions.map((e2) => (0, import_jsx_runtime.jsxs)(DropdownMenuItem, {
+    r[12] === S ? G = r[13] : (G = clipboardOptions.map((e2) => (0, import_jsx_runtime.jsxs)(DropdownMenuItem, {
       onSelect: async () => {
         try {
           await S(e2.format);
@@ -62212,18 +62212,18 @@ Defaulting to \`null\`.`;
           ]
         })
       ]
-    }, e2.label)), r[11] = S, r[12] = G);
+    }, e2.label)), r[12] = S, r[13] = G);
     let q;
-    r[13] === G ? q = r[14] : (q = (0, import_jsx_runtime.jsxs)(DropdownMenuSub, {
+    r[14] === G ? q = r[15] : (q = (0, import_jsx_runtime.jsxs)(DropdownMenuSub, {
       children: [
         z,
         (0, import_jsx_runtime.jsx)(DropdownMenuSubContent, {
           children: G
         })
       ]
-    }), r[13] = G, r[14] = q);
+    }), r[14] = G, r[15] = q);
     let IY;
-    return r[15] !== M || r[16] !== q ? (IY = (0, import_jsx_runtime.jsxs)(DropdownMenu, {
+    return r[16] !== M || r[17] !== q ? (IY = (0, import_jsx_runtime.jsxs)(DropdownMenu, {
       modal: false,
       children: [
         O,
@@ -62237,7 +62237,7 @@ Defaulting to \`null\`.`;
           ]
         })
       ]
-    }), r[15] = M, r[16] = q, r[17] = IY) : IY = r[17], IY;
+    }), r[16] = M, r[17] = q, r[18] = IY) : IY = r[18], IY;
   };
   function fetchJson(e) {
     return fetchText(e).then(jsonParseWithSpecialChar);
@@ -62495,7 +62495,7 @@ Defaulting to \`null\`.`;
   const prettifyRowColumnCount = (e, r, c) => [
     e === "too_many" ? "Unknown" : prettifyRowCount(e, c),
     `${prettyNumber(r, c)} ${new PluralWord("column").pluralize(r)}`
-  ].join(", "), TableActions = ({ enableSearch: e, onSearchQueryChange: r, isSearchEnabled: c, setIsSearchEnabled: d, pagination: f, totalColumns: _, selection: v, onRowSelectionChange: y, table: S, downloadAs: E, getRowIds: O, toggleDisplayHeader: M, showChartBuilder: I, showColumnExplorer: z, showRowExplorer: G, showPageSizeSelector: q, togglePanel: IY, isPanelOpen: LY, tableLoading: RY }) => (0, import_jsx_runtime.jsxs)("div", {
+  ].join(", "), TableActions = ({ enableSearch: e, onSearchQueryChange: r, isSearchEnabled: c, setIsSearchEnabled: d, pagination: f, totalColumns: _, selection: v, onRowSelectionChange: y, table: S, downloadAs: E, downloadFileName: O, getRowIds: M, toggleDisplayHeader: I, showChartBuilder: z, showColumnExplorer: G, showRowExplorer: q, showPageSizeSelector: IY, togglePanel: LY, isPanelOpen: RY, tableLoading: zY }) => (0, import_jsx_runtime.jsxs)("div", {
     className: "flex items-center shrink-0 pt-1",
     children: [
       r && e && (0, import_jsx_runtime.jsx)(Tooltip, {
@@ -62510,41 +62510,41 @@ Defaulting to \`null\`.`;
           })
         })
       }),
-      I && (0, import_jsx_runtime.jsx)(Tooltip, {
+      z && (0, import_jsx_runtime.jsx)(Tooltip, {
         content: "Chart builder",
         children: (0, import_jsx_runtime.jsx)(Button, {
           variant: "text",
           size: "xs",
           className: "mb-0 print:hidden",
-          onClick: M,
+          onClick: I,
           children: (0, import_jsx_runtime.jsx)(ChartSpline, {
             className: "w-4 h-4 text-muted-foreground"
           })
         })
       }),
-      IY && LY !== void 0 && (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+      LY && RY !== void 0 && (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
         children: [
-          G && (0, import_jsx_runtime.jsx)(Tooltip, {
+          q && (0, import_jsx_runtime.jsx)(Tooltip, {
             content: "Toggle row viewer",
             children: (0, import_jsx_runtime.jsx)(Button, {
               variant: "text",
               size: "xs",
-              onClick: () => IY("row-viewer"),
+              onClick: () => LY("row-viewer"),
               className: "print:hidden",
               children: (0, import_jsx_runtime.jsx)(PanelRight, {
-                className: cn("w-4 h-4 text-muted-foreground", LY("row-viewer") && "text-primary")
+                className: cn("w-4 h-4 text-muted-foreground", RY("row-viewer") && "text-primary")
               })
             })
           }),
-          z && (0, import_jsx_runtime.jsx)(Tooltip, {
+          G && (0, import_jsx_runtime.jsx)(Tooltip, {
             content: "Toggle column explorer",
             children: (0, import_jsx_runtime.jsx)(Button, {
               variant: "text",
               size: "xs",
-              onClick: () => IY("column-explorer"),
+              onClick: () => LY("column-explorer"),
               className: "print:hidden",
               children: (0, import_jsx_runtime.jsx)(ChartColumnStacked, {
-                className: cn("w-4 h-4 text-muted-foreground", LY("column-explorer") && "text-primary")
+                className: cn("w-4 h-4 text-muted-foreground", RY("column-explorer") && "text-primary")
               })
             })
           })
@@ -62568,11 +62568,11 @@ Defaulting to \`null\`.`;
             ]);
             y(Object.fromEntries(e3));
           };
-          if (!O) {
+          if (!M) {
             r2();
             return;
           }
-          O({}).then((e3) => {
+          M({}).then((e3) => {
             if (e3.error) {
               toast({
                 title: "Not available",
@@ -62588,32 +62588,33 @@ Defaulting to \`null\`.`;
           });
         },
         table: S,
-        tableLoading: RY,
-        showPageSizeSelector: q
+        tableLoading: zY,
+        showPageSizeSelector: IY
       }),
       (0, import_jsx_runtime.jsx)("div", {
         className: "ml-auto",
         children: E && (0, import_jsx_runtime.jsx)(DownloadAs, {
-          downloadAs: E
+          downloadAs: E,
+          downloadFileName: O
         })
       })
     ]
-  }), DataTable = (0, import_react.memo)(({ wrapperClassName: e, className: r, maxHeight: c, columns: d, data: f, selection: _, totalColumns: v, totalRows: y, manualSorting: S = false, sorting: w, setSorting: E, rowSelection: O, cellSelection: M, cellStyling: I, hoverTemplate: z, cellHoverTexts: G, paginationState: q, setPaginationState: IY, downloadAs: LY, manualPagination: RY = false, pagination: zY = false, onRowSelectionChange: BY, onCellSelectionChange: VY, getRowIds: HY, enableSearch: UY = false, searchQuery: WY, onSearchQueryChange: GY, showFilters: KY = false, filters: qY, onFiltersChange: JY, reloading: YY, freezeColumnsLeft: XY, freezeColumnsRight: ZY, toggleDisplayHeader: QY, showChartBuilder: $Y, showPageSizeSelector: eX, showColumnExplorer: tX, showRowExplorer: nX, togglePanel: rX, isPanelOpen: iX, viewedRowIdx: aX, onViewedRowChange: oX }) => {
-    let [sX, cX] = import_react.useState(false), [lX, uX] = import_react.useState(false), { locale: dX } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7(), { columnPinning: fX, setColumnPinning: pX } = useColumnPinning(XY, ZY);
+  }), DataTable = (0, import_react.memo)(({ wrapperClassName: e, className: r, maxHeight: c, columns: d, data: f, selection: _, totalColumns: v, totalRows: y, manualSorting: S = false, sorting: w, setSorting: E, rowSelection: O, cellSelection: M, cellStyling: I, hoverTemplate: z, cellHoverTexts: G, paginationState: q, setPaginationState: IY, downloadAs: LY, downloadFileName: RY, manualPagination: zY = false, pagination: BY = false, onRowSelectionChange: VY, onCellSelectionChange: HY, getRowIds: UY, enableSearch: WY = false, searchQuery: GY, onSearchQueryChange: KY, showFilters: qY = false, filters: JY, onFiltersChange: YY, reloading: XY, freezeColumnsLeft: ZY, freezeColumnsRight: QY, toggleDisplayHeader: $Y, showChartBuilder: eX, showPageSizeSelector: tX, showColumnExplorer: nX, showRowExplorer: rX, togglePanel: iX, isPanelOpen: aX, viewedRowIdx: oX, onViewedRowChange: sX }) => {
+    let [cX, lX] = import_react.useState(false), [uX, dX] = import_react.useState(false), { locale: fX } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7(), { columnPinning: pX, setColumnPinning: mX } = useColumnPinning(ZY, QY);
     import_react.useEffect(() => {
       let e2;
-      return YY ? e2 = setTimeout(() => {
-        uX(true);
-      }, 300) : uX(false), () => {
+      return XY ? e2 = setTimeout(() => {
+        dX(true);
+      }, 300) : dX(false), () => {
         e2 && clearTimeout(e2);
       };
     }, [
-      YY
+      XY
     ]);
-    function mX(e2, r2) {
-      return q ? r2 + (RY ? q.pageIndex * q.pageSize : 0) : r2;
+    function hX(e2, r2) {
+      return q ? r2 + (zY ? q.pageIndex * q.pageSize : 0) : r2;
     }
-    let hX = useReactTable({
+    let gX = useReactTable({
       _features: [
         ColumnPinning,
         ColumnWrappingFeature,
@@ -62634,12 +62635,12 @@ Defaulting to \`null\`.`;
         getRowId: (e2, r2) => {
           let c2 = getStableRowId(e2);
           if (c2) return c2;
-          let d2 = mX(e2, r2);
+          let d2 = hX(e2, r2);
           return String(d2);
         }
       } : {},
-      locale: dX,
-      manualPagination: RY,
+      locale: fX,
+      manualPagination: zY,
       getPaginationRowModel: getPaginationRowModel(),
       ...E ? {
         onSortingChange: E
@@ -62648,24 +62649,24 @@ Defaulting to \`null\`.`;
       enableMultiSort: true,
       getSortedRowModel: getSortedRowModel(),
       manualFiltering: true,
-      enableColumnFilters: KY,
+      enableColumnFilters: qY,
       getFilteredRowModel: getFilteredRowModel(),
-      onColumnFiltersChange: JY,
-      onRowSelectionChange: BY,
-      onCellSelectionChange: VY,
+      onColumnFiltersChange: YY,
+      onRowSelectionChange: VY,
+      onCellSelectionChange: HY,
       enableCellSelection: _ === "single-cell" || _ === "multi-cell",
       enableMultiCellSelection: _ === "multi-cell",
-      onColumnPinningChange: pX,
+      onColumnPinningChange: mX,
       enableFocusRow: true,
-      onFocusRowChange: oX,
+      onFocusRowChange: sX,
       state: {
         ...w ? {
           sorting: w
         } : {},
-        columnFilters: qY,
+        columnFilters: JY,
         ...q ? {
           pagination: q
-        } : zY && !q ? {} : {
+        } : BY && !q ? {} : {
           pagination: {
             pageIndex: 0,
             pageSize: f.length
@@ -62674,14 +62675,14 @@ Defaulting to \`null\`.`;
         rowSelection: O ?? {},
         cellSelection: M ?? [],
         cellStyling: I,
-        columnPinning: fX,
+        columnPinning: pX,
         cellHoverTemplate: z,
         cellHoverTexts: G ?? {}
       }
-    }), gX = (iX == null ? void 0 : iX("row-viewer")) ?? false, _X = import_react.useRef(null);
+    }), _X = (aX == null ? void 0 : aX("row-viewer")) ?? false, vX = import_react.useRef(null);
     return import_react.useEffect(() => {
-      if (!_X.current) return;
-      let e2 = _X.current.parentElement;
+      if (!vX.current) return;
+      let e2 = vX.current.parentElement;
       e2 && (c ? (e2.style.maxHeight = `${c}px`, e2.style.overflow || (e2.style.overflow = "auto")) : e2.style.removeProperty("max-height"));
     }, [
       c
@@ -62689,34 +62690,34 @@ Defaulting to \`null\`.`;
       className: cn(e, "flex flex-col space-y-1"),
       children: [
         (0, import_jsx_runtime.jsx)(FilterPills, {
-          filters: qY,
-          table: hX
+          filters: JY,
+          table: gX
         }),
         (0, import_jsx_runtime.jsxs)("div", {
           className: cn(r || "rounded-md border overflow-hidden"),
           children: [
-            GY && UY && (0, import_jsx_runtime.jsx)(SearchBar, {
-              value: WY || "",
-              onHide: () => cX(false),
-              handleSearch: GY,
-              hidden: !sX,
-              reloading: YY
+            KY && WY && (0, import_jsx_runtime.jsx)(SearchBar, {
+              value: GY || "",
+              onHide: () => lX(false),
+              handleSearch: KY,
+              hidden: !cX,
+              reloading: XY
             }),
             (0, import_jsx_runtime.jsxs)(Table, {
               className: "relative",
-              ref: _X,
+              ref: vX,
               children: [
-                lX && (0, import_jsx_runtime.jsx)("thead", {
+                uX && (0, import_jsx_runtime.jsx)("thead", {
                   className: "absolute top-0 left-0 h-[3px] w-1/2 bg-primary animate-slide"
                 }),
-                renderTableHeader(hX, !!c),
+                renderTableHeader(gX, !!c),
                 (0, import_jsx_runtime.jsx)(CellSelectionProvider, {
                   children: (0, import_jsx_runtime.jsx)(DataTableBody, {
-                    table: hX,
+                    table: gX,
                     columns: d,
-                    rowViewerPanelOpen: gX,
-                    getRowIndex: mX,
-                    viewedRowIdx: aX
+                    rowViewerPanelOpen: _X,
+                    getRowIndex: hX,
+                    viewedRowIdx: oX
                   })
                 })
               ]
@@ -62724,25 +62725,26 @@ Defaulting to \`null\`.`;
           ]
         }),
         (0, import_jsx_runtime.jsx)(TableActions, {
-          enableSearch: UY,
+          enableSearch: WY,
           totalColumns: v,
-          onSearchQueryChange: GY,
-          isSearchEnabled: sX,
-          setIsSearchEnabled: cX,
-          pagination: zY,
+          onSearchQueryChange: KY,
+          isSearchEnabled: cX,
+          setIsSearchEnabled: lX,
+          pagination: BY,
           selection: _,
-          onRowSelectionChange: BY,
-          table: hX,
+          onRowSelectionChange: VY,
+          table: gX,
           downloadAs: LY,
-          getRowIds: HY,
-          toggleDisplayHeader: QY,
-          showChartBuilder: $Y,
-          showPageSizeSelector: eX,
-          showColumnExplorer: tX,
-          showRowExplorer: nX,
-          togglePanel: rX,
-          isPanelOpen: iX,
-          tableLoading: YY
+          downloadFileName: RY,
+          getRowIds: UY,
+          toggleDisplayHeader: $Y,
+          showChartBuilder: eX,
+          showPageSizeSelector: tX,
+          showColumnExplorer: nX,
+          showRowExplorer: rX,
+          togglePanel: iX,
+          isPanelOpen: aX,
+          tableLoading: XY
         })
       ]
     });
@@ -73304,7 +73306,7 @@ Image URL: ${r.imageUrl}`)), contextToXml({
       return Logger.warn("Failed to get version from mount config"), null;
     }
   }
-  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.19.10-dev35"), showCodeInRunModeAtom = atom(true);
+  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.19.10-dev39"), showCodeInRunModeAtom = atom(true);
   atom(null);
   var import_compiler_runtime$88 = require_compiler_runtime();
   function useKeydownOnElement(e, r) {
@@ -83558,7 +83560,8 @@ ${c}
     hoverTemplate: string$2().optional(),
     cellHoverTexts: cellHoverTextSchema,
     lazy: boolean$2().default(false),
-    preload: boolean$2().default(false)
+    preload: boolean$2().default(false),
+    downloadFileName: string$2().optional()
   })).withFunctions({
     download_as: DownloadAsSchema,
     get_column_summaries: rpc.input(looseObject({})).output(object$1({
@@ -83855,8 +83858,8 @@ ${c}
     }), r[98] = sX, r[99] = _X, r[100] = vX) : vX = r[100], vX;
   });
   LoadingDataTableComponent.displayName = "LoadingDataTableComponent";
-  var DataTableComponent = ({ label: e, data: r, totalRows: c, maxColumns: d, pagination: f, selection: _, value: v, showFilters: y, showDownload: S, showPageSizeSelector: w, showColumnExplorer: E, showRowExplorer: O, showChartBuilder: M, showDataTypes: I, rowHeaders: z, fieldTypes: G, paginationState: q, setPaginationState: IY, download_as: LY, columnSummaries: RY, className: zY, setValue: BY, sorting: VY, setSorting: HY, enableSearch: UY, searchQuery: WY, setSearchQuery: GY, filters: KY, setFilters: qY, reloading: JY, freezeColumnsLeft: YY, freezeColumnsRight: XY, textJustifyColumns: ZY, wrappedColumns: QY, headerTooltip: $Y, totalColumns: eX, get_row_ids: tX, cellStyles: nX, hoverTemplate: rX, cellHoverTexts: iX, toggleDisplayHeader: oX, calculate_top_k_rows: sX, preview_column: cX, getRow: lX, cellId: uX, maxHeight: dX }) => {
-    let fX = (0, import_react.useId)(), [pX, mX] = (0, import_react.useState)(0), { isPanelOpen: hX, togglePanel: gX } = usePanelOwnership(fX, uX), _X = (0, import_react.useMemo)(() => {
+  var DataTableComponent = ({ label: e, data: r, totalRows: c, maxColumns: d, pagination: f, selection: _, value: v, showFilters: y, showDownload: S, showPageSizeSelector: w, showColumnExplorer: E, showRowExplorer: O, showChartBuilder: M, showDataTypes: I, rowHeaders: z, fieldTypes: G, paginationState: q, setPaginationState: IY, download_as: LY, columnSummaries: RY, className: zY, setValue: BY, sorting: VY, setSorting: HY, enableSearch: UY, searchQuery: WY, setSearchQuery: GY, filters: KY, setFilters: qY, reloading: JY, freezeColumnsLeft: YY, freezeColumnsRight: XY, textJustifyColumns: ZY, wrappedColumns: QY, headerTooltip: $Y, totalColumns: eX, get_row_ids: tX, cellStyles: nX, hoverTemplate: rX, cellHoverTexts: iX, downloadFileName: oX, toggleDisplayHeader: sX, calculate_top_k_rows: cX, preview_column: lX, getRow: uX, cellId: dX, maxHeight: fX }) => {
+    let pX = (0, import_react.useId)(), [mX, hX] = (0, import_react.useState)(0), { isPanelOpen: gX, togglePanel: _X } = usePanelOwnership(pX, dX), vX = (0, import_react.useMemo)(() => {
       if (!RY || !G || !RY.stats) return ColumnChartSpecModel.EMPTY;
       let e2 = toFieldTypes(G);
       return new ColumnChartSpecModel(RY.data || [], e2, RY.stats, RY.bin_values, RY.value_counts, {
@@ -83865,55 +83868,55 @@ ${c}
     }, [
       G,
       RY
-    ]), vX = useDeepCompareMemoize(G ?? inferFieldTypes(r)), yX = (0, import_react.useMemo)(() => d === "all" ? vX : vX.slice(0, d), [
+    ]), yX = useDeepCompareMemoize(G ?? inferFieldTypes(r)), bX = (0, import_react.useMemo)(() => d === "all" ? yX : yX.slice(0, d), [
       d,
-      vX
-    ]), bX = useDeepCompareMemoize(z), xX = useDeepCompareMemoize(ZY), SX = useDeepCompareMemoize(QY), CX = useDeepCompareMemoize(_X), wX = yX.length;
+      yX
+    ]), xX = useDeepCompareMemoize(z), SX = useDeepCompareMemoize(ZY), CX = useDeepCompareMemoize(QY), wX = useDeepCompareMemoize(vX), TX = bX.length;
     G || (I = false);
-    let TX = (0, import_react.useMemo)(() => generateColumns({
-      rowHeaders: bX,
+    let EX = (0, import_react.useMemo)(() => generateColumns({
+      rowHeaders: xX,
       selection: _,
-      chartSpecModel: CX,
-      fieldTypes: yX,
-      textJustifyColumns: xX,
-      wrappedColumns: SX,
+      chartSpecModel: wX,
+      fieldTypes: bX,
+      textJustifyColumns: SX,
+      wrappedColumns: CX,
       headerTooltip: $Y,
       showDataTypes: I,
-      calculateTopKRows: sX
+      calculateTopKRows: cX
     }), [
       _,
       I,
-      CX,
-      bX,
-      yX,
+      wX,
       xX,
+      bX,
       SX,
+      CX,
       $Y,
-      sX
-    ]), EX = (0, import_react.useMemo)(() => Object.fromEntries((v || []).map((e2) => [
+      cX
+    ]), DX = (0, import_react.useMemo)(() => Object.fromEntries((v || []).map((e2) => [
       e2,
       true
     ])), [
       v
-    ]), DX = useEvent_default((e2) => {
+    ]), OX = useEvent_default((e2) => {
       if (_ === "single") {
         let r2 = Functions.asUpdater(e2)({});
         BY(Object.keys(r2).slice(0, 1));
       }
       if (_ === "multi") {
-        let r2 = Functions.asUpdater(e2)(EX);
+        let r2 = Functions.asUpdater(e2)(DX);
         BY(Object.keys(r2));
       }
-    }), OX = useEvent_default((e2) => {
-      if (mX(e2), e2 < 0 || typeof c == "number" && e2 >= c || c === "too_many") return;
+    }), kX = useEvent_default((e2) => {
+      if (hX(e2), e2 < 0 || typeof c == "number" && e2 >= c || c === "too_many") return;
       let r2 = getPageIndexForRow(e2, q.pageIndex, q.pageSize);
       r2 !== null && IY((e3) => ({
         ...e3,
         pageIndex: r2
       }));
-    }), kX = v.filter((e2) => e2 instanceof Object && e2.columnName !== void 0), AX = useEvent_default((e2) => {
-      _ === "single-cell" && BY(Functions.asUpdater(e2)(kX).slice(0, 1)), _ === "multi-cell" && BY(Functions.asUpdater(e2)(kX));
-    }), jX = _ === "multi" || _ === "single", MX = E && cX && hX("column-explorer"), NX = isInVscodeExtension();
+    }), AX = v.filter((e2) => e2 instanceof Object && e2.columnName !== void 0), jX = useEvent_default((e2) => {
+      _ === "single-cell" && BY(Functions.asUpdater(e2)(AX).slice(0, 1)), _ === "multi-cell" && BY(Functions.asUpdater(e2)(AX));
+    }), MX = _ === "multi" || _ === "single", NX = E && lX && gX("column-explorer"), PX = isInVscodeExtension();
     return (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
       children: [
         c === "too_many" && q.pageSize === r.length && (0, import_jsx_runtime.jsxs)(Banner, {
@@ -83924,11 +83927,11 @@ ${c}
             " rows."
           ]
         }),
-        wX < eX && wX > 0 && (0, import_jsx_runtime.jsxs)(Banner, {
+        TX < eX && TX > 0 && (0, import_jsx_runtime.jsxs)(Banner, {
           className: "mb-1 rounded",
           children: [
             "Result clipped. Showing ",
-            wX,
+            TX,
             " of ",
             eX,
             " columns."
@@ -83938,38 +83941,38 @@ ${c}
           className: "mb-1 rounded",
           children: "Column summaries are unavailable. Filter your data to fewer than 1,000,000 rows."
         }),
-        hX("row-viewer") && (0, import_jsx_runtime.jsx)(ContextAwarePanelItem, {
+        gX("row-viewer") && (0, import_jsx_runtime.jsx)(ContextAwarePanelItem, {
           children: (0, import_jsx_runtime.jsx)(RowViewerPanel, {
-            getRow: lX,
-            fieldTypes: vX,
+            getRow: uX,
+            fieldTypes: yX,
             totalRows: c,
-            rowIdx: pX,
-            setRowIdx: OX,
-            isSelectable: jX,
-            isRowSelected: EX[pX],
-            handleRowSelectionChange: DX
+            rowIdx: mX,
+            setRowIdx: kX,
+            isSelectable: MX,
+            isRowSelected: DX[mX],
+            handleRowSelectionChange: OX
           })
         }),
-        MX && (0, import_jsx_runtime.jsx)(ContextAwarePanelItem, {
+        NX && (0, import_jsx_runtime.jsx)(ContextAwarePanelItem, {
           children: (0, import_jsx_runtime.jsx)(ColumnExplorerPanel, {
-            previewColumn: cX,
-            fieldTypes: vX,
+            previewColumn: lX,
+            fieldTypes: yX,
             totalRows: c,
             totalColumns: eX,
-            tableId: fX
+            tableId: pX
           })
         }),
         (0, import_jsx_runtime.jsx)(ColumnChartContext, {
-          value: _X,
+          value: vX,
           children: (0, import_jsx_runtime.jsx)(Labeled, {
             label: e,
             align: "top",
             fullWidth: true,
             children: (0, import_jsx_runtime.jsx)(DataTable, {
               data: r,
-              columns: TX,
+              columns: EX,
               className: zY,
-              maxHeight: dX,
+              maxHeight: fX,
               sorting: VY,
               totalRows: c,
               totalColumns: eX,
@@ -83980,12 +83983,13 @@ ${c}
               selection: _,
               paginationState: q,
               setPaginationState: IY,
-              rowSelection: EX,
-              cellSelection: kX,
+              rowSelection: DX,
+              cellSelection: AX,
               cellStyling: nX,
               hoverTemplate: rX,
               cellHoverTexts: iX,
               downloadAs: S ? LY : void 0,
+              downloadFileName: oX,
               enableSearch: UY,
               searchQuery: WY,
               onSearchQueryChange: GY,
@@ -83993,20 +83997,20 @@ ${c}
               filters: KY,
               onFiltersChange: qY,
               reloading: JY,
-              onRowSelectionChange: DX,
+              onRowSelectionChange: OX,
               freezeColumnsLeft: YY,
               freezeColumnsRight: XY,
-              onCellSelectionChange: AX,
+              onCellSelectionChange: jX,
               getRowIds: tX,
-              toggleDisplayHeader: oX,
+              toggleDisplayHeader: sX,
               showChartBuilder: M,
               showPageSizeSelector: w,
-              showColumnExplorer: E && !NX,
-              showRowExplorer: O && !NX,
-              togglePanel: gX,
-              isPanelOpen: hX,
-              viewedRowIdx: pX,
-              onViewedRowChange: (e2) => mX(e2)
+              showColumnExplorer: E && !PX,
+              showRowExplorer: O && !PX,
+              togglePanel: _X,
+              isPanelOpen: gX,
+              viewedRowIdx: mX,
+              onViewedRowChange: (e2) => hX(e2)
             })
           })
         })
@@ -86688,6 +86692,7 @@ ${c}
     label: string$2().nullish(),
     pageSize: number$2().default(5),
     showDownload: boolean$2().default(true),
+    dataframeName: string$2().optional(),
     columns: array$2(tuple([
       string$2().or(number$2()),
       string$2(),
@@ -86745,37 +86750,37 @@ ${c}
     transforms: []
   };
   const DataFrameComponent = (0, import_react.memo)((e) => {
-    let r = (0, import_compiler_runtime$39.c)(69), { columns: c, pageSize: d, showDownload: f, lazy: _, value: v, setValue: y, get_dataframe: S, get_column_values: w, search: E, download_as: O, host: M } = e, I;
-    r[0] === S ? I = r[1] : (I = () => S({}), r[0] = S, r[1] = I);
-    let z = v == null ? void 0 : v.transforms, G;
-    r[2] === z ? G = r[3] : (G = [
-      z
-    ], r[2] = z, r[3] = G);
-    let { data: q, error: IY, isPending: LY } = useAsyncData(I, G), RY;
-    r[4] === q ? RY = r[5] : (RY = q || {}, r[4] = q, r[5] = RY);
-    let { url: zY, total_rows: BY, row_headers: VY, field_types: HY, column_types_per_step: UY, python_code: WY, sql_code: GY } = RY, KY = HY == null ? void 0 : HY.length, [qY, JY] = (0, import_react.useState)(v || EMPTY), YY = (0, import_react.useRef)(null), XY;
-    r[6] === _ ? XY = r[7] : (XY = (e2) => {
+    let r = (0, import_compiler_runtime$39.c)(70), { columns: c, dataframeName: d, pageSize: f, showDownload: _, lazy: v, value: y, setValue: S, get_dataframe: w, get_column_values: E, search: O, download_as: M, host: I } = e, z;
+    r[0] === w ? z = r[1] : (z = () => w({}), r[0] = w, r[1] = z);
+    let G = y == null ? void 0 : y.transforms, q;
+    r[2] === G ? q = r[3] : (q = [
+      G
+    ], r[2] = G, r[3] = q);
+    let { data: IY, error: LY, isPending: RY } = useAsyncData(z, q), zY;
+    r[4] === IY ? zY = r[5] : (zY = IY || {}, r[4] = IY, r[5] = zY);
+    let { url: BY, total_rows: VY, row_headers: HY, field_types: UY, column_types_per_step: WY, python_code: GY, sql_code: KY } = zY, qY = UY == null ? void 0 : UY.length, [JY, YY] = (0, import_react.useState)(y || EMPTY), XY = (0, import_react.useRef)(null), ZY;
+    r[6] === v ? ZY = r[7] : (ZY = (e2) => {
       var _a2;
-      _ && e2 !== "transform" && ((_a2 = YY.current) == null ? void 0 : _a2.submit());
-    }, r[6] = _, r[7] = XY);
-    let ZY = XY, QY = (0, import_react.useRef)(qY), $Y;
-    r[8] === qY ? $Y = r[9] : ($Y = () => {
-      QY.current = qY;
-    }, r[8] = qY, r[9] = $Y), (0, import_react.useEffect)($Y);
-    let eX;
-    r[10] !== y || r[11] !== (v == null ? void 0 : v.transforms.length) ? (eX = () => {
-      let e2 = QY.current;
-      (v == null ? void 0 : v.transforms.length) !== e2.transforms.length && y(e2);
-    }, r[10] = y, r[11] = v == null ? void 0 : v.transforms.length, r[12] = eX) : eX = r[12];
-    let tX = v == null ? void 0 : v.transforms.length, nX;
-    r[13] !== q || r[14] !== y || r[15] !== tX ? (nX = [
-      q,
-      tX,
-      QY,
-      y
-    ], r[13] = q, r[14] = y, r[15] = tX, r[16] = nX) : nX = r[16], (0, import_react.useEffect)(eX, nX);
-    let rX;
-    r[17] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (rX = (0, import_jsx_runtime.jsxs)(TabsTrigger, {
+      v && e2 !== "transform" && ((_a2 = XY.current) == null ? void 0 : _a2.submit());
+    }, r[6] = v, r[7] = ZY);
+    let QY = ZY, $Y = (0, import_react.useRef)(JY), eX;
+    r[8] === JY ? eX = r[9] : (eX = () => {
+      $Y.current = JY;
+    }, r[8] = JY, r[9] = eX), (0, import_react.useEffect)(eX);
+    let tX;
+    r[10] !== S || r[11] !== (y == null ? void 0 : y.transforms.length) ? (tX = () => {
+      let e2 = $Y.current;
+      (y == null ? void 0 : y.transforms.length) !== e2.transforms.length && S(e2);
+    }, r[10] = S, r[11] = y == null ? void 0 : y.transforms.length, r[12] = tX) : tX = r[12];
+    let nX = y == null ? void 0 : y.transforms.length, rX;
+    r[13] !== IY || r[14] !== S || r[15] !== nX ? (rX = [
+      IY,
+      nX,
+      $Y,
+      S
+    ], r[13] = IY, r[14] = S, r[15] = nX, r[16] = rX) : rX = r[16], (0, import_react.useEffect)(tX, rX);
+    let iX;
+    r[17] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (iX = (0, import_jsx_runtime.jsxs)(TabsTrigger, {
       value: "transform",
       className: "text-xs py-1",
       children: [
@@ -86784,9 +86789,9 @@ ${c}
         }),
         "Transform"
       ]
-    }), r[17] = rX) : rX = r[17];
-    let iX;
-    r[18] === WY ? iX = r[19] : (iX = WY && (0, import_jsx_runtime.jsxs)(TabsTrigger, {
+    }), r[17] = iX) : iX = r[17];
+    let aX;
+    r[18] === GY ? aX = r[19] : (aX = GY && (0, import_jsx_runtime.jsxs)(TabsTrigger, {
       value: "python-code",
       className: "text-xs py-1",
       children: [
@@ -86795,9 +86800,9 @@ ${c}
         }),
         "Python Code"
       ]
-    }), r[18] = WY, r[19] = iX);
-    let aX;
-    r[20] === GY ? aX = r[21] : (aX = GY && (0, import_jsx_runtime.jsxs)(TabsTrigger, {
+    }), r[18] = GY, r[19] = aX);
+    let oX;
+    r[20] === KY ? oX = r[21] : (oX = KY && (0, import_jsx_runtime.jsxs)(TabsTrigger, {
       value: "sql-code",
       className: "text-xs py-1",
       children: [
@@ -86806,111 +86811,112 @@ ${c}
         }),
         "SQL Code"
       ]
-    }), r[20] = GY, r[21] = aX);
-    let oX;
-    r[22] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (oX = (0, import_jsx_runtime.jsx)("div", {
-      className: "grow"
-    }), r[22] = oX) : oX = r[22];
+    }), r[20] = KY, r[21] = oX);
     let sX;
-    r[23] !== iX || r[24] !== aX ? (sX = (0, import_jsx_runtime.jsxs)(TabsList, {
+    r[22] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (sX = (0, import_jsx_runtime.jsx)("div", {
+      className: "grow"
+    }), r[22] = sX) : sX = r[22];
+    let cX;
+    r[23] !== aX || r[24] !== oX ? (cX = (0, import_jsx_runtime.jsxs)(TabsList, {
       className: "h-8",
       children: [
-        rX,
         iX,
         aX,
-        oX
+        oX,
+        sX
       ]
-    }), r[23] = iX, r[24] = aX, r[25] = sX) : sX = r[25];
-    let cX;
-    r[26] === LY ? cX = r[27] : (cX = LY && (0, import_jsx_runtime.jsx)(Spinner, {
-      size: "small"
-    }), r[26] = LY, r[27] = cX);
+    }), r[23] = aX, r[24] = oX, r[25] = cX) : cX = r[25];
     let lX;
-    r[28] !== sX || r[29] !== cX ? (lX = (0, import_jsx_runtime.jsxs)("div", {
+    r[26] === RY ? lX = r[27] : (lX = RY && (0, import_jsx_runtime.jsx)(Spinner, {
+      size: "small"
+    }), r[26] = RY, r[27] = lX);
+    let uX;
+    r[28] !== cX || r[29] !== lX ? (uX = (0, import_jsx_runtime.jsxs)("div", {
       className: "flex items-center gap-2",
       children: [
-        sX,
-        cX
+        cX,
+        lX
       ]
-    }), r[28] = sX, r[29] = cX, r[30] = lX) : lX = r[30];
-    let uX;
-    r[31] !== y || r[32] !== v ? (uX = (e2) => {
-      isEqual_default(e2, v) || (y(e2), JY(e2));
-    }, r[31] = y, r[32] = v, r[33] = uX) : uX = r[33];
+    }), r[28] = cX, r[29] = lX, r[30] = uX) : uX = r[30];
     let dX;
-    r[34] !== UY || r[35] !== c || r[36] !== w || r[37] !== qY || r[38] !== _ || r[39] !== uX ? (dX = (0, import_jsx_runtime.jsx)(TabsContent, {
+    r[31] !== S || r[32] !== y ? (dX = (e2) => {
+      isEqual_default(e2, y) || (S(e2), YY(e2));
+    }, r[31] = S, r[32] = y, r[33] = dX) : dX = r[33];
+    let fX;
+    r[34] !== WY || r[35] !== c || r[36] !== E || r[37] !== JY || r[38] !== v || r[39] !== dX ? (fX = (0, import_jsx_runtime.jsx)(TabsContent, {
       value: "transform",
       className: "mt-1 border rounded-t overflow-hidden",
       children: (0, import_jsx_runtime.jsx)(TransformPanel, {
-        ref: YY,
-        initialValue: qY,
+        ref: XY,
+        initialValue: JY,
         columns: c,
-        onChange: uX,
-        onInvalidChange: JY,
-        getColumnValues: w,
-        columnTypesPerStep: UY,
-        lazy: _
+        onChange: dX,
+        onInvalidChange: YY,
+        getColumnValues: E,
+        columnTypesPerStep: WY,
+        lazy: v
       })
-    }), r[34] = UY, r[35] = c, r[36] = w, r[37] = qY, r[38] = _, r[39] = uX, r[40] = dX) : dX = r[40];
-    let fX;
-    r[41] === WY ? fX = r[42] : (fX = WY && (0, import_jsx_runtime.jsx)(TabsContent, {
+    }), r[34] = WY, r[35] = c, r[36] = E, r[37] = JY, r[38] = v, r[39] = dX, r[40] = fX) : fX = r[40];
+    let pX;
+    r[41] === GY ? pX = r[42] : (pX = GY && (0, import_jsx_runtime.jsx)(TabsContent, {
       value: "python-code",
       className: "mt-1 border rounded-t overflow-hidden",
       children: (0, import_jsx_runtime.jsx)(ReadonlyCode, {
         minHeight: "215px",
         maxHeight: "215px",
-        code: WY,
+        code: GY,
         language: "python"
       })
-    }), r[41] = WY, r[42] = fX);
-    let pX;
-    r[43] === GY ? pX = r[44] : (pX = GY && (0, import_jsx_runtime.jsx)(TabsContent, {
+    }), r[41] = GY, r[42] = pX);
+    let mX;
+    r[43] === KY ? mX = r[44] : (mX = KY && (0, import_jsx_runtime.jsx)(TabsContent, {
       value: "sql-code",
       className: "mt-1 border rounded-t overflow-hidden",
       children: (0, import_jsx_runtime.jsx)(ReadonlyCode, {
         minHeight: "215px",
         maxHeight: "215px",
-        code: GY,
+        code: KY,
         language: "sql"
       })
-    }), r[43] = GY, r[44] = pX);
-    let mX;
-    r[45] !== ZY || r[46] !== lX || r[47] !== dX || r[48] !== fX || r[49] !== pX ? (mX = (0, import_jsx_runtime.jsxs)(Tabs, {
+    }), r[43] = KY, r[44] = mX);
+    let hX;
+    r[45] !== QY || r[46] !== uX || r[47] !== fX || r[48] !== pX || r[49] !== mX ? (hX = (0, import_jsx_runtime.jsxs)(Tabs, {
       defaultValue: "transform",
-      onValueChange: ZY,
+      onValueChange: QY,
       children: [
-        lX,
-        dX,
+        uX,
         fX,
-        pX
+        pX,
+        mX
       ]
-    }), r[45] = ZY, r[46] = lX, r[47] = dX, r[48] = fX, r[49] = pX, r[50] = mX) : mX = r[50];
-    let hX;
-    r[51] === IY ? hX = r[52] : (hX = IY && (0, import_jsx_runtime.jsx)(ErrorBanner, {
-      error: IY
-    }), r[51] = IY, r[52] = hX);
-    let gX = zY || "", _X = BY ?? 0, vX = KY ?? 0, yX = VY || Arrays.EMPTY, bX = BY && BY > 5 || false, xX;
-    r[53] !== O || r[54] !== HY || r[55] !== M || r[56] !== d || r[57] !== E || r[58] !== f || r[59] !== gX || r[60] !== _X || r[61] !== vX || r[62] !== yX || r[63] !== bX ? (xX = (0, import_jsx_runtime.jsx)(LoadingDataTableComponent, {
+    }), r[45] = QY, r[46] = uX, r[47] = fX, r[48] = pX, r[49] = mX, r[50] = hX) : hX = r[50];
+    let gX;
+    r[51] === LY ? gX = r[52] : (gX = LY && (0, import_jsx_runtime.jsx)(ErrorBanner, {
+      error: LY
+    }), r[51] = LY, r[52] = gX);
+    let _X = BY || "", vX = VY ?? 0, yX = qY ?? 0, bX = HY || Arrays.EMPTY, xX = VY && VY > 5 || false, SX;
+    r[53] !== d || r[54] !== M || r[55] !== UY || r[56] !== I || r[57] !== f || r[58] !== O || r[59] !== _ || r[60] !== _X || r[61] !== vX || r[62] !== yX || r[63] !== bX || r[64] !== xX ? (SX = (0, import_jsx_runtime.jsx)(LoadingDataTableComponent, {
       label: null,
       className: "rounded-b border-x border-b",
-      data: gX,
+      data: _X,
       hasStableRowId: false,
-      totalRows: _X,
-      totalColumns: vX,
+      totalRows: vX,
+      totalColumns: yX,
       maxColumns: "all",
-      pageSize: d,
+      pageSize: f,
       pagination: true,
-      fieldTypes: HY,
-      rowHeaders: yX,
-      showDownload: f,
-      download_as: O,
+      fieldTypes: UY,
+      rowHeaders: bX,
+      showDownload: _,
+      downloadFileName: d,
+      download_as: M,
       enableSearch: false,
       showFilters: false,
-      search: E,
+      search: O,
       showColumnSummaries: false,
       showDataTypes: true,
       get_column_summaries: getColumnSummaries,
-      showPageSizeSelector: bX,
+      showPageSizeSelector: xX,
       showColumnExplorer: false,
       showRowExplorer: true,
       showChartBuilder: false,
@@ -86918,16 +86924,16 @@ ${c}
       setValue: Functions.NOOP,
       selection: null,
       lazy: false,
-      host: M
-    }), r[53] = O, r[54] = HY, r[55] = M, r[56] = d, r[57] = E, r[58] = f, r[59] = gX, r[60] = _X, r[61] = vX, r[62] = yX, r[63] = bX, r[64] = xX) : xX = r[64];
-    let SX;
-    return r[65] !== mX || r[66] !== hX || r[67] !== xX ? (SX = (0, import_jsx_runtime.jsxs)("div", {
+      host: I
+    }), r[53] = d, r[54] = M, r[55] = UY, r[56] = I, r[57] = f, r[58] = O, r[59] = _, r[60] = _X, r[61] = vX, r[62] = yX, r[63] = bX, r[64] = xX, r[65] = SX) : SX = r[65];
+    let CX;
+    return r[66] !== hX || r[67] !== gX || r[68] !== SX ? (CX = (0, import_jsx_runtime.jsxs)("div", {
       children: [
-        mX,
         hX,
-        xX
+        gX,
+        SX
       ]
-    }), r[65] = mX, r[66] = hX, r[67] = xX, r[68] = SX) : SX = r[68], SX;
+    }), r[66] = hX, r[67] = gX, r[68] = SX, r[69] = CX) : CX = r[69], CX;
   });
   DataFrameComponent.displayName = "DataFrameComponent";
   function getColumnSummaries() {

package/package.json

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

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

@@ -30,6 +30,7 @@ interface TableActionsProps<TData> {
   onRowSelectionChange?: (value: RowSelectionState) => void;
   table: Table<TData>;
   downloadAs?: DownloadActionProps["downloadAs"];
+  downloadFileName?: string;
   getRowIds?: GetRowIds;
   toggleDisplayHeader?: () => void;
   showChartBuilder?: boolean;
@@ -52,6 +53,7 @@ export const TableActions = <TData,>({
   onRowSelectionChange,
   table,
   downloadAs,
+  downloadFileName,
   getRowIds,
   toggleDisplayHeader,
   showChartBuilder,
@@ -182,7 +184,12 @@ export const TableActions = <TData,>({
         />
       )}
       <div className="ml-auto">
-        {downloadAs && <DownloadAs downloadAs={downloadAs} />}
+        {downloadAs && (
+          <DownloadAs
+            downloadAs={downloadAs}
+            downloadFileName={downloadFileName}
+          />
+        )}
       </div>
     </div>
   );

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

@@ -116,6 +116,7 @@ const DataTableInternal = <TData,>({
   paginationState,
   setPaginationState,
   downloadAs,
+  downloadFileName,
   manualPagination = false,
   pagination = false,
   onRowSelectionChange,
@@ -334,6 +335,7 @@ const DataTableInternal = <TData,>({
         onRowSelectionChange={onRowSelectionChange}
         table={table}
         downloadAs={downloadAs}
+        downloadFileName={downloadFileName}
         getRowIds={getRowIds}
         toggleDisplayHeader={toggleDisplayHeader}
         showChartBuilder={showChartBuilder}

package/src/components/data-table/download-actions.tsx

@@ -14,6 +14,7 @@ import { logNever } from "@/utils/assertNever";
 import { copyToClipboard } from "@/utils/copy";
 import { downloadByURL } from "@/utils/download";
 import { prettyError } from "@/utils/errors";
+import { Filenames } from "@/utils/filenames";
 import {
   jsonParseWithSpecialChar,
   jsonToMarkdown,
@@ -36,6 +37,7 @@ type DownloadFormat = "csv" | "json" | "parquet";
 
 export interface DownloadActionProps {
   downloadAs: (req: { format: DownloadFormat }) => Promise<string>;
+  downloadFileName?: string;
 }
 
 const options = [
@@ -158,7 +160,10 @@ export const DownloadAs: React.FC<DownloadActionProps> = (props) => {
             onSelect={async () => {
               const downloadUrl = await getDownloadUrl(option.format);
               const ext = option.format;
-              downloadByURL(downloadUrl, `download.${ext}`);
+              const rawName = (props.downloadFileName ?? "").trim();
+              const baseName =
+                Filenames.withoutExtension(rawName) || "download";
+              downloadByURL(downloadUrl, `${baseName}.${ext}`);
             }}
           >
             <option.icon className="mo-dropdown-icon" />

package/src/core/wasm/__tests__/store.test.ts

@@ -1,9 +1,13 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import { describe, expect, it, vi } from "vitest";
+import { codeAtom } from "../../saving/file-state";
+import { store } from "../../state/jotai";
 import {
   CompositeFileStore,
   domElementFileStore,
   localStorageFileStore,
+  mountConfigFileStore,
+  notebookFileStore,
 } from "../store";
 
 describe("localStorageFileStore", () => {
@@ -53,3 +57,32 @@ describe("CompositeFileStore", () => {
     expect(saved).toHaveBeenCalledTimes(3);
   });
 });
+
+describe("mountConfigFileStore", () => {
+  it("returns null when no code is set", () => {
+    store.set(codeAtom, undefined);
+    expect(mountConfigFileStore.readFile()).toBeNull();
+  });
+
+  it("returns code when set", () => {
+    store.set(codeAtom, "print('hello')");
+    expect(mountConfigFileStore.readFile()).toBe("print('hello')");
+  });
+
+  it("does not save files", () => {
+    store.set(codeAtom, "original");
+    mountConfigFileStore.saveFile("new content");
+    expect(mountConfigFileStore.readFile()).toBe("original");
+  });
+});
+
+describe("notebookFileStore priority", () => {
+  it("prefers mount config over marimo-code and URL", () => {
+    store.set(codeAtom, "mount config code");
+    const element = document.createElement("marimo-code");
+    element.textContent = "marimo-code element";
+    document.body.replaceChildren(element);
+
+    expect(notebookFileStore.readFile()).toBe("mount config code");
+  });
+});

package/src/core/wasm/bridge.ts

@@ -29,6 +29,7 @@ import type {
   SaveUserConfigurationRequest,
   Snippets,
 } from "../network/types";
+import { filenameAtom } from "../saving/file-state";
 import { store } from "../state/jotai";
 import { BasicTransport } from "../websocket/transports/basic";
 import type { IConnectionTransport } from "../websocket/transports/transport";
@@ -146,7 +147,7 @@ export class PyodideBridge implements RunRequests, EditRequests {
 
     const code = await notebookFileStore.readFile();
     const fallbackCode = await fallbackFileStore.readFile();
-    const filename = PyodideRouter.getFilename();
+    const filename = store.get(filenameAtom) ?? PyodideRouter.getFilename();
     const userConfig = store.get(userConfigAtom);
 
     const queryParameters: Record<string, string | string[]> = {};

package/src/core/wasm/store.ts

@@ -4,6 +4,8 @@ import {
   compressToEncodedURIComponent,
   decompressFromEncodedURIComponent,
 } from "lz-string";
+import { codeAtom } from "@/core/saving/file-state";
+import { store } from "@/core/state/jotai";
 import { TypedLocalStorage } from "@/utils/storage/typed";
 import { PyodideRouter } from "./router";
 
@@ -67,6 +69,15 @@ const remoteDefaultFileStore: FileStore = {
   },
 };
 
+export const mountConfigFileStore: FileStore = {
+  saveFile(_contents: string) {
+    // Read-only: mount config code is set via codeAtom
+  },
+  readFile() {
+    return store.get(codeAtom) ?? null;
+  },
+};
+
 const emptyFileStore: FileStore = {
   saveFile(contents: string) {
     // Do nothing
@@ -112,7 +123,8 @@ export class CompositeFileStore implements FileStore {
 }
 
 export const notebookFileStore = new CompositeFileStore([
-  // Prefer <marimo-code>, then URL
+  // Prefer mount config, then <marimo-code>, then URL
+  mountConfigFileStore,
   domElementFileStore,
   urlFileStore,
 ]);

package/src/plugins/impl/DataTablePlugin.tsx

@@ -195,6 +195,7 @@ interface Data<T> {
   hasStableRowId: boolean;
   lazy: boolean;
   cellHoverTexts?: Record<string, Record<string, string | null>> | null;
+  downloadFileName?: string;
 }
 
 // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
@@ -278,6 +279,7 @@ export const DataTablePlugin = createPlugin<S>("marimo-table")
       // If lazy, this will preload the first page of data
       // without user confirmation.
       preload: z.boolean().default(false),
+      downloadFileName: z.string().optional(),
     }),
   )
   .withFunctions<DataTableFunctions>({
@@ -752,6 +754,7 @@ const DataTableComponent = ({
   cellStyles,
   hoverTemplate,
   cellHoverTexts,
+  downloadFileName,
   toggleDisplayHeader,
   calculate_top_k_rows,
   preview_column,
@@ -981,6 +984,7 @@ const DataTableComponent = ({
             hoverTemplate={hoverTemplate}
             cellHoverTexts={cellHoverTexts}
             downloadAs={showDownload ? downloadAs : undefined}
+            downloadFileName={downloadFileName}
             enableSearch={enableSearch}
             searchQuery={searchQuery}
             onSearchQueryChange={setSearchQuery}

package/src/plugins/impl/data-frames/DataFramePlugin.tsx

@@ -48,6 +48,7 @@ type TableData<T> = T[] | CsvURL;
 interface Data {
   label?: string | null;
   columns: ColumnDataTypes;
+  dataframeName?: string;
   pageSize: number;
   showDownload: boolean;
   lazy: boolean;
@@ -93,6 +94,7 @@ export const DataFramePlugin = createPlugin<S>("marimo-dataframe")
       label: z.string().nullish(),
       pageSize: z.number().default(5),
       showDownload: z.boolean().default(true),
+      dataframeName: z.string().optional(),
       columns: z
         .array(z.tuple([z.string().or(z.number()), z.string(), z.string()]))
         .transform((value) => {
@@ -176,6 +178,7 @@ const EMPTY: Transformations = {
 export const DataFrameComponent = memo(
   ({
     columns,
+    dataframeName,
     pageSize,
     showDownload,
     lazy,
@@ -326,6 +329,7 @@ export const DataFrameComponent = memo(
           fieldTypes={field_types}
           rowHeaders={row_headers || Arrays.EMPTY}
           showDownload={showDownload}
+          downloadFileName={dataframeName}
           download_as={download_as}
           enableSearch={false}
           showFilters={false}