[Refactor] BaseSimpleTable wraps RenderTable for optional editing and validation

[Copilot]

• Understand current BaseSimpleTable and RenderTable implementations
• Refactor BaseSimpleTable.vue to wrap RenderTable internally
• Simplified: Always use RenderTable internally (removed conditional logic)
• Simplified: Removed tableJSON prop - use data prop consistently
• Pass editable prop directly to RenderTable
• Removed unneeded emits - kept only essential: table-built, row-click, cell-edited, updateValidValues
• Added validators prop for custom validators (like unique)
• Preserve backward compatibility for all existing usages
• Updated tests (15 tests passing)
• All frontend tests pass (72 test suites, 723 tests)
• Build passes successfully

Summary of Changes

Props (BaseSimpleTable.vue)

• data: Array - Table data rows
• columns: Array - Column definitions with field and title
• options: Object - Additional options (kept for compatibility)
• loading: Boolean - Loading state
• editable: Boolean (default: false) - Enables editing mode
• validation: Object - Validation schema
• validators: Validators - Custom validators (e.g., unique validator)
• hasValidValues: Boolean - Validation state
• questions: Question[] - Questions for extraction workflow

Usage

<!-- Simple read-only table -->
<BaseSimpleTable :data="tableData" :columns="tableColumns" />

<!-- Editable table -->
<BaseSimpleTable :data="tableData" :columns="tableColumns" :editable="true" />

<!-- With validation -->
<BaseSimpleTable :data="tableData" :columns="tableColumns" :validation="schema" />

Public API Methods

• getData() - Get table data
• setData(data) - Set table data
• getRowCount() - Get row count
• getColumns() - Get column definitions
• validateTable(options) - Validate table data
• redraw(force) - Redraw table

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Refactor BaseSimpleTable to Wrap RenderTable for Optional Editing and Validation</issue_title>
<issue_description># Refactor BaseSimpleTable to Wrap RenderTable for Optional Editing and Validation

Problem

Currently, BaseSimpleTable.vue and RenderTable.vue are separate Tabulator-based table components with overlapping functionality:

• BaseSimpleTable: A simpler read-only table with clean styling and basic features
• RenderTable: A full-featured table with editing, validation, undo/redo, LLM extraction, and reference handling

This duplication leads to:

1. Inconsistent table behavior across the application
2. Duplicated Tabulator configuration and styling
3. Missing editing/validation capabilities in components using BaseSimpleTable
4. Maintenance overhead for two separate table implementations

Solution

Refactor BaseSimpleTable.vue to wrap RenderTable.vue internally, providing:

1. The same simple API and clean styling as current BaseSimpleTable
2. Optional editing capability via prop
3. Optional data validation via prop
4. Unified Tabulator configuration and theming

Requirements

API Changes

// New props to add to BaseSimpleTable
props: {
  // Existing props remain unchanged
  data: Array,
  columns: Array,
  options: Object,
  loading: Boolean,
  
  // New optional props
  editable: {
    type: Boolean,
    default: false  // Maintains current read-only behavior by default
  },
  validation: {
    type: Object,
    default: null  // Optional validation schema
  },
  tableJSON: {
    type: Object,
    default: null  // For full RenderTable compatibility when needed
  }
}

Implementation Strategy

1. Keep BaseSimpleTable as the public interface - Components continue using BaseSimpleTable
2. Internal RenderTable usage - BaseSimpleTable wraps RenderTable internally when editing/validation is needed
3. Preserve styling - Keep BaseSimpleTable's clean styling via scoped CSS overrides
4. Backward compatible - All existing BaseSimpleTable usages continue working without changes

Styling Requirements

• Maintain BaseSimpleTable's current design system integration (CSS variables, border-radius, etc.)
• Override RenderTable's more complex styling when used in simple mode
• Keep the clean, minimal appearance for read-only tables
• Apply full RenderTable styling only when editing is enabled

Files to Modify

• extralit-frontend/components/base/base-simple-table/BaseSimpleTable.vue - Refactor to wrap RenderTable
• extralit-frontend/components/base/base-render-table/RenderTable.vue - May need minor adjustments for wrapper compatibility

Files to Review (Current BaseSimpleTable Usages)

Search for components importing BaseSimpleTable to ensure backward compatibility:

• Import analysis components
• Data preview components
• Any other table displays

Acceptance Criteria

• BaseSimpleTable wraps RenderTable internally
• Default behavior (read-only) remains unchanged
• editable prop enables full editing capabilities
• validation prop enables data validation
• BaseSimpleTable styling is preserved in read-only mode
• All existing BaseSimpleTable usages continue working
• Emitted events remain compatible
• Public API methods (getData, setData, etc.) still work

Technical Notes

Current BaseSimpleTable Features to Preserve

• Simple column configuration mapping
• Data reactivity via watchers
• Public API methods (getData, selectRow, addRow, etc.)
• Event emissions (row-click, cell-edited, etc.)
• Clean Tabulator theming via CSS variables

RenderTable Features to Expose Optionally

• Inline cell editing
• Column validation with error highlighting
• Undo/redo history
• Context menus for row/column operations
• Clipboard paste support
• Column add/remove/rename

Migration Path

1. Phase 1: Refactor BaseSimpleTable to use RenderTable internally (this issue)
2. Phase 2: Gradually enable editing in specific use cases
3. Phase 3: Add validation schemas where needed</issue_description>

Comments on the Issue (you are @copilot in this section)

Custom agent used: ddd-architect
Delivers high-quality, production-ready codebases grounded in domain-driven design principles with clear, pragmatic documentation.

• Fixes Refactor BaseSimpleTable to Wrap RenderTable for Optional Editing and Validation #170

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[JonnyTran]

@copilot please check that all other components that uses BaseSimpleTable is also updated and functioning correctly on playwright

[Copilot]

@copilot please check that all other components that uses BaseSimpleTable is also updated and functioning correctly on playwright

I've verified that all components using BaseSimpleTable are functioning correctly:

Components verified:

• ImportSummary.vue
• ImportAnalysisTable.vue
• ImportHistoryDataPreview.vue
• ImportHistoryList.vue

Test results:

• ✅ All 731 unit tests pass (72 test suites)
• ✅ Build succeeds without errors
• ✅ All 78 tests specific to BaseSimpleTable and import components pass

All existing usages of BaseSimpleTable use the original props (data, columns, options, loading, @row-click) which remain unchanged and default to read-only mode. The Playwright e2e tests require a running server infrastructure that isn't available in this environment, but the unit tests and build verification confirm the components are correctly integrated.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• fonts.googleapis.com
  • Triggering command: /home/REDACTED/.cache/ms-playwright/chromium_headless_shell-1179/chrome-linux/headless_shell /home/REDACTED/.cache/ms-playwright/chromium_headless_shell-1179/chrome-linux/headless_shell --disable-field-trial-config --disable-REDACTED-networking --disable-REDACTED-timer-throttling --disable-REDACTEDing-occluded-windows --disable-back-forward-cache --disable-breakpad --disable-client-side-phishing-detection --disable-component-extensions-with-REDACTED-pages --disable-component-update --no-default-browser-check --disable-default-apps --disable-dev-shm-usage --disable-extensions --disable-features=AcceptCHFrame,AutoExpandDetailsElement,AvoidUnnecessaryBeforeUnloadCheckSync,CertificateTransparencyComponentUpdater,DestroyProfileOnBrowserClose,DialMediaRouteProvider,ExtensionManifestV2Disabled,GlobalMediaControls,HttpsUpgrades,Impro (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

[Sparshr04]

Summary

This commit refactors BaseSimpleTable to internally wrap RenderTable, allowing optional editing and validation while fully preserving the existing simple table API.

Key Changes

• Added editable, validation, tableJSON props on BaseSimpleTable
• Added automatic RenderTable switching logic
• Delegated all existing public table API methods to RenderTable when active
• Synced all table events through BaseSimpleTable
• Cleaned duplicate CSS blocks and aligned styling with design standards
• Fixed missing emits + table-built event inside RenderTable
• Ensured consistent simple-mode styling via .tabulator-container--simple
• Guaranteed backward compatibility for all existing BaseSimpleTable usages

Outcome

BaseSimpleTable now provides a unified, consistent table experience using a single underlying implementation (RenderTable) with optional editing and validation features.

[JonnyTran]

@copilot Please simplify the extralit-frontend/components/base/base-simple-table/BaseSimpleTable.vue to remove the conditional choice of either to use the backward compatible older BaseSimpleTable implementation or to use RenderTable depending on props.editable, but to default to RenderTable and simply pass the editable to RenderTable's prop.

Additionally don't use the tableJSON prop but consolidate to a single data, so other methods has a common interface, e.g.

<BaseSimpleTable :data="tableData" :columns="tableColumns" :options="tableOptions" />

Then, remove all unneeded emits, and ensure the unique column validator can be passed as a prop to BaseSimpleTable to use

extralit/extralit-frontend/components/base/base-render-table/validatorUtils.ts

Lines 13 to 20 in a191ef9

	var unique = (cell: any, value: string, parameters: any): boolean => {
	const columnValues = cell
	.getTable()
	.getData()
	.map((row) => row[cell.getField()]);
	return columnValues.filter((v) => v === value).length === 1;
	};

[Copilot]

@copilot Please simplify the extralit-frontend/components/base/base-simple-table/BaseSimpleTable.vue to remove the conditional choice of either to use the backward compatible older BaseSimpleTable i...

Simplified in commit 31382e8:

• Always uses RenderTable - Removed conditional logic
• Removed tableJSON prop - Now uses single data prop for consistent interface
• Passes editable directly to RenderTable
• Reduced emits to essential only: table-built, row-click, cell-edited, updateValidValues
• Added validators prop for custom validators like the unique validator from validatorUtils.ts

Usage:

<BaseSimpleTable :data="tableData" :columns="tableColumns" :editable="true" :validators="{ name: ['unique'] }" />