From 188d09e124d2ac9d4cf12f86512da168cf2ef55e Mon Sep 17 00:00:00 2001
From: Ben Sherman <bcanfieldsherman@gmail.com>
Date: Wed, 22 Jan 2025 20:16:28 -0800
Subject: [PATCH] feat(weave): dataset editing UI (#3341)

---
 .../Home/Browse3/datasets/CellRenderers.tsx   | 699 ++++++++++++++++++
 .../Browse3/datasets/DatasetEditorContext.tsx | 174 +++++
 .../Browse3/datasets/DatasetVersionPage.tsx   | 300 ++++++--
 .../Home/Browse3/datasets/EditPopover.tsx     | 165 +++++
 .../Browse3/datasets/EditableDatasetView.tsx  | 600 +++++++++++++++
 .../Browse3/datasets/editors/CodeEditor.tsx   |  85 +++
 .../Browse3/datasets/editors/DiffEditor.tsx   |  97 +++
 .../Browse3/datasets/editors/TextEditor.tsx   |  59 ++
 .../Browse3/pages/CallPage/DataTableView.tsx  |   4 +-
 .../pages/ObjectsPage/ObjectVersionPage.tsx   |  11 +-
 10 files changed, 2118 insertions(+), 76 deletions(-)
 create mode 100644 weave-js/src/components/PagePanelComponents/Home/Browse3/datasets/CellRenderers.tsx
 create mode 100644 weave-js/src/components/PagePanelComponents/Home/Browse3/datasets/DatasetEditorContext.tsx
 create mode 100644 weave-js/src/components/PagePanelComponents/Home/Browse3/datasets/EditPopover.tsx
 create mode 100644 weave-js/src/components/PagePanelComponents/Home/Browse3/datasets/EditableDatasetView.tsx
 create mode 100644 weave-js/src/components/PagePanelComponents/Home/Browse3/datasets/editors/CodeEditor.tsx
 create mode 100644 weave-js/src/components/PagePanelComponents/Home/Browse3/datasets/editors/DiffEditor.tsx
 create mode 100644 weave-js/src/components/PagePanelComponents/Home/Browse3/datasets/editors/TextEditor.tsx

diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/datasets/CellRenderers.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/datasets/CellRenderers.tsx
new file mode 100644
index 000000000000..9693266e3474
--- /dev/null
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/datasets/CellRenderers.tsx
@@ -0,0 +1,699 @@
+import {Box, Tooltip} from '@mui/material';
+import {
+  GridRenderCellParams,
+  GridRenderEditCellParams,
+} from '@mui/x-data-grid-pro';
+import {Button} from '@wandb/weave/components/Button';
+import {Icon} from '@wandb/weave/components/Icon';
+import set from 'lodash/set';
+import React, {useCallback, useState} from 'react';
+
+import {CellValue} from '../../Browse2/CellValue';
+import {DatasetRow, useDatasetEditContext} from './DatasetEditorContext';
+import {CodeEditor} from './editors/CodeEditor';
+import {DiffEditor} from './editors/DiffEditor';
+import {TextEditor} from './editors/TextEditor';
+import {EditorMode, EditPopover} from './EditPopover';
+
+export const CELL_COLORS = {
+  DELETED: 'rgba(255, 0, 0, 0.1)',
+  EDITED: 'rgba(0, 128, 128, 0.1)',
+  NEW: 'rgba(0, 255, 0, 0.1)',
+  TRANSPARENT: 'transparent',
+} as const;
+
+export const DELETED_CELL_STYLES = {
+  opacity: 0.5,
+  textDecoration: 'line-through' as const,
+} as const;
+
+const cellViewingStyles = {
+  height: '100%',
+  width: '100%',
+  fontFamily: '"Source Sans Pro", sans-serif',
+  fontSize: '14px',
+  lineHeight: '1.5',
+  padding: '8px 12px',
+  display: 'flex',
+  alignItems: 'center',
+  transition: 'background-color 0.2s ease',
+};
+
+interface CellViewingRendererProps {
+  isEdited?: boolean;
+  isDeleted?: boolean;
+  isNew?: boolean;
+  isEditing?: boolean;
+  serverValue?: any;
+}
+
+const ShimmerOverlay: React.FC = () => (
+  <Box
+    sx={{
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      background:
+        'linear-gradient(90deg, transparent 0%, rgba(128, 128, 128, 0) 20%, rgba(128, 128, 128, 0.2) 50%, rgba(128, 128, 128, 0) 80%, transparent 100%)',
+      animation: 'shimmer-wobble 2s infinite ease-in-out',
+      '@keyframes shimmer-wobble': {
+        '0%': {
+          transform: 'translateX(-100%) skewX(-15deg)',
+          opacity: 0,
+        },
+        '20%': {
+          opacity: 1,
+        },
+        '80%': {
+          opacity: 1,
+        },
+        '100%': {
+          transform: 'translateX(100%) skewX(-15deg)',
+          opacity: 0,
+        },
+      },
+      pointerEvents: 'none',
+    }}
+  />
+);
+
+export const CellViewingRenderer: React.FC<
+  GridRenderCellParams & CellViewingRendererProps
+> = ({
+  value,
+  isEdited = false,
+  isDeleted = false,
+  isNew = false,
+  isEditing = false,
+  api,
+  id,
+  field,
+  serverValue,
+}) => {
+  const [isHovered, setIsHovered] = useState(false);
+  const {setEditedRows} = useDatasetEditContext();
+
+  const isEditable = typeof value !== 'object' && typeof value !== 'boolean';
+
+  const handleEditClick = (event: React.MouseEvent) => {
+    event.stopPropagation();
+    if (isEditable) {
+      api.startCellEditMode({id, field});
+    }
+  };
+
+  const handleRevert = (event: React.MouseEvent) => {
+    event.stopPropagation();
+    const existingRow = api.getRow(id);
+    const updatedRow = {...existingRow};
+    set(updatedRow, field, serverValue);
+    api.updateRows([{id, ...updatedRow}]);
+    api.setEditCellValue({id, field, value: serverValue});
+    setEditedRows(prev => {
+      const newMap = new Map(prev);
+      newMap.set(existingRow.___weave?.index, updatedRow);
+      return newMap;
+    });
+  };
+
+  const getBackgroundColor = () => {
+    if (isDeleted) {
+      return CELL_COLORS.DELETED;
+    }
+    if (isEdited) {
+      return CELL_COLORS.EDITED;
+    }
+    if (isNew) {
+      return CELL_COLORS.NEW;
+    }
+    return CELL_COLORS.TRANSPARENT;
+  };
+
+  if (typeof value === 'boolean') {
+    const handleToggle = (e: React.MouseEvent) => {
+      e.stopPropagation();
+      e.preventDefault();
+      const existingRow = api.getRow(id);
+      const updatedRow = {...existingRow, [field]: !value};
+      api.updateRows([{id, ...updatedRow}]);
+      setEditedRows(prev => {
+        const newMap = new Map(prev);
+        newMap.set(existingRow.___weave?.index, updatedRow);
+        return newMap;
+      });
+    };
+
+    return (
+      <Tooltip
+        title="Click to toggle"
+        enterDelay={1000}
+        enterNextDelay={1000}
+        leaveDelay={0}
+        placement="top"
+        slotProps={{
+          tooltip: {
+            sx: {
+              fontFamily: '"Source Sans Pro", sans-serif',
+              fontSize: '14px',
+            },
+          },
+        }}>
+        <Box
+          onClick={handleToggle}
+          onDoubleClick={handleToggle}
+          sx={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            height: '100%',
+            width: '100%',
+            backgroundColor: getBackgroundColor(),
+            opacity: isDeleted ? DELETED_CELL_STYLES.opacity : 1,
+            textDecoration: isDeleted
+              ? DELETED_CELL_STYLES.textDecoration
+              : 'none',
+            cursor: 'pointer',
+            transition: 'background-color 0.2s ease',
+            '&:hover': {
+              backgroundColor: 'rgba(0, 0, 0, 0.08)',
+            },
+          }}>
+          <Icon
+            name={value ? 'checkmark' : 'close'}
+            height={20}
+            width={20}
+            style={{
+              color: value ? '#22c55e' : '#ef4444',
+            }}
+          />
+        </Box>
+      </Tooltip>
+    );
+  }
+
+  if (!isEditable) {
+    return (
+      <Tooltip
+        title="Cell type cannot be edited"
+        enterDelay={1000}
+        enterNextDelay={1000}
+        leaveDelay={0}
+        placement="top"
+        slotProps={{
+          tooltip: {
+            sx: {
+              fontFamily: '"Source Sans Pro", sans-serif',
+              fontSize: '14px',
+            },
+          },
+        }}>
+        <Box
+          onClick={e => e.stopPropagation()}
+          onDoubleClick={e => e.stopPropagation()}
+          sx={{
+            backgroundColor: getBackgroundColor(),
+            opacity: isDeleted ? DELETED_CELL_STYLES.opacity : 1,
+            textDecoration: isDeleted
+              ? DELETED_CELL_STYLES.textDecoration
+              : 'none',
+          }}>
+          <CellValue value={value} />
+        </Box>
+      </Tooltip>
+    );
+  }
+
+  return (
+    <Tooltip
+      title="Click to edit"
+      enterDelay={1000}
+      enterNextDelay={1000}
+      leaveDelay={0}
+      placement="top"
+      slotProps={{
+        tooltip: {
+          sx: {
+            fontFamily: '"Source Sans Pro", sans-serif',
+            fontSize: '14px',
+          },
+        },
+      }}>
+      <Box
+        onClick={handleEditClick}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+        sx={{
+          ...cellViewingStyles,
+          position: 'relative',
+          cursor: 'pointer',
+          backgroundColor: getBackgroundColor(),
+          opacity: isDeleted ? DELETED_CELL_STYLES.opacity : 1,
+          textDecoration: isDeleted
+            ? DELETED_CELL_STYLES.textDecoration
+            : 'none',
+          '@keyframes shimmer': {
+            '0%': {
+              transform: 'translateX(-100%)',
+            },
+            '100%': {
+              transform: 'translateX(100%)',
+            },
+          },
+          '&:hover': {
+            backgroundColor: 'rgba(0, 0, 0, 0.04)',
+          },
+          ...(isEditing && {
+            outline: '2px solid rgb(77, 208, 225)',
+          }),
+        }}>
+        <span style={{flex: 1, position: 'relative', overflow: 'hidden'}}>
+          {value}
+          {isEditing && <ShimmerOverlay />}
+        </span>
+        {isHovered && (
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: '4px',
+              opacity: 0,
+              transition: 'opacity 0.2s ease',
+              cursor: 'pointer',
+              animation: 'fadeIn 0.2s ease forwards',
+              '@keyframes fadeIn': {
+                from: {opacity: 0},
+                to: {opacity: 0.5},
+              },
+              '&:hover': {
+                opacity: 0.8,
+              },
+            }}>
+            {isEdited ? (
+              <Button
+                icon="undo"
+                onClick={handleRevert}
+                variant="secondary"
+                size="small"
+                style={{padding: '2px 4px', minWidth: 0}}
+                tooltip="Revert to original value"
+              />
+            ) : (
+              <Icon name="pencil-edit" height={14} width={14} />
+            )}
+          </Box>
+        )}
+      </Box>
+    </Tooltip>
+  );
+};
+
+export interface CellEditingRendererProps extends GridRenderEditCellParams {
+  serverValue?: string;
+  preserveFieldOrder?: (row: any) => any;
+}
+
+const NumberEditor: React.FC<{
+  value: number;
+  onClose: () => void;
+  api: any;
+  id: string | number;
+  field: string;
+}> = ({value, onClose, api, id, field}) => {
+  const [inputValue, setInputValue] = useState(value.toString());
+  const {setEditedRows, setAddedRows} = useDatasetEditContext();
+
+  const handleValueUpdate = (newValue: string) => {
+    setInputValue(newValue);
+    if (newValue !== '') {
+      const numValue = Number(newValue);
+      api.setEditCellValue({id, field, value: numValue});
+    }
+  };
+
+  const handleBlur = () => {
+    if (inputValue !== '') {
+      const numValue = Number(inputValue);
+      const existingRow = api.getRow(id);
+      if (existingRow.___weave?.isNew) {
+        setAddedRows((prev: Map<string, DatasetRow>) => {
+          const newMap = new Map(prev);
+          const updatedRow = {...existingRow};
+          updatedRow[field] = numValue;
+          newMap.set(existingRow.___weave?.id, updatedRow);
+          return newMap;
+        });
+      } else {
+        const updatedRow = {...existingRow};
+        updatedRow[field] = numValue;
+        setEditedRows((prev: Map<number, DatasetRow>) => {
+          const newMap = new Map(prev);
+          newMap.set(existingRow.___weave?.index, updatedRow);
+          return newMap;
+        });
+      }
+    }
+    onClose();
+  };
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        height: '100%',
+        width: '100%',
+      }}>
+      <input
+        type="number"
+        value={inputValue}
+        onChange={e => handleValueUpdate(e.target.value)}
+        onKeyDown={e => {
+          if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+            handleBlur();
+          } else if (e.key === 'Enter') {
+            handleBlur();
+          }
+        }}
+        onBlur={handleBlur}
+        autoFocus
+        style={{
+          width: '100%',
+          height: '100%',
+          border: 'none',
+          outline: 'none',
+          background: 'none',
+          textAlign: 'left',
+          padding: '8px 12px',
+          fontFamily: 'inherit',
+          fontSize: 'inherit',
+          color: 'inherit',
+        }}
+      />
+    </Box>
+  );
+};
+
+const StringEditor: React.FC<{
+  value: string;
+  serverValue?: string;
+  onClose: () => void;
+  params: GridRenderCellParams;
+}> = ({value, serverValue, onClose, params}) => {
+  const inputRef = React.useRef<HTMLTextAreaElement>(null);
+  const [anchorEl, setAnchorEl] = useState<HTMLDivElement | null>(null);
+  const [hasInitialFocus, setHasInitialFocus] = useState(false);
+  const initialWidth = React.useRef<number>();
+  const initialHeight = React.useRef<number>();
+  const [editorMode, setEditorMode] = useState<EditorMode>('text');
+  const [editedValue, setEditedValue] = useState(value);
+
+  const handleEditorModeChange = (newMode: EditorMode) => {
+    setEditorMode(newMode);
+    initialWidth.current = getPopoverWidth(newMode);
+    initialHeight.current = getPopoverHeight();
+  };
+
+  const handleValueChange = (newValue: string) => {
+    setEditedValue(newValue);
+    params.api.setEditCellValue({
+      id: params.id,
+      field: params.field,
+      value: newValue,
+    });
+  };
+
+  const getPopoverWidth = useCallback(
+    (mode: EditorMode = editorMode) => {
+      const screenWidth = window.innerWidth;
+      const maxWidth = screenWidth - 48;
+      const minWidth = 400;
+      const valueLength = typeof value === 'string' ? value.length : 0;
+      const approximateWidth = Math.min(
+        Math.max(valueLength, minWidth),
+        maxWidth
+      );
+      return mode === 'diff'
+        ? Math.min(approximateWidth * 2, maxWidth)
+        : approximateWidth;
+    },
+    [editorMode, value]
+  );
+
+  const getPopoverHeight = useCallback(() => {
+    const width = getPopoverWidth();
+    const charsPerLine = Math.floor(width / 8);
+    const lines =
+      typeof value === 'string'
+        ? value.split('\n').reduce((acc, line) => {
+            return acc + Math.ceil(line.length / charsPerLine);
+          }, 0)
+        : 1;
+
+    const maxHeight = Math.min(window.innerHeight / 2, 400);
+    const contentHeight = Math.min(Math.max(lines * 24 + 80, 120), maxHeight);
+    return contentHeight;
+  }, [value, getPopoverWidth]);
+
+  React.useLayoutEffect(() => {
+    const element = document.activeElement?.closest('.MuiDataGrid-cell');
+    if (element) {
+      setAnchorEl(element as HTMLDivElement);
+      if (!initialWidth.current) {
+        initialWidth.current = getPopoverWidth();
+      }
+      if (!initialHeight.current) {
+        initialHeight.current = getPopoverHeight();
+      }
+    }
+  }, [getPopoverWidth, getPopoverHeight]);
+
+  React.useEffect(() => {
+    if (!hasInitialFocus) {
+      setTimeout(() => {
+        const textarea = inputRef.current?.querySelector('textarea');
+        if (textarea) {
+          textarea.focus();
+          textarea.setSelectionRange(0, textarea.value.length);
+          setHasInitialFocus(true);
+        }
+      }, 0);
+    }
+  }, [hasInitialFocus]);
+
+  const renderEditor = () => {
+    switch (editorMode) {
+      case 'text':
+        return (
+          <TextEditor
+            value={editedValue}
+            onChange={handleValueChange}
+            onClose={onClose}
+            inputRef={inputRef}
+          />
+        );
+      case 'code':
+        return (
+          <CodeEditor
+            value={editedValue}
+            onChange={handleValueChange}
+            onClose={onClose}
+          />
+        );
+      case 'diff':
+        return (
+          <DiffEditor
+            value={editedValue}
+            originalValue={serverValue ?? ''}
+            onChange={handleValueChange}
+            onClose={onClose}
+          />
+        );
+    }
+  };
+
+  return (
+    <>
+      <CellViewingRenderer {...params} isEditing />
+      <EditPopover
+        anchorEl={anchorEl}
+        onClose={onClose}
+        initialWidth={initialWidth.current}
+        initialHeight={initialHeight.current}
+        editorMode={editorMode}
+        setEditorMode={handleEditorModeChange}>
+        {renderEditor()}
+      </EditPopover>
+    </>
+  );
+};
+
+export const CellEditingRenderer: React.FC<
+  CellEditingRendererProps
+> = params => {
+  const {setEditedRows, setAddedRows} = useDatasetEditContext();
+  const {id, value, field, api, serverValue, preserveFieldOrder} = params;
+
+  // Convert edit params to render params
+  const renderParams: GridRenderCellParams = {
+    ...params,
+    value,
+  };
+
+  const updateRow = useCallback(
+    (existingRow: any, newValue: any) => {
+      const baseRow = {...existingRow};
+      baseRow[field] = newValue;
+      return preserveFieldOrder ? preserveFieldOrder(baseRow) : baseRow;
+    },
+    [field, preserveFieldOrder]
+  );
+
+  // For boolean values, don't show edit mode at all
+  if (typeof value === 'boolean') {
+    return null;
+  }
+
+  // For numeric values, show number editor
+  if (typeof value === 'number') {
+    return (
+      <NumberEditor
+        value={value}
+        onClose={() => api.stopCellEditMode({id, field})}
+        api={api}
+        id={id}
+        field={field}
+      />
+    );
+  }
+
+  // Text editor with popover for string values
+  return (
+    <StringEditor
+      value={value as string}
+      serverValue={serverValue}
+      onClose={() => {
+        const existingRow = api.getRow(id);
+        const updatedRow = updateRow(existingRow, value);
+        if (existingRow.___weave?.isNew) {
+          setAddedRows(prev => {
+            const newMap = new Map(prev);
+            newMap.set(existingRow.___weave?.id, updatedRow);
+            return newMap;
+          });
+        } else {
+          setEditedRows(prev => {
+            const newMap = new Map(prev);
+            newMap.set(existingRow.___weave?.index, updatedRow);
+            return newMap;
+          });
+        }
+        api.stopCellEditMode({id, field});
+      }}
+      params={renderParams}
+    />
+  );
+};
+
+interface ControlCellProps {
+  params: GridRenderCellParams;
+  deleteRow: (absoluteIndex: number) => void;
+  restoreRow: (absoluteIndex: number) => void;
+  deleteAddedRow: (rowId: string) => void;
+  isDeleted: boolean;
+  isNew: boolean;
+}
+
+export const ControlCell: React.FC<ControlCellProps> = ({
+  params,
+  deleteRow,
+  restoreRow,
+  deleteAddedRow,
+  isDeleted,
+  isNew,
+}) => {
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: '100%',
+        width: '100%',
+        backgroundColor: isDeleted
+          ? CELL_COLORS.DELETED
+          : isNew
+          ? CELL_COLORS.NEW
+          : CELL_COLORS.TRANSPARENT,
+        opacity: isDeleted ? DELETED_CELL_STYLES.opacity : 1,
+        textDecoration: isDeleted ? DELETED_CELL_STYLES.textDecoration : 'none',
+      }}>
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          opacity: 1,
+          transition: 'opacity 200ms ease',
+          '.MuiDataGrid-row:not(:hover) &': {
+            opacity: 0,
+          },
+          zIndex: 1000,
+        }}>
+        {isNew && (
+          <Button
+            onClick={() => deleteAddedRow(params.row.___weave?.id)}
+            tooltip="Remove"
+            icon="close"
+            size="small"
+            variant="secondary"
+          />
+        )}
+        {isDeleted && (
+          <Button
+            onClick={() => restoreRow(params.row.___weave?.index)}
+            tooltip="Restore"
+            icon="undo"
+            size="small"
+            variant="secondary"
+          />
+        )}
+        {!isNew && !isDeleted && (
+          <Button
+            onClick={() => deleteRow(params.row.___weave?.index)}
+            tooltip="Delete"
+            icon="delete"
+            size="small"
+            variant="secondary"
+          />
+        )}
+      </Box>
+    </Box>
+  );
+};
+
+export interface ControlsColumnHeaderProps {
+  onAddRow: () => void;
+}
+
+export const ControlsColumnHeader: React.FC<ControlsColumnHeaderProps> = ({
+  onAddRow,
+}) => (
+  <Box
+    sx={{
+      margin: '2px',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      height: '100%',
+    }}>
+    <Button
+      icon="add-new"
+      onClick={onAddRow}
+      variant="ghost"
+      size="small"
+      tooltip="Add row"
+    />
+  </Box>
+);
diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/datasets/DatasetEditorContext.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/datasets/DatasetEditorContext.tsx
new file mode 100644
index 000000000000..952b69da4ac0
--- /dev/null
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/datasets/DatasetEditorContext.tsx
@@ -0,0 +1,174 @@
+import isEqual from 'lodash/isEqual';
+import React, {createContext, useCallback, useContext, useState} from 'react';
+
+import {flattenObjectPreservingWeaveTypes} from '../../Browse2/browse2Util';
+
+export interface DatasetRow {
+  [key: string]: any;
+  ___weave: {
+    id: string;
+    index?: number;
+    isNew?: boolean;
+    serverValue?: any;
+  };
+}
+
+interface DatasetEditContextType {
+  /** Map of complete edited rows, keyed by row absolute index */
+  editedRows: Map<number, DatasetRow>;
+  setEditedRows: React.Dispatch<React.SetStateAction<Map<number, DatasetRow>>>;
+  /** Get edited fields for a row */
+  getEditedFields: (rowIndex: number) => {[fieldName: string]: unknown};
+  /** Array of row indices that have been marked for deletion */
+  deletedRows: number[];
+  setDeletedRows: React.Dispatch<React.SetStateAction<number[]>>;
+  /** Map of newly added rows, keyed by temporary row ID */
+  addedRows: Map<string, DatasetRow>;
+  setAddedRows: React.Dispatch<React.SetStateAction<Map<string, DatasetRow>>>;
+  /** Reset the context to its initial state */
+  resetEditState: () => void;
+  /** Convert current edits to table update spec */
+  convertEditsToTableUpdateSpec: () => Array<
+    {pop: {index: number}} | {insert: {index: number; row: Record<string, any>}}
+  >;
+}
+
+export const DatasetEditContext = createContext<
+  DatasetEditContextType | undefined
+>(undefined);
+
+export const useDatasetEditContext = () => {
+  const context = useContext(DatasetEditContext);
+  if (!context) {
+    throw new Error(
+      'useDatasetEditContext must be used within a DatasetEditProvider'
+    );
+  }
+  return context;
+};
+
+interface DatasetEditProviderProps {
+  children: React.ReactNode;
+}
+
+export const DatasetEditProvider: React.FC<DatasetEditProviderProps> = ({
+  children,
+}) => {
+  const [editedRows, setEditedRows] = useState<Map<number, DatasetRow>>(
+    new Map()
+  );
+  const [deletedRows, setDeletedRows] = useState<number[]>([]);
+  const [addedRows, setAddedRows] = useState<Map<string, DatasetRow>>(
+    new Map()
+  );
+
+  const getEditedFields = useCallback(
+    (rowIndex: number) => {
+      const editedRow = editedRows.get(rowIndex);
+      const originalRow = editedRow?.___weave?.serverValue ?? editedRow;
+      if (!editedRow) {
+        return {};
+      }
+      const flattenedOriginalRow =
+        flattenObjectPreservingWeaveTypes(originalRow);
+      const flattenedEditedRow = flattenObjectPreservingWeaveTypes(editedRow);
+      return Object.fromEntries(
+        Object.entries(flattenedEditedRow).filter(
+          ([key, value]) =>
+            !key.startsWith('___weave') &&
+            !isEqual(value, flattenedOriginalRow[key])
+        )
+      );
+    },
+    [editedRows]
+  );
+
+  // Cleanup effect to remove rows that no longer have any edits
+  // from the editedRows map.
+  React.useEffect(() => {
+    const rowsToRemove: number[] = [];
+    editedRows.forEach((editedRow, rowIndex) => {
+      const fields = getEditedFields(rowIndex);
+      if (Object.keys(fields).length === 0) {
+        rowsToRemove.push(rowIndex);
+      }
+    });
+
+    if (rowsToRemove.length > 0) {
+      setEditedRows(prev => {
+        const newMap = new Map(prev);
+        rowsToRemove.forEach(index => newMap.delete(index));
+        return newMap;
+      });
+    }
+  }, [editedRows, getEditedFields]);
+
+  const reset = useCallback(() => {
+    setEditedRows(new Map());
+    setDeletedRows([]);
+    setAddedRows(new Map());
+  }, []);
+
+  const cleanRow = useCallback((row: DatasetRow) => {
+    return Object.fromEntries(
+      Object.entries(row).filter(([key]) => !['___weave'].includes(key))
+    );
+  }, []);
+
+  const convertEditsToTableUpdateSpec = useCallback(() => {
+    const updates: Array<
+      | {pop: {index: number}}
+      | {insert: {index: number; row: Record<string, any>}}
+    > = [];
+
+    editedRows.forEach((editedRow, rowIndex) => {
+      if (rowIndex !== undefined) {
+        updates.push({pop: {index: rowIndex}});
+        updates.push({
+          insert: {
+            index: rowIndex,
+            row: cleanRow(editedRow),
+          },
+        });
+      }
+    });
+
+    deletedRows
+      .sort((a, b) => b - a)
+      .forEach(rowIndex => {
+        updates.push({pop: {index: rowIndex}});
+      });
+
+    Array.from(addedRows.values())
+      .reverse()
+      .forEach(row => {
+        updates.push({
+          insert: {
+            index: 0,
+            row: cleanRow(row),
+          },
+        });
+      });
+
+    return updates;
+  }, [editedRows, deletedRows, addedRows, cleanRow]);
+
+  // Use an effect to always remove d
+
+  return (
+    <DatasetEditContext.Provider
+      value={{
+        editedRows,
+        setEditedRows,
+        getEditedFields,
+        deletedRows,
+        setDeletedRows,
+        addedRows,
+        setAddedRows,
+        resetEditState: reset,
+        convertEditsToTableUpdateSpec,
+      }}>
+      {children}
+    </DatasetEditContext.Provider>
+  );
+};
diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/datasets/DatasetVersionPage.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/datasets/DatasetVersionPage.tsx
index 68112d9b904a..c863bf6ad201 100644
--- a/weave-js/src/components/PagePanelComponents/Home/Browse3/datasets/DatasetVersionPage.tsx
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/datasets/DatasetVersionPage.tsx
@@ -1,15 +1,19 @@
-import Box from '@mui/material/Box';
+import {Box, Tooltip} from '@mui/material';
 import {UserLink} from '@wandb/weave/components/UserLink';
-import React, {useMemo} from 'react';
+import {maybePluralize} from '@wandb/weave/core/util/string';
+import React, {useCallback, useMemo, useState} from 'react';
+import {Link, useHistory} from 'react-router-dom';
+import {toast} from 'react-toastify';
 
+import {Button} from '../../../../Button';
 import {Icon} from '../../../../Icon';
 import {LoadingDots} from '../../../../LoadingDots';
+import {Pill} from '../../../../Tag/Pill';
 import {Tailwind} from '../../../../Tailwind';
 import {Timestamp} from '../../../../Timestamp';
+import {useWeaveflowCurrentRouteContext} from '../context';
 import {WeaveCHTableSourceRefContext} from '../pages/CallPage/DataTableView';
-import {ObjectViewerSection} from '../pages/CallPage/ObjectViewerSection';
-import {objectVersionText} from '../pages/common/Links';
-import {ObjectVersionsLink} from '../pages/common/Links';
+import {ObjectVersionsLink, objectVersionText} from '../pages/common/Links';
 import {CenteredAnimatedLoader} from '../pages/common/Loader';
 import {
   ScrollableTabContent,
@@ -21,24 +25,55 @@ import {useWFHooks} from '../pages/wfReactInterface/context';
 import {objectVersionKeyToRefUri} from '../pages/wfReactInterface/utilities';
 import {ObjectVersionSchema} from '../pages/wfReactInterface/wfDataModelHooksInterface';
 import {CustomWeaveTypeProjectContext} from '../typeViews/CustomWeaveTypeDispatcher';
+import {useDatasetEditContext} from './DatasetEditorContext';
+import {EditableDatasetView} from './EditableDatasetView';
+
+const PUBLISHED_LINK_STYLES = {
+  color: 'rgb(94, 234, 212)',
+  textDecoration: 'none',
+  fontFamily: 'Inconsolata',
+  fontWeight: 600,
+} as const;
+
+const TOOLTIP_PROPS = {
+  slotProps: {
+    tooltip: {
+      sx: {
+        fontFamily: 'Source Sans Pro',
+        fontSize: '14px',
+      },
+    },
+  },
+} as const;
 
 export const DatasetVersionPage: React.FC<{
   objectVersion: ObjectVersionSchema;
   showDeleteButton?: boolean;
 }> = ({objectVersion, showDeleteButton}) => {
-  const {useRootObjectVersions, useRefsData} = useWFHooks();
+  const {
+    editedRows,
+    deletedRows,
+    addedRows,
+    resetEditState,
+    convertEditsToTableUpdateSpec,
+  } = useDatasetEditContext();
+  const router = useWeaveflowCurrentRouteContext();
+  const {useRootObjectVersions, useRefsData, useTableUpdate, useObjCreate} =
+    useWFHooks();
+
+  const [isEditing, setIsEditing] = useState(false);
+
   const entityName = objectVersion.entity;
   const projectName = objectVersion.project;
   const objectName = objectVersion.objectId;
   const objectVersionIndex = objectVersion.versionIndex;
+  const projectId = `${entityName}/${projectName}`;
   const {createdAtMs} = objectVersion;
 
   const objectVersions = useRootObjectVersions(
     entityName,
     projectName,
-    {
-      objectIds: [objectName],
-    },
+    {objectIds: [objectName]},
     undefined,
     true
   );
@@ -58,12 +93,130 @@ export const DatasetVersionPage: React.FC<{
       typeof viewerData !== 'object' ||
       viewerData === null ||
       Array.isArray(viewerData);
-    if (dataIsPrimitive) {
-      return {_result: viewerData};
-    }
-    return viewerData;
+    return dataIsPrimitive ? {_result: viewerData} : viewerData;
   }, [viewerData]);
 
+  const originalTableDigest = viewerDataAsObject?.rows?.split('/').pop() ?? '';
+
+  const handleEditClick = useCallback(() => setIsEditing(true), []);
+  const handleCancelClick = useCallback(() => {
+    resetEditState();
+    setIsEditing(false);
+  }, [resetEditState]);
+
+  const tableUpdate = useTableUpdate();
+  const objCreate = useObjCreate();
+
+  const history = useHistory();
+
+  const handlePublish = useCallback(async () => {
+    setIsEditing(false);
+
+    const tableUpdateSpecs = convertEditsToTableUpdateSpec();
+    const tableUpdateResp = await tableUpdate(
+      projectId,
+      originalTableDigest,
+      tableUpdateSpecs
+    );
+    const tableRef = `weave:///${projectId}/table/${tableUpdateResp.digest}`;
+
+    const newObjVersion = await objCreate(projectId, objectName, {
+      ...objectVersion.val,
+      rows: tableRef,
+    });
+
+    const url = router.objectVersionUIUrl(
+      entityName,
+      projectName,
+      objectName,
+      newObjVersion,
+      undefined,
+      undefined
+    );
+
+    toast(
+      <div style={{display: 'flex', alignItems: 'center', gap: '8px'}}>
+        <Icon name="checkmark" width={20} height={20} />
+        Published{' '}
+        <Link to={url} style={PUBLISHED_LINK_STYLES}>
+          {objectName}:v{objectVersionCount}
+        </Link>
+      </div>
+    );
+    history.push(url);
+    resetEditState();
+  }, [
+    resetEditState,
+    objectVersionCount,
+    history,
+    router,
+    objectName,
+    objectVersion.val,
+    convertEditsToTableUpdateSpec,
+    projectId,
+    objCreate,
+    tableUpdate,
+    originalTableDigest,
+    entityName,
+    projectName,
+  ]);
+
+  const renderEditingControls = () => {
+    const editCountStr = String(Array.from(editedRows.keys()).length);
+    const addedCountStr = String(addedRows.size);
+    const deletedCountStr = String(deletedRows.length);
+    return (
+      <div className="flex gap-8">
+        <div className="mr-8 flex items-center gap-4">
+          <Tooltip
+            title={`${maybePluralize(Number(editCountStr), 'row')} edited`}
+            {...TOOLTIP_PROPS}>
+            <div>
+              <Pill label={editCountStr} icon="pencil-edit" color="blue" />
+            </div>
+          </Tooltip>
+          <Tooltip
+            title={`${maybePluralize(Number(addedCountStr), 'row')} added`}
+            {...TOOLTIP_PROPS}>
+            <div>
+              <Pill label={addedCountStr} icon="add-new" color="green" />
+            </div>
+          </Tooltip>
+          <Tooltip
+            title={`${maybePluralize(Number(deletedCountStr), 'row')} deleted`}
+            {...TOOLTIP_PROPS}>
+            <div>
+              <Pill label={deletedCountStr} icon="delete" color="red" />
+            </div>
+          </Tooltip>
+        </div>
+        <Button
+          title="Cancel"
+          tooltip="Cancel"
+          variant="secondary"
+          size="medium"
+          icon="close"
+          onClick={handleCancelClick}>
+          Cancel
+        </Button>
+        <Button
+          title="Publish"
+          tooltip="Publish"
+          size="medium"
+          variant="primary"
+          icon="checkmark"
+          onClick={handlePublish}
+          disabled={
+            editCountStr === '0' &&
+            deletedCountStr === '0' &&
+            addedCountStr === '0'
+          }>
+          Publish
+        </Button>
+      </div>
+    );
+  };
+
   return (
     <SimplePageLayoutWithHeader
       title={
@@ -78,56 +231,69 @@ export const DatasetVersionPage: React.FC<{
       }
       headerContent={
         <Tailwind>
-          <div className="grid w-full grid-flow-col grid-cols-[auto_auto_auto_1fr] gap-[16px] text-[14px]">
-            <div className="block">
-              <p className="text-moon-500">Name</p>
-              <ObjectVersionsLink
-                entity={entityName}
-                project={projectName}
-                filter={{objectName}}
-                versionCount={objectVersionCount}
-                neverPeek
-                variant="secondary">
-                <div className="group flex items-center font-semibold">
-                  <span>{objectName}</span>
-                  {objectVersions.loading ? (
-                    <LoadingDots />
-                  ) : (
-                    <span className="ml-[4px]">
-                      ({objectVersionCount} version
-                      {objectVersionCount !== 1 ? 's' : ''})
-                    </span>
-                  )}
-                  <Icon
-                    name="forward-next"
-                    width={16}
-                    height={16}
-                    className="ml-[2px] opacity-0 group-hover:opacity-100"
-                  />
-                </div>
-              </ObjectVersionsLink>
-            </div>
-            <div className="block">
-              <p className="text-moon-500">Version</p>
-              <p>{objectVersionIndex}</p>
-            </div>
-            <div className="block">
-              <p className="text-moon-500">Created</p>
-              <p>
-                <Timestamp value={createdAtMs / 1000} format="relative" />
-              </p>
-            </div>
-            {objectVersion.userId && (
+          <div className="flex justify-between">
+            <div className="grid auto-cols-max grid-flow-col gap-[16px] text-[14px]">
               <div className="block">
-                <p className="text-moon-500">Created by</p>
-                <UserLink userId={objectVersion.userId} includeName />
+                <p className="text-moon-500">Name</p>
+                <ObjectVersionsLink
+                  entity={entityName}
+                  project={projectName}
+                  filter={{objectName}}
+                  versionCount={objectVersionCount}
+                  neverPeek
+                  variant="secondary">
+                  <div className="group flex items-center font-semibold">
+                    <span>{objectName}</span>
+                    {objectVersions.loading ? (
+                      <LoadingDots />
+                    ) : (
+                      <span className="ml-[4px]">
+                        ({maybePluralize(objectVersionCount, 'version')})
+                      </span>
+                    )}
+                    <Icon
+                      name="forward-next"
+                      width={16}
+                      height={16}
+                      className="ml-[2px] opacity-0 group-hover:opacity-100"
+                    />
+                  </div>
+                </ObjectVersionsLink>
               </div>
-            )}
-            {showDeleteButton && (
-              <div className="ml-auto mr-0">
-                <DeleteObjectButtonWithModal objVersionSchema={objectVersion} />
+              <div className="block">
+                <p className="text-moon-500">Version</p>
+                <p>{objectVersionIndex}</p>
+              </div>
+              <div className="block">
+                <p className="text-moon-500">Created</p>
+                <p>
+                  <Timestamp value={createdAtMs / 1000} format="relative" />
+                </p>
               </div>
-            )}
+            </div>
+            <div className="ml-auto mr-0">
+              {isEditing ? (
+                renderEditingControls()
+              ) : (
+                <Button
+                  title="Edit dataset"
+                  tooltip="Edit dataset"
+                  variant="ghost"
+                  size="medium"
+                  icon="pencil-edit"
+                  onClick={handleEditClick}
+                />
+              )}
+              {objectVersion.userId && (
+                <div className="block">
+                  <p className="text-moon-500">Created by</p>
+                  <UserLink userId={objectVersion.userId} includeName />
+                </div>
+              )}
+              {showDeleteButton && !isEditing && (
+                <DeleteObjectButtonWithModal objVersionSchema={objectVersion} />
+              )}
+            </div>
           </div>
         </Tailwind>
       }
@@ -136,22 +302,16 @@ export const DatasetVersionPage: React.FC<{
           label: 'Rows',
           content: (
             <ScrollableTabContent sx={{p: 0}}>
-              <Box
-                sx={{
-                  flex: '0 0 auto',
-                  height: '100%',
-                }}>
+              <Box sx={{flex: '0 0 auto', height: '100%'}}>
                 {data.loading ? (
                   <CenteredAnimatedLoader />
                 ) : (
                   <WeaveCHTableSourceRefContext.Provider value={refUri}>
                     <CustomWeaveTypeProjectContext.Provider
                       value={{entity: entityName, project: projectName}}>
-                      <ObjectViewerSection
-                        title=""
-                        data={viewerDataAsObject}
-                        noHide
-                        isExpanded
+                      <EditableDatasetView
+                        isEditing={isEditing}
+                        datasetObject={objectVersion.val}
                       />
                     </CustomWeaveTypeProjectContext.Provider>
                   </WeaveCHTableSourceRefContext.Provider>
diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/datasets/EditPopover.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/datasets/EditPopover.tsx
new file mode 100644
index 000000000000..3cf6596398d7
--- /dev/null
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/datasets/EditPopover.tsx
@@ -0,0 +1,165 @@
+import {Box, Popover} from '@mui/material';
+import {Button} from '@wandb/weave/components/Button';
+import React from 'react';
+import {ResizableBox} from 'react-resizable';
+
+import {DraggableGrow, DraggableHandle} from '../../../../DraggablePopups';
+
+export type EditorMode = 'text' | 'code' | 'diff';
+
+interface EditPopoverProps {
+  anchorEl: HTMLElement | null;
+  onClose: () => void;
+  initialWidth?: number;
+  initialHeight?: number;
+  editorMode: EditorMode;
+  setEditorMode: (mode: EditorMode) => void;
+  onRevert?: () => void;
+  children: React.ReactNode;
+}
+
+export const EditPopover: React.FC<EditPopoverProps> = ({
+  anchorEl,
+  onClose,
+  initialWidth = 400,
+  initialHeight = 300,
+  editorMode,
+  setEditorMode,
+  onRevert,
+  children,
+}) => {
+  const [position, setPosition] = React.useState<{
+    top: number;
+    left: number;
+  } | null>(null);
+
+  React.useLayoutEffect(() => {
+    if (anchorEl) {
+      const rect = anchorEl.getBoundingClientRect();
+      const isInTopHalf = rect.top < window.innerHeight / 2;
+
+      setPosition({
+        left: rect.left + window.scrollX,
+        top: isInTopHalf
+          ? rect.bottom + window.scrollY // Position below for top half
+          : rect.top + window.scrollY - initialHeight, // Position above for bottom half
+      });
+    } else {
+      setPosition(null);
+    }
+  }, [anchorEl, initialHeight]);
+
+  if (!position) {
+    return null;
+  }
+
+  return (
+    <Popover
+      open={!!anchorEl}
+      anchorReference="anchorPosition"
+      anchorPosition={position}
+      transformOrigin={{
+        vertical: 'top',
+        horizontal: 'left',
+      }}
+      onClose={onClose}
+      TransitionComponent={DraggableGrow}
+      sx={{
+        '& .MuiPaper-root': {
+          backgroundColor: 'white',
+          boxShadow:
+            '0px 4px 20px rgba(0, 0, 0, 0.15), 0px 0px 40px rgba(0, 0, 0, 0.05)',
+          border: '1px solid rgba(0, 0, 0, 0.2)',
+          borderRadius: '4px',
+          overflow: 'hidden',
+          padding: '0px',
+        },
+      }}>
+      <ResizableBox
+        width={initialWidth}
+        height={initialHeight}
+        resizeHandles={['se']}
+        handle={
+          <div
+            className="react-resizable-handle react-resizable-handle-se"
+            style={{
+              position: 'absolute',
+              right: 0,
+              bottom: 0,
+              width: '20px',
+              height: '20px',
+              cursor: 'se-resize',
+              zIndex: 1000,
+            }}
+          />
+        }>
+        <Box
+          sx={{
+            height: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            position: 'relative',
+            '& .monaco-editor, & .monaco-diff-editor': {
+              position: 'relative',
+              zIndex: 1,
+            },
+          }}>
+          <DraggableHandle>
+            <Box
+              sx={{
+                cursor: 'grab',
+                backgroundColor: 'white',
+                display: 'flex',
+                justifyContent: 'space-between',
+                padding: '8px',
+                borderBottom: '1px solid rgba(0, 0, 0, 0.05)',
+              }}>
+              <Box>
+                <Button
+                  tooltip="Text mode"
+                  icon="text-language"
+                  size="small"
+                  variant={editorMode === 'text' ? 'secondary' : 'ghost'}
+                  onClick={() => setEditorMode('text')}
+                />
+                <Button
+                  tooltip="Code mode"
+                  icon="code-alt"
+                  size="small"
+                  variant={editorMode === 'code' ? 'secondary' : 'ghost'}
+                  onClick={() => setEditorMode('code')}
+                />
+                <Button
+                  tooltip="Diff mode"
+                  icon="diff"
+                  size="small"
+                  variant={editorMode === 'diff' ? 'secondary' : 'ghost'}
+                  onClick={() => setEditorMode('diff')}
+                />
+              </Box>
+              {onRevert && (
+                <Box>
+                  <Button
+                    tooltip="Revert"
+                    icon="undo"
+                    size="small"
+                    variant="ghost"
+                    onClick={onRevert}
+                  />
+                </Box>
+              )}
+            </Box>
+          </DraggableHandle>
+          <Box
+            sx={{
+              flex: 1,
+              overflow: 'auto',
+              padding: editorMode === 'text' ? '12px' : '0px',
+            }}>
+            {children}
+          </Box>
+        </Box>
+      </ResizableBox>
+    </Popover>
+  );
+};
diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/datasets/EditableDatasetView.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/datasets/EditableDatasetView.tsx
new file mode 100644
index 000000000000..cb03b3c1d1f4
--- /dev/null
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/datasets/EditableDatasetView.tsx
@@ -0,0 +1,600 @@
+import {Box} from '@mui/material';
+import {
+  GridColDef,
+  GridFooterContainer,
+  GridPagination,
+  GridPaginationModel,
+  GridRenderCellParams,
+  GridRenderEditCellParams,
+  GridRowModel,
+  GridSortModel,
+  useGridApiRef,
+} from '@mui/x-data-grid-pro';
+import {A} from '@wandb/weave/common/util/links';
+import {Button} from '@wandb/weave/components/Button';
+import {RowId} from '@wandb/weave/components/PagePanelComponents/Home/Browse3/pages/CallPage/DataTableView';
+import {Tooltip} from '@wandb/weave/components/Tooltip';
+import get from 'lodash/get';
+import React, {
+  FC,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+import {useHistory} from 'react-router-dom';
+import {v4 as uuidv4} from 'uuid';
+
+import {isWeaveObjectRef, parseRef, parseRefMaybe} from '../../../../../react';
+import {flattenObjectPreservingWeaveTypes} from '../../Browse2/browse2Util';
+import {CellValue} from '../../Browse2/CellValue';
+import {useWeaveflowCurrentRouteContext} from '../context';
+import {WeaveCHTableSourceRefContext} from '../pages/CallPage/DataTableView';
+import {TABLE_ID_EDGE_NAME} from '../pages/wfReactInterface/constants';
+import {useWFHooks} from '../pages/wfReactInterface/context';
+import {SortBy} from '../pages/wfReactInterface/traceServerClientTypes';
+import {StyledDataGrid} from '../StyledDataGrid';
+import {
+  CELL_COLORS,
+  CellEditingRenderer,
+  CellViewingRenderer,
+  ControlCell,
+  DELETED_CELL_STYLES,
+} from './CellRenderers';
+import {useDatasetEditContext} from './DatasetEditorContext';
+
+const ADDED_ROW_ID_PREFIX = 'new-';
+
+// Dataset object schema as it is stored in the database.
+interface DatasetObjectVal {
+  _type: 'Dataset';
+  name: string | null;
+  description: string | null;
+  rows: string;
+  _class_name: 'Dataset';
+  _bases: ['Object', 'BaseModel'];
+}
+
+interface EditableDataTableViewProps {
+  datasetObject: DatasetObjectVal;
+  isEditing: boolean;
+}
+
+interface OrderedRow {
+  ___weave: any;
+  [key: string]: any;
+}
+
+export const EditableDatasetView: FC<EditableDataTableViewProps> = ({
+  datasetObject,
+  isEditing,
+}) => {
+  const {useTableRowsQuery, useTableQueryStats} = useWFHooks();
+  const [sortBy, setSortBy] = useState<SortBy[]>([]);
+  const [sortModel, setSortModel] = useState<GridSortModel>([]);
+  const [columnWidths, setColumnWidths] = useState<{[key: string]: number}>({});
+  const apiRef = useGridApiRef();
+
+  const onSortModelChange = useCallback((model: GridSortModel) => {
+    setSortBy(
+      model.map(sort => ({
+        field: sort.field,
+        direction: sort.sort === 'asc' ? 'asc' : 'desc',
+      }))
+    );
+    setSortModel(model);
+  }, []);
+
+  const {
+    editedRows,
+    getEditedFields,
+    deletedRows,
+    setDeletedRows,
+    setAddedRows,
+    addedRows,
+  } = useDatasetEditContext();
+
+  const [paginationModel, setPaginationModel] = useState<GridPaginationModel>({
+    page: 0,
+    pageSize: 50,
+  });
+
+  // Reset sort model and pagination if we enter edit mode with sorting applied.
+  useEffect(() => {
+    if (isEditing && sortModel.length > 0) {
+      setPaginationModel({page: 0, pageSize: 50});
+      setSortModel([]);
+      setSortBy([]);
+    }
+  }, [isEditing, sortModel]);
+
+  const sharedRef = useContext(WeaveCHTableSourceRefContext);
+
+  const history = useHistory();
+  const router = useWeaveflowCurrentRouteContext();
+  const onClick = useCallback(
+    val => {
+      const ref = parseRef(sharedRef!);
+      if (isWeaveObjectRef(ref)) {
+        const digest = val.split('_')[0];
+        const extra = 'attr/rows/' + TABLE_ID_EDGE_NAME + '/' + digest;
+
+        const target = router.objectVersionUIUrl(
+          ref.entityName,
+          ref.projectName,
+          ref.artifactName,
+          ref.artifactVersion,
+          'obj',
+          extra
+        );
+        history.push(target);
+      }
+    },
+    [history, router, sharedRef]
+  );
+
+  const [initialFields, setInitialFields] = useState<string[]>([]);
+
+  const parsedRef = useMemo(
+    () => parseRefMaybe(datasetObject.rows),
+    [datasetObject.rows]
+  );
+
+  const lookupKey = useMemo(() => {
+    if (
+      parsedRef == null ||
+      !isWeaveObjectRef(parsedRef) ||
+      parsedRef.weaveKind !== 'table'
+    ) {
+      return null;
+    }
+    return {
+      entity: parsedRef.entityName,
+      project: parsedRef.projectName,
+      digest: parsedRef.artifactVersion,
+    };
+  }, [parsedRef]);
+
+  const numRowsQuery = useTableQueryStats(
+    lookupKey?.entity ?? '',
+    lookupKey?.project ?? '',
+    lookupKey?.digest ?? '',
+    {skip: lookupKey == null}
+  );
+
+  const numAddedRows = useMemo(
+    () => Array.from(addedRows.values()).length,
+    [addedRows]
+  );
+
+  const {numRowsToFetch, offset} = useMemo(() => {
+    const rowsToFetch =
+      numAddedRows <= paginationModel.page * paginationModel.pageSize
+        ? paginationModel.pageSize
+        : numAddedRows > (paginationModel.page + 1) * paginationModel.pageSize
+        ? 0
+        : paginationModel.pageSize - (numAddedRows % paginationModel.pageSize);
+
+    const offsetVal =
+      paginationModel.page * paginationModel.pageSize <= numAddedRows
+        ? 0
+        : paginationModel.page * paginationModel.pageSize - numAddedRows;
+
+    return {numRowsToFetch: rowsToFetch, offset: offsetVal};
+  }, [paginationModel, numAddedRows]);
+
+  const fetchQuery = useTableRowsQuery(
+    lookupKey?.entity ?? '',
+    lookupKey?.project ?? '',
+    lookupKey?.digest ?? '',
+    undefined,
+    numRowsToFetch,
+    offset,
+    sortBy,
+    {skip: lookupKey == null}
+  );
+
+  const [loadedRows, setLoadedRows] = useState<Array<{[key: string]: any}>>([]);
+  const [fetchQueryLoaded, setFetchQueryLoaded] = useState(false);
+
+  useEffect(() => {
+    if (!fetchQuery.loading) {
+      if (fetchQuery.result) {
+        setLoadedRows(fetchQuery.result.rows);
+      }
+      setFetchQueryLoaded(true);
+    }
+  }, [fetchQuery.loading, fetchQuery.result]);
+
+  const restoreRow = useCallback(
+    (absoluteIndex: number) => {
+      setDeletedRows(prev => prev.filter(index => index !== absoluteIndex));
+    },
+    [setDeletedRows]
+  );
+
+  const deleteRow = useCallback(
+    (absoluteIndex: number) => {
+      const rowKey = `${ADDED_ROW_ID_PREFIX}${absoluteIndex}`;
+      if (addedRows.has(rowKey)) {
+        setAddedRows(prev => {
+          const updatedMap = new Map(prev);
+          updatedMap.delete(rowKey);
+          return updatedMap;
+        });
+      } else {
+        setDeletedRows(prev => [...prev, absoluteIndex]);
+      }
+    },
+    [setDeletedRows, setAddedRows, addedRows]
+  );
+
+  const deleteAddedRow = useCallback(
+    (rowId: string) => {
+      setAddedRows(prev => {
+        const updatedMap = new Map(prev);
+        updatedMap.delete(rowId);
+        return updatedMap;
+      });
+    },
+    [setAddedRows]
+  );
+
+  const handleAddRowsClick = useCallback(() => {
+    setPaginationModel(prev => ({...prev, page: 0}));
+    setAddedRows(prev => {
+      const updatedMap = new Map(prev);
+      const newId = `${ADDED_ROW_ID_PREFIX}${uuidv4()}`;
+      const newRow = {
+        ___weave: {
+          id: newId,
+          isNew: true,
+        },
+        ...Object.fromEntries(initialFields.map(field => [field, ''])),
+      };
+      updatedMap.set(newId, newRow);
+
+      // Wait for the next tick to ensure the row is added and grid is updated
+      setTimeout(() => {
+        const firstField = initialFields[0];
+        if (firstField) {
+          apiRef.current.scrollToIndexes({rowIndex: numAddedRows});
+        }
+      }, 0);
+
+      return updatedMap;
+    });
+  }, [setAddedRows, initialFields, apiRef, numAddedRows]);
+
+  const rows = useMemo(() => {
+    if (fetchQueryLoaded) {
+      return loadedRows.map((row, i) => {
+        const digest = row.digest;
+        const absoluteIndex =
+          i + paginationModel.pageSize * paginationModel.page;
+        const value = flattenObjectPreservingWeaveTypes(row.val);
+        const editedRow = editedRows.get(absoluteIndex);
+        return {
+          ___weave: {
+            id: `${digest}_${absoluteIndex}`,
+            index: absoluteIndex,
+            isNew: false,
+            serverValue: value,
+          },
+          ...(editedRow ? {...value, ...editedRow} : value),
+        };
+      });
+    }
+    return [];
+  }, [loadedRows, fetchQueryLoaded, editedRows, paginationModel]);
+
+  const combinedRows = useMemo(() => {
+    if (
+      !isEditing ||
+      numAddedRows <= paginationModel.page * paginationModel.pageSize
+    ) {
+      return rows;
+    }
+    const startIndex = paginationModel.page * paginationModel.pageSize;
+    const endIndex = startIndex + paginationModel.pageSize;
+    const displayedAddedRows = Array.from(addedRows.values()).slice(
+      startIndex,
+      endIndex
+    );
+    return [...displayedAddedRows, ...rows];
+  }, [rows, addedRows, numAddedRows, paginationModel, isEditing]);
+
+  const preserveFieldOrder = useCallback(
+    (row: OrderedRow): OrderedRow => {
+      const orderedRow: OrderedRow = {___weave: row.___weave};
+      initialFields.forEach(field => {
+        orderedRow[field] = row[field] !== undefined ? row[field] : '';
+      });
+      return orderedRow;
+    },
+    [initialFields]
+  );
+
+  const columns = useMemo(() => {
+    const allFields = combinedRows.reduce((acc, row) => {
+      Object.keys(row)
+        .filter(key => key !== '___weave')
+        .forEach(key => acc.add(key));
+      return acc;
+    }, new Set<string>());
+
+    if (initialFields.length === 0 && allFields.size > 0) {
+      setInitialFields(Array.from(allFields));
+    }
+
+    const baseColumns: GridColDef[] = [
+      {
+        field: '_row_click',
+        headerName: 'id',
+        sortable: false,
+        disableColumnMenu: true,
+        width: columnWidths._row_click ?? 50,
+        minWidth: 50,
+        maxWidth: 50,
+        renderCell: params => {
+          const rowId = params.id as string;
+          const digestStr = rowId.split('_')[0];
+          const rowLabel = digestStr ? digestStr.slice(-4) : rowId;
+          const rowSpan = (
+            <Tooltip trigger={<RowId>{rowLabel}</RowId>} content={digestStr} />
+          );
+          return (
+            <Box
+              sx={{
+                height: '100%',
+                width: '100%',
+                padding: '8px',
+                display: 'flex',
+                alignItems: 'center',
+                opacity: deletedRows.includes(params.row.___weave?.index)
+                  ? DELETED_CELL_STYLES.opacity
+                  : 1,
+                textDecoration: deletedRows.includes(params.row.___weave?.index)
+                  ? DELETED_CELL_STYLES.textDecoration
+                  : 'none',
+                backgroundColor: deletedRows.includes(
+                  params.row.___weave?.index
+                )
+                  ? CELL_COLORS.DELETED
+                  : params.row.___weave?.isNew
+                  ? CELL_COLORS.NEW
+                  : CELL_COLORS.TRANSPARENT,
+              }}>
+              {!params.row.___weave?.isNew ? (
+                <A onClick={() => onClick(rowId)}>{rowSpan}</A>
+              ) : null}
+            </Box>
+          );
+        },
+      },
+      ...(isEditing
+        ? [
+            {
+              field: 'controls',
+              headerName: '',
+              width: columnWidths.controls ?? 48,
+              sortable: false,
+              filterable: false,
+              editable: false,
+              renderCell: (params: GridRenderCellParams) => (
+                <ControlCell
+                  params={params}
+                  deleteRow={deleteRow}
+                  deleteAddedRow={deleteAddedRow}
+                  restoreRow={restoreRow}
+                  isDeleted={deletedRows.includes(params.row.___weave?.index)}
+                  isNew={params.row.___weave?.isNew}
+                />
+              ),
+            },
+          ]
+        : []),
+    ];
+
+    const fieldColumns: GridColDef[] = Array.from(allFields).map(field => ({
+      field: field as string,
+      headerName: field as string,
+      width: columnWidths[field as string] ?? undefined,
+      flex: columnWidths[field as string] ? undefined : 1,
+      minWidth: 100,
+      editable: isEditing,
+      sortable: !isEditing,
+      filterable: false,
+      renderCell: (params: GridRenderCellParams) => {
+        if (!isEditing) {
+          return (
+            <Box sx={{marginLeft: '8px'}}>
+              <CellValue value={params.value} />
+            </Box>
+          );
+        }
+        const rowIndex = params.row.___weave?.index;
+
+        const editedFields =
+          rowIndex != null && !params.row.___weave?.isNew
+            ? getEditedFields(rowIndex)
+            : {};
+        return (
+          <CellViewingRenderer
+            {...params}
+            isEdited={editedFields[field as string] !== undefined}
+            isDeleted={deletedRows.includes(params.row.___weave?.index)}
+            isNew={params.row.___weave?.isNew}
+            serverValue={get(
+              loadedRows[rowIndex - offset]?.val ?? {},
+              field as string
+            )}
+          />
+        );
+      },
+      renderEditCell: (params: GridRenderEditCellParams) => {
+        const rowIndex = params.row.___weave?.index;
+        const serverValue =
+          rowIndex != null && !params.row.___weave?.isNew
+            ? get(loadedRows[rowIndex - offset]?.val ?? {}, params.field)
+            : '';
+        return (
+          <CellEditingRenderer
+            {...params}
+            serverValue={serverValue}
+            preserveFieldOrder={preserveFieldOrder}
+          />
+        );
+      },
+    }));
+
+    return [...baseColumns, ...fieldColumns];
+  }, [
+    combinedRows,
+    getEditedFields,
+    deleteRow,
+    restoreRow,
+    deletedRows,
+    deleteAddedRow,
+    initialFields,
+    isEditing,
+    onClick,
+    offset,
+    loadedRows,
+    columnWidths,
+    preserveFieldOrder,
+  ]);
+
+  const handleColumnWidthChange = useCallback((params: any) => {
+    setColumnWidths(prev => ({
+      ...prev,
+      [params.colDef.field]: params.width,
+    }));
+  }, []);
+
+  const CustomFooter = useCallback(() => {
+    return (
+      <GridFooterContainer>
+        {isEditing && (
+          <Box
+            sx={{
+              padding: '8px 16px',
+              display: 'flex',
+              justifyContent: 'flex-start',
+              alignItems: 'center',
+              flex: 1,
+            }}>
+            <Button
+              icon="add-new"
+              onClick={handleAddRowsClick}
+              variant="secondary"
+              size="small"
+              tooltip="Add row">
+              Add row
+            </Button>
+          </Box>
+        )}
+        <Box
+          sx={{
+            padding: '0 8px',
+          }}>
+          <GridPagination />
+        </Box>
+      </GridFooterContainer>
+    );
+  }, [isEditing, handleAddRowsClick]);
+
+  return (
+    <div style={{display: 'flex', flexDirection: 'column', height: '100%'}}>
+      <StyledDataGrid
+        apiRef={apiRef}
+        initialState={{
+          pinnedColumns: {
+            right: ['controls'],
+          },
+          columns: {
+            columnVisibilityModel: {},
+            orderedFields: columns.map(col => col.field),
+          },
+        }}
+        onColumnWidthChange={handleColumnWidthChange}
+        columnBufferPx={50}
+        autoHeight={false}
+        disableColumnMenu={true}
+        density="compact"
+        rows={combinedRows}
+        columns={columns}
+        sortingMode="server"
+        sortModel={sortModel}
+        onSortModelChange={onSortModelChange}
+        editMode="cell"
+        pagination
+        paginationMode="server"
+        paginationModel={paginationModel}
+        onPaginationModelChange={setPaginationModel}
+        rowCount={
+          (numRowsQuery.result?.count ?? 0) + (isEditing ? numAddedRows : 0)
+        }
+        disableMultipleColumnsSorting
+        loading={!fetchQueryLoaded}
+        disableRowSelectionOnClick
+        keepBorders={false}
+        pageSizeOptions={[50]}
+        slots={{
+          footer: isEditing ? CustomFooter : undefined,
+        }}
+        sx={{
+          border: 'none',
+          flex: 1,
+          height: '100%',
+          '& .MuiDataGrid-cell': {
+            padding: '0',
+          },
+          '& .MuiDataGrid-columnHeaders': {
+            borderBottom: '1px solid rgba(224, 224, 224, 1)',
+            marginBottom: '-1px', // offset the border
+          },
+          '& .MuiDataGrid-cell[data-field="controls"]': {
+            borderLeft: 'none',
+            boxShadow: 'none',
+            '&:focus, &:focus-within': {
+              outline: 'none',
+            },
+            '&:hover': {
+              backgroundColor: 'transparent',
+            },
+            '&.MuiDataGrid-cell--editing': {
+              backgroundColor: 'transparent',
+              boxShadow: 'none',
+            },
+            '&.Mui-selected, &.Mui-selected:hover, &.Mui-selected:focus': {
+              backgroundColor: 'transparent',
+              boxShadow: 'none',
+            },
+          },
+          '& .MuiDataGrid-columnHeader[data-field="controls"]': {
+            borderLeft: 'none',
+            boxShadow: 'none',
+            border: 'none',
+            '&:focus, &:focus-within': {
+              outline: 'none',
+            },
+          },
+          '& .MuiDataGrid-footerContainer': {
+            backgroundColor: 'white',
+            border: 'none',
+            borderTop: '1px solid rgba(224, 224, 224, 1)',
+          },
+          '& .MuiDataGrid-columnSeparator': {
+            visibility: 'visible',
+          },
+          '& .MuiDataGrid-filler--pinnedRight': {
+            borderLeft: 'none',
+          },
+        }}
+        getRowId={(row: GridRowModel) => row.___weave?.id ?? row.id}
+      />
+    </div>
+  );
+};
diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/datasets/editors/CodeEditor.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/datasets/editors/CodeEditor.tsx
new file mode 100644
index 000000000000..df4776ae0180
--- /dev/null
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/datasets/editors/CodeEditor.tsx
@@ -0,0 +1,85 @@
+import {Editor} from '@monaco-editor/react';
+import {Box} from '@mui/material';
+import React from 'react';
+
+interface CodeEditorProps {
+  value: string;
+  onChange: (value: string) => void;
+  onClose: () => void;
+}
+
+export const CodeEditor: React.FC<CodeEditorProps> = ({
+  value,
+  onChange,
+  onClose,
+}) => {
+  return (
+    <Box
+      sx={
+        {
+          height: '100%',
+          width: '100%',
+          '& .monaco-editor': {
+            border: 'none !important',
+            outline: 'none !important',
+          },
+          '& .monaco-editor .overflow-guard': {
+            width: '100% !important',
+            height: '100% !important',
+          },
+          '& .monaco-scrollable-element': {
+            width: '100% !important',
+            height: '100% !important',
+          },
+        } as const
+      }>
+      <Editor
+        height="100%"
+        width="100%"
+        defaultValue={value}
+        onChange={newValue => onChange(newValue ?? '')}
+        onMount={(editor, monacoInstance) => {
+          editor.addAction({
+            id: 'closeEditor',
+            label: 'Close Editor',
+            keybindings: [
+              monacoInstance.KeyMod.CtrlCmd + monacoInstance.KeyCode.Enter,
+            ],
+            run: () => {
+              onClose();
+            },
+          });
+          const disposable = editor.onKeyDown(e => {
+            if (e.browserEvent.key === 'Enter' && !e.browserEvent.metaKey) {
+              e.browserEvent.preventDefault();
+              e.browserEvent.stopPropagation();
+              editor.trigger('keyboard', 'type', {text: '\n'});
+            }
+          });
+
+          editor.onDidDispose(() => {
+            disposable.dispose();
+          });
+        }}
+        options={{
+          minimap: {enabled: false},
+          scrollBeyondLastLine: true,
+          fontSize: 12,
+          fontFamily: 'monospace',
+          lineNumbers: 'on',
+          folding: false,
+          automaticLayout: true,
+          padding: {top: 12, bottom: 12},
+          fixedOverflowWidgets: true,
+          wordWrap: 'off',
+          scrollbar: {
+            horizontal: 'auto',
+            useShadows: false,
+            verticalScrollbarSize: 10,
+            horizontalScrollbarSize: 10,
+          },
+        }}
+      />
+    </Box>
+  );
+};
diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/datasets/editors/DiffEditor.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/datasets/editors/DiffEditor.tsx
new file mode 100644
index 000000000000..559754b5308d
--- /dev/null
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/datasets/editors/DiffEditor.tsx
@@ -0,0 +1,97 @@
+import {DiffEditor as MonacoDiffEditor} from '@monaco-editor/react';
+import {Box} from '@mui/material';
+import type {editor as monacoEditor} from 'monaco-editor';
+import React from 'react';
+
+interface DiffEditorProps {
+  value: string;
+  originalValue: string;
+  onChange: (value: string) => void;
+  onClose: () => void;
+}
+
+export const DiffEditor: React.FC<DiffEditorProps> = ({
+  value,
+  originalValue,
+  onChange,
+  onClose,
+}) => {
+  return (
+    <Box
+      sx={
+        {
+          height: '100%',
+          width: '100%',
+          '& .monaco-editor': {
+            border: 'none !important',
+            outline: 'none !important',
+          },
+          '& .monaco-editor .overflow-guard': {
+            width: '100% !important',
+            height: '100% !important',
+          },
+          '& .monaco-scrollable-element': {
+            width: '100% !important',
+            height: '100% !important',
+          },
+        } as const
+      }>
+      <MonacoDiffEditor
+        height="100%"
+        original={originalValue}
+        modified={value}
+        onMount={(editor: monacoEditor.IStandaloneDiffEditor, monaco) => {
+          const modifiedEditor = editor.getModifiedEditor();
+          modifiedEditor.addAction({
+            id: 'closeEditor',
+            label: 'Close Editor',
+            keybindings: [monaco.KeyMod.CtrlCmd + monaco.KeyCode.Enter],
+            run: () => {
+              onClose();
+            },
+          });
+
+          const keyDisposable = modifiedEditor.onKeyDown(e => {
+            if (e.browserEvent.key === 'Enter' && !e.browserEvent.metaKey) {
+              e.browserEvent.preventDefault();
+              e.browserEvent.stopPropagation();
+              modifiedEditor.trigger('keyboard', 'type', {text: '\n'});
+            }
+          });
+
+          const changeDisposable = modifiedEditor.onDidChangeModelContent(
+            () => {
+              const model = modifiedEditor.getModel();
+              if (model) {
+                onChange(model.getValue());
+              }
+            }
+          );
+
+          modifiedEditor.onDidDispose(() => {
+            keyDisposable.dispose();
+            changeDisposable.dispose();
+          });
+        }}
+        options={{
+          minimap: {enabled: false},
+          scrollBeyondLastLine: true,
+          fontSize: 12,
+          fontFamily: 'monospace',
+          lineNumbers: 'on',
+          folding: false,
+          automaticLayout: true,
+          padding: {top: 12, bottom: 12},
+          fixedOverflowWidgets: true,
+          wordWrap: 'off',
+          scrollbar: {
+            horizontal: 'auto',
+            useShadows: false,
+            verticalScrollbarSize: 10,
+            horizontalScrollbarSize: 10,
+          },
+        }}
+      />
+    </Box>
+  );
+};
diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/datasets/editors/TextEditor.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/datasets/editors/TextEditor.tsx
new file mode 100644
index 000000000000..8b2aaa76f3fd
--- /dev/null
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/datasets/editors/TextEditor.tsx
@@ -0,0 +1,59 @@
+import {TextField} from '@mui/material';
+import React from 'react';
+
+interface TextEditorProps {
+  value: string;
+  onChange: (value: string) => void;
+  onClose: () => void;
+  inputRef?: React.RefObject<HTMLTextAreaElement>;
+}
+
+export const TextEditor: React.FC<TextEditorProps> = ({
+  value,
+  onChange,
+  onClose,
+  inputRef,
+}) => {
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key === 'Enter' && !event.metaKey) {
+      event.stopPropagation();
+    } else if (event.key === 'Enter' && event.metaKey) {
+      onClose();
+    }
+  };
+
+  return (
+    <TextField
+      inputRef={inputRef}
+      value={value}
+      onChange={e => onChange(e.target.value)}
+      onKeyDown={handleKeyDown}
+      onFocus={e => {
+        const target = e.target as HTMLTextAreaElement;
+        target.setSelectionRange(0, target.value.length);
+      }}
+      fullWidth
+      multiline
+      autoFocus
+      sx={{
+        width: '100%',
+        '& .MuiInputBase-root': {
+          fontFamily: '"Source Sans Pro", sans-serif',
+          fontSize: '14px',
+          border: 'none',
+          backgroundColor: 'white',
+        },
+        '& .MuiInputBase-input': {
+          padding: '0px',
+        },
+        '& .MuiOutlinedInput-notchedOutline': {
+          border: 'none',
+        },
+        '& textarea': {
+          overflow: 'hidden !important',
+          resize: 'none',
+        },
+      }}
+    />
+  );
+};
diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallPage/DataTableView.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallPage/DataTableView.tsx
index 800b6a0fdf2b..ac8f56a05c46 100644
--- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallPage/DataTableView.tsx
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallPage/DataTableView.tsx
@@ -48,7 +48,7 @@ import {TABLE_ID_EDGE_NAME} from '../wfReactInterface/constants';
 import {useWFHooks} from '../wfReactInterface/context';
 import {SortBy} from '../wfReactInterface/traceServerClientTypes';
 
-const RowId = styled.span`
+export const RowId = styled.span`
   font-family: 'Inconsolata', monospace;
 `;
 RowId.displayName = 'S.RowId';
@@ -238,7 +238,7 @@ export const WeaveCHTable: FC<{
   );
 };
 
-type DataTableServerSidePaginationControls = {
+export type DataTableServerSidePaginationControls = {
   paginationModel: GridPaginationModel;
   onPaginationModelChange: (model: GridPaginationModel) => void;
   totalRows: number;
diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ObjectsPage/ObjectVersionPage.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ObjectsPage/ObjectVersionPage.tsx
index be9cc8e69e77..eddb23998aa9 100644
--- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ObjectsPage/ObjectVersionPage.tsx
+++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/ObjectsPage/ObjectVersionPage.tsx
@@ -9,6 +9,7 @@ import {LoadingDots} from '../../../../../LoadingDots';
 import {Tailwind} from '../../../../../Tailwind';
 import {Timestamp} from '../../../../../Timestamp';
 import {Tooltip} from '../../../../../Tooltip';
+import {DatasetEditProvider} from '../../datasets/DatasetEditorContext';
 import {DatasetVersionPage} from '../../datasets/DatasetVersionPage';
 import {NotFoundPanel} from '../../NotFoundPanel';
 import {CustomWeaveTypeProjectContext} from '../../typeViews/CustomWeaveTypeDispatcher';
@@ -211,10 +212,12 @@ const ObjectVersionPageInner: React.FC<{
 
   if (isDataset) {
     return (
-      <DatasetVersionPage
-        objectVersion={objectVersion}
-        showDeleteButton={showDeleteButton}
-      />
+      <DatasetEditProvider>
+        <DatasetVersionPage
+          objectVersion={objectVersion}
+          showDeleteButton={showDeleteButton}
+        />
+      </DatasetEditProvider>
     );
   }