@alaarab/ogrid-js 2.0.0-beta

package/dist/esm/OGrid.js

@@ -0,0 +1,654 @@
+import { GridState } from './state/GridState';
+import { TableRenderer } from './renderer/TableRenderer';
+import { PaginationControls } from './components/PaginationControls';
+import { StatusBar } from './components/StatusBar';
+import { ColumnChooser } from './components/ColumnChooser';
+import { SideBarState } from './state/SideBarState';
+import { SideBar } from './components/SideBar';
+import { HeaderFilterState } from './state/HeaderFilterState';
+import { HeaderFilter } from './components/HeaderFilter';
+import { SelectionState } from './state/SelectionState';
+import { KeyboardNavState } from './state/KeyboardNavState';
+import { ClipboardState } from './state/ClipboardState';
+import { UndoRedoState } from './state/UndoRedoState';
+import { ColumnResizeState } from './state/ColumnResizeState';
+import { TableLayoutState } from './state/TableLayoutState';
+import { FillHandleState } from './state/FillHandleState';
+import { RowSelectionState } from './state/RowSelectionState';
+import { ColumnPinningState } from './state/ColumnPinningState';
+import { MarchingAntsOverlay } from './components/MarchingAntsOverlay';
+import { InlineCellEditor } from './components/InlineCellEditor';
+import { ContextMenu } from './components/ContextMenu';
+import { EventEmitter } from './state/EventEmitter';
+import { normalizeSelectionRange, isInSelectionRange, flattenColumns } from '@alaarab/ogrid-core';
+export class OGrid {
+    constructor(container, options) {
+        // Sidebar
+        this.sideBarState = null;
+        this.sideBarComponent = null;
+        this.sideBarContainer = null;
+        this.filterConfigs = new Map();
+        // Loading overlay
+        this.loadingOverlay = null;
+        // Body area (holds sidebar + table)
+        this.bodyArea = null;
+        // Interaction states
+        this.selectionState = null;
+        this.keyboardNavState = null;
+        this.clipboardState = null;
+        this.undoRedoState = null;
+        this.resizeState = null;
+        this.fillHandleState = null;
+        this.rowSelectionState = null;
+        this.pinningState = null;
+        this.marchingAnts = null;
+        this.cellEditor = null;
+        this.contextMenu = null;
+        this.events = new EventEmitter();
+        this.unsubscribes = [];
+        this.options = options;
+        this.state = new GridState(options);
+        this.api = this.state.getApi();
+        // Build layout
+        this.containerEl = document.createElement('div');
+        this.containerEl.className = 'ogrid-container';
+        // Toolbar
+        this.toolbarEl = document.createElement('div');
+        this.toolbarEl.className = 'ogrid-toolbar';
+        this.containerEl.appendChild(this.toolbarEl);
+        // Body area (holds sidebar + table, side by side)
+        this.bodyArea = document.createElement('div');
+        this.bodyArea.className = 'ogrid-body-area';
+        this.bodyArea.style.display = 'flex';
+        this.bodyArea.style.flex = '1';
+        this.bodyArea.style.overflow = 'hidden';
+        this.containerEl.appendChild(this.bodyArea);
+        // Table container (inside body area)
+        this.tableContainer = document.createElement('div');
+        this.tableContainer.className = 'ogrid-table-container';
+        this.tableContainer.style.flex = '1';
+        this.tableContainer.style.overflow = 'auto';
+        this.tableContainer.style.position = 'relative';
+        this.bodyArea.appendChild(this.tableContainer);
+        // Status bar container
+        this.statusBarContainer = document.createElement('div');
+        this.statusBarContainer.className = 'ogrid-status-bar-container';
+        this.containerEl.appendChild(this.statusBarContainer);
+        // Pagination container
+        this.paginationContainer = document.createElement('div');
+        this.paginationContainer.className = 'ogrid-pagination-container';
+        this.containerEl.appendChild(this.paginationContainer);
+        container.appendChild(this.containerEl);
+        // Create layout state (measures container, tracks column sizing)
+        this.layoutState = new TableLayoutState();
+        this.layoutState.observeContainer(this.tableContainer);
+        // Create sub-components
+        this.renderer = new TableRenderer(this.tableContainer, this.state);
+        this.pagination = new PaginationControls(this.paginationContainer, this.state);
+        this.statusBar = new StatusBar(this.statusBarContainer);
+        this.columnChooser = new ColumnChooser(this.toolbarEl, this.state);
+        // Initialize header filter state
+        this.headerFilterState = new HeaderFilterState((key, value) => {
+            this.state.setFilter(key, value);
+        });
+        this.headerFilterComponent = new HeaderFilter(this.headerFilterState);
+        this.buildFilterConfigs();
+        // Pass filter config to renderer for filter icons in headers
+        this.renderer.setHeaderFilterState(this.headerFilterState, this.filterConfigs);
+        this.renderer.setOnFilterIconClick((columnId, headerEl) => {
+            this.handleFilterIconClick(columnId, headerEl);
+        });
+        // Initialize sidebar if configured
+        if (options.sideBar) {
+            this.sideBarState = new SideBarState(options.sideBar);
+            this.sideBarContainer = document.createElement('div');
+            this.sideBarContainer.className = 'ogrid-sidebar-container';
+            this.sideBarComponent = new SideBar(this.sideBarContainer, this.sideBarState);
+            if (this.sideBarState.position === 'left') {
+                this.bodyArea.insertBefore(this.sideBarContainer, this.tableContainer);
+            }
+            else {
+                this.bodyArea.appendChild(this.sideBarContainer);
+            }
+            this.unsubscribes.push(this.sideBarState.onChange(() => {
+                this.renderSideBar();
+            }));
+        }
+        // Initialize column pinning (always active, even without interaction)
+        const flatCols = flattenColumns(options.columns);
+        this.pinningState = new ColumnPinningState(options.pinnedColumns, flatCols);
+        // Initialize row selection (always active if rowSelection is set)
+        if (options.rowSelection && options.rowSelection !== 'none') {
+            this.rowSelectionState = new RowSelectionState(options.rowSelection, options.getRowId);
+            // Wire row selection API methods
+            this.api.getSelectedRows = () => {
+                return Array.from(this.rowSelectionState?.selectedRowIds ?? []);
+            };
+            this.api.selectAll = () => {
+                const { items } = this.state.getProcessedItems();
+                this.rowSelectionState?.handleSelectAll(true, items);
+            };
+            this.api.deselectAll = () => {
+                const { items } = this.state.getProcessedItems();
+                this.rowSelectionState?.handleSelectAll(false, items);
+            };
+            this.api.setSelectedRows = (rowIds) => {
+                const { items } = this.state.getProcessedItems();
+                this.rowSelectionState?.updateSelection(new Set(rowIds), items);
+            };
+            this.unsubscribes.push(this.rowSelectionState.onRowSelectionChange(() => {
+                this.updateRendererInteractionState();
+            }));
+        }
+        // Initial render (must happen before interaction init so wrapper DOM exists)
+        this.renderer.render();
+        // Initialize interaction features if enabled (default: true for cellSelection)
+        const shouldEnableInteraction = options.cellSelection !== false || options.editable === true;
+        if (shouldEnableInteraction) {
+            this.initializeInteraction();
+        }
+        // Subscribe to state changes
+        this.unsubscribes.push(this.state.onStateChange(() => {
+            this.renderAll();
+        }));
+        // Subscribe to pinning changes
+        this.unsubscribes.push(this.pinningState.onPinningChange(() => {
+            this.updateRendererInteractionState();
+        }));
+        // Subscribe to header filter state changes
+        this.unsubscribes.push(this.headerFilterState.onChange(() => {
+            this.renderHeaderFilterPopover();
+        }));
+        // Complete initial render (pagination, status bar, column chooser, sidebar, loading)
+        this.renderAll();
+    }
+    initializeInteraction() {
+        const { editable } = this.options;
+        const colOffset = this.rowSelectionState ? 1 : 0;
+        // Create interaction states
+        this.selectionState = new SelectionState();
+        this.resizeState = new ColumnResizeState();
+        this.contextMenu = new ContextMenu();
+        this.cellEditor = new InlineCellEditor(this.tableContainer);
+        // Undo/Redo (wraps onCellValueChanged if editable)
+        const onCellValueChanged = this.options.onCellValueChanged;
+        this.undoRedoState = new UndoRedoState(onCellValueChanged);
+        // Clipboard
+        this.clipboardState = new ClipboardState({
+            items: [],
+            visibleCols: [],
+            colOffset,
+            editable,
+            onCellValueChanged: this.undoRedoState.getWrappedCallback(),
+        }, () => this.selectionState?.activeCell ?? null, () => this.selectionState?.selectionRange ?? null);
+        // Fill handle
+        this.fillHandleState = new FillHandleState({
+            items: [],
+            visibleCols: [],
+            editable,
+            onCellValueChanged: this.undoRedoState.getWrappedCallback(),
+            colOffset,
+            beginBatch: () => this.undoRedoState?.beginBatch(),
+            endBatch: () => this.undoRedoState?.endBatch(),
+        }, () => this.selectionState?.selectionRange ?? null, (range) => {
+            this.selectionState?.setSelectionRange(range);
+            this.updateRendererInteractionState();
+        }, (cell) => {
+            this.selectionState?.setActiveCell(cell);
+        });
+        // Keyboard navigation
+        this.keyboardNavState = new KeyboardNavState({
+            items: [],
+            visibleCols: [],
+            colOffset,
+            getRowId: this.state.getRowId,
+            editable,
+            onCellValueChanged: this.undoRedoState.getWrappedCallback(),
+            onCopy: () => this.clipboardState?.handleCopy(),
+            onCut: () => this.clipboardState?.handleCut(),
+            onPaste: async () => { await this.clipboardState?.handlePaste(); },
+            onUndo: () => this.undoRedoState?.undo(),
+            onRedo: () => this.undoRedoState?.redo(),
+            onContextMenu: (x, y) => this.showContextMenu(x, y),
+            onStartEdit: (rowId, columnId) => this.startCellEdit(rowId, columnId),
+            clearClipboardRanges: () => this.clipboardState?.clearClipboardRanges(),
+        }, () => this.selectionState?.activeCell ?? null, () => this.selectionState?.selectionRange ?? null, (cell) => this.selectionState?.setActiveCell(cell), (range) => this.selectionState?.setSelectionRange(range));
+        // Subscribe to selection changes
+        this.unsubscribes.push(this.selectionState.onSelectionChange(() => {
+            this.updateRendererInteractionState();
+        }));
+        // Subscribe to clipboard range changes
+        this.unsubscribes.push(this.clipboardState.onRangesChange(() => {
+            this.updateRendererInteractionState();
+        }));
+        // Subscribe to column resize changes
+        this.unsubscribes.push(this.resizeState.onColumnWidthChange(() => {
+            this.updateRendererInteractionState();
+        }));
+        // Attach keyboard handler to wrapper
+        const wrapper = this.renderer.getWrapperElement();
+        if (wrapper) {
+            wrapper.addEventListener('keydown', this.keyboardNavState.handleKeyDown);
+            this.keyboardNavState.setWrapperRef(wrapper);
+            this.fillHandleState.setWrapperRef(wrapper);
+            // Initialize marching ants overlay
+            this.marchingAnts = new MarchingAntsOverlay(wrapper, colOffset);
+        }
+        // Attach global mouse handlers for resize and drag
+        this.attachGlobalHandlers();
+        // Set initial interaction state on renderer
+        this.updateRendererInteractionState();
+    }
+    attachGlobalHandlers() {
+        let resizing = false;
+        const handleMouseMove = (e) => {
+            if (resizing && this.resizeState) {
+                const newWidth = this.resizeState.updateResize(e.clientX);
+                if (newWidth !== null && this.resizeState.resizingColumnId) {
+                    this.layoutState.setColumnOverride(this.resizeState.resizingColumnId, newWidth);
+                    this.updateRendererInteractionState();
+                }
+            }
+            if (this.selectionState?.isDragging) {
+                const target = e.target;
+                if (target.tagName === 'TD') {
+                    const rowIndex = parseInt(target.getAttribute('data-row-index') ?? '-1', 10);
+                    const colIndex = parseInt(target.getAttribute('data-col-index') ?? '-1', 10);
+                    if (rowIndex >= 0 && colIndex >= 0) {
+                        this.selectionState.updateDrag(rowIndex, colIndex, () => this.updateDragAttributes());
+                    }
+                }
+            }
+        };
+        const handleMouseUp = (e) => {
+            if (resizing && this.resizeState) {
+                const colId = this.resizeState.resizingColumnId;
+                this.resizeState.endResize(e.clientX);
+                if (colId) {
+                    const width = this.resizeState.getColumnWidth(colId);
+                    if (width)
+                        this.layoutState.setColumnOverride(colId, width);
+                }
+                resizing = false;
+                document.body.style.cursor = '';
+                this.updateRendererInteractionState();
+            }
+            if (this.selectionState?.isDragging) {
+                this.selectionState.endDrag();
+            }
+        };
+        const handleResizeStart = (columnId, clientX, currentWidth) => {
+            resizing = true;
+            document.body.style.cursor = 'col-resize';
+            this.resizeState?.startResize(columnId, clientX, currentWidth);
+        };
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+        // Store references for cleanup
+        this.unsubscribes.push(() => {
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+        });
+        // Pass resize handler to renderer
+        this.renderer.setInteractionState({
+            activeCell: null,
+            selectionRange: null,
+            copyRange: null,
+            cutRange: null,
+            editingCell: null,
+            columnWidths: {},
+            onResizeStart: handleResizeStart,
+        });
+    }
+    updateRendererInteractionState() {
+        if (!this.selectionState || !this.clipboardState || !this.resizeState)
+            return;
+        const { items } = this.state.getProcessedItems();
+        const visibleCols = this.state.visibleColumnDefs;
+        // Compute pinning offsets
+        const columnWidths = this.layoutState.getAllColumnWidths();
+        const leftOffsets = this.pinningState?.computeLeftOffsets(visibleCols, columnWidths, 120, !!this.rowSelectionState, 40) ?? {};
+        const rightOffsets = this.pinningState?.computeRightOffsets(visibleCols, columnWidths, 120) ?? {};
+        this.renderer.setInteractionState({
+            activeCell: this.selectionState.activeCell,
+            selectionRange: this.selectionState.selectionRange,
+            copyRange: this.clipboardState.copyRange,
+            cutRange: this.clipboardState.cutRange,
+            editingCell: this.cellEditor?.getEditingCell() ?? null,
+            columnWidths,
+            onCellClick: (rowIndex, colIndex) => this.handleCellClick(rowIndex, colIndex),
+            onCellMouseDown: (rowIndex, colIndex, e) => this.handleCellMouseDown(rowIndex, colIndex, e),
+            onCellDoubleClick: (rowIndex, colIndex, rowId, columnId) => this.startCellEdit(rowId, columnId),
+            onCellContextMenu: (rowIndex, colIndex, e) => this.handleCellContextMenu(rowIndex, colIndex, e),
+            onResizeStart: this.renderer['interactionState']?.onResizeStart,
+            // Fill handle
+            onFillHandleMouseDown: this.options.editable !== false ? (e) => this.fillHandleState?.startFillDrag(e) : undefined,
+            // Row selection
+            rowSelectionMode: this.rowSelectionState?.rowSelection ?? 'none',
+            selectedRowIds: this.rowSelectionState?.selectedRowIds,
+            onRowCheckboxChange: (rowId, checked, rowIndex, shiftKey) => {
+                this.rowSelectionState?.handleRowCheckboxChange(rowId, checked, rowIndex, shiftKey, items);
+            },
+            onSelectAll: (checked) => {
+                this.rowSelectionState?.handleSelectAll(checked, items);
+            },
+            allSelected: this.rowSelectionState?.isAllSelected(items),
+            someSelected: this.rowSelectionState?.isSomeSelected(items),
+            // Column pinning
+            pinnedColumns: this.pinningState?.pinnedColumns,
+            leftOffsets,
+            rightOffsets,
+        });
+        this.renderer.update();
+        // Update marching ants overlay
+        this.marchingAnts?.update(this.selectionState.selectionRange, this.clipboardState.copyRange, this.clipboardState.cutRange);
+    }
+    updateDragAttributes() {
+        const wrapper = this.renderer.getWrapperElement();
+        if (!wrapper || !this.selectionState)
+            return;
+        const range = this.selectionState.getDragRange();
+        if (!range)
+            return;
+        const norm = normalizeSelectionRange(range);
+        const cells = wrapper.querySelectorAll('td[data-row-index][data-col-index]');
+        for (const cell of Array.from(cells)) {
+            const rowIndex = parseInt(cell.getAttribute('data-row-index') ?? '-1', 10);
+            const colIndex = parseInt(cell.getAttribute('data-col-index') ?? '-1', 10);
+            if (isInSelectionRange(norm, rowIndex, colIndex)) {
+                cell.setAttribute('data-drag-range', 'true');
+            }
+            else {
+                cell.removeAttribute('data-drag-range');
+            }
+        }
+    }
+    handleCellClick(rowIndex, colIndex) {
+        if (!this.selectionState)
+            return;
+        // setActiveCell also sets a single-cell selectionRange internally.
+        // The selectionChange subscription handles re-rendering.
+        this.selectionState.setActiveCell({ rowIndex, columnIndex: colIndex });
+    }
+    handleCellMouseDown(rowIndex, colIndex, e) {
+        if (!this.selectionState)
+            return;
+        e.preventDefault();
+        this.selectionState.startDrag(rowIndex, colIndex);
+    }
+    handleCellContextMenu(rowIndex, colIndex, e) {
+        e.preventDefault();
+        if (!this.contextMenu || !this.selectionState || !this.clipboardState || !this.undoRedoState)
+            return;
+        // Set active cell if not already set
+        if (!this.selectionState.activeCell || this.selectionState.activeCell.rowIndex !== rowIndex || this.selectionState.activeCell.columnIndex !== colIndex) {
+            this.selectionState.setActiveCell({ rowIndex, columnIndex: colIndex });
+            this.updateRendererInteractionState();
+        }
+        this.showContextMenu(e.clientX, e.clientY);
+    }
+    showContextMenu(x, y) {
+        if (!this.contextMenu || !this.clipboardState || !this.undoRedoState || !this.keyboardNavState || !this.selectionState)
+            return;
+        this.contextMenu.show(x, y, {
+            onCopy: () => this.clipboardState.handleCopy(),
+            onCut: () => this.clipboardState.handleCut(),
+            onPaste: () => void this.clipboardState.handlePaste(),
+            onSelectAll: () => {
+                const { items } = this.state.getProcessedItems();
+                const visibleCols = this.state.visibleColumnDefs;
+                if (items.length > 0 && visibleCols.length > 0) {
+                    this.selectionState.setSelectionRange({
+                        startRow: 0,
+                        startCol: 0,
+                        endRow: items.length - 1,
+                        endCol: visibleCols.length - 1,
+                    });
+                    this.updateRendererInteractionState();
+                }
+            },
+            onUndo: () => this.undoRedoState.undo(),
+            onRedo: () => this.undoRedoState.redo(),
+        }, this.undoRedoState.canUndo, this.undoRedoState.canRedo, this.selectionState.selectionRange);
+    }
+    startCellEdit(rowId, columnId) {
+        if (!this.cellEditor || !this.undoRedoState)
+            return;
+        const { items } = this.state.getProcessedItems();
+        const visibleCols = this.state.visibleColumnDefs;
+        const item = items.find((it) => this.state.getRowId(it) === rowId);
+        const column = visibleCols.find((col) => col.columnId === columnId);
+        if (!item || !column)
+            return;
+        const wrapper = this.renderer.getWrapperElement();
+        if (!wrapper)
+            return;
+        // Find the row first, then the cell within it
+        const row = wrapper.querySelector(`tr[data-row-id="${rowId}"]`);
+        if (!row)
+            return;
+        const cell = row.querySelector(`td[data-column-id="${columnId}"]`);
+        if (!cell)
+            return;
+        const onCommit = (rid, cid, value) => {
+            const itm = items.find((i) => this.state.getRowId(i) === rid);
+            const col = visibleCols.find((c) => c.columnId === cid);
+            if (!itm || !col)
+                return;
+            const oldValue = itm[cid];
+            itm[cid] = value;
+            const wrapped = this.undoRedoState.getWrappedCallback();
+            if (wrapped) {
+                wrapped({
+                    item: itm,
+                    columnId: cid,
+                    oldValue,
+                    newValue: value,
+                    rowIndex: items.indexOf(itm),
+                });
+            }
+            this.updateRendererInteractionState();
+        };
+        const onCancel = () => {
+            this.updateRendererInteractionState();
+        };
+        this.cellEditor.startEdit(rowId, columnId, item, column, cell, onCommit, onCancel);
+    }
+    buildFilterConfigs() {
+        const columns = flattenColumns(this.options.columns);
+        for (const col of columns) {
+            const filterable = col.filterable && typeof col.filterable === 'object' ? col.filterable : null;
+            if (filterable && filterable.type) {
+                this.filterConfigs.set(col.columnId, {
+                    columnId: col.columnId,
+                    filterField: filterable.filterField ?? col.columnId,
+                    filterType: filterable.type,
+                });
+            }
+        }
+    }
+    handleFilterIconClick(columnId, headerEl) {
+        const config = this.filterConfigs.get(columnId);
+        if (!config)
+            return;
+        if (this.headerFilterState.openColumnId === columnId) {
+            this.headerFilterState.close();
+            return;
+        }
+        // Create a temporary popover element to pass to HeaderFilterState
+        const tempPopover = document.createElement('div');
+        this.headerFilterState.setFilters(this.state.filters);
+        this.headerFilterState.setFilterOptions(this.state.filterOptions);
+        this.headerFilterState.open(columnId, config, headerEl, tempPopover);
+    }
+    renderHeaderFilterPopover() {
+        const openId = this.headerFilterState.openColumnId;
+        if (!openId) {
+            this.headerFilterComponent.cleanup();
+            return;
+        }
+        const config = this.filterConfigs.get(openId);
+        if (!config)
+            return;
+        this.headerFilterComponent.render(config);
+        // Update the popover element reference for click-outside detection
+        const popoverEl = document.querySelector('.ogrid-header-filter-popover');
+        if (popoverEl) {
+            this.headerFilterState._popoverEl = popoverEl;
+        }
+    }
+    renderSideBar() {
+        if (!this.sideBarComponent || !this.sideBarState)
+            return;
+        const columns = this.state.columns.map(c => ({
+            columnId: c.columnId,
+            name: c.name,
+            required: c.required === true,
+        }));
+        const filterableColumns = this.state.columns
+            .filter(c => c.filterable && typeof c.filterable === 'object' && c.filterable.type)
+            .map(c => ({
+            columnId: c.columnId,
+            name: c.name,
+            filterField: c.filterable.filterField ?? c.columnId,
+            filterType: c.filterable.type,
+        }));
+        this.sideBarComponent.setConfig({
+            columns,
+            visibleColumns: this.state.visibleColumns,
+            onVisibilityChange: (columnKey, visible) => {
+                const next = new Set(this.state.visibleColumns);
+                if (visible)
+                    next.add(columnKey);
+                else
+                    next.delete(columnKey);
+                this.state.setVisibleColumns(next);
+            },
+            onSetVisibleColumns: (cols) => this.state.setVisibleColumns(cols),
+            filterableColumns,
+            filters: this.state.filters,
+            onFilterChange: (key, value) => this.state.setFilter(key, value),
+            filterOptions: this.state.filterOptions,
+        });
+        this.sideBarComponent.render();
+    }
+    renderLoadingOverlay() {
+        if (this.state.isLoading) {
+            if (!this.loadingOverlay) {
+                this.loadingOverlay = document.createElement('div');
+                this.loadingOverlay.className = 'ogrid-loading-overlay';
+                this.loadingOverlay.style.position = 'absolute';
+                this.loadingOverlay.style.top = '0';
+                this.loadingOverlay.style.left = '0';
+                this.loadingOverlay.style.right = '0';
+                this.loadingOverlay.style.bottom = '0';
+                this.loadingOverlay.style.display = 'flex';
+                this.loadingOverlay.style.alignItems = 'center';
+                this.loadingOverlay.style.justifyContent = 'center';
+                this.loadingOverlay.style.background = 'rgba(255,255,255,0.7)';
+                this.loadingOverlay.style.zIndex = '100';
+                const spinner = document.createElement('div');
+                spinner.className = 'ogrid-loading-spinner';
+                spinner.textContent = 'Loading...';
+                this.loadingOverlay.appendChild(spinner);
+            }
+            if (!this.tableContainer.contains(this.loadingOverlay)) {
+                this.tableContainer.appendChild(this.loadingOverlay);
+            }
+        }
+        else {
+            if (this.loadingOverlay && this.tableContainer.contains(this.loadingOverlay)) {
+                this.loadingOverlay.remove();
+            }
+        }
+    }
+    renderAll() {
+        const colOffset = this.rowSelectionState ? 1 : 0;
+        // Update header filter state with current filters and options
+        this.headerFilterState.setFilters(this.state.filters);
+        this.headerFilterState.setFilterOptions(this.state.filterOptions);
+        // Update interaction states with current data
+        if (this.keyboardNavState && this.clipboardState) {
+            const { items } = this.state.getProcessedItems();
+            const visibleCols = this.state.visibleColumnDefs;
+            this.keyboardNavState.updateParams({
+                items,
+                visibleCols: visibleCols,
+                colOffset,
+                getRowId: this.state.getRowId,
+                editable: this.options.editable,
+                onCellValueChanged: this.undoRedoState?.getWrappedCallback(),
+                onCopy: () => this.clipboardState?.handleCopy(),
+                onCut: () => this.clipboardState?.handleCut(),
+                onPaste: async () => { await this.clipboardState?.handlePaste(); },
+                onUndo: () => this.undoRedoState?.undo(),
+                onRedo: () => this.undoRedoState?.redo(),
+                onContextMenu: (x, y) => this.showContextMenu(x, y),
+                onStartEdit: (rowId, columnId) => this.startCellEdit(rowId, columnId),
+                clearClipboardRanges: () => this.clipboardState?.clearClipboardRanges(),
+            });
+            this.clipboardState.updateParams({
+                items,
+                visibleCols: visibleCols,
+                colOffset,
+                editable: this.options.editable,
+                onCellValueChanged: this.undoRedoState?.getWrappedCallback(),
+            });
+            // Update fill handle params
+            this.fillHandleState?.updateParams({
+                items,
+                visibleCols: visibleCols,
+                editable: this.options.editable,
+                onCellValueChanged: this.undoRedoState?.getWrappedCallback(),
+                colOffset,
+                beginBatch: () => this.undoRedoState?.beginBatch(),
+                endBatch: () => this.undoRedoState?.endBatch(),
+            });
+            // Update renderer interaction state before rendering
+            this.updateRendererInteractionState();
+        }
+        else {
+            this.renderer.update();
+        }
+        const { totalCount } = this.state.getProcessedItems();
+        this.pagination.render(totalCount);
+        this.statusBar.render({ totalCount });
+        this.columnChooser.render();
+        this.renderSideBar();
+        this.renderLoadingOverlay();
+    }
+    /** Subscribe to grid events. */
+    on(event, handler) {
+        this.events.on(event, handler);
+    }
+    /** Unsubscribe from grid events. */
+    off(event, handler) {
+        this.events.off(event, handler);
+    }
+    /** Clean up all event listeners and DOM. */
+    destroy() {
+        this.unsubscribes.forEach((unsub) => unsub());
+        this.renderer.destroy();
+        this.pagination.destroy();
+        this.statusBar.destroy();
+        this.columnChooser.destroy();
+        this.sideBarState?.destroy();
+        this.sideBarComponent?.destroy();
+        this.headerFilterState.destroy();
+        this.headerFilterComponent.destroy();
+        this.state.destroy();
+        this.selectionState?.destroy();
+        this.clipboardState?.destroy();
+        this.undoRedoState?.destroy();
+        this.resizeState?.destroy();
+        this.fillHandleState?.destroy();
+        this.rowSelectionState?.destroy();
+        this.pinningState?.destroy();
+        this.marchingAnts?.destroy();
+        this.layoutState.destroy();
+        this.cellEditor?.closeEditor();
+        this.contextMenu?.close();
+        this.events.removeAllListeners();
+        this.containerEl.remove();
+    }
+}