@marimo-team/islands 0.22.1-dev4 → 0.22.1-dev6

package/package.json

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

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

@@ -21,6 +21,7 @@ interface TableBottomBarProps<TData> {
   getRowIds?: GetRowIds;
   showPageSizeSelector?: boolean;
   tableLoading?: boolean;
+  part?: string;
 }
 
 export const TableBottomBar = <TData,>({
@@ -32,6 +33,7 @@ export const TableBottomBar = <TData,>({
   getRowIds,
   showPageSizeSelector,
   tableLoading,
+  part,
 }: TableBottomBarProps<TData>) => {
   const { locale } = useLocale();
   const handleSelectAllRows = (value: boolean) => {
@@ -143,7 +145,10 @@ export const TableBottomBar = <TData,>({
   };
 
   return (
-    <div className="flex lg:grid lg:grid-cols-[1fr_auto_1fr] items-center shrink-0 pt-1">
+    <div
+      part={part}
+      className="flex lg:grid lg:grid-cols-[1fr_auto_1fr] items-center shrink-0 pt-1"
+    >
       <div className="flex flex-col text-sm text-muted-foreground px-2 shrink-0">
         <div className="flex items-center gap-1">{renderTotal()}</div>
         <CellSelectionStats table={table} className="lg:hidden" />

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

@@ -13,7 +13,7 @@ import {
   XIcon,
 } from "lucide-react";
 import type { JSX } from "react";
-import React, { useMemo, useState } from "react";
+import React, { useMemo, useRef, useState } from "react";
 import { type UseFormReturn, useForm } from "react-hook-form";
 import useResizeObserver from "use-resize-observer";
 import { PythonIcon } from "@/components/editor/cell/code/icons";
@@ -61,6 +61,7 @@ export interface TablePanelProps {
   totalRows: number | TooManyRows;
   columns: number;
   displayHeader: boolean;
+  onCloseChartBuilder?: () => void;
   getDataUrl?: GetDataUrl;
   fieldTypes?: FieldTypesWithExternalType | null;
 }
@@ -74,12 +75,33 @@ export const TablePanel: React.FC<TablePanelProps> = ({
   getDataUrl,
   fieldTypes,
   displayHeader,
+  onCloseChartBuilder,
 }) => {
   const [tabsMap, saveTabsMap] = useAtom(tabsStorageAtom);
   const tabs = cellId ? (tabsMap.get(cellId) ?? []) : [];
 
-  const [tabNum, setTabNum] = useState(0);
   const [selectedTab, setSelectedTab] = useState(DEFAULT_TAB_NAME);
+  const [tabCounter, setTabCounter] = useState(tabs.length);
+  const prevDisplayHeader = useRef(displayHeader);
+
+  // Auto-create a default chart tab when chart builder opens with no tabs
+  if (
+    displayHeader &&
+    !prevDisplayHeader.current &&
+    tabs.length === 0 &&
+    cellId
+  ) {
+    prevDisplayHeader.current = displayHeader;
+    const tabName = getChartTabName(0, NEW_CHART_TYPE);
+    const newTabs = new Map(tabsMap);
+    newTabs.set(cellId, [
+      { tabName, chartType: NEW_CHART_TYPE, config: getChartDefaults() },
+    ]);
+    saveTabsMap(newTabs);
+    setTabCounter(1);
+    setSelectedTab(tabName);
+  }
+  prevDisplayHeader.current = displayHeader;
 
   if (!displayHeader || (tabs.length === 0 && !displayHeader)) {
     return dataTable;
@@ -89,7 +111,7 @@ export const TablePanel: React.FC<TablePanelProps> = ({
     if (!cellId) {
       return;
     }
-    const tabName = getChartTabName(tabNum, NEW_CHART_TYPE);
+    const tabName = getChartTabName(tabCounter, NEW_CHART_TYPE);
 
     const newTabs = new Map(tabsMap);
     newTabs.set(cellId, [
@@ -102,7 +124,7 @@ export const TablePanel: React.FC<TablePanelProps> = ({
     ]);
 
     saveTabsMap(newTabs);
-    setTabNum(tabNum + 1);
+    setTabCounter(tabCounter + 1);
     setSelectedTab(tabName);
   };
 
@@ -110,14 +132,21 @@ export const TablePanel: React.FC<TablePanelProps> = ({
     if (!cellId) {
       return;
     }
+    const deletedIndex = tabs.findIndex((tab) => tab.tabName === tabName);
+    const remaining = tabs.filter((tab) => tab.tabName !== tabName);
     const newTabs = new Map(tabsMap);
-    newTabs.set(
-      cellId,
-      tabs.filter((tab) => tab.tabName !== tabName),
-    );
+    newTabs.set(cellId, remaining);
     saveTabsMap(newTabs);
-    setSelectedTab(DEFAULT_TAB_NAME);
-    setTabNum(tabNum - 1);
+
+    if (remaining.length === 0) {
+      onCloseChartBuilder?.();
+    } else if (tabName === selectedTab) {
+      if (deletedIndex < remaining.length) {
+        setSelectedTab(remaining[deletedIndex].tabName);
+      } else {
+        setSelectedTab(remaining[remaining.length - 1].tabName);
+      }
+    }
   };
 
   const saveTabChart = ({
@@ -178,7 +207,7 @@ export const TablePanel: React.FC<TablePanelProps> = ({
 
   return (
     <Tabs value={selectedTab} className="-mt-1">
-      <TabsList>
+      <TabsList part="table-tabs">
         <TabsTrigger
           className="text-xs"
           value={DEFAULT_TAB_NAME}

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

@@ -283,7 +283,10 @@ const DataTableInternal = <TData,>({
     <div className={cn(wrapperClassName, "flex flex-col space-y-1")}>
       <FilterPills filters={filters} table={table} />
       <CellSelectionProvider>
-        <div className={cn(className || "rounded-md border overflow-hidden")}>
+        <div
+          part="table-wrapper"
+          className={cn(className || "rounded-md border overflow-hidden")}
+        >
           <TableTopBar
             enableSearch={enableSearch}
             searchQuery={searchQuery}
@@ -313,6 +316,7 @@ const DataTableInternal = <TData,>({
           </Table>
         </div>
         <TableBottomBar
+          part="table-footer"
           totalColumns={totalColumns}
           pagination={pagination}
           selection={selection}

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

@@ -24,7 +24,10 @@ export const LoadingTable = ({
 
   return (
     <div className={cn(wrapperClassName, "flex flex-col space-y-2")}>
-      <div className={cn(className || "rounded-md border")}>
+      <div
+        part="table-wrapper"
+        className={cn(className || "rounded-md border")}
+      >
         <Table>
           <TableHeader>
             {Array.from({ length: 1 }).map((_, i) => (

package/src/css/app/Cell.css

@@ -98,9 +98,30 @@
 
     /* Special case for particular components */
 
-    .output-area:has(> .output > marimo-ui-element > marimo-table) {
+    .output-area:has(
+        > .output:only-child > marimo-ui-element:only-child > marimo-table
+      ) {
+      padding: 0 0 5px;
       max-height: none;
       overflow: hidden;
+
+      /* Flush table: remove border and configure edge padding via CSS variable */
+      --marimo-table-edge-padding: 0.75rem;
+
+      marimo-table::part(table-tabs) {
+        margin-top: 0.25rem;
+        border: none;
+        border-radius: 0;
+      }
+
+      marimo-table::part(table-wrapper) {
+        border: none;
+        border-radius: 0;
+      }
+
+      marimo-table::part(table-footer) {
+        padding-inline: 0.25rem;
+      }
     }
 
     & > :first-child {

package/src/css/table.css

@@ -1,5 +1,22 @@
 @reference "../css/globals.css";
 
+/* Edge padding for flush tables (--marimo-table-edge-padding inherits through shadow DOM) */
+[part="table-wrapper"] th:first-child {
+  padding-left: var(--marimo-table-edge-padding, 0.5rem);
+}
+
+[part="table-wrapper"] th:last-child {
+  padding-right: var(--marimo-table-edge-padding, 0.5rem);
+}
+
+[part="table-wrapper"] td:first-child {
+  padding-left: var(--marimo-table-edge-padding, 0.375rem);
+}
+
+[part="table-wrapper"] td:last-child {
+  padding-right: var(--marimo-table-edge-padding, 0.375rem);
+}
+
 .markdown table,
 table.dataframe {
   display: block;

package/src/plugins/impl/DataTablePlugin.tsx

@@ -763,6 +763,7 @@ export const LoadingDataTableComponent = memo(
         {props.showChartBuilder ? (
           <TablePanel
             displayHeader={displayHeader}
+            onCloseChartBuilder={() => setDisplayHeader(false)}
             data={data?.rows || []}
             columns={props.totalColumns}
             totalRows={props.totalRows}