@marimo-team/frontend 0.23.10-dev3 → 0.23.10-dev30

package/dist/index.html

@@ -66,7 +66,7 @@
     <marimo-server-token data-token="{{ server_token }}" hidden></marimo-server-token>
     <!-- /TODO -->
     <title>{{ title }}</title>
-    <script type="module" crossorigin src="./assets/index-DIc0rD1S.js"></script>
+    <script type="module" crossorigin src="./assets/index-CyOq1SNo.js"></script>
     <link rel="modulepreload" crossorigin href="./assets/preload-helper-BPPi7vOr.js">
     <link rel="modulepreload" crossorigin href="./assets/chunk-LvLJmgfZ.js">
     <link rel="modulepreload" crossorigin href="./assets/react-Bj1aDYRI.js">
@@ -83,15 +83,15 @@
     <link rel="modulepreload" crossorigin href="./assets/badge-j3NGjqhR.js">
     <link rel="modulepreload" crossorigin href="./assets/button-BbCh-29a.js">
     <link rel="modulepreload" crossorigin href="./assets/react-dom-CSu739Rf.js">
-    <link rel="modulepreload" crossorigin href="./assets/fullscreen-eipL3i3Y.js">
-    <link rel="modulepreload" crossorigin href="./assets/menu-items-DcP01QzW.js">
-    <link rel="modulepreload" crossorigin href="./assets/dist-BdyjRhEt.js">
+    <link rel="modulepreload" crossorigin href="./assets/fullscreen-DFky0PAA.js">
+    <link rel="modulepreload" crossorigin href="./assets/menu-items-BP7Ju9ww.js">
+    <link rel="modulepreload" crossorigin href="./assets/dist-CWMKC7yO.js">
     <link rel="modulepreload" crossorigin href="./assets/createLucideIcon-D5guW7EU.js">
     <link rel="modulepreload" crossorigin href="./assets/check-BH35Ndha.js">
     <link rel="modulepreload" crossorigin href="./assets/x-C-6liIBr.js">
-    <link rel="modulepreload" crossorigin href="./assets/select-DZcFyKFQ.js">
-    <link rel="modulepreload" crossorigin href="./assets/tooltip-DTV9tlSr.js">
-    <link rel="modulepreload" crossorigin href="./assets/use-toast-IPAtJGea.js">
+    <link rel="modulepreload" crossorigin href="./assets/select-6suE6YM2.js">
+    <link rel="modulepreload" crossorigin href="./assets/tooltip-B_PkSKN3.js">
+    <link rel="modulepreload" crossorigin href="./assets/use-toast-CJ1Tj2eC.js">
     <link rel="modulepreload" crossorigin href="./assets/useEvent-D91BmmQi.js">
     <link rel="modulepreload" crossorigin href="./assets/invariant-BUdrueMv.js">
     <link rel="modulepreload" crossorigin href="./assets/isObject-DvLSfCY5.js">
@@ -115,15 +115,15 @@
     <link rel="modulepreload" crossorigin href="./assets/capabilities-A_KhFcGV.js">
     <link rel="modulepreload" crossorigin href="./assets/createReducer-CI9qeK_X.js">
     <link rel="modulepreload" crossorigin href="./assets/paths-D5zczhUD.js">
-    <link rel="modulepreload" crossorigin href="./assets/dist-BrR4M-k3.js">
-    <link rel="modulepreload" crossorigin href="./assets/dist-HlsDto3K.js">
-    <link rel="modulepreload" crossorigin href="./assets/dist-CHcznzB-.js">
-    <link rel="modulepreload" crossorigin href="./assets/dist-B1U1kGCR.js">
-    <link rel="modulepreload" crossorigin href="./assets/dist-ChF5Ln9c.js">
-    <link rel="modulepreload" crossorigin href="./assets/dist-CpTFpfm_.js">
-    <link rel="modulepreload" crossorigin href="./assets/dist-CBSMxaO_.js">
-    <link rel="modulepreload" crossorigin href="./assets/dist-CPczQFlJ.js">
-    <link rel="modulepreload" crossorigin href="./assets/dist-C9ZB41s2.js">
+    <link rel="modulepreload" crossorigin href="./assets/dist-D0HyMpgV.js">
+    <link rel="modulepreload" crossorigin href="./assets/dist-Bo13cFwO.js">
+    <link rel="modulepreload" crossorigin href="./assets/dist-DVkC-Qmw.js">
+    <link rel="modulepreload" crossorigin href="./assets/dist-rBRbke5D.js">
+    <link rel="modulepreload" crossorigin href="./assets/dist-RMRSa-Mj.js">
+    <link rel="modulepreload" crossorigin href="./assets/dist-BwnT-_gD.js">
+    <link rel="modulepreload" crossorigin href="./assets/dist-HyCgERnW.js">
+    <link rel="modulepreload" crossorigin href="./assets/dist-BURue7-e.js">
+    <link rel="modulepreload" crossorigin href="./assets/dist-YEXtMjTi.js">
     <link rel="modulepreload" crossorigin href="./assets/stex-BGrE-q7N.js">
     <link rel="modulepreload" crossorigin href="./assets/toDate-B5A0DFEz.js">
     <link rel="modulepreload" crossorigin href="./assets/purify.es-B9KxLTTS.js">
@@ -133,62 +133,64 @@
     <link rel="modulepreload" crossorigin href="./assets/debounce-DhnxH9Rh.js">
     <link rel="modulepreload" crossorigin href="./assets/database-zap-kIkTfzTX.js">
     <link rel="modulepreload" crossorigin href="./assets/main-B0OX4z33.js">
-    <link rel="modulepreload" crossorigin href="./assets/cells-BRMYB7Wo.js">
+    <link rel="modulepreload" crossorigin href="./assets/cells-k7Js5h2t.js">
     <link rel="modulepreload" crossorigin href="./assets/ErrorBoundary-DyYDV0HI.js">
     <link rel="modulepreload" crossorigin href="./assets/kbd-CTUAEnEx.js">
-    <link rel="modulepreload" crossorigin href="./assets/useInstallPackage-DUF4IRRI.js">
-    <link rel="modulepreload" crossorigin href="./assets/alert-dialog-BqFLkbUc.js">
-    <link rel="modulepreload" crossorigin href="./assets/dialog-DzC_QCtT.js">
+    <link rel="modulepreload" crossorigin href="./assets/useInstallPackage-GI6gu7_S.js">
+    <link rel="modulepreload" crossorigin href="./assets/alert-dialog-5BGIfskO.js">
+    <link rel="modulepreload" crossorigin href="./assets/dialog-DRnNAWYl.js">
     <link rel="modulepreload" crossorigin href="./assets/useDebounce-7xZwVnnu.js">
     <link rel="modulepreload" crossorigin href="./assets/numbers-C3BAdHZE.js">
     <link rel="modulepreload" crossorigin href="./assets/SSRProvider-CkFAAHXw.js">
     <link rel="modulepreload" crossorigin href="./assets/context-QkTujrKn.js">
     <link rel="modulepreload" crossorigin href="./assets/useNumberFormatter-ByUv-u9o.js">
     <link rel="modulepreload" crossorigin href="./assets/usePress-DQ_tAz5W.js">
-    <link rel="modulepreload" crossorigin href="./assets/input-C3Hrdlqq.js">
-    <link rel="modulepreload" crossorigin href="./assets/ImperativeModal-B3Th7k4R.js">
-    <link rel="modulepreload" crossorigin href="./assets/cell-link-Gwsf-bMV.js">
-    <link rel="modulepreload" crossorigin href="./assets/multi-map-CUuNtzHt.js">
+    <link rel="modulepreload" crossorigin href="./assets/input-DckzEovC.js">
+    <link rel="modulepreload" crossorigin href="./assets/ImperativeModal-CDPfRIx5.js">
+    <link rel="modulepreload" crossorigin href="./assets/cell-link-BFEa98Sc.js">
+    <link rel="modulepreload" crossorigin href="./assets/multi-map-C4OANz8X.js">
     <link rel="modulepreload" crossorigin href="./assets/alert-yTS3WpF4.js">
     <link rel="modulepreload" crossorigin href="./assets/chevron-right-CG5QYXYk.js">
-    <link rel="modulepreload" crossorigin href="./assets/dropdown-menu-CR7cnzLX.js">
+    <link rel="modulepreload" crossorigin href="./assets/dropdown-menu-CZ4XbE-c.js">
     <link rel="modulepreload" crossorigin href="./assets/links-D1JoyKTt.js">
-    <link rel="modulepreload" crossorigin href="./assets/useRunCells-2n74L4TT.js">
+    <link rel="modulepreload" crossorigin href="./assets/useRunCells-CVd2QKS9.js">
     <link rel="modulepreload" crossorigin href="./assets/copy-LK56fFow.js">
     <link rel="modulepreload" crossorigin href="./assets/copy-BwrPA9zQ.js">
-    <link rel="modulepreload" crossorigin href="./assets/copy-icon-OjtDb4gO.js">
-    <link rel="modulepreload" crossorigin href="./assets/RenderHTML-B_YU1hMw.js">
-    <link rel="modulepreload" crossorigin href="./assets/datasource-CHSjxFZg.js">
-    <link rel="modulepreload" crossorigin href="./assets/state-BZoBW9cM.js">
+    <link rel="modulepreload" crossorigin href="./assets/copy-icon-BuRdHNPA.js">
+    <link rel="modulepreload" crossorigin href="./assets/RenderHTML-B5i6Qdbh.js">
+    <link rel="modulepreload" crossorigin href="./assets/datasource-mov7mYsn.js">
+    <link rel="modulepreload" crossorigin href="./assets/state-C9ggN1rs.js">
     <link rel="modulepreload" crossorigin href="./assets/package-Tv6ztuzw.js">
     <link rel="modulepreload" crossorigin href="./assets/sparkles-lWUAsPhp.js">
-    <link rel="modulepreload" crossorigin href="./assets/MarimoErrorOutput-HYZo17DD.js">
+    <link rel="modulepreload" crossorigin href="./assets/MarimoErrorOutput-BQyzDTet.js">
+    <link rel="modulepreload" crossorigin href="./assets/eye-off-Cm6DdkeR.js">
+    <link rel="modulepreload" crossorigin href="./assets/refresh-cw-DHwG4Mac.js">
+    <link rel="modulepreload" crossorigin href="./assets/tree-actions-XvgFV23w.js">
     <link rel="modulepreload" crossorigin href="./assets/spinner-Bhir8k53.js">
-    <link rel="modulepreload" crossorigin href="./assets/html-to-image-GGmvROsd.js">
-    <link rel="modulepreload" crossorigin href="./assets/focus-B2t0WTxH.js">
+    <link rel="modulepreload" crossorigin href="./assets/html-to-image-rLeQGF-G.js">
+    <link rel="modulepreload" crossorigin href="./assets/focus-CRI5ilWC.js">
     <link rel="modulepreload" crossorigin href="./assets/useAsyncData-bgszE9F0.js">
-    <link rel="modulepreload" crossorigin href="./assets/LazyAnyLanguageCodeMirror-BEvXb3VX.js">
+    <link rel="modulepreload" crossorigin href="./assets/LazyAnyLanguageCodeMirror-DClDnO_2.js">
     <link rel="modulepreload" crossorigin href="./assets/micromark-factory-space-BygYYKhs.js">
-    <link rel="modulepreload" crossorigin href="./assets/chunk-5FQGJX7Z-D9iBG0F7.js">
-    <link rel="modulepreload" crossorigin href="./assets/markdown-renderer-CHlWY8PG.js">
-    <link rel="modulepreload" crossorigin href="./assets/command-KARR7KMq.js">
-    <link rel="modulepreload" crossorigin href="./assets/field-zLmMOSA4.js">
-    <link rel="modulepreload" crossorigin href="./assets/popover-Bz_0Vkyf.js">
+    <link rel="modulepreload" crossorigin href="./assets/chunk-5FQGJX7Z-Bp9g5nD2.js">
+    <link rel="modulepreload" crossorigin href="./assets/markdown-renderer-BFAnsPek.js">
+    <link rel="modulepreload" crossorigin href="./assets/command-BkXWJLBP.js">
+    <link rel="modulepreload" crossorigin href="./assets/field-BWxnw0_c.js">
+    <link rel="modulepreload" crossorigin href="./assets/popover-CNCYAwbC.js">
     <link rel="modulepreload" crossorigin href="./assets/errors-vr57w7Ul.js">
-    <link rel="modulepreload" crossorigin href="./assets/download-cs3tezQD.js">
+    <link rel="modulepreload" crossorigin href="./assets/download-GddKDXL8.js">
     <link rel="modulepreload" crossorigin href="./assets/table-BGPSHfig.js">
     <link rel="modulepreload" crossorigin href="./assets/useIframeCapabilities-CcI1zSdn.js">
-    <link rel="modulepreload" crossorigin href="./assets/error-banner-LdWZDbqd.js">
+    <link rel="modulepreload" crossorigin href="./assets/error-banner-DWuez3Jq.js">
     <link rel="modulepreload" crossorigin href="./assets/formats-b7Sf6DAK.js">
     <link rel="modulepreload" crossorigin href="./assets/en-US-Cb8rIK52.js">
     <link rel="modulepreload" crossorigin href="./assets/isValid-CklTTytn.js">
     <link rel="modulepreload" crossorigin href="./assets/dates-CTxr0EqQ.js">
-    <link rel="modulepreload" crossorigin href="./assets/maps-n3GaPJwv.js">
     <link rel="modulepreload" crossorigin href="./assets/extends-BiFDv3jB.js">
     <link rel="modulepreload" crossorigin href="./assets/emotion-is-prop-valid.esm-C59xfSYt.js">
     <link rel="modulepreload" crossorigin href="./assets/useDateFormatter-ICIDGgHf.js">
     <link rel="modulepreload" crossorigin href="./assets/react-icons.esm-BNzu6e7h.js">
-    <link rel="modulepreload" crossorigin href="./assets/RSPContexts-CdN1NyAt.js">
+    <link rel="modulepreload" crossorigin href="./assets/RSPContexts-QoVyPvhN.js">
     <link rel="modulepreload" crossorigin href="./assets/table-6NxtGaCm.js">
     <link rel="modulepreload" crossorigin href="./assets/ellipsis-KAhMaCIV.js">
     <link rel="modulepreload" crossorigin href="./assets/external-link-BTNxSavU.js">
@@ -196,47 +198,43 @@
     <link rel="modulepreload" crossorigin href="./assets/plus-BgB18UzY.js">
     <link rel="modulepreload" crossorigin href="./assets/trash-2-rVklqqFF.js">
     <link rel="modulepreload" crossorigin href="./assets/react-resizable-panels.browser.esm-CV8-hvjx.js">
-    <link rel="modulepreload" crossorigin href="./assets/JsonOutput-40Fp2jEG.js">
+    <link rel="modulepreload" crossorigin href="./assets/JsonOutput-Bg1SpAZP.js">
     <link rel="modulepreload" crossorigin href="./assets/chart-no-axes-column-nqk474t8.js">
     <link rel="modulepreload" crossorigin href="./assets/square-function-uY_yJr5g.js">
     <link rel="modulepreload" crossorigin href="./assets/spec-CPQR_o92.js">
-    <link rel="modulepreload" crossorigin href="./assets/ellipsis-vertical-CkwWkOQL.js">
-    <link rel="modulepreload" crossorigin href="./assets/refresh-cw-DHwG4Mac.js">
-    <link rel="modulepreload" crossorigin href="./assets/tree-actions-BM_EJr3E.js">
-    <link rel="modulepreload" crossorigin href="./assets/components-C_z0Dsug.js">
-    <link rel="modulepreload" crossorigin href="./assets/column-preview-Bd7jDAiw.js">
+    <link rel="modulepreload" crossorigin href="./assets/column-preview-CibBmCB_.js">
     <link rel="modulepreload" crossorigin href="./assets/icons-Ol38nIbL.js">
-    <link rel="modulepreload" crossorigin href="./assets/radio-group-DcUXH-59.js">
-    <link rel="modulepreload" crossorigin href="./assets/floating-outline-C_E8vH7G.js">
+    <link rel="modulepreload" crossorigin href="./assets/radio-group-DS_mmqHJ.js">
+    <link rel="modulepreload" crossorigin href="./assets/floating-outline-CCH9y0X9.js">
     <link rel="modulepreload" crossorigin href="./assets/objectWithoutPropertiesLoose-DfWeGRFv.js">
-    <link rel="modulepreload" crossorigin href="./assets/esm-CqWdmSnV.js">
-    <link rel="modulepreload" crossorigin href="./assets/readonly-python-code-D6Ca_8n6.js">
+    <link rel="modulepreload" crossorigin href="./assets/esm-xaw4Vy8N.js">
+    <link rel="modulepreload" crossorigin href="./assets/readonly-python-code-3HZIBvHp.js">
     <link rel="modulepreload" crossorigin href="./assets/file-headphone-BrQspHac.js">
     <link rel="modulepreload" crossorigin href="./assets/file-BrdxGLRX.js">
     <link rel="modulepreload" crossorigin href="./assets/image-DQHXdEQn.js">
-    <link rel="modulepreload" crossorigin href="./assets/file-icons-CNegz5Wt.js">
-    <link rel="modulepreload" crossorigin href="./assets/switch-BiU_sAcn.js">
+    <link rel="modulepreload" crossorigin href="./assets/file-icons-on-PIYta.js">
+    <link rel="modulepreload" crossorigin href="./assets/switch-Ac7CgLgh.js">
     <link rel="modulepreload" crossorigin href="./assets/events-CPoJAfgx.js">
-    <link rel="modulepreload" crossorigin href="./assets/globals-7JnRMGd4.js">
-    <link rel="modulepreload" crossorigin href="./assets/share-DMwTZOTH.js">
+    <link rel="modulepreload" crossorigin href="./assets/globals-BivClSmn.js">
+    <link rel="modulepreload" crossorigin href="./assets/share-mSf5FZIP.js">
     <link rel="modulepreload" crossorigin href="./assets/blob-Bgnx1kuY.js">
     <link rel="modulepreload" crossorigin href="./assets/memoize-Tp7rARFe.js">
     <link rel="modulepreload" crossorigin href="./assets/get-C-qh_et5.js">
     <link rel="modulepreload" crossorigin href="./assets/_baseSet-CxV9N1bc.js">
-    <link rel="modulepreload" crossorigin href="./assets/state-CRuZ8deV.js">
-    <link rel="modulepreload" crossorigin href="./assets/label-xHqFtfdz.js">
-    <link rel="modulepreload" crossorigin href="./assets/textarea-0Z0sU8Go.js">
+    <link rel="modulepreload" crossorigin href="./assets/state-DvSTWgUA.js">
+    <link rel="modulepreload" crossorigin href="./assets/label-C2_YQRio.js">
+    <link rel="modulepreload" crossorigin href="./assets/textarea-BfDUjd9c.js">
     <link rel="modulepreload" crossorigin href="./assets/refresh-ccw-C-n2VFP5.js">
-    <link rel="modulepreload" crossorigin href="./assets/form-BnFjtYoC.js">
-    <link rel="modulepreload" crossorigin href="./assets/renderShortcut-CcFk3m01.js">
-    <link rel="modulepreload" crossorigin href="./assets/useBoolean-Bp18o6XG.js">
-    <link rel="modulepreload" crossorigin href="./assets/useDeepCompareMemoize-zUHU--0D.js">
+    <link rel="modulepreload" crossorigin href="./assets/form-BUnTfUo-.js">
+    <link rel="modulepreload" crossorigin href="./assets/renderShortcut--ku7VECI.js">
+    <link rel="modulepreload" crossorigin href="./assets/useBoolean-CE6PfxGj.js">
+    <link rel="modulepreload" crossorigin href="./assets/useDeepCompareMemoize-CVmg-GkP.js">
     <link rel="modulepreload" crossorigin href="./assets/types-W8WWuumF.js">
-    <link rel="modulepreload" crossorigin href="./assets/semaphore-FlZezxaf.js">
-    <link rel="modulepreload" crossorigin href="./assets/fileToBase64-DZfwJMrG.js">
-    <link rel="modulepreload" crossorigin href="./assets/pathUtils-CJjndqMI.js">
+    <link rel="modulepreload" crossorigin href="./assets/semaphore-qUGKVeAE.js">
+    <link rel="modulepreload" crossorigin href="./assets/fileToBase64-D15LPv1Y.js">
+    <link rel="modulepreload" crossorigin href="./assets/pathUtils-DPJ-EgtH.js">
     <link rel="modulepreload" crossorigin href="./assets/prop-types-DaaA-ptl.js">
-    <link rel="modulepreload" crossorigin href="./assets/es-DGgq-Wes.js">
+    <link rel="modulepreload" crossorigin href="./assets/es-By9LYOsD.js">
     <link rel="modulepreload" crossorigin href="./assets/hasIn-DiS_ryrS.js">
     <link rel="modulepreload" crossorigin href="./assets/flatten-Dl4V1ub3.js">
     <link rel="modulepreload" crossorigin href="./assets/pick-DqWUNly1.js">
@@ -245,10 +243,10 @@
     <link rel="modulepreload" crossorigin href="./assets/square-B5xWCt0a.js">
     <link rel="modulepreload" crossorigin href="./assets/triangle-alert-D2p96PEF.js">
     <link rel="modulepreload" crossorigin href="./assets/bundle.esm-DjhGJy4I.js">
-    <link rel="stylesheet" crossorigin href="./assets/cells-jmgGt1lS.css">
+    <link rel="stylesheet" crossorigin href="./assets/cells-pu5xzE_v.css">
     <link rel="stylesheet" crossorigin href="./assets/markdown-renderer-DdDKmWlR.css">
     <link rel="stylesheet" crossorigin href="./assets/JsonOutput-B7vuddcd.css">
-    <link rel="stylesheet" crossorigin href="./assets/index-BIw7BKLH.css">
+    <link rel="stylesheet" crossorigin href="./assets/index-Ct3LgsQ8.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/frontend",
-  "version": "0.23.10-dev3",
+  "version": "0.23.10-dev30",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",
@@ -57,7 +57,7 @@
     "@marimo-team/codemirror-ai": "^0.3.7",
     "@marimo-team/codemirror-languageserver": "^1.16.12",
     "@marimo-team/codemirror-mcp": "^0.1.5",
-    "@marimo-team/codemirror-sql": "^0.2.4",
+    "@marimo-team/codemirror-sql": "^0.2.8",
     "@marimo-team/llm-info": "workspace:*",
     "@marimo-team/marimo-api": "workspace:*",
     "@marimo-team/react-slotz": "^0.2.0",
@@ -123,7 +123,7 @@
     "partysocket": "1.1.13",
     "path-to-regexp": "^8.4.0",
     "plotly.js": "^3.3.1",
-    "pyodide": "0.27.7",
+    "pyodide": "314.0.0",
     "radix-ui": "1.4.3",
     "react-arborist": "^3.4.3",
     "react-aria": "3.47.0",

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

@@ -7,10 +7,6 @@ import type { GetRowIds } from "@/plugins/impl/DataTablePlugin";
 import { cn } from "@/utils/cn";
 import { Events } from "@/utils/events";
 import { prettyNumber } from "@/utils/numbers";
-import {
-  PANEL_TYPES,
-  type PanelType,
-} from "../editor/chrome/panels/context-aware-panel/context-aware-panel";
 import { Button } from "../ui/button";
 import { toast } from "../ui/use-toast";
 import { getColumnCountForDisplay } from "./hooks/use-column-visibility";
@@ -27,7 +23,6 @@ interface TableBottomBarProps<TData> {
   getRowIds?: GetRowIds;
   showPageSizeSelector?: boolean;
   tableLoading?: boolean;
-  togglePanel?: (panelType: PanelType) => void;
   part?: string;
   className?: string;
 }
@@ -41,7 +36,6 @@ export const TableBottomBar = <TData,>({
   getRowIds,
   showPageSizeSelector,
   tableLoading,
-  togglePanel,
   part,
   className,
 }: TableBottomBarProps<TData>) => {
@@ -159,15 +153,7 @@ export const TableBottomBar = <TData,>({
     return (
       <span className="flex items-center gap-1">
         <span>{rowsAndColumns}</span>
-        {hiddenSuffix && (
-          <button
-            type="button"
-            className="text-xs underline-offset-2 hover:underline cursor-pointer"
-            onClick={() => togglePanel?.(PANEL_TYPES.COLUMN_EXPLORER)}
-          >
-            {hiddenSuffix}
-          </button>
-        )}
+        {hiddenSuffix && <span className="text-xs">{hiddenSuffix}</span>}
       </span>
     );
   };

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

@@ -1,6 +1,7 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 "use no memo";
 
+import type { Table } from "@tanstack/react-table";
 import { useDebounce } from "@uidotdev/usehooks";
 import {
   ChartSplineIcon,
@@ -17,13 +18,15 @@ import {
 } from "../editor/chrome/panels/context-aware-panel/context-aware-panel";
 import { Spinner } from "../icons/spinner";
 import { Button } from "../ui/button";
+import { ColumnVisibilityDropdown } from "./column-visibility-dropdown";
 import { type ExportActionProps, ExportMenu } from "./export-actions";
 
 const NOOP_ON_SEARCH = () => {
   /** no-op*/
 };
 
-interface TableTopBarProps extends Partial<ExportActionProps> {
+interface TableTopBarProps<TData> extends Partial<ExportActionProps> {
+  table: Table<TData>;
   enableSearch: boolean;
   searchQuery?: string;
   onSearchQueryChange?: (query: string) => void;
@@ -38,7 +41,8 @@ interface TableTopBarProps extends Partial<ExportActionProps> {
   sizeBytesIsLoading?: boolean;
 }
 
-export const TableTopBar: React.FC<TableTopBarProps> = ({
+export const TableTopBar = <TData,>({
+  table,
   enableSearch,
   searchQuery,
   onSearchQueryChange,
@@ -52,7 +56,7 @@ export const TableTopBar: React.FC<TableTopBarProps> = ({
   downloadAs,
   sizeBytes,
   sizeBytesIsLoading,
-}) => {
+}: TableTopBarProps<TData>) => {
   const [internalValue, setInternalValue] = useState(searchQuery || "");
   const debouncedSearch = useDebounce(internalValue, 500);
   const onSearch = useEvent(onSearchQueryChange ?? NOOP_ON_SEARCH);
@@ -62,16 +66,6 @@ export const TableTopBar: React.FC<TableTopBarProps> = ({
     onSearch(debouncedSearch);
   }, [debouncedSearch, onSearch]);
 
-  const hasAnyAction =
-    (enableSearch && onSearchQueryChange) ||
-    showChartBuilder ||
-    showTableExplorer ||
-    downloadAs;
-
-  if (!hasAnyAction) {
-    return null;
-  }
-
   return (
     <div className="flex items-center h-10 px-2 border-b gap-2">
       {onSearchQueryChange && enableSearch && (
@@ -106,6 +100,7 @@ export const TableTopBar: React.FC<TableTopBarProps> = ({
       )}
 
       <div className="flex items-center shrink-0">
+        <ColumnVisibilityDropdown table={table} />
         {showChartBuilder && (
           <Button
             variant="text"

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

@@ -3,7 +3,7 @@
 
 import { getCoreRowModel, useReactTable } from "@tanstack/react-table";
 import { render, screen } from "@testing-library/react";
-import { describe, expect, it, vi } from "vitest";
+import { describe, expect, it } from "vitest";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { CellSelectionProvider } from "../range-focus/provider";
 import { TableBottomBar } from "../TableBottomBar";
@@ -11,7 +11,6 @@ import { TableBottomBar } from "../TableBottomBar";
 function renderWithTable(opts: {
   totalColumns: number;
   hiddenColumns?: string[];
-  togglePanel?: (panelType: string) => void;
 }) {
   const Wrapper = () => {
     const table = useReactTable({
@@ -34,7 +33,6 @@ function renderWithTable(opts: {
         pagination={false}
         totalColumns={opts.totalColumns}
         table={table}
-        togglePanel={opts.togglePanel}
       />
     );
   };
@@ -60,14 +58,10 @@ describe("TableBottomBar — hidden column count", () => {
     expect(screen.getByText(/\(1 hidden\)/)).toBeInTheDocument();
   });
 
-  it("invokes togglePanel('column-explorer') when '(n hidden)' is clicked", () => {
-    const togglePanel = vi.fn();
-    renderWithTable({
-      totalColumns: 3,
-      hiddenColumns: ["col1"],
-      togglePanel,
-    });
-    screen.getByText(/\(1 hidden\)/).click();
-    expect(togglePanel).toHaveBeenCalledWith("column-explorer");
+  it("renders '(n hidden)' as inert text, not a button", () => {
+    renderWithTable({ totalColumns: 3, hiddenColumns: ["col1"] });
+    const suffix = screen.getByText(/\(1 hidden\)/);
+    expect(suffix.tagName).toBe("SPAN");
+    expect(suffix.closest("button")).toBeNull();
   });
 });

package/src/components/data-table/__tests__/column-visibility-dropdown.test.tsx

@@ -0,0 +1,227 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import {
+  type ColumnDef,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { beforeAll, describe, expect, it } from "vitest";
+import { ColumnVisibilityDropdown } from "../column-visibility-dropdown";
+import { INDEX_COLUMN_NAME, SELECT_COLUMN_ID } from "../types";
+
+beforeAll(() => {
+  global.HTMLElement.prototype.scrollIntoView = () => {
+    // jsdom does not implement scrollIntoView; cmdk calls it on selection.
+  };
+  if (!global.HTMLElement.prototype.hasPointerCapture) {
+    global.HTMLElement.prototype.hasPointerCapture = () => false;
+  }
+});
+
+type Row = Record<string, unknown>;
+
+const TEST_COLUMNS: ColumnDef<Row>[] = [
+  { id: SELECT_COLUMN_ID, accessorKey: SELECT_COLUMN_ID },
+  { id: INDEX_COLUMN_NAME, accessorKey: INDEX_COLUMN_NAME },
+  { id: "__m_column__0", accessorKey: "__m_column__0" },
+  {
+    id: "customer_name",
+    accessorKey: "customer_name",
+    meta: { dataType: "string" },
+  },
+  { id: "cust_age", accessorKey: "cust_age", meta: { dataType: "integer" } },
+  {
+    id: "order_total",
+    accessorKey: "order_total",
+    meta: { dataType: "number" },
+  },
+];
+
+interface HarnessProps {
+  initiallyHidden?: string[];
+  nonHideable?: string[];
+}
+
+function Harness({ initiallyHidden = [], nonHideable = [] }: HarnessProps) {
+  const table = useReactTable<Row>({
+    data: [],
+    columns: TEST_COLUMNS.map((column) =>
+      nonHideable.includes(column.id as string)
+        ? { ...column, enableHiding: false }
+        : column,
+    ),
+    getCoreRowModel: getCoreRowModel(),
+    locale: "en-US",
+    initialState: {
+      columnVisibility: Object.fromEntries(
+        initiallyHidden.map((id) => [id, false]),
+      ),
+    },
+  });
+  return <ColumnVisibilityDropdown table={table} />;
+}
+
+function renderAndOpen(props?: HarnessProps) {
+  const result = render(<Harness {...(props ?? {})} />);
+  fireEvent.click(screen.getByTestId("column-visibility-trigger"));
+  return result;
+}
+
+function getOptionTexts(): string[] {
+  return screen.getAllByRole("option").map((el) => el.textContent ?? "");
+}
+
+function getColumnOption(name: string): HTMLElement {
+  const option = screen
+    .getAllByRole("option")
+    .find((el) => el.textContent === name);
+  if (!option) {
+    throw new Error(`No option for column ${name}`);
+  }
+  return option;
+}
+
+function getSearchInput() {
+  return screen.getByPlaceholderText("Search columns...");
+}
+
+describe("ColumnVisibilityDropdown", () => {
+  it("renders user columns and excludes select/index/nameless columns", () => {
+    renderAndOpen();
+    expect(screen.getByText("customer_name")).toBeInTheDocument();
+    expect(screen.getByText("cust_age")).toBeInTheDocument();
+    expect(screen.getByText("order_total")).toBeInTheDocument();
+    expect(screen.queryByText(SELECT_COLUMN_ID)).not.toBeInTheDocument();
+    expect(screen.queryByText(INDEX_COLUMN_NAME)).not.toBeInTheDocument();
+    expect(screen.queryByText("__m_column__0")).not.toBeInTheDocument();
+  });
+
+  it("lists hidden columns before shown columns", () => {
+    renderAndOpen({ initiallyHidden: ["cust_age"] });
+    expect(getOptionTexts()).toEqual([
+      "Show all",
+      "cust_age",
+      "customer_name",
+      "order_total",
+    ]);
+  });
+
+  it("toggling a hidden column flips the icon without moving the row", () => {
+    renderAndOpen({ initiallyHidden: ["cust_age"] });
+    expect(
+      getColumnOption("cust_age").querySelector(".lucide-eye-off"),
+    ).not.toBeNull();
+
+    fireEvent.click(getColumnOption("cust_age"));
+
+    expect(getOptionTexts()).toEqual([
+      "Show all",
+      "cust_age",
+      "customer_name",
+      "order_total",
+    ]);
+    expect(
+      getColumnOption("cust_age").querySelector(".lucide-eye-off"),
+    ).toBeNull();
+  });
+
+  it("re-sorts on reopen after a toggle", () => {
+    renderAndOpen({ initiallyHidden: ["cust_age"] });
+    // Hide customer_name: it stays in the shown section until reopen.
+    fireEvent.click(getColumnOption("customer_name"));
+    expect(getOptionTexts()).toEqual([
+      "Show all",
+      "cust_age",
+      "customer_name",
+      "order_total",
+    ]);
+
+    const trigger = screen.getByTestId("column-visibility-trigger");
+    fireEvent.click(trigger);
+    fireEvent.click(trigger);
+
+    // Reopen sorts both hidden columns first, preserving table order.
+    expect(getOptionTexts()).toEqual([
+      "Show all",
+      "customer_name",
+      "cust_age",
+      "order_total",
+    ]);
+  });
+
+  it("filters columns with smartMatch", () => {
+    renderAndOpen();
+    fireEvent.change(getSearchInput(), { target: { value: "cust" } });
+    expect(screen.getByText("customer_name")).toBeInTheDocument();
+    expect(screen.getByText("cust_age")).toBeInTheDocument();
+    expect(screen.queryByText("order_total")).not.toBeInTheDocument();
+  });
+
+  it("shows 'No results.' when nothing matches", () => {
+    renderAndOpen();
+    fireEvent.change(getSearchInput(), { target: { value: "xyz" } });
+    expect(screen.getByText("No results.")).toBeInTheDocument();
+    expect(screen.queryByText("customer_name")).not.toBeInTheDocument();
+  });
+
+  it("disables 'Show all' when no columns are hidden", () => {
+    renderAndOpen();
+    expect(getColumnOption("Show all")).toHaveAttribute(
+      "aria-disabled",
+      "true",
+    );
+  });
+
+  it("'Show all' restores hidden columns", () => {
+    renderAndOpen({ initiallyHidden: ["cust_age", "order_total"] });
+    fireEvent.click(getColumnOption("Show all"));
+
+    expect(
+      getColumnOption("cust_age").querySelector(".lucide-eye-off"),
+    ).toBeNull();
+    expect(
+      getColumnOption("order_total").querySelector(".lucide-eye-off"),
+    ).toBeNull();
+    expect(getColumnOption("Show all")).toHaveAttribute(
+      "aria-disabled",
+      "true",
+    );
+  });
+
+  it("hides and shows matching columns via bulk actions while searching", () => {
+    renderAndOpen();
+    fireEvent.change(getSearchInput(), { target: { value: "cust" } });
+    expect(screen.queryByText(/Show all/)).not.toBeInTheDocument();
+
+    fireEvent.click(getColumnOption("Hide 2 matching"));
+    expect(
+      getColumnOption("customer_name").querySelector(".lucide-eye-off"),
+    ).not.toBeNull();
+    expect(
+      getColumnOption("cust_age").querySelector(".lucide-eye-off"),
+    ).not.toBeNull();
+    expect(screen.queryByText(/Hide \d+ matching/)).not.toBeInTheDocument();
+
+    fireEvent.click(getColumnOption("Show 2 matching"));
+    expect(
+      getColumnOption("customer_name").querySelector(".lucide-eye-off"),
+    ).toBeNull();
+    expect(screen.queryByText(/Show \d+ matching/)).not.toBeInTheDocument();
+  });
+
+  it("offers both bulk actions when matches are mixed", () => {
+    renderAndOpen({ initiallyHidden: ["cust_age"] });
+    fireEvent.change(getSearchInput(), { target: { value: "cust" } });
+    expect(screen.getByText(/Hide 1 matching/)).toBeInTheDocument();
+    expect(screen.getByText(/Show 1 matching/)).toBeInTheDocument();
+  });
+
+  it("renders non-hideable columns disabled and without an eye toggle", () => {
+    renderAndOpen({ nonHideable: ["customer_name"] });
+    const option = getColumnOption("customer_name");
+    expect(option).toHaveAttribute("aria-disabled", "true");
+    expect(option.querySelector(".lucide-eye")).toBeNull();
+    expect(option.querySelector(".lucide-eye-off")).toBeNull();
+  });
+});