@marimo-team/islands 0.21.2-dev27 → 0.21.2-dev28

package/dist/main.js

@@ -20,7 +20,7 @@ var __privateWrapper = (obj, member, setter, getter) => ({
 import { a as __toCommonJS, n as __esmMin, o as __toDynamicImportESM, r as __export$1, s as __toESM, t as __commonJSMin } from "./chunk-BNovOVIE.js";
 import { t as require_react } from "./react-Bs6Z0kvn.js";
 import { t as require_compiler_runtime } from "./compiler-runtime-B_OLMU9S.js";
-import { n as Copy, r as toast, t as copyToClipboard } from "./copy-DIK6DiIA.js";
+import { n as Copy, r as toast, t as copyToClipboard } from "./copy-BjkXCUxP.js";
 import { _ as require_cjs$1, c as markdownLineEnding, d as SKIP, f as visitParents, g as s$2, h as h$1, l as longestStreak, m as webNamespaces, o as xn$1, p as convert$1, s as factorySpace, u as ok, __tla as __tla_0 } from "./chunk-5FQGJX7Z-BkzUmppO.js";
 import { a as Content$3, c as useSize, i as Arrow, l as createLucideIcon, o as Root2$6, r as Anchor, s as createPopperScope, t as Root$5 } from "./dist-C0Rnbr-_.js";
 import { A as useOnMount, B as Table$1, C as DEFAULT_COLOR_SCHEME, D as SCALE_TYPE_DESCRIPTIONS, E as EMPTY_VALUE$1, F as $896ba0a80a8f4d36$export$85fd5fdf27bacc79, G as ChartColumn, H as ListFilter, I as $fb18d541ea1ad717$export$ad991b66133851cf, K as Calendar, L as $5a387cc49350e6db$export$722debc0e56fea39, M as Badge, N as createReducerAndAtoms, O as TIME_UNIT_DESCRIPTIONS, P as startCase_default, R as Type, S as DEFAULT_AGGREGATION, T as DEFAULT_TIME_UNIT, U as Hash, V as SquareFunction, W as ChartPie, _ as AGGREGATION_TYPE_DESCRIPTIONS, a as AGGREGATION_FNS$1, b as COLOR_SCHEMES, c as COLOR_BY_FIELDS, d as NONE_VALUE, f as SELECTABLE_DATA_TYPES, g as TIME_UNITS, h as STRING_AGGREGATION_FNS, i as convertDataTypeToSelectable, j as useOnUnmount, k as escapeFieldName, l as COMBINED_TIME_UNITS, m as SORT_TYPES, n as createSpecWithoutData, o as BIN_AGGREGATION, p as SINGLE_TIME_UNITS, r as isFieldSet, s as CHART_TYPES, t as augmentSpecWithData, u as ChartType, v as AGGREGATION_TYPE_ICON, w as DEFAULT_MAX_BINS_FACET, x as COUNT_FIELD, y as CHART_TYPE_ICON, z as ToggleLeft } from "./spec-Bfvf9Hre.js";
@@ -34,7 +34,7 @@ import { $ as __awaiter, A as custom, B as record, C as ZodUnion$1, D as any, E
 import { t as require_jsx_runtime } from "./jsx-runtime-CTBg5pdT.js";
 import { t as require_react_dom } from "./react-dom-CqtLRVZP.js";
 import { a as TooltipRoot, i as TooltipProvider, n as TooltipContent, o as TooltipTrigger, r as TooltipPortal, s as TooltipProvider$1, t as Tooltip } from "./tooltip-CKG75XQa.js";
-import { a as _extends$5, c as setDiagnostics, d as insertTab, f as CopyClipboardIcon, i as minimalSetup, l as history, o as forEachDiagnostic, r as esm_default, s as linter, t as langs, u as historyField } from "./esm-BLobyqMs.js";
+import { a as _extends$5, c as setDiagnostics, d as insertTab, f as CopyClipboardIcon, i as minimalSetup, l as history, o as forEachDiagnostic, r as esm_default, s as linter, t as langs, u as historyField } from "./esm-No_6eSQS.js";
 import { i as toInteger_default, n as _baseSet_default } from "./_basePickBy-pTDW2_2A.js";
 import { i as get_default } from "./hasIn-B9AbGLj3.js";
 import { n as pick_default, t as range_default } from "./range-BKaWvVUE.js";
@@ -53737,6 +53737,40 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
       ]
     }), r[5] = _, r[6] = v, r[7] = y) : y = r[7], y;
   };
+  var import_compiler_runtime$122 = require_compiler_runtime();
+  const MimeCell = (e) => {
+    let r = (0, import_compiler_runtime$122.c)(6), { value: c } = e, d;
+    r[0] !== c.data || r[1] !== c.mimetype ? (d = {
+      channel: "output",
+      data: c.data,
+      mimetype: c.mimetype,
+      timestamp: 0
+    }, r[0] = c.data, r[1] = c.mimetype, r[2] = d) : d = r[2];
+    let f = d, _;
+    r[3] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (_ = cn("flex items-center space-x-2"), r[3] = _) : _ = r[3];
+    let v;
+    return r[4] === f ? v = r[5] : (v = (0, import_jsx_runtime.jsx)("div", {
+      className: _,
+      children: (0, import_jsx_runtime.jsx)(OutputRenderer, {
+        message: f
+      })
+    }), r[4] = f, r[5] = v), v;
+  };
+  function isMimeValue(e) {
+    return typeof e == "object" && !!e && "mimetype" in e && "data" in e;
+  }
+  function getMimeValues(e) {
+    if (isMimeValue(e)) return [
+      e
+    ];
+    if (typeof e == "object" && e && ("_serialized_mime_bundle" in e || "serialized_mime_bundle" in e)) {
+      let r = e, c = r._serialized_mime_bundle || r.serialized_mime_bundle;
+      if (isMimeValue(c)) return [
+        c
+      ];
+    }
+    if (Array.isArray(e) && e.every(isMimeValue)) return e.map((e2) => e2);
+  }
   function toFieldTypes(e) {
     return Objects.collect(e, ([e2]) => e2, ([, [e2]]) => e2);
   }
@@ -53752,6 +53786,15 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
       handleBigIntAndNumberLike: true
     }), e);
   }
+  async function loadTableAndRawData(e, r) {
+    return r ? Promise.all([
+      loadTableData(e),
+      loadTableData(r)
+    ]) : [
+      await loadTableData(e),
+      void 0
+    ];
+  }
   function getStableRowId(e) {
     if (e && typeof e == "object" && "_marimo_row_id" in e) return String(e[INDEX_COLUMN_NAME]);
   }
@@ -53763,6 +53806,41 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
     let { value: r, nullAsEmptyString: c = false } = e;
     return typeof r == "object" && r ? JSON.stringify(r) : r === null && c ? "" : String(r);
   }
+  function stripHtml(e) {
+    let r = document.createElement("div");
+    return r.innerHTML = e, (r.textContent || r.innerText || "").trim() || e;
+  }
+  var HTML_MIMETYPES = /* @__PURE__ */ new Set([
+    "text/html",
+    "text/markdown"
+  ]);
+  function isRecord(e) {
+    return typeof e == "object" && !!e && !Array.isArray(e);
+  }
+  function getClipboardContent(e, r) {
+    let c = typeof r == "object" && r ? getMimeValues(r) : void 0, d;
+    if (c) {
+      let e2 = c.filter((e3) => HTML_MIMETYPES.has(e3.mimetype)).map((e3) => e3.data);
+      d = e2.length > 0 ? e2.join("") : void 0;
+    }
+    let f;
+    return f = e !== void 0 && e !== r ? stringifyUnknownValue({
+      value: e
+    }) : c ? c.map((e2) => HTML_MIMETYPES.has(e2.mimetype) ? stripHtml(e2.data) : e2.data).join(", ") : stringifyUnknownValue({
+      value: r
+    }), {
+      text: f,
+      html: d
+    };
+  }
+  function getRawValue(e, r, c) {
+    var _a3;
+    let d = (_a3 = e.options.meta) == null ? void 0 : _a3.rawData;
+    if (d) {
+      let e2 = d[r];
+      if (isRecord(e2)) return e2[c];
+    }
+  }
   var TOP_K_ROWS = 30;
   const DataTableColumnHeader = ({ column: e, header: r, justify: c, className: d, calculateTopKRows: f, table: _ }) => {
     let [v, y] = (0, import_react.useState)(false), { locale: S } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7();
@@ -54245,9 +54323,9 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
     let [r, c] = import_react.useState(e), [d, f] = import_react.useState(null);
     return e !== r && (f(r), c(e)), d;
   }
-  var import_compiler_runtime$122 = require_compiler_runtime();
+  var import_compiler_runtime$121 = require_compiler_runtime();
   const DelayMount = (e) => {
-    let r = (0, import_compiler_runtime$122.c)(13), { milliseconds: c, children: d, fallback: f, visibility: _, threshold: v, rootMargin: y } = e, S = _ === void 0 ? false : _, w = v === void 0 ? 0 : v, E = y === void 0 ? "0px" : y, [O, M] = (0, import_react.useState)(false), [I, z] = (0, import_react.useState)(false), G;
+    let r = (0, import_compiler_runtime$121.c)(13), { milliseconds: c, children: d, fallback: f, visibility: _, threshold: v, rootMargin: y } = e, S = _ === void 0 ? false : _, w = v === void 0 ? 0 : v, E = y === void 0 ? "0px" : y, [O, M] = (0, import_react.useState)(false), [I, z] = (0, import_react.useState)(false), G;
     r[0] !== E || r[1] !== w ? (G = {
       threshold: w,
       root: null,
@@ -54278,9 +54356,9 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
       children: WY
     }), r[10] = UY, r[11] = WY, r[12] = GY) : GY = r[12], GY;
   };
-  var import_compiler_runtime$121 = require_compiler_runtime();
+  var import_compiler_runtime$120 = require_compiler_runtime();
   const DatePopover = (e) => {
-    let r = (0, import_compiler_runtime$121.c)(15), { date: c, type: d, children: f } = e;
+    let r = (0, import_compiler_runtime$120.c)(15), { date: c, type: d, children: f } = e;
     if (!c || Number.isNaN(new Date(c).getTime())) return f;
     let _;
     r[0] === c ? _ = r[1] : (_ = new Date(c), r[0] = c, r[1] = _);
@@ -54320,7 +54398,7 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
     }), r[12] = E, r[13] = O, r[14] = M) : M = r[14], M;
   };
   var TimezoneDisplay = (e) => {
-    let r = (0, import_compiler_runtime$121.c)(26), { date: c } = e, { locale: d } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7(), f;
+    let r = (0, import_compiler_runtime$120.c)(26), { date: c } = e, { locale: d } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7(), f;
     r[0] === d ? f = r[1] : (f = Intl.DateTimeFormat(d).resolvedOptions(), r[0] = d, r[1] = f);
     let _ = f.timeZone, v = c.getUTCMilliseconds() !== 0, y;
     r[2] === v ? y = r[3] : (y = v ? {
@@ -54396,7 +54474,7 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
       ]
     }), r[23] = IY, r[24] = I, r[25] = LY) : LY = r[25], LY;
   }, DateDisplay = (e) => {
-    let r = (0, import_compiler_runtime$121.c)(6), { date: c } = e, d;
+    let r = (0, import_compiler_runtime$120.c)(6), { date: c } = e, d;
     r[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (d = {
       timeZone: "UTC",
       dateStyle: "long"
@@ -54408,7 +54486,7 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
       children: _
     }), r[4] = _, r[5] = v), v;
   }, RelativeTime = (e) => {
-    let r = (0, import_compiler_runtime$121.c)(6), { date: c } = e, { locale: d } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7(), f, _;
+    let r = (0, import_compiler_runtime$120.c)(6), { date: c } = e, { locale: d } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7(), f, _;
     if (r[0] !== c || r[1] !== d) {
       _ = /* @__PURE__ */ Symbol.for("react.early_return_sentinel");
       bb0: {
@@ -54460,7 +54538,7 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
     return r[4] === f ? v = r[5] : (v = (0, import_jsx_runtime.jsx)("span", {
       children: f
     }), r[4] = f, r[5] = v), v;
-  }, import_compiler_runtime$120 = require_compiler_runtime(), hashString = (e) => {
+  }, import_compiler_runtime$119 = require_compiler_runtime(), hashString = (e) => {
     let r = 0;
     for (let c = 0; c < e.length; c++) {
       let d = e.charCodeAt(c);
@@ -54477,7 +54555,7 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
     return d;
   };
   const ChartSkeleton = (e) => {
-    let r = (0, import_compiler_runtime$120.c)(11), { seed: c, width: d, height: f } = e, _ = d / 9, v = f - 15, y;
+    let r = (0, import_compiler_runtime$119.c)(11), { seed: c, width: d, height: f } = e, _ = d / 9, v = f - 15, y;
     if (r[0] !== _ || r[1] !== f || r[2] !== c || r[3] !== v || r[4] !== d) {
       let e2 = generateHeights({
         numBars: 9,
@@ -55482,11 +55560,11 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
     }
   }, __publicField(_j, "EMPTY", new _j([], {}, {}, {}, {}, {
     includeCharts: false
-  })), _j), import_compiler_runtime$119 = require_compiler_runtime();
+  })), _j), import_compiler_runtime$118 = require_compiler_runtime();
   const ColumnChartContext = import_react.createContext(ColumnChartSpecModel.EMPTY);
   var batchedLoader = createBatchedLoader();
   const TableColumnSummary = (e) => {
-    let r = (0, import_compiler_runtime$119.c)(21), { columnId: c } = e, { locale: d } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7(), f = import_react.use(ColumnChartContext), { theme: _ } = useTheme(), v, y, S;
+    let r = (0, import_compiler_runtime$118.c)(21), { columnId: c } = e, { locale: d } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7(), f = import_react.use(ColumnChartContext), { theme: _ } = useTheme(), v, y, S;
     if (r[0] !== f || r[1] !== c || r[2] !== d || r[3] !== _) {
       let { spec: e2, type: w2, stats: E } = f.getHeaderSummary(c), O = null;
       if (e2) {
@@ -55687,40 +55765,6 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
       };
     }
   };
-  var import_compiler_runtime$118 = require_compiler_runtime();
-  const MimeCell = (e) => {
-    let r = (0, import_compiler_runtime$118.c)(6), { value: c } = e, d;
-    r[0] !== c.data || r[1] !== c.mimetype ? (d = {
-      channel: "output",
-      data: c.data,
-      mimetype: c.mimetype,
-      timestamp: 0
-    }, r[0] = c.data, r[1] = c.mimetype, r[2] = d) : d = r[2];
-    let f = d, _;
-    r[3] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (_ = cn("flex items-center space-x-2"), r[3] = _) : _ = r[3];
-    let v;
-    return r[4] === f ? v = r[5] : (v = (0, import_jsx_runtime.jsx)("div", {
-      className: _,
-      children: (0, import_jsx_runtime.jsx)(OutputRenderer, {
-        message: f
-      })
-    }), r[4] = f, r[5] = v), v;
-  };
-  function isMimeValue(e) {
-    return typeof e == "object" && !!e && "mimetype" in e && "data" in e;
-  }
-  function getMimeValues(e) {
-    if (isMimeValue(e)) return [
-      e
-    ];
-    if (typeof e == "object" && e && ("_serialized_mime_bundle" in e || "serialized_mime_bundle" in e)) {
-      let r = e, c = r._serialized_mime_bundle || r.serialized_mime_bundle;
-      if (isMimeValue(c)) return [
-        c
-      ];
-    }
-    if (Array.isArray(e) && e.every(isMimeValue)) return e.map((e2) => e2);
-  }
   function uniformSample(e, r) {
     if (e.length <= r) return e;
     let c = [], d = e.length / r;
@@ -56425,7 +56469,7 @@ Database schema: ${c}`), (_a4 = r2.aiFix) == null ? void 0 : _a4.setAiCompletion
       hasConsoleOutput: (v == null ? void 0 : v.consoleOutputs) != null
     };
   }
-  const LazyAnyLanguageCodeMirror = (0, import_react.lazy)(() => import("./any-language-editor-DlsjUw_l.js"));
+  const LazyAnyLanguageCodeMirror = (0, import_react.lazy)(() => import("./any-language-editor-BRpxklRq.js"));
   var import_compiler_runtime$117 = require_compiler_runtime(), extensions = [
     EditorView.lineWrapping
   ];
@@ -57319,22 +57363,30 @@ ${r}
     ];
   }
   function getCellValues(e, r) {
-    let c = /* @__PURE__ */ new Map();
-    for (let d of r) {
-      if (d.includes("__select__")) continue;
-      let { rowId: r2, columnId: f } = getRowAndColumnId(d), _ = e.getRow(r2);
-      if (!_) continue;
-      let v = _.getValue(f), y = c.get(r2) ?? [];
-      y.push(stringifyUnknownValue({
-        value: v
-      })), c.set(r2, y);
+    let c = /* @__PURE__ */ new Map(), d = false;
+    for (let f2 of r) {
+      if (f2.includes("__select__")) continue;
+      let { rowId: r2, columnId: _2 } = getRowAndColumnId(f2), v2 = e.getRow(r2);
+      if (!v2) continue;
+      let { text: y, html: S } = getClipboardContent(getRawValue(e, v2.index, _2), v2.getValue(_2));
+      S && (d = true);
+      let w = c.get(r2) ?? [];
+      w.push({
+        text: y,
+        html: S
+      }), c.set(r2, w);
     }
-    return getTabSeparatedValues([
+    let f = [
       ...c.values()
-    ]);
+    ], _ = f.map((e2) => e2.map((e3) => e3.text).join("	")).join("\n"), v;
+    return d && (v = `<table>${f.map((e2) => `<tr>${e2.map((e3) => `<td>${e3.html ?? escapeHtml(e3.text)}</td>`).join("")}</tr>`).join("")}</table>`), {
+      text: _,
+      html: v
+    };
   }
-  function getTabSeparatedValues(e) {
-    return e.map((e2) => e2.join("	")).join("\n");
+  function escapeHtml(e) {
+    let r = document.createElement("div");
+    return r.textContent = e, r.innerHTML;
   }
   function countDataCellsInSelection(e) {
     let r = 0;
@@ -57347,7 +57399,7 @@ ${r}
       if (d.includes("__select__")) continue;
       let { rowId: r2, columnId: f } = getRowAndColumnId(d), _ = e.getRow(r2);
       if (!_) continue;
-      let v = _.getValue(f), y;
+      let v = getRawValue(e, _.index, f) ?? _.getValue(f), y;
       if (typeof v == "number") y = v;
       else if (typeof v == "string") {
         if (v.trim() === "") continue;
@@ -57464,10 +57516,12 @@ ${r}
     },
     handleCopy: (e, { table: r, onCopyComplete: c }) => {
       let d = window.getSelection();
-      return d && d.toString().length > 0 ? e : (copyToClipboard(getCellValues(r, e.selectedCells)), c(), {
+      if (d && d.toString().length > 0) return e;
+      let { text: f, html: _ } = getCellValues(r, e.selectedCells);
+      return copyToClipboard(f, _), c(), {
         ...e,
         copiedCells: e.selectedCells
-      });
+      };
     },
     navigate: (e, { direction: r, isShiftKey: c, table: d }) => {
       let f = e.focusedCell ?? e.selectedStartCell;
@@ -58417,18 +58471,17 @@ ${r}
       Logger.error("No cell found in context menu");
       return;
     }
-    let f = () => {
+    let f = d.getContext().table, _ = d.getValue(), v = getRawValue(f, d.row.index, d.column.id) ?? _, y = () => {
       try {
-        copyToClipboard(stringifyUnknownValue({
-          value: d.getValue()
-        }));
+        let { text: e2, html: r2 } = getClipboardContent(v, _);
+        copyToClipboard(e2, r2);
       } catch (e2) {
         Logger.error("Failed to copy context menu cell", e2);
       }
-    }, _ = d.column, v = _.getCanFilter() && ((_a3 = _.columnDef.meta) == null ? void 0 : _a3.filterType), y = (e2) => {
-      _.setFilterValue(Filter.select({
+    }, w = d.column, O = w.getCanFilter() && ((_a3 = w.columnDef.meta) == null ? void 0 : _a3.filterType), M = (e2) => {
+      w.setFilterValue(Filter.select({
         options: [
-          d.getValue()
+          v
         ],
         operator: e2
       }));
@@ -58436,7 +58489,7 @@ ${r}
     return (0, import_jsx_runtime.jsxs)(ContextMenuContent, {
       children: [
         (0, import_jsx_runtime.jsxs)(ContextMenuItem, {
-          onClick: f,
+          onClick: y,
           children: [
             (0, import_jsx_runtime.jsx)(Copy, {
               className: "mo-dropdown-icon h-3 w-3"
@@ -58453,11 +58506,11 @@ ${r}
             "Copy selected cells"
           ]
         }),
-        v && (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+        O && (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
           children: [
             (0, import_jsx_runtime.jsx)(ContextMenuSeparator, {}),
             (0, import_jsx_runtime.jsxs)(ContextMenuItem, {
-              onClick: () => y("in"),
+              onClick: () => M("in"),
               children: [
                 (0, import_jsx_runtime.jsx)(Funnel, {
                   className: "mo-dropdown-icon h-3 w-3"
@@ -58466,7 +58519,7 @@ ${r}
               ]
             }),
             (0, import_jsx_runtime.jsxs)(ContextMenuItem, {
-              onClick: () => y("not_in"),
+              onClick: () => M("not_in"),
               children: [
                 (0, import_jsx_runtime.jsx)(Funnel, {
                   className: "mo-dropdown-icon h-3 w-3"
@@ -60086,22 +60139,22 @@ Defaulting to \`null\`.`;
         })
       })
     ]
-  }), 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);
+  }), DataTable = (0, import_react.memo)(({ wrapperClassName: e, className: r, maxHeight: c, columns: d, data: f, rawData: _, selection: v, totalColumns: y, totalRows: S, manualSorting: w = false, sorting: E, setSorting: O, rowSelection: M, cellSelection: I, cellStyling: z, hoverTemplate: G, cellHoverTexts: q, paginationState: IY, setPaginationState: LY, downloadAs: RY, downloadFileName: zY, manualPagination: BY = false, pagination: VY = false, onRowSelectionChange: HY, onCellSelectionChange: UY, getRowIds: WY, enableSearch: GY = false, searchQuery: KY, onSearchQueryChange: qY, showFilters: JY = false, filters: YY, onFiltersChange: XY, reloading: ZY, freezeColumnsLeft: QY, freezeColumnsRight: $Y, toggleDisplayHeader: eX, showChartBuilder: tX, showPageSizeSelector: nX, showColumnExplorer: rX, showRowExplorer: iX, togglePanel: aX, isPanelOpen: oX, viewedRowIdx: sX, onViewedRowChange: cX }) => {
+    let [lX, uX] = import_react.useState(false), [dX, fX] = import_react.useState(false), { locale: pX } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7(), { columnPinning: mX, setColumnPinning: hX } = useColumnPinning(QY, $Y);
     import_react.useEffect(() => {
       let e2;
-      return XY ? e2 = setTimeout(() => {
-        dX(true);
-      }, 300) : dX(false), () => {
+      return ZY ? e2 = setTimeout(() => {
+        fX(true);
+      }, 300) : fX(false), () => {
         e2 && clearTimeout(e2);
       };
     }, [
-      XY
+      ZY
     ]);
-    function hX(e2, r2) {
-      return q ? r2 + (zY ? q.pageIndex * q.pageSize : 0) : r2;
+    function gX(e2, r2) {
+      return IY ? r2 + (BY ? IY.pageIndex * IY.pageSize : 0) : r2;
     }
-    let gX = useReactTable({
+    let _X = useReactTable({
       _features: [
         ColumnPinning,
         ColumnWrappingFeature,
@@ -60115,61 +60168,64 @@ Defaulting to \`null\`.`;
       ],
       data: f,
       columns: d,
+      meta: {
+        rawData: _
+      },
       getCoreRowModel: getCoreRowModel(),
-      rowCount: y === "too_many" ? void 0 : y,
-      ...IY ? {
-        onPaginationChange: IY,
+      rowCount: S === "too_many" ? void 0 : S,
+      ...LY ? {
+        onPaginationChange: LY,
         getRowId: (e2, r2) => {
           let c2 = getStableRowId(e2);
           if (c2) return c2;
-          let d2 = hX(e2, r2);
+          let d2 = gX(e2, r2);
           return String(d2);
         }
       } : {},
-      locale: fX,
-      manualPagination: zY,
+      locale: pX,
+      manualPagination: BY,
       getPaginationRowModel: getPaginationRowModel(),
-      ...E ? {
-        onSortingChange: E
+      ...O ? {
+        onSortingChange: O
       } : {},
-      manualSorting: S,
+      manualSorting: w,
       enableMultiSort: true,
       getSortedRowModel: getSortedRowModel(),
       manualFiltering: true,
-      enableColumnFilters: qY,
+      enableColumnFilters: JY,
       getFilteredRowModel: getFilteredRowModel(),
-      onColumnFiltersChange: YY,
-      onRowSelectionChange: VY,
-      onCellSelectionChange: HY,
-      enableCellSelection: _ === "single-cell" || _ === "multi-cell",
-      enableMultiCellSelection: _ === "multi-cell",
-      onColumnPinningChange: mX,
+      onColumnFiltersChange: XY,
+      onRowSelectionChange: HY,
+      onCellSelectionChange: UY,
+      enableCellSelection: v === "single-cell" || v === "multi-cell",
+      enableMultiCellSelection: v === "multi-cell",
+      onColumnPinningChange: hX,
       enableFocusRow: true,
-      onFocusRowChange: sX,
+      onFocusRowChange: cX,
       state: {
-        ...w ? {
-          sorting: w
+        ...E ? {
+          sorting: E
         } : {},
-        columnFilters: JY,
-        ...q ? {
-          pagination: q
-        } : BY && !q ? {} : {
+        columnFilters: YY,
+        ...IY ? {
+          pagination: IY
+        } : VY && !IY ? {} : {
           pagination: {
             pageIndex: 0,
             pageSize: f.length
           }
         },
-        rowSelection: O ?? {},
-        cellSelection: M ?? [],
-        cellStyling: I,
-        columnPinning: pX,
-        cellHoverTemplate: z,
-        cellHoverTexts: G ?? {}
-      }
-    }), _X = (aX == null ? void 0 : aX("row-viewer")) ?? false, vX = import_react.useRef(null);
+        rowSelection: M ?? {},
+        cellSelection: I ?? [],
+        cellStyling: z,
+        columnPinning: mX,
+        cellHoverTemplate: G,
+        cellHoverTexts: q ?? {}
+      }
+    }), vX = (oX == null ? void 0 : oX("row-viewer")) ?? false, yX = import_react.useRef(null);
     return import_react.useEffect(() => {
-      if (!vX.current) return;
-      let e2 = vX.current.parentElement;
+      if (!yX.current) return;
+      let e2 = yX.current.parentElement;
       e2 && (c ? (e2.style.maxHeight = `${c}px`, e2.style.overflow || (e2.style.overflow = "auto")) : e2.style.removeProperty("max-height"));
     }, [
       c
@@ -60177,67 +60233,67 @@ Defaulting to \`null\`.`;
       className: cn(e, "flex flex-col space-y-1"),
       children: [
         (0, import_jsx_runtime.jsx)(FilterPills, {
-          filters: JY,
-          table: gX
+          filters: YY,
+          table: _X
         }),
         (0, import_jsx_runtime.jsxs)(CellSelectionProvider, {
           children: [
             (0, import_jsx_runtime.jsxs)("div", {
               className: cn(r || "rounded-md border overflow-hidden"),
               children: [
-                KY && WY && (0, import_jsx_runtime.jsx)(SearchBar, {
-                  value: GY || "",
-                  onHide: () => lX(false),
-                  handleSearch: KY,
-                  hidden: !cX,
-                  reloading: XY
+                qY && GY && (0, import_jsx_runtime.jsx)(SearchBar, {
+                  value: KY || "",
+                  onHide: () => uX(false),
+                  handleSearch: qY,
+                  hidden: !lX,
+                  reloading: ZY
                 }),
                 (0, import_jsx_runtime.jsxs)(Table, {
                   className: "relative",
-                  ref: vX,
+                  ref: yX,
                   children: [
-                    uX && (0, import_jsx_runtime.jsx)("thead", {
+                    dX && (0, import_jsx_runtime.jsx)("thead", {
                       className: "absolute top-0 left-0 h-[3px] w-1/2 bg-primary animate-slide"
                     }),
-                    renderTableHeader(gX, !!c),
+                    renderTableHeader(_X, !!c),
                     (0, import_jsx_runtime.jsx)(DataTableBody, {
-                      table: gX,
+                      table: _X,
                       columns: d,
-                      rowViewerPanelOpen: _X,
-                      getRowIndex: hX,
-                      viewedRowIdx: oX
+                      rowViewerPanelOpen: vX,
+                      getRowIndex: gX,
+                      viewedRowIdx: sX
                     })
                   ]
                 })
               ]
             }),
             (0, import_jsx_runtime.jsx)(CellSelectionStats, {
-              table: gX,
+              table: _X,
               className: "px-2 pt-1 ml-auto"
             })
           ]
         }),
         (0, import_jsx_runtime.jsx)(TableActions, {
-          enableSearch: WY,
-          totalColumns: v,
-          onSearchQueryChange: KY,
-          isSearchEnabled: cX,
-          setIsSearchEnabled: lX,
-          pagination: BY,
-          selection: _,
-          onRowSelectionChange: VY,
-          table: gX,
-          downloadAs: LY,
-          downloadFileName: RY,
-          getRowIds: UY,
-          toggleDisplayHeader: $Y,
-          showChartBuilder: eX,
-          showPageSizeSelector: tX,
-          showColumnExplorer: nX,
-          showRowExplorer: rX,
-          togglePanel: iX,
-          isPanelOpen: aX,
-          tableLoading: XY
+          enableSearch: GY,
+          totalColumns: y,
+          onSearchQueryChange: qY,
+          isSearchEnabled: lX,
+          setIsSearchEnabled: uX,
+          pagination: VY,
+          selection: v,
+          onRowSelectionChange: HY,
+          table: _X,
+          downloadAs: RY,
+          downloadFileName: zY,
+          getRowIds: WY,
+          toggleDisplayHeader: eX,
+          showChartBuilder: tX,
+          showPageSizeSelector: nX,
+          showColumnExplorer: rX,
+          showRowExplorer: iX,
+          togglePanel: aX,
+          isPanelOpen: oX,
+          tableLoading: ZY
         })
       ]
     });
@@ -70800,7 +70856,7 @@ Image URL: ${r.imageUrl}`)), contextToXml({
       return Logger.warn("Failed to get version from mount config"), null;
     }
   }
-  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.21.2-dev27"), showCodeInRunModeAtom = atom(true);
+  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.21.2-dev28"), showCodeInRunModeAtom = atom(true);
   atom(null);
   var import_compiler_runtime$89 = require_compiler_runtime();
   function useKeydownOnElement(e, r) {
@@ -72359,7 +72415,7 @@ Image URL: ${r.imageUrl}`)), contextToXml({
     "time",
     "unknown"
   ];
-  var import_compiler_runtime$82 = require_compiler_runtime(), LazyDataEditor = import_react.lazy(() => import("./glide-data-editor-pZyd9UJ_.js").then(async (m2) => {
+  var import_compiler_runtime$82 = require_compiler_runtime(), LazyDataEditor = import_react.lazy(() => import("./glide-data-editor-858wsVkd.js").then(async (m2) => {
     await m2.__tla;
     return m2;
   }));
@@ -81007,6 +81063,10 @@ ${c}
       string(),
       array(object$1({}).passthrough())
     ]),
+    rawData: union([
+      string(),
+      array(looseObject({}))
+    ]).nullish(),
     totalRows: union([
       number(),
       literal(TOO_MANY_ROWS)
@@ -81090,7 +81150,11 @@ ${c}
         literal(TOO_MANY_ROWS)
       ]),
       cell_styles: record(string(), record(string(), object$1({}).passthrough())).nullable(),
-      cell_hover_texts: cellHoverTextSchema.nullable()
+      cell_hover_texts: cellHoverTextSchema.nullable(),
+      raw_data: union([
+        string(),
+        array(looseObject({}))
+      ]).nullish()
     })),
     get_row_ids: rpc.input(object$1({}).passthrough()).output(object$1({
       row_ids: array(number()),
@@ -81184,7 +81248,7 @@ ${c}
     return d;
   };
   const LoadingDataTableComponent = (0, import_react.memo)((e) => {
-    let r = (0, import_compiler_runtime$58.c)(101), c;
+    let r = (0, import_compiler_runtime$58.c)(103), c;
     r[0] === e.host ? c = r[1] : (c = findCellId(e.host), r[0] = e.host, r[1] = c);
     let d = c, f = e.search, _ = e.setValue, v;
     r[2] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (v = [], r[2] = v) : v = r[2];
@@ -81219,33 +81283,35 @@ ${c}
       e.pageSize
     ], r[18] = e.pageSize, r[19] = VY, r[20] = HY), (0, import_react.useEffect)(VY, HY);
     let UY;
-    r[21] !== G || r[22] !== E.pageIndex || r[23] !== E.pageSize || r[24] !== e.cellHoverTexts || r[25] !== e.cellStyles || r[26] !== e.data || r[27] !== e.lazy || r[28] !== e.pageSize || r[29] !== e.totalRows || r[30] !== f || r[31] !== M || r[32] !== y ? (UY = async () => {
+    r[21] !== G || r[22] !== E.pageIndex || r[23] !== E.pageSize || r[24] !== e.cellHoverTexts || r[25] !== e.cellStyles || r[26] !== e.data || r[27] !== e.lazy || r[28] !== e.pageSize || r[29] !== e.rawData || r[30] !== e.totalRows || r[31] !== f || r[32] !== M || r[33] !== y ? (UY = async () => {
       if (e.totalRows === 0) return {
         rows: Arrays.EMPTY,
         totalRows: 0,
         cellStyles: {}
       };
-      let r2 = e.data, c2 = e.totalRows, d2 = e.cellStyles, _2 = e.cellHoverTexts, v2 = E.pageSize !== e.pageSize, S2 = M === "" && E.pageIndex === 0 && G.length === 0 && y.length === 0 && !e.lazy && !v2, w2 = f({
+      let r2 = e.data, c2 = e.rawData, d2 = e.totalRows, _2 = e.cellStyles, v2 = e.cellHoverTexts, S2 = E.pageSize !== e.pageSize, w2 = M === "" && E.pageIndex === 0 && G.length === 0 && y.length === 0 && !e.lazy && !S2, O2 = f({
         sort: y.length > 0 ? y.map(_temp$19) : void 0,
         query: M,
         page_number: E.pageIndex,
         page_size: E.pageSize,
         filters: G.flatMap(_temp2$15)
       });
-      if (S2) w2.catch(_temp3$10);
+      if (w2) O2.catch(_temp3$10);
       else {
-        let e2 = await w2;
-        r2 = e2.data, c2 = e2.total_rows, d2 = e2.cell_styles || {}, _2 = e2.cell_hover_texts || {};
+        let e2 = await O2;
+        r2 = e2.data, c2 = e2.raw_data, d2 = e2.total_rows, _2 = e2.cell_styles || {}, v2 = e2.cell_hover_texts || {};
       }
-      return r2 = await loadTableData(r2), {
+      let [I2, z2] = await loadTableAndRawData(r2, c2);
+      return r2 = I2, {
         rows: r2,
-        totalRows: c2,
-        cellStyles: d2,
-        cellHoverTexts: _2
+        rawRows: z2,
+        totalRows: d2,
+        cellStyles: _2,
+        cellHoverTexts: v2
       };
-    }, r[21] = G, r[22] = E.pageIndex, r[23] = E.pageSize, r[24] = e.cellHoverTexts, r[25] = e.cellStyles, r[26] = e.data, r[27] = e.lazy, r[28] = e.pageSize, r[29] = e.totalRows, r[30] = f, r[31] = M, r[32] = y, r[33] = UY) : UY = r[33];
+    }, r[21] = G, r[22] = E.pageIndex, r[23] = E.pageSize, r[24] = e.cellHoverTexts, r[25] = e.cellStyles, r[26] = e.data, r[27] = e.lazy, r[28] = e.pageSize, r[29] = e.rawData, r[30] = e.totalRows, r[31] = f, r[32] = M, r[33] = y, r[34] = UY) : UY = r[34];
     let WY = useDeepCompareMemoize(e.fieldTypes), GY;
-    r[34] !== G || r[35] !== E.pageIndex || r[36] !== E.pageSize || r[37] !== e.cellHoverTexts || r[38] !== e.cellStyles || r[39] !== e.data || r[40] !== e.lazy || r[41] !== e.totalRows || r[42] !== f || r[43] !== M || r[44] !== y || r[45] !== WY ? (GY = [
+    r[35] !== G || r[36] !== E.pageIndex || r[37] !== E.pageSize || r[38] !== e.cellHoverTexts || r[39] !== e.cellStyles || r[40] !== e.data || r[41] !== e.lazy || r[42] !== e.totalRows || r[43] !== f || r[44] !== M || r[45] !== y || r[46] !== WY ? (GY = [
       y,
       f,
       G,
@@ -81258,9 +81324,9 @@ ${c}
       e.cellStyles,
       E.pageSize,
       E.pageIndex
-    ], r[34] = G, r[35] = E.pageIndex, r[36] = E.pageSize, r[37] = e.cellHoverTexts, r[38] = e.cellStyles, r[39] = e.data, r[40] = e.lazy, r[41] = e.totalRows, r[42] = f, r[43] = M, r[44] = y, r[45] = WY, r[46] = GY) : GY = r[46];
+    ], r[35] = G, r[36] = E.pageIndex, r[37] = E.pageSize, r[38] = e.cellHoverTexts, r[39] = e.cellStyles, r[40] = e.data, r[41] = e.lazy, r[42] = e.totalRows, r[43] = f, r[44] = M, r[45] = y, r[46] = WY, r[47] = GY) : GY = r[47];
     let { data: KY, error: qY, isPending: JY, isFetching: YY } = useAsyncData(UY, GY), XY;
-    r[47] !== G || r[48] !== f || r[49] !== M || r[50] !== y ? (XY = async (e2) => ({
+    r[48] !== G || r[49] !== f || r[50] !== M || r[51] !== y ? (XY = async (e2) => ({
       rows: await loadTableData((await f({
         page_number: e2,
         page_size: 1,
@@ -81269,51 +81335,51 @@ ${c}
         filters: G.flatMap(_temp5$5),
         max_columns: null
       })).data)
-    }), r[47] = G, r[48] = f, r[49] = M, r[50] = y, r[51] = XY) : XY = r[51];
+    }), r[48] = G, r[49] = f, r[50] = M, r[51] = y, r[52] = XY) : XY = r[52];
     let ZY = XY, QY;
-    r[52] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (QY = () => {
+    r[53] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (QY = () => {
       O(_temp6$4);
-    }, r[52] = QY) : QY = r[52];
+    }, r[53] = QY) : QY = r[53];
     let $Y = KY == null ? void 0 : KY.totalRows, eX;
-    r[53] === $Y ? eX = r[54] : (eX = [
+    r[54] === $Y ? eX = r[55] : (eX = [
       $Y
-    ], r[53] = $Y, r[54] = eX), (0, import_react.useEffect)(QY, eX);
+    ], r[54] = $Y, r[55] = eX), (0, import_react.useEffect)(QY, eX);
     let tX;
-    r[55] === e ? tX = r[56] : (tX = async () => e.totalRows === 0 || !e.showColumnSummaries ? {
+    r[56] === e ? tX = r[57] : (tX = async () => e.totalRows === 0 || !e.showColumnSummaries ? {
       data: null,
       stats: {},
       bin_values: {},
       value_counts: {},
       show_charts: false
-    } : e.get_column_summaries({}), r[55] = e, r[56] = tX);
+    } : e.get_column_summaries({}), r[56] = e, r[57] = tX);
     let nX;
-    r[57] !== G || r[58] !== e.data || r[59] !== e.get_column_summaries || r[60] !== e.showColumnSummaries || r[61] !== e.totalRows || r[62] !== M ? (nX = [
+    r[58] !== G || r[59] !== e.data || r[60] !== e.get_column_summaries || r[61] !== e.showColumnSummaries || r[62] !== e.totalRows || r[63] !== M ? (nX = [
       e.get_column_summaries,
       e.showColumnSummaries,
       G,
       M,
       e.totalRows,
       e.data
-    ], r[57] = G, r[58] = e.data, r[59] = e.get_column_summaries, r[60] = e.showColumnSummaries, r[61] = e.totalRows, r[62] = M, r[63] = nX) : nX = r[63];
+    ], r[58] = G, r[59] = e.data, r[60] = e.get_column_summaries, r[61] = e.showColumnSummaries, r[62] = e.totalRows, r[63] = M, r[64] = nX) : nX = r[64];
     let { data: rX, error: iX } = useAsyncData(tX, nX), aX, oX;
-    if (r[64] === iX ? (aX = r[65], oX = r[66]) : (aX = () => {
+    if (r[65] === iX ? (aX = r[66], oX = r[67]) : (aX = () => {
       iX && Logger.error(iX);
     }, oX = [
       iX
-    ], r[64] = iX, r[65] = aX, r[66] = oX), (0, import_react.useEffect)(aX, oX), JY) {
+    ], r[65] = iX, r[66] = aX, r[67] = oX), (0, import_react.useEffect)(aX, oX), JY) {
       let c2 = e.totalRows !== "too_many" && e.totalRows > 0 ? e.totalRows : e.pageSize, d2;
-      return r[67] === c2 ? d2 = r[68] : (d2 = (0, import_jsx_runtime.jsx)(DelayMount, {
+      return r[68] === c2 ? d2 = r[69] : (d2 = (0, import_jsx_runtime.jsx)(DelayMount, {
         milliseconds: 200,
         children: (0, import_jsx_runtime.jsx)(LoadingTable, {
           pageSize: c2
         })
-      }), r[67] = c2, r[68] = d2), d2;
+      }), r[68] = c2, r[69] = d2), d2;
     }
     let sX = null;
     if (qY) {
       Logger.error(qY);
       let e2;
-      r[69] === qY ? e2 = r[70] : (e2 = !isStaticNotebook() && (0, import_jsx_runtime.jsxs)(Alert, {
+      r[70] === qY ? e2 = r[71] : (e2 = !isStaticNotebook() && (0, import_jsx_runtime.jsxs)(Alert, {
         variant: "destructive",
         className: "mb-2",
         children: [
@@ -81325,16 +81391,17 @@ ${c}
             children: qY.message || "An unknown error occurred"
           })
         ]
-      }), r[69] = qY, r[70] = e2), sX = e2;
+      }), r[70] = qY, r[71] = e2), sX = e2;
     }
     let cX;
-    r[71] === LY ? cX = r[72] : (cX = () => {
+    r[72] === LY ? cX = r[73] : (cX = () => {
       RY(!LY);
-    }, r[71] = LY, r[72] = cX);
-    let lX = cX, uX = (KY == null ? void 0 : KY.rows) ?? Arrays.EMPTY, dX = YY && !JY, fX = (KY == null ? void 0 : KY.totalRows) ?? e.totalRows, pX = (KY == null ? void 0 : KY.cellStyles) ?? e.cellStyles, mX = (KY == null ? void 0 : KY.cellHoverTexts) ?? e.cellHoverTexts, hX;
-    r[73] !== d || r[74] !== rX || r[75] !== G || r[76] !== ZY || r[77] !== E || r[78] !== e || r[79] !== M || r[80] !== y || r[81] !== uX || r[82] !== dX || r[83] !== fX || r[84] !== pX || r[85] !== mX || r[86] !== lX ? (hX = (0, import_jsx_runtime.jsx)(DataTableComponent, {
+    }, r[72] = LY, r[73] = cX);
+    let lX = cX, uX = (KY == null ? void 0 : KY.rows) ?? Arrays.EMPTY, dX = KY == null ? void 0 : KY.rawRows, fX = YY && !JY, pX = (KY == null ? void 0 : KY.totalRows) ?? e.totalRows, mX = (KY == null ? void 0 : KY.cellStyles) ?? e.cellStyles, hX = (KY == null ? void 0 : KY.cellHoverTexts) ?? e.cellHoverTexts, gX;
+    r[74] !== d || r[75] !== rX || r[76] !== G || r[77] !== ZY || r[78] !== E || r[79] !== e || r[80] !== M || r[81] !== y || r[82] !== uX || r[83] !== dX || r[84] !== fX || r[85] !== pX || r[86] !== mX || r[87] !== hX || r[88] !== lX ? (gX = (0, import_jsx_runtime.jsx)(DataTableComponent, {
       ...e,
       data: uX,
+      rawData: dX,
       columnSummaries: rX,
       sorting: y,
       setSorting: S,
@@ -81342,190 +81409,191 @@ ${c}
       setSearchQuery: I,
       filters: G,
       setFilters: q,
-      reloading: dX,
-      totalRows: fX,
+      reloading: fX,
+      totalRows: pX,
       paginationState: E,
       setPaginationState: O,
-      cellStyles: pX,
-      cellHoverTexts: mX,
+      cellStyles: mX,
+      cellHoverTexts: hX,
       toggleDisplayHeader: lX,
       getRow: ZY,
       cellId: d,
       maxHeight: e.maxHeight
-    }), r[73] = d, r[74] = rX, r[75] = G, r[76] = ZY, r[77] = E, r[78] = e, r[79] = M, r[80] = y, r[81] = uX, r[82] = dX, r[83] = fX, r[84] = pX, r[85] = mX, r[86] = lX, r[87] = hX) : hX = r[87];
-    let gX = hX, _X;
-    r[88] !== d || r[89] !== (KY == null ? void 0 : KY.rows) || r[90] !== gX || r[91] !== LY || r[92] !== e.fieldTypes || r[93] !== e.get_data_url || r[94] !== e.showChartBuilder || r[95] !== e.totalColumns || r[96] !== e.totalRows ? (_X = e.showChartBuilder ? (0, import_jsx_runtime.jsx)(TablePanel, {
+    }), r[74] = d, r[75] = rX, r[76] = G, r[77] = ZY, r[78] = E, r[79] = e, r[80] = M, r[81] = y, r[82] = uX, r[83] = dX, r[84] = fX, r[85] = pX, r[86] = mX, r[87] = hX, r[88] = lX, r[89] = gX) : gX = r[89];
+    let _X = gX, vX;
+    r[90] !== d || r[91] !== _X || r[92] !== (KY == null ? void 0 : KY.rows) || r[93] !== LY || r[94] !== e.fieldTypes || r[95] !== e.get_data_url || r[96] !== e.showChartBuilder || r[97] !== e.totalColumns || r[98] !== e.totalRows ? (vX = e.showChartBuilder ? (0, import_jsx_runtime.jsx)(TablePanel, {
       displayHeader: LY,
       data: (KY == null ? void 0 : KY.rows) || [],
       columns: e.totalColumns,
       totalRows: e.totalRows,
-      dataTable: gX,
+      dataTable: _X,
       getDataUrl: e.get_data_url,
       fieldTypes: e.fieldTypes,
       cellId: d
-    }) : gX, r[88] = d, r[89] = KY == null ? void 0 : KY.rows, r[90] = gX, r[91] = LY, r[92] = e.fieldTypes, r[93] = e.get_data_url, r[94] = e.showChartBuilder, r[95] = e.totalColumns, r[96] = e.totalRows, r[97] = _X) : _X = r[97];
-    let vX;
-    return r[98] !== sX || r[99] !== _X ? (vX = (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+    }) : _X, r[90] = d, r[91] = _X, r[92] = KY == null ? void 0 : KY.rows, r[93] = LY, r[94] = e.fieldTypes, r[95] = e.get_data_url, r[96] = e.showChartBuilder, r[97] = e.totalColumns, r[98] = e.totalRows, r[99] = vX) : vX = r[99];
+    let yX;
+    return r[100] !== sX || r[101] !== vX ? (yX = (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
       children: [
         sX,
-        _X
+        vX
       ]
-    }), r[98] = sX, r[99] = _X, r[100] = vX) : vX = r[100], vX;
+    }), r[100] = sX, r[101] = vX, r[102] = yX) : yX = r[102], yX;
   });
   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, downloadFileName: aX, 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)(() => {
-      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, {
-        includeCharts: RY.show_charts
+  var DataTableComponent = ({ label: e, data: r, rawData: c, totalRows: d, maxColumns: f, pagination: _, selection: v, value: y, showFilters: S, showDownload: w, showPageSizeSelector: E, showColumnExplorer: O, showRowExplorer: M, showChartBuilder: I, showDataTypes: z, rowHeaders: G, fieldTypes: q, paginationState: IY, setPaginationState: LY, download_as: RY, columnSummaries: zY, className: BY, setValue: VY, sorting: HY, setSorting: UY, enableSearch: WY, searchQuery: GY, setSearchQuery: KY, filters: qY, setFilters: JY, reloading: YY, freezeColumnsLeft: XY, freezeColumnsRight: ZY, textJustifyColumns: QY, wrappedColumns: $Y, headerTooltip: eX, totalColumns: tX, get_row_ids: nX, cellStyles: rX, hoverTemplate: iX, cellHoverTexts: aX, 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 (!zY || !q || !zY.stats) return ColumnChartSpecModel.EMPTY;
+      let e2 = toFieldTypes(q);
+      return new ColumnChartSpecModel(zY.data || [], e2, zY.stats, zY.bin_values, zY.value_counts, {
+        includeCharts: zY.show_charts
       });
     }, [
-      G,
-      RY
-    ]), vX = useDeepCompareMemoize(G ?? inferFieldTypes(r)), yX = (0, import_react.useMemo)(() => d === "all" ? vX : vX.slice(0, d), [
-      d,
-      vX
-    ]), bX = useDeepCompareMemoize(z), xX = useDeepCompareMemoize(ZY), SX = useDeepCompareMemoize(QY), CX = useDeepCompareMemoize(_X), wX = yX.length;
-    G || (I = false);
-    let TX = (0, import_react.useMemo)(() => generateColumns({
-      rowHeaders: bX,
-      selection: _,
-      chartSpecModel: CX,
-      fieldTypes: yX,
-      textJustifyColumns: xX,
-      wrappedColumns: SX,
-      headerTooltip: $Y,
-      showDataTypes: I,
-      calculateTopKRows: sX
+      q,
+      zY
+    ]), yX = useDeepCompareMemoize(q ?? inferFieldTypes(r)), bX = (0, import_react.useMemo)(() => f === "all" ? yX : yX.slice(0, f), [
+      f,
+      yX
+    ]), xX = useDeepCompareMemoize(G), SX = useDeepCompareMemoize(QY), CX = useDeepCompareMemoize($Y), wX = useDeepCompareMemoize(vX), TX = bX.length;
+    q || (z = false);
+    let EX = (0, import_react.useMemo)(() => generateColumns({
+      rowHeaders: xX,
+      selection: v,
+      chartSpecModel: wX,
+      fieldTypes: bX,
+      textJustifyColumns: SX,
+      wrappedColumns: CX,
+      headerTooltip: eX,
+      showDataTypes: z,
+      calculateTopKRows: cX
     }), [
-      _,
-      I,
-      CX,
-      bX,
-      yX,
+      v,
+      z,
+      wX,
       xX,
+      bX,
       SX,
-      $Y,
-      sX
-    ]), EX = (0, import_react.useMemo)(() => Object.fromEntries((v || []).map((e2) => [
+      CX,
+      eX,
+      cX
+    ]), DX = (0, import_react.useMemo)(() => Object.fromEntries((y || []).map((e2) => [
       e2,
       true
     ])), [
-      v
-    ]), DX = useEvent_default((e2) => {
-      if (_ === "single") {
+      y
+    ]), OX = useEvent_default((e2) => {
+      if (v === "single") {
         let r2 = Functions.asUpdater(e2)({});
-        BY(Object.keys(r2).slice(0, 1));
+        VY(Object.keys(r2).slice(0, 1));
       }
-      if (_ === "multi") {
-        let r2 = Functions.asUpdater(e2)(EX);
-        BY(Object.keys(r2));
+      if (v === "multi") {
+        let r2 = Functions.asUpdater(e2)(DX);
+        VY(Object.keys(r2));
       }
-    }), OX = useEvent_default((e2) => {
-      if (mX(e2), e2 < 0 || typeof c == "number" && e2 >= c || c === "too_many") return;
-      let r2 = getPageIndexForRow(e2, q.pageIndex, q.pageSize);
-      r2 !== null && IY((e3) => ({
+    }), kX = useEvent_default((e2) => {
+      if (hX(e2), e2 < 0 || typeof d == "number" && e2 >= d || d === "too_many") return;
+      let r2 = getPageIndexForRow(e2, IY.pageIndex, IY.pageSize);
+      r2 !== null && LY((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 = y.filter((e2) => e2 instanceof Object && e2.columnName !== void 0), jX = useEvent_default((e2) => {
+      v === "single-cell" && VY(Functions.asUpdater(e2)(AX).slice(0, 1)), v === "multi-cell" && VY(Functions.asUpdater(e2)(AX));
+    }), MX = v === "multi" || v === "single", NX = O && 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, {
+        d === "too_many" && IY.pageSize === r.length && (0, import_jsx_runtime.jsxs)(Banner, {
           className: "mb-1 rounded",
           children: [
             "Previewing the first ",
-            q.pageSize,
+            IY.pageSize,
             " rows."
           ]
         }),
-        wX < eX && wX > 0 && (0, import_jsx_runtime.jsxs)(Banner, {
+        TX < tX && TX > 0 && (0, import_jsx_runtime.jsxs)(Banner, {
           className: "mb-1 rounded",
           children: [
             "Result clipped. Showing ",
-            wX,
+            TX,
             " of ",
-            eX,
+            tX,
             " columns."
           ]
         }),
-        (RY == null ? void 0 : RY.is_disabled) && (0, import_jsx_runtime.jsx)(Banner, {
+        (zY == null ? void 0 : zY.is_disabled) && (0, import_jsx_runtime.jsx)(Banner, {
           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,
-            totalRows: c,
-            rowIdx: pX,
-            setRowIdx: OX,
-            isSelectable: jX,
-            isRowSelected: EX[pX],
-            handleRowSelectionChange: DX
+            getRow: uX,
+            fieldTypes: yX,
+            totalRows: d,
+            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,
-            totalRows: c,
-            totalColumns: eX,
-            tableId: fX
+            previewColumn: lX,
+            fieldTypes: yX,
+            totalRows: d,
+            totalColumns: tX,
+            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,
-              className: zY,
-              maxHeight: dX,
-              sorting: VY,
-              totalRows: c,
-              totalColumns: eX,
+              rawData: c,
+              columns: EX,
+              className: BY,
+              maxHeight: fX,
+              sorting: HY,
+              totalRows: d,
+              totalColumns: tX,
               manualSorting: true,
-              setSorting: HY,
-              pagination: f,
+              setSorting: UY,
+              pagination: _,
               manualPagination: true,
-              selection: _,
-              paginationState: q,
-              setPaginationState: IY,
-              rowSelection: EX,
-              cellSelection: kX,
-              cellStyling: nX,
-              hoverTemplate: rX,
-              cellHoverTexts: iX,
-              downloadAs: S ? LY : void 0,
-              downloadFileName: aX,
-              enableSearch: UY,
-              searchQuery: WY,
-              onSearchQueryChange: GY,
-              showFilters: y,
-              filters: KY,
-              onFiltersChange: qY,
-              reloading: JY,
-              onRowSelectionChange: DX,
-              freezeColumnsLeft: YY,
-              freezeColumnsRight: XY,
-              onCellSelectionChange: AX,
-              getRowIds: tX,
-              toggleDisplayHeader: oX,
-              showChartBuilder: M,
-              showPageSizeSelector: w,
-              showColumnExplorer: E && !NX,
-              showRowExplorer: O && !NX,
-              togglePanel: gX,
-              isPanelOpen: hX,
-              viewedRowIdx: pX,
-              onViewedRowChange: (e2) => mX(e2)
+              selection: v,
+              paginationState: IY,
+              setPaginationState: LY,
+              rowSelection: DX,
+              cellSelection: AX,
+              cellStyling: rX,
+              hoverTemplate: iX,
+              cellHoverTexts: aX,
+              downloadAs: w ? RY : void 0,
+              downloadFileName: oX,
+              enableSearch: WY,
+              searchQuery: GY,
+              onSearchQueryChange: KY,
+              showFilters: S,
+              filters: qY,
+              onFiltersChange: JY,
+              reloading: YY,
+              onRowSelectionChange: OX,
+              freezeColumnsLeft: XY,
+              freezeColumnsRight: ZY,
+              onCellSelectionChange: jX,
+              getRowIds: nX,
+              toggleDisplayHeader: sX,
+              showChartBuilder: I,
+              showPageSizeSelector: E,
+              showColumnExplorer: O && !PX,
+              showRowExplorer: M && !PX,
+              togglePanel: _X,
+              isPanelOpen: gX,
+              viewedRowIdx: mX,
+              onViewedRowChange: (e2) => hX(e2)
             })
           })
         })