+
-
- {currentNotebook.cells.map((cell, index) => (
- updateCellSql(cell.id, sql)}
- onExecute={() => executeCell(cell.id)}
- onDelete={() => deleteCell(cell.id)}
- canDelete={currentNotebook.cells.length > 1}
- isActive={cell.id === activeCellId}
- onSelect={() => setActiveCellId(cell.id)}
- onToggleCollapse={() => toggleCellSection(cell.id, 'collapsed')}
- onToggleEditor={() => toggleCellSection(cell.id, 'hideEditor')}
- onToggleResult={() => toggleCellSection(cell.id, 'hideResult')}
- onMoveUp={() => moveCellPosition(cell.id, 'up')}
- onMoveDown={() => moveCellPosition(cell.id, 'down')}
- dragState={{
- isDragging: draggingCellId === cell.id,
- isDragOver: dragOverCellId === cell.id,
- }}
- onDragStart={() => handleDragStart(cell.id)}
- onDragEnd={handleDragEnd}
- onDragOver={() => handleDragOverCell(cell.id)}
- onDrop={() => handleDropOnCell(cell.id)}
- />
- ))}
-
- {
- event.preventDefault();
- if (draggingCellId) {
- setDragOverTail(true);
- }
- }}
- onDragLeave={() => setDragOverTail(false)}
- onDrop={(event) => {
- event.preventDefault();
- handleDropAtEnd();
- }}
- className={`w-full rounded-2xl border-2 border-dashed py-4 text-sm font-semibold text-gray-500 transition ${
- dragOverTail
- ? 'border-indigo-300 text-indigo-600 bg-indigo-50/30'
- : 'border-gray-300 hover:border-indigo-300 hover:text-indigo-600'
- }`}
- >
- + Add Cell
-
-
-
- ) : (
+
+ {!fullscreenCellId && renderAddControl('above', 0)}
+ {currentNotebook.cells.map((cell, index) => {
+ if (fullscreenCellId && cell.id !== fullscreenCellId) {
+ return null;
+ }
+ return (
+
+ updateCellSql(cell.id, sql)}
+ onExecute={() => executeCell(cell.id)}
+ onDelete={() => deleteCell(cell.id)}
+ canDelete={currentNotebook.cells.length > 1}
+ isActive={cell.id === activeCellId || fullscreenCellId === cell.id}
+ onSelect={() => setActiveCellId(cell.id)}
+ onToggleCollapse={() => toggleCellSection(cell.id, 'collapsed')}
+ onToggleEditor={() => toggleCellSection(cell.id, 'hideEditor')}
+ onToggleResult={() => toggleCellSection(cell.id, 'hideResult')}
+ onToggleFullscreen={() =>
+ setFullscreenCellId(prev => (prev === cell.id ? null : cell.id))
+ }
+ isFullscreen={fullscreenCellId === cell.id}
+ onMoveUp={() => moveCellPosition(cell.id, 'up')}
+ onMoveDown={() => moveCellPosition(cell.id, 'down')}
+ dragState={{
+ isDragging: draggingCellId === cell.id,
+ isDragOver: dragOverState.id === cell.id,
+ dragOverPosition:
+ dragOverState.id === cell.id
+ ? dragOverState.placeAfter
+ ? 'after'
+ : 'before'
+ : undefined,
+ }}
+ onDragStart={() => handleDragStart(cell.id)}
+ onDragEnd={handleDragEnd}
+ onDragOver={(placeAfter) => handleDragOverCell(cell.id, placeAfter)}
+ onDrop={(placeAfter) => handleDropOnCell(cell.id, placeAfter)}
+ onRunFromHere={() => { void runCellsFrom(index); }}
+ onRunToHere={() => { void runCellsTo(index); }}
+ />
+ {!fullscreenCellId && renderAddControl(
+ index === currentNotebook.cells.length - 1 ? 'below' : 'between',
+ index + 1
+ )}
+
+ );
+ })}
+ {!fullscreenCellId && renderAddControl('below', currentNotebook.cells.length)}
+
+
+ ) : (
No notebooks yet
@@ -680,13 +765,18 @@ const Notebooks: React.FC = () => {
)}
-
-
-
- {renderResultPanel()}
-
+
+ {fullscreenCellId && (
+
+
+ Exit fullscreen โ
+
+
+ )}
);
};
diff --git a/frontend/src/PerfQuery.tsx b/frontend/src/PerfQuery.tsx
index 0cb98bd10..f6ff532f6 100644
--- a/frontend/src/PerfQuery.tsx
+++ b/frontend/src/PerfQuery.tsx
@@ -1,8 +1,8 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
import { useRouter } from 'next/router';
import CodeMirror from '@uiw/react-codemirror';
import { sql } from '@codemirror/lang-sql';
-import { EditorView } from '@codemirror/view';
+import { EditorView, keymap, lineNumbers } from '@codemirror/view';
import { autocompletion } from '@codemirror/autocomplete';
import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
import { xcodeLight, xcodeLightPatch } from './components/CodeMirrorTheme';
@@ -30,9 +30,16 @@ interface QueryResponse {
queryId?: string;
}
-const DEFAULT_PERF_SQL = `SELECT * FROM system.tables LIMIT 10;`;
+const DEFAULT_PERF_SQL = `select number % 3 a, number % 4 b, number % 5 c from numbers(100000000) group by all limit 3;`;
const PerfQuery: React.FC = () => {
+ const isExecutionShortcut = (event: KeyboardEvent) => {
+ if (!(event.metaKey || event.ctrlKey)) {
+ return false;
+ }
+ return event.key === 'Enter' || event.key === 'NumpadEnter' || event.key === 'Return';
+ };
+
const router = useRouter();
// Get query ID from path parameters (for catch-all routes like [slug])
const pathQueryId = router.query.slug && Array.isArray(router.query.slug)
@@ -188,21 +195,24 @@ const PerfQuery: React.FC = () => {
}, [router.isReady, queryId, loadSharedPerfQuery]);
// Add global keyboard event listener for Cmd+Enter
- useEffect(() => {
- const handleKeyDown = (e: KeyboardEvent) => {
- if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
- e.preventDefault();
+ const runKeymap = useMemo(() => keymap.of([
+ {
+ key: 'Mod-Enter',
+ run: () => {
executePerfQuery();
- }
- };
-
- window.addEventListener('keydown', handleKeyDown);
-
- // Cleanup event listener on component unmount
- return () => {
- window.removeEventListener('keydown', handleKeyDown);
- };
- }, [executePerfQuery]);
+ return true;
+ },
+ preventDefault: true,
+ },
+ {
+ key: 'Mod-NumpadEnter',
+ run: () => {
+ executePerfQuery();
+ return true;
+ },
+ preventDefault: true,
+ },
+ ]), [executePerfQuery]);
// Add resizeIframe function for HTML content
useEffect(() => {
@@ -303,18 +313,14 @@ const PerfQuery: React.FC = () => {
extensions={[
xcodeLightPatch,
EditorView.lineWrapping,
+ lineNumbers(),
autocompletion({
icons: false,
}),
sql(),
+ runKeymap,
]}
- basicSetup={{
- lineNumbers: true,
- foldGutter: false,
- indentOnInput: false,
- autocompletion: true,
- highlightActiveLine: false,
- }}
+ basicSetup={false}
onChange={(value) => setQuery(value)}
editable={!loading}
style={{
diff --git a/frontend/src/SQLQuery.tsx b/frontend/src/SQLQuery.tsx
index 796db8899..df4f25ce2 100644
--- a/frontend/src/SQLQuery.tsx
+++ b/frontend/src/SQLQuery.tsx
@@ -1,8 +1,8 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
import { useRouter } from 'next/router';
import CodeMirror from '@uiw/react-codemirror';
import { sql } from '@codemirror/lang-sql';
-import { EditorView } from '@codemirror/view';
+import { EditorView, keymap, lineNumbers } from '@codemirror/view';
import { autocompletion } from '@codemirror/autocomplete';
import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
import { xcodeLight, xcodeLightPatch } from './components/CodeMirrorTheme';
@@ -16,6 +16,13 @@ interface QueryResult {
}
const SQLQuery: React.FC = () => {
+ const isExecutionShortcut = (event: KeyboardEvent) => {
+ if (!(event.metaKey || event.ctrlKey)) {
+ return false;
+ }
+ return event.key === 'Enter' || event.key === 'NumpadEnter' || event.key === 'Return';
+ };
+
const router = useRouter();
// Get query ID from path parameters (for catch-all routes like [slug])
const pathQueryId = router.query.slug && Array.isArray(router.query.slug)
@@ -122,21 +129,24 @@ SELECT * FROM students;`);
}, [query, router]);
// Add global keyboard event listener for Cmd+Enter
- useEffect(() => {
- const handleKeyDown = (e: KeyboardEvent) => {
- if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
- e.preventDefault();
+ const runKeymap = useMemo(() => keymap.of([
+ {
+ key: 'Mod-Enter',
+ run: () => {
executeQuery();
- }
- };
-
- window.addEventListener('keydown', handleKeyDown);
-
- // Cleanup event listener on component unmount
- return () => {
- window.removeEventListener('keydown', handleKeyDown);
- };
- }, [executeQuery]);
+ return true;
+ },
+ preventDefault: true,
+ },
+ {
+ key: 'Ctrl-Enter',
+ run: () => {
+ executeQuery();
+ return true;
+ },
+ preventDefault: true,
+ },
+ ]), [executeQuery]);
const renderTable = (result: QueryResult, index: number) => {
// Handle empty data
@@ -205,11 +215,7 @@ SELECT * FROM students;`);
return (
-
-
- SQL Query
- Press โโ to run
-
+
Press โโ to run
setQuery(value)}
editable={!loading}
style={{
diff --git a/frontend/src/components/NotebookCell.tsx b/frontend/src/components/NotebookCell.tsx
index f80b40cba..6aa26ae79 100644
--- a/frontend/src/components/NotebookCell.tsx
+++ b/frontend/src/components/NotebookCell.tsx
@@ -1,7 +1,7 @@
import React, { useEffect, useMemo, useRef, useState } from 'react';
import CodeMirror from '@uiw/react-codemirror';
import { sql } from '@codemirror/lang-sql';
-import { EditorView } from '@codemirror/view';
+import { EditorView, keymap, lineNumbers } from '@codemirror/view';
import { autocompletion } from '@codemirror/autocomplete';
import { xcodeLight, xcodeLightPatch } from './CodeMirrorTheme';
import { NotebookCell, QueryResult } from '../types/notebook';
@@ -29,16 +29,21 @@ interface NotebookCellProps {
onToggleCollapse: () => void;
onToggleEditor: () => void;
onToggleResult: () => void;
+ onToggleFullscreen: () => void;
onMoveUp: () => void;
onMoveDown: () => void;
+ isFullscreen?: boolean;
dragState: {
isDragging: boolean;
isDragOver: boolean;
+ dragOverPosition?: 'before' | 'after';
};
onDragStart: () => void;
onDragEnd: () => void;
- onDragOver: () => void;
- onDrop: () => void;
+ onDragOver: (placeAfter?: boolean) => void;
+ onDrop: (placeAfter?: boolean) => void;
+ onRunFromHere?: () => void;
+ onRunToHere?: () => void;
}
const NotebookCellComponent: React.FC = ({
@@ -53,16 +58,29 @@ const NotebookCellComponent: React.FC = ({
onToggleCollapse,
onToggleEditor,
onToggleResult,
+ onToggleFullscreen,
onMoveUp,
onMoveDown,
+ isFullscreen = false,
dragState,
onDragStart,
onDragEnd,
onDragOver,
onDrop,
+ onRunFromHere = () => {},
+ onRunToHere = () => {},
}) => {
+ const cardRef = useRef(null);
+ const isExecutionShortcut = (event: KeyboardEvent) => {
+ if (!(event.metaKey || event.ctrlKey)) {
+ return false;
+ }
+ return event.key === 'Enter' || event.key === 'NumpadEnter' || event.key === 'Return';
+ };
const [menuOpen, setMenuOpen] = useState(false);
const menuRef = useRef(null);
+ const [runMenuOpen, setRunMenuOpen] = useState(false);
+ const runMenuRef = useRef(null);
useEffect(() => {
if (!menuOpen) return;
@@ -75,6 +93,17 @@ const NotebookCellComponent: React.FC = ({
return () => document.removeEventListener('mousedown', handleClick);
}, [menuOpen]);
+ useEffect(() => {
+ if (!runMenuOpen) return;
+ const handleClick = (event: MouseEvent) => {
+ if (runMenuRef.current && !runMenuRef.current.contains(event.target as Node)) {
+ setRunMenuOpen(false);
+ }
+ };
+ document.addEventListener('mousedown', handleClick);
+ return () => document.removeEventListener('mousedown', handleClick);
+ }, [runMenuOpen]);
+
const showEditor = !cell.hideEditor && !cell.collapsed;
const showResult = !cell.hideResult && !cell.collapsed;
@@ -89,15 +118,15 @@ const NotebookCellComponent: React.FC = ({
const renderTable = (result: QueryResult) => {
if (!result.data || result.data.length === 0) {
return (
-
+
No data returned
);
}
return (
-
-
+
+
@@ -128,288 +157,403 @@ const NotebookCellComponent: React.FC = ({
);
};
- const renderTypeInfo = (result: QueryResult) => {
- if (!result.types || result.types.length === 0) {
- return (
-
- No type information available
-
- );
- }
-
- return (
-
-
- Column types
-
-
- {result.columns.map((column, idx) => (
-
- {column}
- {result.types[idx]}
-
- ))}
-
-
-
-
{
- event.dataTransfer.effectAllowed = 'move';
- event.dataTransfer.setData('text/plain', cell.id);
- onDragStart();
- }}
- onDragEnd={(event) => {
- event.preventDefault();
- onDragEnd();
- }}
- >
-
-
- {
- e.stopPropagation();
- onToggleCollapse();
- }}
- className={`rounded-md border px-1.5 py-1 text-xs ${cell.collapsed ? 'border-indigo-300 text-indigo-500' : 'border-gray-200 hover:text-gray-600'}`}
- title={cell.collapsed ? 'Expand cell' : 'Collapse cell'}
- >
- {cell.collapsed ?
- {
- e.stopPropagation();
- onToggleEditor();
- }}
- className={`rounded-md border px-1.5 py-1 text-xs ${cell.hideEditor ? 'border-indigo-300 text-indigo-500' : 'border-gray-200 hover:text-gray-600'}`}
- title={cell.hideEditor ? 'Show SQL editor' : 'Collapse SQL editor'}
- >
-
- {
- e.stopPropagation();
- onToggleResult();
- }}
- className={`rounded-md border px-1.5 py-1 text-xs ${cell.hideResult ? 'border-indigo-300 text-indigo-500' : 'border-gray-200 hover:text-gray-600'}`}
- title={cell.hideResult ? 'Show results' : 'Collapse results'}
- >
-
-
-
+
+ {showTopIndicator && (
+
+ )}
-
-
-
-
{
- e.stopPropagation();
- onExecute();
- }}
- disabled={cell.loading || !cell.sql.trim()}
- className={`inline-flex items-center rounded-full border px-3 py-1 text-sm font-semibold ${
- cell.loading || !cell.sql.trim()
- ? 'border-gray-200 text-gray-400 cursor-not-allowed'
- : 'border-indigo-200 text-indigo-600 hover:bg-indigo-50'
+
+ {showSideControls && (
+
+
-
- Run
-
-
-
Cell {index + 1}
-
{statusLabel}
+
-
-
-
-
{
- e.stopPropagation();
- onSelect();
- }}
- className="rounded-full border border-gray-200 p-1.5 text-gray-400 hover:border-gray-300 hover:text-gray-600"
- title="Expand cell"
- >
-
-
+
{
e.stopPropagation();
- setMenuOpen((prev) => !prev);
+ onToggleCollapse();
}}
- className="rounded-full border border-gray-200 p-1.5 text-gray-400 hover:border-gray-300 hover:text-gray-600"
- title="Cell options"
+ className={`rounded-md border px-1.5 py-1 text-xs ${cell.collapsed ? 'border-indigo-300 text-indigo-500' : 'border-gray-200 hover:text-gray-600'}`}
+ title={cell.collapsed ? 'Expand cell' : 'Collapse cell'}
>
-
- {menuOpen && (
-
+ {!cell.collapsed && (
+ <>
{
e.stopPropagation();
- onMoveUp();
- setMenuOpen(false);
+ onToggleEditor();
}}
+ className={`rounded-md border px-1.5 py-1 text-xs ${cell.hideEditor ? 'border-indigo-300 text-indigo-500' : 'border-gray-200 hover:text-gray-600'}`}
+ title={cell.hideEditor ? 'Show SQL editor' : 'Collapse SQL editor'}
>
- Move cell up
- โโ
+
{
e.stopPropagation();
- onMoveDown();
- setMenuOpen(false);
+ onToggleResult();
}}
+ className={`rounded-md border px-1.5 py-1 text-xs ${cell.hideResult ? 'border-indigo-300 text-indigo-500' : 'border-gray-200 hover:text-gray-600'}`}
+ title={cell.hideResult ? 'Show results' : 'Collapse results'}
>
- Move cell down
- โโ
+
- {canDelete && (
+
+ )}
+
+
+ )}
+
+
+
+
+
{
+ if (!cell.loading && cell.sql.trim()) {
+ setRunMenuOpen(true);
+ }
+ }}
+ onMouseLeave={() => setRunMenuOpen(false)}
+ >
+
{
+ e.stopPropagation();
+ if (cell.loading || !cell.sql.trim()) {
+ return;
+ }
+ onExecute();
+ setRunMenuOpen(false);
+ }}
+ disabled={cell.loading || !cell.sql.trim()}
+ className={`flex h-8 w-8 items-center justify-center rounded-full border text-sm font-semibold transition ${
+ cell.loading || !cell.sql.trim()
+ ? 'border-gray-200 text-gray-400 cursor-not-allowed'
+ : runMenuOpen
+ ? 'border-indigo-400 text-indigo-600 bg-indigo-50'
+ : 'border-gray-300 text-gray-600 hover:border-indigo-300 hover:text-indigo-600'
+ }`}
+ title="Run cell"
+ >
+
+ {runMenuOpen && !cell.loading && cell.sql.trim() && (
+
{
e.stopPropagation();
- onDelete();
- setMenuOpen(false);
+ onExecute();
+ setRunMenuOpen(false);
}}
>
- Delete
+ Run cell
+ โโ
- )}
-
- )}
+
{
+ e.stopPropagation();
+ onRunFromHere();
+ setRunMenuOpen(false);
+ }}
+ >
+ Run from here
+ โฅโ
+
+
{
+ e.stopPropagation();
+ onRunToHere();
+ setRunMenuOpen(false);
+ }}
+ >
+ Run to here
+ โงโ
+
+
+ )}
+
+
{statusLabel}
-
-
- {!cell.collapsed && (
-
- {showEditor ? (
-
-
- ) : (
+
{
e.stopPropagation();
- onToggleEditor();
+ onToggleFullscreen();
}}
+ className={`rounded-full border p-1.5 text-gray-500 hover:text-gray-700 ${
+ isFullscreen ? 'border-indigo-300 text-indigo-500' : 'border-gray-200 hover:border-gray-300'
+ }`}
+ title={isFullscreen ? 'Exit fullscreen' : 'Fullscreen cell'}
>
- SQL editor collapsed โ tap to expand
+
- )}
+ {showMenu && (
+
+
{
+ e.stopPropagation();
+ setMenuOpen((prev) => !prev);
+ }}
+ className="rounded-full border border-gray-200 p-1.5 text-gray-400 hover:border-gray-300 hover:text-gray-600"
+ title="Cell options"
+ >
+
+ {menuOpen && (
+
+ {
+ e.stopPropagation();
+ onMoveUp();
+ setMenuOpen(false);
+ }}
+ >
+ Move cell up
+ โโ
+
+ {
+ e.stopPropagation();
+ onMoveDown();
+ setMenuOpen(false);
+ }}
+ >
+ Move cell down
+ โโ
+
+ {canDelete && (
+ {
+ e.stopPropagation();
+ onDelete();
+ setMenuOpen(false);
+ }}
+ >
+ Delete
+
+ )}
+
+ )}
+
+ )}
+
+
- {cell.error && showResult && (
-
- {cell.error}
-
- )}
+ {!cell.collapsed && (
+
+ {showEditor ? (
+
+
+ ) : (
+
{
+ e.stopPropagation();
+ onToggleEditor();
+ }}
+ >
+
+ {cell.sql || 'SQL editor collapsed'}
+
+
Show editor
+
+ )}
- {!cell.error && showResult && cell.result && (
-
-
- {cell.result.rowCount} row{cell.result.rowCount === 1 ? '' : 's'} returned in {cell.result.duration}
+ {cell.error && showResult && (
+
+ {cell.error}
- {renderTable(cell.result)}
- {renderTypeInfo(cell.result)}
-
- )}
+ )}
- {!cell.error && showResult && !cell.result && (
-
- Execute the query to see results and schema details.
-
- )}
+ {!cell.error && showResult && cell.result && (
+
+
+ {cell.result.rowCount} row{cell.result.rowCount === 1 ? '' : 's'} returned {cell.result.duration ? `in ${cell.result.duration}` : ''}
+
+
+ {renderTable(cell.result)}
+
+
+ )}
- {!showResult && (
-
{
- e.stopPropagation();
- onToggleResult();
- }}
- >
- Result set hidden โ tap to expand
-
- )}
-
- )}
+ {!cell.error && !showResult && !cell.collapsed}
+
+ )}
+
+
+ {/* ไธๆนๆพ็ฝฎๆ็คบๅจ */}
+ {showBottomIndicator && (
+
+ )}
404: This page could not be found 404
This page could not be found. 404: This page could not be found 404
This page could not be found. Databend โถ Run queryPress โโ to run
Execute a query to see results
Databend โถ Run queryPress โโ to run
Execute a query to see results
Databend โถ Run queryPress โโ to run
Execute a query to see results
Databend โถ Run queryPress โโ to run
Execute a query to see results
Databend - Notebooks Databend - Notebooks Databend - Performance Analysis Databend - Performance Analysis
+
{renderSidebar()}
diff --git a/frontend/src/components/NotebookCell.tsx b/frontend/src/components/NotebookCell.tsx
index 6aa26ae79..16a081432 100644
--- a/frontend/src/components/NotebookCell.tsx
+++ b/frontend/src/components/NotebookCell.tsx
@@ -161,17 +161,18 @@ const NotebookCellComponent: React.FC = ({
const baseCardClasses = [
'flex',
'gap-3',
- 'rounded-xl',
+ 'rounded-2xl',
'border',
- 'bg-white',
+ 'bg-white/95',
+ 'backdrop-blur-[2px]',
'transition-all',
- dragState.isDragOver ? 'ring-1 ring-indigo-300 border-indigo-300' : 'border-gray-200',
+ dragState.isDragOver ? 'ring-1 ring-indigo-300 border-indigo-300' : 'border-gray-100',
isFullscreen
? 'shadow-[0_0_0_2px_rgba(99,102,241,0.35)] border-indigo-300'
: isActive
- ? 'shadow-[0_0_0_1px_rgba(99,102,241,0.25)]'
- : 'shadow-sm hover:border-gray-300',
- cell.loading ? 'ring-1 ring-indigo-300 border-indigo-300 bg-blue-50/70' : '',
+ ? 'shadow-[0_15px_35px_-20px_rgba(79,70,229,0.45)]'
+ : 'shadow-sm hover:shadow-md hover:border-gray-200',
+ cell.loading ? 'ring-1 ring-blue-300 border-blue-200 bg-blue-50/80' : '',
].join(' ');
// ๆพ็ฝฎๆ็คบๅจๆ ทๅผ
@@ -412,7 +413,9 @@ const NotebookCellComponent: React.FC = ({
)}
{statusLabel}
+
+ {statusLabel}
+
@@ -535,13 +538,13 @@ const NotebookCellComponent: React.FC
= ({
{!cell.error && showResult && cell.result && (
-
- {cell.result.rowCount} row{cell.result.rowCount === 1 ? '' : 's'} returned {cell.result.duration ? `in ${cell.result.duration}` : ''}
-
-
- {renderTable(cell.result)}
-
+
+ {cell.result.rowCount} row{cell.result.rowCount === 1 ? '' : 's'} returned {cell.result.duration ? `in ${cell.result.duration}` : ''}
+
+ {renderTable(cell.result)}
+
+