diff --git a/ui/dashboard/src/components/dashboards/Card/index.tsx b/ui/dashboard/src/components/dashboards/Card/index.tsx
index 76a2d1bca..27ebf04da 100644
--- a/ui/dashboard/src/components/dashboards/Card/index.tsx
+++ b/ui/dashboard/src/components/dashboards/Card/index.tsx
@@ -167,6 +167,7 @@ const Label = ({ value }) => {
 const Card = (props: CardProps) => {
   const {
     components: { ExternalLink },
+    dataMode,
   } = useDashboard();
   const state = useCardState(props);
   const [renderError, setRenderError] = useState<string | null>(null);
@@ -184,14 +185,17 @@ const Card = (props: CardProps) => {
   }, [setZoomIconClassName, textClasses]);
 
   useEffect(() => {
-    if ((state.loading || !state.href) && (renderError || renderedHref)) {
+    if (
+      dataMode === "snapshot" ||
+      ((state.loading || !state.href) && (renderError || renderedHref))
+    ) {
       setRenderError(null);
       setRenderedHref(null);
     }
-  }, [state.loading, state.href, renderError, renderedHref]);
+  }, [dataMode, state.loading, state.href, renderError, renderedHref]);
 
   useDeepCompareEffect(() => {
-    if (state.loading || !state.href) {
+    if (dataMode === "snapshot" || state.loading || !state.href) {
       return;
     }
     // const { label, loading, value, ...rest } = state;
@@ -226,7 +230,7 @@ const Card = (props: CardProps) => {
       }
     };
     doRender();
-  }, [state, props.data]);
+  }, [dataMode, state, props.data]);
 
   const card = (
     <div
@@ -299,7 +303,7 @@ const Card = (props: CardProps) => {
     </div>
   );
 
-  if (renderedHref) {
+  if (dataMode === "live" && renderedHref) {
     return (
       <ExternalLink className="" to={renderedHref}>
         {card}
diff --git a/ui/dashboard/src/components/dashboards/Table/index.tsx b/ui/dashboard/src/components/dashboards/Table/index.tsx
index faaa98aac..43fdf1a9b 100644
--- a/ui/dashboard/src/components/dashboards/Table/index.tsx
+++ b/ui/dashboard/src/components/dashboards/Table/index.tsx
@@ -366,6 +366,7 @@ const TableView = ({
   hasTopBorder = false,
 }) => {
   const {
+    dataMode,
     themeContext: { theme },
   } = useDashboard();
   const [rowTemplateData, setRowTemplateData] = useState<RowRenderResult[]>([]);
@@ -395,13 +396,13 @@ const TableView = ({
       setRowTemplateData(renderedResults);
     };
 
-    if (columns.length === 0 || rows.length === 0) {
+    if (dataMode === "snapshot" || columns.length === 0 || rows.length === 0) {
       setRowTemplateData([]);
       return;
     }
 
     doRender();
-  }, [columns, rows]);
+  }, [dataMode, columns, rows]);
 
   return (
     <>
@@ -519,6 +520,7 @@ const TableViewWrapper = (props: TableProps) => {
 };
 
 const LineView = (props: TableProps) => {
+  const { dataMode } = useDashboard();
   const [columns, setColumns] = useState<TableColumnInfo[]>([]);
   const [rows, setRows] = useState<LeafNodeDataRow[]>([]);
   const [rowTemplateData, setRowTemplateData] = useState<RowRenderResult[]>([]);
@@ -574,13 +576,13 @@ const LineView = (props: TableProps) => {
       setRowTemplateData(renderedResults);
     };
 
-    if (columns.length === 0 || rows.length === 0) {
+    if (dataMode === "snapshot" || columns.length === 0 || rows.length === 0) {
       setRowTemplateData([]);
       return;
     }
 
     doRender();
-  }, [columns, rows]);
+  }, [dataMode, columns, rows]);
 
   if (columns.length === 0 || rows.length === 0) {
     return null;