@marimo-team/frontend 0.21.2-dev5 → 0.21.2-dev53

package/src/core/storage/__tests__/state.test.ts

@@ -1,5 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import { beforeEach, describe, expect, it } from "vitest";
+import { variableName } from "@/__tests__/branded";
 import type { VariableName } from "../../variables/types";
 import { exportedForTesting } from "../state";
 import type { StorageEntry, StorageNamespace, StorageState } from "../types";
@@ -7,7 +8,7 @@ import type { StorageEntry, StorageNamespace, StorageState } from "../types";
 const { initialState, reducer, createActions } = exportedForTesting;
 
 function makeNamespace(
-  overrides: Partial<StorageNamespace> & { name: string },
+  overrides: Partial<StorageNamespace> & { name: VariableName },
 ): StorageNamespace {
   return {
     backendType: overrides.backendType ?? "obstore",
@@ -53,8 +54,14 @@ describe("storage state", () => {
 
   describe("setNamespaces", () => {
     it("should add namespaces from an empty state", () => {
-      const ns1 = makeNamespace({ name: "my_s3", protocol: "s3" });
-      const ns2 = makeNamespace({ name: "my_gcs", protocol: "gcs" });
+      const ns1 = makeNamespace({
+        name: variableName("my_s3"),
+        protocol: "s3",
+      });
+      const ns2 = makeNamespace({
+        name: variableName("my_gcs"),
+        protocol: "gcs",
+      });
 
       actions.setNamespaces({ namespaces: [ns1, ns2] });
 
@@ -63,15 +70,18 @@ describe("storage state", () => {
 
     it("should merge namespaces by name, replacing existing ones", () => {
       const nsOld = makeNamespace({
-        name: "my_s3",
+        name: variableName("my_s3"),
         protocol: "s3",
         rootPath: "/old",
       });
-      const nsOther = makeNamespace({ name: "my_gcs", protocol: "gcs" });
+      const nsOther = makeNamespace({
+        name: variableName("my_gcs"),
+        protocol: "gcs",
+      });
       actions.setNamespaces({ namespaces: [nsOld, nsOther] });
 
       const nsUpdated = makeNamespace({
-        name: "my_s3",
+        name: variableName("my_s3"),
         protocol: "s3",
         rootPath: "/new",
       });
@@ -82,10 +92,10 @@ describe("storage state", () => {
     });
 
     it("should add new namespaces alongside existing ones", () => {
-      const ns1 = makeNamespace({ name: "ns1" });
+      const ns1 = makeNamespace({ name: variableName("ns1") });
       actions.setNamespaces({ namespaces: [ns1] });
 
-      const ns2 = makeNamespace({ name: "ns2" });
+      const ns2 = makeNamespace({ name: variableName("ns2") });
       actions.setNamespaces({ namespaces: [ns2] });
 
       expect(state.namespaces).toHaveLength(2);
@@ -101,7 +111,7 @@ describe("storage state", () => {
       });
 
       actions.setNamespaces({
-        namespaces: [makeNamespace({ name: "ns" })],
+        namespaces: [makeNamespace({ name: variableName("ns") })],
       });
 
       expect(state.entriesByPath.get("ns::")).toEqual([entry]);
@@ -205,7 +215,7 @@ describe("storage state", () => {
     });
 
     it("should not affect namespaces", () => {
-      const ns = makeNamespace({ name: "ns" });
+      const ns = makeNamespace({ name: variableName("ns") });
       actions.setNamespaces({ namespaces: [ns] });
 
       actions.setEntries({
@@ -263,7 +273,7 @@ describe("storage state", () => {
     });
 
     it("should not affect namespaces", () => {
-      const ns = makeNamespace({ name: "my_s3" });
+      const ns = makeNamespace({ name: variableName("my_s3") });
       actions.setNamespaces({ namespaces: [ns] });
       actions.setEntries({
         namespace: "my_s3",
@@ -293,31 +303,31 @@ describe("storage state", () => {
 
   describe("filterFromVariables", () => {
     it("should keep namespaces whose variable is still in scope", () => {
-      const ns1 = makeNamespace({ name: "var_a" });
-      const ns2 = makeNamespace({ name: "var_b" });
+      const ns1 = makeNamespace({ name: variableName("var_a") });
+      const ns2 = makeNamespace({ name: variableName("var_b") });
       actions.setNamespaces({ namespaces: [ns1, ns2] });
 
       actions.filterFromVariables([
-        "var_a" as VariableName,
-        "var_b" as VariableName,
+        variableName("var_a"),
+        variableName("var_b"),
       ]);
 
       expect(state.namespaces).toEqual([ns1, ns2]);
     });
 
     it("should remove namespaces whose variable is no longer in scope", () => {
-      const ns1 = makeNamespace({ name: "var_a" });
-      const ns2 = makeNamespace({ name: "var_b" });
+      const ns1 = makeNamespace({ name: variableName("var_a") });
+      const ns2 = makeNamespace({ name: variableName("var_b") });
       actions.setNamespaces({ namespaces: [ns1, ns2] });
 
-      actions.filterFromVariables(["var_a" as VariableName]);
+      actions.filterFromVariables([variableName("var_a")]);
 
       expect(state.namespaces).toEqual([ns1]);
     });
 
     it("should remove all named namespaces when given an empty variable list", () => {
-      const ns1 = makeNamespace({ name: "var_a" });
-      const ns2 = makeNamespace({ name: "var_b" });
+      const ns1 = makeNamespace({ name: variableName("var_a") });
+      const ns2 = makeNamespace({ name: variableName("var_b") });
       actions.setNamespaces({ namespaces: [ns1, ns2] });
 
       actions.filterFromVariables([]);
@@ -326,7 +336,7 @@ describe("storage state", () => {
     });
 
     it("should not affect entriesByPath", () => {
-      const ns = makeNamespace({ name: "ns" });
+      const ns = makeNamespace({ name: variableName("ns") });
       actions.setNamespaces({ namespaces: [ns] });
 
       const entry = makeEntry({ path: "file.txt" });

package/src/core/storage/state.ts

@@ -71,7 +71,7 @@ const {
     const names = new Set(variableNames);
     // Filter out namespaces whose backing variable is no longer in scope
     const namespaces = state.namespaces.filter((ns) => {
-      return names.has(ns.name as VariableName);
+      return names.has(ns.name);
     });
     return { ...state, namespaces };
   },

package/src/core/variables/__tests__/state.test.ts

@@ -1,19 +1,19 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 import { beforeEach, describe, expect, it } from "vitest";
-import type { CellId } from "@/core/cells/ids";
+import { cellId, variableName } from "@/__tests__/branded";
 import { exportedForTesting } from "../state";
-import type { VariableName, Variables } from "../types";
+import type { Variables } from "../types";
 
 const { initialState, reducer, createActions } = exportedForTesting;
 
 const CellIds = {
-  a: "a" as CellId,
-  b: "b" as CellId,
+  a: cellId("a"),
+  b: cellId("b"),
 };
 
 const Names = {
-  x: "x" as VariableName,
-  y: "y" as VariableName,
+  x: variableName("x"),
+  y: variableName("y"),
 };
 
 describe("cell reducer", () => {

package/src/core/variables/types.ts

@@ -1,9 +1,9 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import type { TypedString } from "../../utils/typed";
+import type { components } from "@marimo-team/marimo-api";
 import type { CellId } from "../cells/ids";
 
-export type VariableName = TypedString<"VariableName">;
+export type VariableName = components["schemas"]["VariableName"];
 
 export interface Variable {
   name: VariableName;

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

@@ -2,9 +2,9 @@
 
 import { createRef } from "react";
 import { describe, expect, it } from "vitest";
+import { cellId } from "@/__tests__/branded";
 import type { NotebookState } from "@/core/cells/cells";
 import { initialNotebookState, notebookAtom } from "@/core/cells/cells";
-import type { CellId } from "@/core/cells/ids";
 import { createCell, createCellRuntimeState } from "@/core/cells/types";
 import type { OutputMessage } from "@/core/kernel/messages";
 import { store } from "@/core/state/jotai";
@@ -17,17 +17,17 @@ describe("hasAnyOutputAtom", () => {
   ): NotebookState => ({
     ...initialNotebookState(),
     cellIds: new MultiColumn([
-      CollapsibleTree.from(outputs.map((_, i) => `${i}` as CellId)),
+      CollapsibleTree.from(outputs.map((_, i) => cellId(`${i}`))),
     ]),
     cellData: Object.fromEntries(
       outputs.map((_, i) => [
-        `${i}` as CellId,
-        createCell({ id: `${i}` as CellId }),
+        cellId(`${i}`),
+        createCell({ id: cellId(`${i}`) }),
       ]),
     ),
     cellRuntime: Object.fromEntries(
       outputs.map((output, i) => [
-        `${i}` as CellId,
+        `${i}`,
         createCellRuntimeState({
           output,
           status: "queued",
@@ -36,7 +36,7 @@ describe("hasAnyOutputAtom", () => {
       ]),
     ),
     cellHandles: Object.fromEntries(
-      outputs.map((_, i) => [`${i}` as CellId, createRef()]),
+      outputs.map((_, i) => [cellId(`${i}`), createRef()]),
     ),
   });
 
@@ -90,8 +90,8 @@ describe("hasAnyOutputAtom", () => {
 
   it("should return true when all outputs are idle", () => {
     const notebookState = createNotebookState([null, null]);
-    const cellId0 = "0" as CellId;
-    const cellId1 = "1" as CellId;
+    const cellId0 = cellId("0");
+    const cellId1 = cellId("1");
     // Some idle cell, so returns false
     store.set(notebookAtom, {
       ...notebookState,

package/src/core/websocket/useMarimoKernelConnection.tsx

@@ -24,7 +24,7 @@ import { Logger } from "@/utils/Logger";
 import { reloadSafe } from "@/utils/reload-safe";
 import { useAlertActions } from "../alerts/state";
 import { cacheInfoAtom } from "../cache/requests";
-import { type CellId, SCRATCH_CELL_ID, type UIElementId } from "../cells/ids";
+import { SCRATCH_CELL_ID } from "../cells/ids";
 import { useRunsActions } from "../cells/runs";
 import { focusAndScrollCellOutputIntoView } from "../cells/scrollCellIntoView";
 import type { CellData } from "../cells/types";
@@ -153,7 +153,7 @@ export function useMarimoKernelConnection(opts: {
         if (uiElement) {
           const buffers = safeExtractSetUIElementMessageBuffers(msg.data);
           UI_ELEMENT_REGISTRY.broadcastMessage(
-            uiElement as UIElementId,
+            uiElement,
             msg.data.message,
             buffers,
           );
@@ -173,14 +173,11 @@ export function useMarimoKernelConnection(opts: {
         AUTOCOMPLETER.resolve(msg.data.completion_id as RequestId, msg.data);
         return;
       case "function-call-result":
-        FUNCTIONS_REGISTRY.resolve(
-          msg.data.function_call_id as RequestId,
-          msg.data,
-        );
+        FUNCTIONS_REGISTRY.resolve(msg.data.function_call_id, msg.data);
         return;
       case "cell-op": {
         handleCellNotificationeration(msg.data, handleCellMessage);
-        const cellData = getNotebook().cellData[msg.data.cell_id as CellId];
+        const cellData = getNotebook().cellData[msg.data.cell_id];
         if (!cellData) {
           return;
         }
@@ -195,8 +192,8 @@ export function useMarimoKernelConnection(opts: {
         setVariables(
           msg.data.variables.map((v) => ({
             name: v.name as VariableName,
-            declaredBy: v.declared_by as CellId[],
-            usedBy: v.used_by as CellId[],
+            declaredBy: v.declared_by,
+            usedBy: v.used_by,
           })),
         );
         filterDatasetsFromVariables(
@@ -271,16 +268,16 @@ export function useMarimoKernelConnection(opts: {
         addColumnPreview(msg.data);
         return;
       case "sql-table-preview":
-        PreviewSQLTable.resolve(msg.data.request_id as RequestId, msg.data);
+        PreviewSQLTable.resolve(msg.data.request_id, msg.data);
         return;
       case "sql-table-list-preview":
-        PreviewSQLTableList.resolve(msg.data.request_id as RequestId, msg.data);
+        PreviewSQLTableList.resolve(msg.data.request_id, msg.data);
         return;
       case "validate-sql-result":
         ValidateSQL.resolve(msg.data.request_id as RequestId, msg.data);
         return;
       case "secret-keys-result":
-        SECRETS_REGISTRY.resolve(msg.data.request_id as RequestId, msg.data);
+        SECRETS_REGISTRY.resolve(msg.data.request_id, msg.data);
         return;
       case "cache-info":
         setCacheInfo(msg.data);
@@ -310,19 +307,19 @@ export function useMarimoKernelConnection(opts: {
         return;
 
       case "focus-cell":
-        focusAndScrollCellOutputIntoView(msg.data.cell_id as CellId);
+        focusAndScrollCellOutputIntoView(msg.data.cell_id);
         return;
       case "update-cell-codes":
         setCellCodes({
           codes: msg.data.codes,
-          ids: msg.data.cell_ids as CellId[],
+          ids: msg.data.cell_ids,
           codeIsStale: msg.data.code_is_stale,
           names: msg.data.names,
           configs: msg.data.configs,
         });
         return;
       case "update-cell-ids":
-        setCellIds({ cellIds: msg.data.cell_ids as CellId[] });
+        setCellIds({ cellIds: msg.data.cell_ids });
         return;
       default:
         logNever(msg.data);

package/src/css/md-tooltip.css

@@ -3,50 +3,15 @@
 /*
   This allows you to create a basic tooltip using the data-tooltip attribute
   e.g. <span data-tooltip="Hello, World!">Hover me</span>
+
+  The tooltip content is rendered via the React Tooltip component (Radix UI portal),
+  which prevents clipping inside containers with overflow:hidden.
+  See: RenderHTML.tsx -> wrapTooltipTargets
 */
 
 .markdown {
   [data-tooltip] {
-    position: relative;
     cursor: pointer;
     text-decoration: underline dotted;
   }
-
-  [data-tooltip]::before,
-  [data-tooltip]::after {
-    visibility: hidden;
-    opacity: 0;
-    pointer-events: none;
-    transition: all 0.2s ease;
-    position: absolute;
-    z-index: 1000;
-    left: 50%;
-    transform: translateX(-50%);
-  }
-
-  [data-tooltip]::before {
-    content: attr(data-tooltip);
-    bottom: calc(100% + 10px);
-    padding: 5px 10px;
-    width: max-content;
-    max-width: 300px;
-    border-radius: 6px;
-    background-color: ;
-    text-align: center;
-    line-height: 1.4;
-    white-space: pre-wrap;
-
-    @apply bg-background text-foreground shadow-md border text-base;
-  }
-
-  [data-tooltip]:hover::before,
-  [data-tooltip]:hover::after {
-    visibility: visible;
-    opacity: 1;
-  }
-
-  [data-tooltip]:hover::before {
-    /* stylelint-disable-next-line unit-allowed-list */
-    transform: translateX(-50%) translateY(10px);
-  }
 }

package/src/css/md.css

@@ -374,6 +374,13 @@ button .prose.prose {
   @apply p-4 pt-0;
 }
 
+/* Restore proper list indentation inside details blocks.
+   The p-4 above overrides prose's padding-inline-start for bullet space.
+   This ensures bullets render correctly with list-style-position: outside. */
+.markdown details > :is(ul, ol) {
+  padding-inline-start: 2.5rem;
+}
+
 .markdown .codehilite {
   background-color: var(--slate-2);
   border-radius: 4px;

package/src/plugins/core/RenderHTML.tsx

@@ -14,6 +14,7 @@ import React, {
 } from "react";
 import { CopyClipboardIcon } from "@/components/icons/copy-icon";
 import { QueryParamPreservingLink } from "@/components/ui/query-param-preserving-link";
+import { Tooltip } from "@/components/ui/tooltip";
 import { DocHoverTarget } from "@/core/documentation/DocHoverTarget";
 import { sanitizeHtml, useSanitizeHtml } from "./sanitize";
 
@@ -160,6 +161,21 @@ const wrapDocHoverTargets: TransformFn = (
   }
 };
 
+// Wrap elements with data-tooltip attribute in a Tooltip component.
+// This renders the tooltip in a portal (top layer), fixing clipping inside
+// containers with overflow:hidden (e.g. grid cells).
+const wrapTooltipTargets: TransformFn = (
+  reactNode: ReactNode,
+  domNode: DOMNode,
+): JSX.Element | undefined => {
+  if (domNode instanceof Element && domNode.attribs?.["data-tooltip"]) {
+    const tooltipContent = domNode.attribs["data-tooltip"];
+    return (
+      <Tooltip content={tooltipContent}>{reactNode as JSX.Element}</Tooltip>
+    );
+  }
+};
+
 const CopyableCode = ({ children }: { children: ReactNode }) => {
   const ref = useRef<HTMLDivElement>(null);
   return (
@@ -239,6 +255,7 @@ function parseHtml({
     addCopyButtonToCodehilite,
     preserveQueryParamsInAnchorLinks,
     wrapDocHoverTargets,
+    wrapTooltipTargets,
     removeWrappingBodyTags,
     removeWrappingHtmlTags,
   ];

package/src/plugins/core/__test__/RenderHTML.test.ts

@@ -197,6 +197,51 @@ describe("parseHtml", () => {
   });
 });
 
+describe("wrapTooltipTargets", () => {
+  test("data-tooltip wraps element in Tooltip component", () => {
+    const html = '<span data-tooltip="Hello world">Hover me</span>';
+    expect(parseHtml({ html })).toMatchInlineSnapshot(`
+      <Tooltip
+        content="Hello world"
+      >
+        <span
+          data-tooltip="Hello world"
+        >
+          Hover me
+        </span>
+      </Tooltip>
+    `);
+  });
+
+  test("element without data-tooltip is not wrapped", () => {
+    const html = "<span>No tooltip</span>";
+    expect(parseHtml({ html })).toMatchInlineSnapshot(`
+      <span>
+        No tooltip
+      </span>
+    `);
+  });
+
+  test("data-tooltip on nested element wraps only that element", () => {
+    const html = '<p>Outer <span data-tooltip="tip">inner</span> text</p>';
+    expect(parseHtml({ html })).toMatchInlineSnapshot(`
+      <p>
+        Outer 
+        <Tooltip
+          content="tip"
+        >
+          <span
+            data-tooltip="tip"
+          >
+            inner
+          </span>
+        </Tooltip>
+         text
+      </p>
+    `);
+  });
+});
+
 describe("parseHtml with < nad >", () => {
   const html =
     'thread <unnamed> panicked at "assertion failed: `(left == right)`"';

package/src/plugins/core/sanitize-html.ts

@@ -2,28 +2,35 @@
 import DOMPurify, { type Config } from "dompurify";
 
 // preserve target=_blank https://github.com/cure53/DOMPurify/issues/317#issuecomment-912474068
-const TEMPORARY_ATTRIBUTE = "data-temp-href-target";
-DOMPurify.addHook("beforeSanitizeAttributes", (node) => {
-  if (node.tagName === "A") {
-    if (!node.hasAttribute("target")) {
-      node.setAttribute("target", "_self");
-    }
+// Guard for non-browser environments (e.g. Node.js in the marimo-lsp extension)
+// where `document` is not available.
+if (typeof document !== "undefined") {
+  const TEMPORARY_ATTRIBUTE = "data-temp-href-target";
+  DOMPurify.addHook("beforeSanitizeAttributes", (node) => {
+    if (node.tagName === "A") {
+      if (!node.hasAttribute("target")) {
+        node.setAttribute("target", "_self");
+      }
 
-    if (node.hasAttribute("target")) {
-      node.setAttribute(TEMPORARY_ATTRIBUTE, node.getAttribute("target") || "");
+      if (node.hasAttribute("target")) {
+        node.setAttribute(
+          TEMPORARY_ATTRIBUTE,
+          node.getAttribute("target") || "",
+        );
+      }
     }
-  }
-});
+  });
 
-DOMPurify.addHook("afterSanitizeAttributes", (node) => {
-  if (node.tagName === "A" && node.hasAttribute(TEMPORARY_ATTRIBUTE)) {
-    node.setAttribute("target", node.getAttribute(TEMPORARY_ATTRIBUTE) || "");
-    node.removeAttribute(TEMPORARY_ATTRIBUTE);
-    if (node.getAttribute("target") === "_blank") {
-      node.setAttribute("rel", "noopener noreferrer");
+  DOMPurify.addHook("afterSanitizeAttributes", (node) => {
+    if (node.tagName === "A" && node.hasAttribute(TEMPORARY_ATTRIBUTE)) {
+      node.setAttribute("target", node.getAttribute(TEMPORARY_ATTRIBUTE) || "");
+      node.removeAttribute(TEMPORARY_ATTRIBUTE);
+      if (node.getAttribute("target") === "_blank") {
+        node.setAttribute("rel", "noopener noreferrer");
+      }
     }
-  }
-});
+  });
+}
 
 /**
  * This removes script tags, form tags, iframe tags, and other potentially dangerous tags

package/src/plugins/impl/DataTablePlugin.tsx

@@ -53,6 +53,7 @@ import {
 } from "@/components/data-table/types";
 import {
   getPageIndexForRow,
+  loadTableAndRawData,
   loadTableData,
 } from "@/components/data-table/utils";
 import { ErrorBoundary } from "@/components/editor/boundary/ErrorBoundary";
@@ -174,6 +175,7 @@ const valueCounts: z.ZodType<ValueCounts> = z.array(
 interface Data<T> {
   label: string | null;
   data: TableData<T>;
+  rawData?: TableData<T> | null;
   totalRows: number | TooManyRows;
   pagination: boolean;
   pageSize: number;
@@ -221,6 +223,7 @@ type DataTableFunctions = {
     total_rows: number | TooManyRows;
     cell_styles?: CellStyleState | null;
     cell_hover_texts?: Record<string, Record<string, string | null>> | null;
+    raw_data?: TableData<T> | null;
   }>;
   get_data_url?: GetDataUrl;
   get_row_ids?: GetRowIds;
@@ -243,6 +246,7 @@ export const DataTablePlugin = createPlugin<S>("marimo-table")
       ]),
       label: z.string().nullable(),
       data: z.union([z.string(), z.array(z.object({}).passthrough())]),
+      rawData: z.union([z.string(), z.array(z.looseObject({}))]).nullish(),
       totalRows: z.union([z.number(), z.literal(TOO_MANY_ROWS)]),
       pagination: z.boolean().default(false),
       pageSize: z.number().default(10),
@@ -327,6 +331,7 @@ export const DataTablePlugin = createPlugin<S>("marimo-table")
             )
             .nullable(),
           cell_hover_texts: cellHoverTextSchema.nullable(),
+          raw_data: z.union([z.string(), z.array(z.looseObject({}))]).nullish(),
         }),
       ),
     get_row_ids: rpc.input(z.object({}).passthrough()).output(
@@ -529,17 +534,23 @@ export const LoadingDataTableComponent = memo(
     // Data loading
     const { data, error, isPending, isFetching } = useAsyncData<{
       rows: T[];
+      rawRows?: T[];
       totalRows: number | TooManyRows;
       cellStyles: CellStyleState | undefined | null;
       cellHoverTexts?: Record<string, Record<string, string | null>> | null;
     }>(async () => {
       // If there is no data, return an empty array
       if (props.totalRows === 0) {
-        return { rows: Arrays.EMPTY, totalRows: 0, cellStyles: {} };
+        return {
+          rows: Arrays.EMPTY,
+          totalRows: 0,
+          cellStyles: {},
+        };
       }
 
       // Table data is a url string or an array of objects
       let tableData = props.data;
+      let rawTableData: TableData<T> | undefined | null = props.rawData;
       let totalRows = props.totalRows;
       let cellStyles = props.cellStyles;
       let cellHoverTexts = props.cellHoverTexts;
@@ -587,13 +598,19 @@ export const LoadingDataTableComponent = memo(
       } else {
         const searchResults = await searchResultsPromise;
         tableData = searchResults.data;
+        rawTableData = searchResults.raw_data;
         totalRows = searchResults.total_rows;
         cellStyles = searchResults.cell_styles || {};
         cellHoverTexts = searchResults.cell_hover_texts || {};
       }
-      tableData = await loadTableData(tableData);
+      const [data, rawData] = await loadTableAndRawData(
+        tableData,
+        rawTableData,
+      );
+      tableData = data;
       return {
         rows: tableData,
+        rawRows: rawData,
         totalRows: totalRows,
         cellStyles,
         cellHoverTexts,
@@ -715,6 +732,7 @@ export const LoadingDataTableComponent = memo(
       <DataTableComponent
         {...props}
         data={data?.rows ?? Arrays.EMPTY}
+        rawData={data?.rawRows}
         columnSummaries={columnSummaries}
         sorting={sorting}
         setSorting={setSorting}
@@ -766,6 +784,7 @@ LoadingDataTableComponent.displayName = "LoadingDataTableComponent";
 const DataTableComponent = ({
   label,
   data,
+  rawData,
   totalRows,
   maxColumns,
   pagination,
@@ -814,6 +833,7 @@ const DataTableComponent = ({
 }: DataTableProps<unknown> &
   DataTableSearchProps & {
     data: unknown[];
+    rawData?: unknown[];
     columnSummaries?: ColumnSummaries;
     getRow: (rowIdx: number) => Promise<GetRowResult>;
   }): JSX.Element => {
@@ -1015,6 +1035,7 @@ const DataTableComponent = ({
         <Labeled label={label} align="top" fullWidth={true}>
           <DataTable
             data={data}
+            rawData={rawData}
             columns={columns}
             className={className}
             maxHeight={maxHeight}

package/src/plugins/impl/SliderPlugin.tsx

@@ -152,9 +152,7 @@ const SliderComponent = ({
                 nextValue = Number(start);
               }
               setInternalValue(nextValue);
-              if (!debounce) {
-                setValue(nextValue);
-              }
+              setValue(nextValue);
             }}
             minValue={start}
             maxValue={stop}