@alaarab/ogrid-angular 2.0.5 → 2.0.6

package/dist/esm/components/base-datagrid-table.component.js

@@ -0,0 +1,309 @@
+import { signal, computed, effect } from '@angular/core';
+import { DataGridStateService } from '../services/datagrid-state.service';
+import { ColumnReorderService } from '../services/column-reorder.service';
+import { VirtualScrollService } from '../services/virtual-scroll.service';
+import { buildHeaderRows, DEFAULT_MIN_COLUMN_WIDTH, } from '@alaarab/ogrid-core';
+import { getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, } from '../utils';
+/**
+ * Abstract base class containing all shared TypeScript logic for DataGridTable components.
+ * Framework-specific UI packages extend this with their templates and style overrides.
+ *
+ * Subclasses must:
+ * 1. Provide a @Component decorator with template and styles
+ * 2. Call `initBase()` in the constructor (effects require injection context)
+ * 3. Implement abstract accessors for propsInput, wrapperRef, and tableContainerRef
+ */
+export class BaseDataGridTableComponent {
+    constructor() {
+        this.stateService = new DataGridStateService();
+        this.columnReorderService = new ColumnReorderService();
+        this.virtualScrollService = new VirtualScrollService();
+        this.lastMouseShift = false;
+        this.columnSizingVersion = signal(0);
+        // --- Delegated state ---
+        this.state = computed(() => this.stateService.getState());
+        this.tableContainerEl = computed(() => this.getTableContainerRef()?.nativeElement ?? null);
+        this.items = computed(() => this.getProps()?.items ?? []);
+        this.getRowId = computed(() => this.getProps()?.getRowId ?? ((item) => item['id']));
+        this.isLoading = computed(() => this.getProps()?.isLoading ?? false);
+        this.loadingMessage = computed(() => 'Loading\u2026');
+        this.freezeRows = computed(() => this.getProps()?.freezeRows);
+        this.freezeCols = computed(() => this.getProps()?.freezeCols);
+        this.layoutModeFit = computed(() => (this.getProps()?.layoutMode ?? 'fill') === 'content');
+        this.ariaLabel = computed(() => this.getProps()?.['aria-label'] ?? 'Data grid');
+        this.ariaLabelledBy = computed(() => this.getProps()?.['aria-labelledby']);
+        this.emptyState = computed(() => this.getProps()?.emptyState);
+        this.currentPage = computed(() => this.getProps()?.currentPage ?? 1);
+        this.pageSize = computed(() => this.getProps()?.pageSize ?? 25);
+        this.rowNumberOffset = computed(() => this.hasRowNumbersCol() ? (this.currentPage() - 1) * this.pageSize() : 0);
+        // State service outputs
+        this.visibleCols = computed(() => this.state().layout.visibleCols);
+        this.hasCheckboxCol = computed(() => this.state().layout.hasCheckboxCol);
+        this.hasRowNumbersCol = computed(() => this.state().layout.hasRowNumbersCol);
+        this.colOffset = computed(() => this.state().layout.colOffset);
+        this.containerWidth = computed(() => this.state().layout.containerWidth);
+        this.minTableWidth = computed(() => this.state().layout.minTableWidth);
+        this.desiredTableWidth = computed(() => this.state().layout.desiredTableWidth);
+        this.columnSizingOverrides = computed(() => this.state().layout.columnSizingOverrides);
+        this.selectedRowIds = computed(() => this.state().rowSelection.selectedRowIds);
+        this.allSelected = computed(() => this.state().rowSelection.allSelected);
+        this.someSelected = computed(() => this.state().rowSelection.someSelected);
+        this.editingCell = computed(() => this.state().editing.editingCell);
+        this.pendingEditorValue = computed(() => this.state().editing.pendingEditorValue);
+        this.activeCell = computed(() => this.state().interaction.activeCell);
+        this.selectionRange = computed(() => this.state().interaction.selectionRange);
+        this.hasCellSelection = computed(() => this.state().interaction.hasCellSelection);
+        this.cutRange = computed(() => this.state().interaction.cutRange);
+        this.copyRange = computed(() => this.state().interaction.copyRange);
+        this.canUndo = computed(() => this.state().interaction.canUndo);
+        this.canRedo = computed(() => this.state().interaction.canRedo);
+        this.isDragging = computed(() => this.state().interaction.isDragging);
+        this.menuPosition = computed(() => this.state().contextMenu.menuPosition);
+        this.statusBarConfig = computed(() => this.state().viewModels.statusBarConfig);
+        this.showEmptyInGrid = computed(() => this.state().viewModels.showEmptyInGrid);
+        this.headerFilterInput = computed(() => this.state().viewModels.headerFilterInput);
+        this.cellDescriptorInput = computed(() => this.state().viewModels.cellDescriptorInput);
+        this.allowOverflowX = computed(() => {
+            const p = this.getProps();
+            if (p?.suppressHorizontalScroll)
+                return false;
+            const cw = this.containerWidth();
+            const mtw = this.minTableWidth();
+            const dtw = this.desiredTableWidth();
+            return cw > 0 && (mtw > cw || dtw > cw);
+        });
+        this.selectionCellCount = computed(() => {
+            const sr = this.selectionRange();
+            if (!sr)
+                return undefined;
+            return (Math.abs(sr.endRow - sr.startRow) + 1) * (Math.abs(sr.endCol - sr.startCol) + 1);
+        });
+        // Header rows from column definition
+        this.headerRows = computed(() => {
+            const p = this.getProps();
+            if (!p)
+                return [];
+            return buildHeaderRows(p.columns, p.visibleColumns);
+        });
+        // Pre-computed column layouts
+        this.columnLayouts = computed(() => {
+            const cols = this.visibleCols();
+            const fc = this.freezeCols();
+            const props = this.getProps();
+            const pinnedCols = props?.pinnedColumns ?? {};
+            return cols.map((col, colIdx) => {
+                const isFreezeCol = fc != null && fc >= 1 && colIdx < fc;
+                const runtimePinned = pinnedCols[col.columnId];
+                const pinnedLeft = runtimePinned === 'left' || col.pinned === 'left' || (isFreezeCol && colIdx === 0);
+                const pinnedRight = runtimePinned === 'right' || col.pinned === 'right';
+                const w = this.getColumnWidth(col);
+                return {
+                    col,
+                    pinnedLeft,
+                    pinnedRight,
+                    minWidth: col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH,
+                    width: w,
+                };
+            });
+        });
+    }
+    /**
+     * Initialize base wiring effects. Must be called from subclass constructor
+     * (effects need to run inside an injection context).
+     */
+    initBase() {
+        // Wire props to state service
+        effect(() => {
+            const p = this.getProps();
+            if (p)
+                this.stateService.props.set(p);
+        });
+        // Wire wrapper element
+        effect(() => {
+            const el = this.getWrapperRef()?.nativeElement;
+            if (el) {
+                this.stateService.wrapperEl.set(el);
+                this.columnReorderService.wrapperEl.set(el);
+            }
+        });
+        // Wire column reorder service inputs
+        effect(() => {
+            const p = this.getProps();
+            if (p) {
+                const cols = this.visibleCols();
+                this.columnReorderService.columns.set(cols);
+                this.columnReorderService.columnOrder.set(p.columnOrder);
+                this.columnReorderService.onColumnOrderChange.set(p.onColumnOrderChange);
+                this.columnReorderService.enabled.set(!!p.onColumnOrderChange);
+            }
+        });
+        // Wire virtual scroll service inputs
+        effect(() => {
+            const p = this.getProps();
+            if (p) {
+                this.virtualScrollService.totalRows.set(p.items.length);
+            }
+        });
+    }
+    // --- Helper methods ---
+    asColumnDef(colDef) {
+        return colDef;
+    }
+    visibleColIndex(col) {
+        return this.visibleCols().indexOf(col);
+    }
+    getColumnWidth(col) {
+        const overrides = this.columnSizingOverrides();
+        const override = overrides[col.columnId];
+        if (override)
+            return override.widthPx;
+        return col.defaultWidth ?? col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH;
+    }
+    getFilterConfig(col) {
+        return getHeaderFilterConfig(col, this.headerFilterInput());
+    }
+    getCellDescriptor(item, col, rowIndex, colIdx) {
+        return getCellRenderDescriptor(item, col, rowIndex, colIdx, this.cellDescriptorInput());
+    }
+    resolveCellContent(col, item, displayValue) {
+        return resolveCellDisplayContent(col, item, displayValue);
+    }
+    resolveCellStyleFn(col, item) {
+        return resolveCellStyle(col, item);
+    }
+    getSelectValues(col) {
+        const params = col.cellEditorParams;
+        if (params && typeof params === 'object' && 'values' in params) {
+            return params.values.map(String);
+        }
+        return [];
+    }
+    formatDateForInput(value) {
+        if (!value)
+            return '';
+        const d = new Date(String(value));
+        if (Number.isNaN(d.getTime()))
+            return '';
+        return d.toISOString().split('T')[0];
+    }
+    // --- Event handlers ---
+    onWrapperMouseDown(event) {
+        this.lastMouseShift = event.shiftKey;
+    }
+    onGridKeyDown(event) {
+        this.state().interaction.handleGridKeyDown(event);
+    }
+    onCellMouseDown(event, rowIndex, globalColIndex) {
+        this.state().interaction.handleCellMouseDown(event, rowIndex, globalColIndex);
+    }
+    onCellClick(rowIndex, globalColIndex) {
+        this.state().interaction.setActiveCell({ rowIndex, columnIndex: globalColIndex });
+    }
+    onCellContextMenu(event) {
+        this.state().contextMenu.handleCellContextMenu(event);
+    }
+    onCellDblClick(rowId, columnId) {
+        this.state().editing.setEditingCell({ rowId, columnId });
+    }
+    onFillHandleMouseDown(event) {
+        this.state().interaction.handleFillHandleMouseDown(event);
+    }
+    onResizeStart(event, col) {
+        event.preventDefault();
+        const startX = event.clientX;
+        const startWidth = this.getColumnWidth(col);
+        const minWidth = col.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH;
+        const onMove = (e) => {
+            const delta = e.clientX - startX;
+            const newWidth = Math.max(minWidth, startWidth + delta);
+            const overrides = { ...this.columnSizingOverrides(), [col.columnId]: { widthPx: newWidth } };
+            this.state().layout.setColumnSizingOverrides(overrides);
+            this.columnSizingVersion.update(v => v + 1);
+        };
+        const onUp = () => {
+            window.removeEventListener('mousemove', onMove);
+            window.removeEventListener('mouseup', onUp);
+            const finalWidth = this.getColumnWidth(col);
+            this.state().layout.onColumnResized?.(col.columnId, finalWidth);
+        };
+        window.addEventListener('mousemove', onMove);
+        window.addEventListener('mouseup', onUp);
+    }
+    onSelectAllChange(event) {
+        const checked = event.target.checked;
+        this.state().rowSelection.handleSelectAll(!!checked);
+    }
+    onRowClick(event, rowId) {
+        const p = this.getProps();
+        if (p?.rowSelection !== 'single')
+            return;
+        const ids = this.selectedRowIds();
+        this.state().rowSelection.updateSelection(ids.has(rowId) ? new Set() : new Set([rowId]));
+    }
+    onRowCheckboxChange(rowId, event, rowIndex) {
+        const checked = event.target.checked;
+        this.state().rowSelection.handleRowCheckboxChange(rowId, checked, rowIndex, this.lastMouseShift);
+    }
+    commitEdit(item, columnId, oldValue, newValue, rowIndex, globalColIndex) {
+        this.state().editing.commitCellEdit(item, columnId, oldValue, newValue, rowIndex, globalColIndex);
+    }
+    cancelEdit() {
+        this.state().editing.setEditingCell(null);
+    }
+    onEditorKeydown(event, item, columnId, oldValue, rowIndex, globalColIndex) {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            const newValue = event.target.value;
+            this.commitEdit(item, columnId, oldValue, newValue, rowIndex, globalColIndex);
+        }
+        else if (event.key === 'Escape') {
+            event.preventDefault();
+            this.cancelEdit();
+        }
+    }
+    closeContextMenu() {
+        this.state().contextMenu.closeContextMenu();
+    }
+    handleCopy() {
+        this.state().interaction.handleCopy();
+    }
+    handleCut() {
+        this.state().interaction.handleCut();
+    }
+    handlePaste() {
+        void this.state().interaction.handlePaste();
+    }
+    handleSelectAllCells() {
+        this.state().interaction.handleSelectAllCells();
+    }
+    onUndo() {
+        this.state().interaction.onUndo?.();
+    }
+    onRedo() {
+        this.state().interaction.onRedo?.();
+    }
+    onHeaderMouseDown(columnId, event) {
+        this.columnReorderService.handleHeaderMouseDown(columnId, event);
+    }
+    // --- Column pinning methods ---
+    onPinColumn(columnId, side) {
+        const props = this.getProps();
+        props?.onColumnPinned?.(columnId, side);
+    }
+    onUnpinColumn(columnId) {
+        const props = this.getProps();
+        props?.onColumnPinned?.(columnId, null);
+    }
+    isPinned(columnId) {
+        const props = this.getProps();
+        return props?.pinnedColumns?.[columnId];
+    }
+    getPinState(columnId) {
+        const pinned = this.isPinned(columnId);
+        return {
+            canPinLeft: pinned !== 'left',
+            canPinRight: pinned !== 'right',
+            canUnpin: !!pinned,
+        };
+    }
+}

package/dist/esm/components/empty-state.component.js

@@ -19,6 +19,12 @@ EmptyStateComponent = __decorate([
         selector: 'ogrid-empty-state',
         standalone: true,
         imports: [CommonModule],
+        styles: [`
+    .ogrid-empty-state-clear-btn {
+      background: none; border: none; color: inherit;
+      text-decoration: underline; cursor: pointer; padding: 0; font: inherit;
+    }
+  `],
         template: `
     @if (render()) {
       <ng-container [ngTemplateOutlet]="render()!"></ng-container>
@@ -26,7 +32,7 @@ EmptyStateComponent = __decorate([
       {{ message() }}
     } @else if (hasActiveFilters()) {
       No items match your current filters. Try adjusting your search or
-      <button type="button" (click)="clearAll.emit()" style="background:none;border:none;color:inherit;text-decoration:underline;cursor:pointer;padding:0;font:inherit">
+      <button type="button" (click)="clearAll.emit()" class="ogrid-empty-state-clear-btn">
         clear all filters
       </button>
       to see all items.

package/dist/esm/components/marching-ants-overlay.component.js

@@ -104,17 +104,19 @@ MarchingAntsOverlayComponent = __decorate([
         selector: 'ogrid-marching-ants-overlay',
         standalone: true,
         imports: [CommonModule],
+        styles: [`
+    .ogrid-marching-ants-svg { position: absolute; pointer-events: none; overflow: visible; }
+    .ogrid-marching-ants-svg--selection { z-index: 4; }
+    .ogrid-marching-ants-svg--clip { z-index: 5; }
+  `],
         template: `
     @if (selRect() && !clipRangeMatchesSel()) {
       <svg
-        [style.position]="'absolute'"
+        class="ogrid-marching-ants-svg ogrid-marching-ants-svg--selection"
         [style.top.px]="selRect()!.top"
         [style.left.px]="selRect()!.left"
         [style.width.px]="selRect()!.width"
         [style.height.px]="selRect()!.height"
-        [style.pointer-events]="'none'"
-        [style.z-index]="4"
-        [style.overflow]="'visible'"
         aria-hidden="true"
       >
         <rect
@@ -129,14 +131,11 @@ MarchingAntsOverlayComponent = __decorate([
     }
     @if (clipRect()) {
       <svg
-        [style.position]="'absolute'"
+        class="ogrid-marching-ants-svg ogrid-marching-ants-svg--clip"
         [style.top.px]="clipRect()!.top"
         [style.left.px]="clipRect()!.left"
         [style.width.px]="clipRect()!.width"
         [style.height.px]="clipRect()!.height"
-        [style.pointer-events]="'none'"
-        [style.z-index]="5"
-        [style.overflow]="'visible'"
         aria-hidden="true"
       >
         <rect

package/dist/esm/components/ogrid-layout.component.js

@@ -23,34 +23,47 @@ OGridLayoutComponent = __decorate([
         selector: 'ogrid-layout',
         standalone: true,
         imports: [CommonModule, SideBarComponent],
+        styles: [`
+    .ogrid-layout-root { display: flex; flex-direction: column; height: 100%; }
+    .ogrid-layout-container {
+      border: 1px solid var(--ogrid-border, #e0e0e0);
+      overflow: hidden; display: flex; flex-direction: column;
+      flex: 1; min-height: 0; background: var(--ogrid-bg, #fff);
+    }
+    .ogrid-layout-toolbar {
+      display: flex; justify-content: space-between; align-items: center;
+      padding: 6px 12px; background: var(--ogrid-header-bg, #f5f5f5);
+      gap: 8px; flex-wrap: wrap; min-height: 0;
+    }
+    .ogrid-layout-toolbar--has-below { border-bottom: none; }
+    .ogrid-layout-toolbar--no-below { border-bottom: 1px solid var(--ogrid-border, #e0e0e0); }
+    .ogrid-layout-toolbar-left { display: flex; align-items: center; gap: 8px; }
+    .ogrid-layout-toolbar-right { display: flex; align-items: center; gap: 8px; }
+    .ogrid-layout-toolbar-below {
+      border-bottom: 1px solid var(--ogrid-border, #e0e0e0);
+      padding: 6px 12px; background: var(--ogrid-header-bg, #f5f5f5);
+    }
+    .ogrid-layout-grid-area { width: 100%; min-width: 0; min-height: 0; flex: 1; display: flex; }
+    .ogrid-layout-grid-content { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
+    .ogrid-layout-footer {
+      border-top: 1px solid var(--ogrid-border, #e0e0e0);
+      background: var(--ogrid-header-bg, #f5f5f5); padding: 6px 12px;
+    }
+  `],
         template: `
-    <div [class]="className() ?? ''" [style.display]="'flex'" [style.flex-direction]="'column'" [style.height]="'100%'">
-      <div [style.border]="'1px solid var(--ogrid-border, #e0e0e0)'"
-           [style.border-radius.px]="borderRadius"
-           [style.overflow]="'hidden'"
-           [style.display]="'flex'"
-           [style.flex-direction]="'column'"
-           [style.flex]="1"
-           [style.min-height]="0"
-           [style.background]="'var(--ogrid-bg, #fff)'"
-      >
+    <div [class]="(className() ?? '') + ' ogrid-layout-root'">
+      <div class="ogrid-layout-container" [style.border-radius.px]="borderRadius">
         <!-- Toolbar strip -->
         @if (hasToolbar()) {
           <div
-            [style.display]="'flex'"
-            [style.justify-content]="'space-between'"
-            [style.align-items]="'center'"
-            [style.padding]="'6px 12px'"
-            [style.background]="'var(--ogrid-header-bg, #f5f5f5)'"
-            [style.gap.px]="8"
-            [style.flex-wrap]="'wrap'"
-            [style.min-height]="0"
-            [style.border-bottom]="hasToolbarBelow() ? 'none' : '1px solid var(--ogrid-border, #e0e0e0)'"
+            class="ogrid-layout-toolbar"
+            [class.ogrid-layout-toolbar--has-below]="hasToolbarBelow()"
+            [class.ogrid-layout-toolbar--no-below]="!hasToolbarBelow()"
           >
-            <div style="display:flex;align-items:center;gap:8px">
+            <div class="ogrid-layout-toolbar-left">
               <ng-content select="[toolbar]"></ng-content>
             </div>
-            <div style="display:flex;align-items:center;gap:8px">
+            <div class="ogrid-layout-toolbar-right">
               <ng-content select="[toolbarEnd]"></ng-content>
             </div>
           </div>
@@ -58,18 +71,18 @@ OGridLayoutComponent = __decorate([
 
         <!-- Secondary toolbar row -->
         @if (hasToolbarBelow()) {
-          <div style="border-bottom:1px solid var(--ogrid-border, #e0e0e0);padding:6px 12px;background:var(--ogrid-header-bg, #f5f5f5)">
+          <div class="ogrid-layout-toolbar-below">
             <ng-content select="[toolbarBelow]"></ng-content>
           </div>
         }
 
         <!-- Grid area -->
         @if (sideBar()) {
-          <div style="width:100%;min-width:0;min-height:0;flex:1;display:flex">
+          <div class="ogrid-layout-grid-area">
             @if (sideBar()?.position === 'left') {
               <ogrid-sidebar [sideBarProps]="sideBar()"></ogrid-sidebar>
             }
-            <div style="flex:1;min-width:0;min-height:0;display:flex;flex-direction:column">
+            <div class="ogrid-layout-grid-content">
               <ng-content></ng-content>
             </div>
             @if (sideBar()?.position !== 'left') {
@@ -77,14 +90,14 @@ OGridLayoutComponent = __decorate([
             }
           </div>
         } @else {
-          <div style="width:100%;min-width:0;min-height:0;flex:1;display:flex;flex-direction:column">
+          <div class="ogrid-layout-grid-content">
             <ng-content></ng-content>
           </div>
         }
 
         <!-- Footer strip (pagination) -->
         @if (hasPagination()) {
-          <div style="border-top:1px solid var(--ogrid-border, #e0e0e0);background:var(--ogrid-header-bg, #f5f5f5);padding:6px 12px">
+          <div class="ogrid-layout-footer">
             <ng-content select="[pagination]"></ng-content>
           </div>
         }

package/dist/esm/components/sidebar.component.js

@@ -98,8 +98,70 @@ SideBarComponent = __decorate([
         selector: 'ogrid-sidebar',
         standalone: true,
         imports: [CommonModule],
+        styles: [`
+    .ogrid-sidebar-root { display: flex; flex-direction: row; flex-shrink: 0; }
+    .ogrid-sidebar-tab-strip {
+      display: flex; flex-direction: column;
+      width: var(--ogrid-sidebar-tab-size, 36px);
+      background: var(--ogrid-header-bg, #f5f5f5);
+    }
+    .ogrid-sidebar-tab-strip--left { border-right: 1px solid var(--ogrid-border, #e0e0e0); }
+    .ogrid-sidebar-tab-strip--right { border-left: 1px solid var(--ogrid-border, #e0e0e0); }
+    .ogrid-sidebar-tab {
+      width: var(--ogrid-sidebar-tab-size, 36px);
+      height: var(--ogrid-sidebar-tab-size, 36px);
+      border: none; cursor: pointer;
+      color: var(--ogrid-fg, #242424); font-size: 14px;
+      display: flex; align-items: center; justify-content: center;
+      background: transparent; font-weight: normal;
+    }
+    .ogrid-sidebar-tab--active { background: var(--ogrid-bg, #fff); font-weight: bold; }
+    .ogrid-sidebar-panel {
+      width: var(--ogrid-sidebar-panel-width, 240px);
+      display: flex; flex-direction: column; overflow: hidden;
+      background: var(--ogrid-bg, #fff); color: var(--ogrid-fg, #242424);
+    }
+    .ogrid-sidebar-panel--left { border-right: 1px solid var(--ogrid-border, #e0e0e0); }
+    .ogrid-sidebar-panel--right { border-left: 1px solid var(--ogrid-border, #e0e0e0); }
+    .ogrid-sidebar-panel-header {
+      display: flex; justify-content: space-between; align-items: center;
+      padding: 8px 12px; border-bottom: 1px solid var(--ogrid-border, #e0e0e0); font-weight: 600;
+    }
+    .ogrid-sidebar-panel-close {
+      border: none; background: transparent; cursor: pointer;
+      font-size: 16px; color: var(--ogrid-fg, #242424);
+    }
+    .ogrid-sidebar-panel-body { flex: 1; overflow-y: auto; padding: 8px 12px; }
+    .ogrid-sidebar-actions { display: flex; gap: 8px; margin-bottom: 8px; }
+    .ogrid-sidebar-action-btn {
+      flex: 1; cursor: pointer;
+      background: var(--ogrid-bg-subtle, #f3f2f1); color: var(--ogrid-fg, #242424);
+      border: 1px solid var(--ogrid-border, #e0e0e0); border-radius: 4px; padding: 4px 8px;
+    }
+    .ogrid-sidebar-col-label { display: flex; align-items: center; gap: 6px; padding: 2px 0; cursor: pointer; }
+    .ogrid-sidebar-empty { color: var(--ogrid-muted, #999); font-style: italic; }
+    .ogrid-sidebar-filter-group { margin-bottom: 12px; }
+    .ogrid-sidebar-filter-label { font-weight: 500; margin-bottom: 4px; font-size: 13px; }
+    .ogrid-sidebar-text-input {
+      width: 100%; box-sizing: border-box; padding: 4px 6px;
+      background: var(--ogrid-bg, #fff); color: var(--ogrid-fg, #242424);
+      border: 1px solid var(--ogrid-border, #e0e0e0); border-radius: 4px;
+    }
+    .ogrid-sidebar-date-row { display: flex; flex-direction: column; gap: 4px; }
+    .ogrid-sidebar-date-label { display: flex; align-items: center; gap: 4px; font-size: 12px; }
+    .ogrid-sidebar-date-input {
+      flex: 1; padding: 2px 4px;
+      background: var(--ogrid-bg, #fff); color: var(--ogrid-fg, #242424);
+      border: 1px solid var(--ogrid-border, #e0e0e0); border-radius: 4px;
+    }
+    .ogrid-sidebar-multiselect-list { max-height: 120px; overflow-y: auto; }
+    .ogrid-sidebar-multiselect-item {
+      display: flex; align-items: center; gap: 4px;
+      padding: 1px 0; cursor: pointer; font-size: 13px;
+    }
+  `],
         template: `
-    <div style="display:flex;flex-direction:row;flex-shrink:0" role="complementary" aria-label="Side bar">
+    <div class="ogrid-sidebar-root" role="complementary" aria-label="Side bar">
       @if (sideBarProps()?.position === 'left') {
         <ng-container *ngTemplateOutlet="tabStripTpl"></ng-container>
         <ng-container *ngTemplateOutlet="panelContentTpl"></ng-container>
@@ -112,33 +174,21 @@ SideBarComponent = __decorate([
 
     <ng-template #tabStripTpl>
       <div
-        [style.display]="'flex'"
-        [style.flex-direction]="'column'"
-        [style.width.px]="tabWidth"
-        [style.background]="'var(--ogrid-header-bg, #f5f5f5)'"
-        [style.border-left]="sideBarProps()?.position === 'right' ? '1px solid var(--ogrid-border, #e0e0e0)' : 'none'"
-        [style.border-right]="sideBarProps()?.position === 'left' ? '1px solid var(--ogrid-border, #e0e0e0)' : 'none'"
+        class="ogrid-sidebar-tab-strip"
+        [class.ogrid-sidebar-tab-strip--left]="sideBarProps()?.position === 'left'"
+        [class.ogrid-sidebar-tab-strip--right]="sideBarProps()?.position === 'right'"
         role="tablist"
         aria-label="Side bar tabs"
       >
         @for (panel of sideBarProps()?.panels ?? []; track panel) {
           <button
             role="tab"
+            class="ogrid-sidebar-tab"
+            [class.ogrid-sidebar-tab--active]="sideBarProps()?.activePanel === panel"
             [attr.aria-selected]="sideBarProps()?.activePanel === panel"
             [attr.aria-label]="panelLabels[panel]"
             (click)="onTabClick(panel)"
             [title]="panelLabels[panel]"
-            [style.width.px]="tabWidth"
-            [style.height.px]="tabWidth"
-            [style.border]="'none'"
-            [style.cursor]="'pointer'"
-            [style.color]="'var(--ogrid-fg, #242424)'"
-            [style.font-size.px]="14"
-            [style.display]="'flex'"
-            [style.align-items]="'center'"
-            [style.justify-content]="'center'"
-            [style.background]="sideBarProps()?.activePanel === panel ? 'var(--ogrid-bg, #fff)' : 'transparent'"
-            [style.font-weight]="sideBarProps()?.activePanel === panel ? 'bold' : 'normal'"
           >
             {{ panel === 'columns' ? '\u2261' : '\u2A65' }}
           </button>
@@ -150,28 +200,23 @@ SideBarComponent = __decorate([
       @if (sideBarProps()?.activePanel) {
         <div
           role="tabpanel"
+          class="ogrid-sidebar-panel"
+          [class.ogrid-sidebar-panel--left]="sideBarProps()?.position === 'left'"
+          [class.ogrid-sidebar-panel--right]="sideBarProps()?.position === 'right'"
           [attr.aria-label]="panelLabels[sideBarProps()!.activePanel!]"
-          [style.width.px]="panelWidth"
-          [style.display]="'flex'"
-          [style.flex-direction]="'column'"
-          [style.overflow]="'hidden'"
-          [style.background]="'var(--ogrid-bg, #fff)'"
-          [style.color]="'var(--ogrid-fg, #242424)'"
-          [style.border-left]="sideBarProps()?.position === 'right' ? '1px solid var(--ogrid-border, #e0e0e0)' : 'none'"
-          [style.border-right]="sideBarProps()?.position === 'left' ? '1px solid var(--ogrid-border, #e0e0e0)' : 'none'"
         >
-          <div style="display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-bottom:1px solid var(--ogrid-border, #e0e0e0);font-weight:600">
+          <div class="ogrid-sidebar-panel-header">
             <span>{{ panelLabels[sideBarProps()!.activePanel!] }}</span>
-            <button (click)="sideBarProps()?.onPanelChange(null)" style="border:none;background:transparent;cursor:pointer;font-size:16px;color:var(--ogrid-fg, #242424)" aria-label="Close panel">&times;</button>
+            <button (click)="sideBarProps()?.onPanelChange(null)" class="ogrid-sidebar-panel-close" aria-label="Close panel">&times;</button>
           </div>
-          <div style="flex:1;overflow-y:auto;padding:8px 12px">
+          <div class="ogrid-sidebar-panel-body">
             @if (sideBarProps()?.activePanel === 'columns') {
-              <div style="display:flex;gap:8px;margin-bottom:8px">
-                <button (click)="onSelectAll()" [disabled]="allVisible()" style="flex:1;cursor:pointer;background:var(--ogrid-bg-subtle, #f3f2f1);color:var(--ogrid-fg, #242424);border:1px solid var(--ogrid-border, #e0e0e0);border-radius:4px;padding:4px 8px">Select All</button>
-                <button (click)="onClearAll()" style="flex:1;cursor:pointer;background:var(--ogrid-bg-subtle, #f3f2f1);color:var(--ogrid-fg, #242424);border:1px solid var(--ogrid-border, #e0e0e0);border-radius:4px;padding:4px 8px">Clear All</button>
+              <div class="ogrid-sidebar-actions">
+                <button (click)="onSelectAll()" [disabled]="allVisible()" class="ogrid-sidebar-action-btn">Select All</button>
+                <button (click)="onClearAll()" class="ogrid-sidebar-action-btn">Clear All</button>
               </div>
               @for (col of sideBarProps()?.columns ?? []; track col.columnId) {
-                <label style="display:flex;align-items:center;gap:6px;padding:2px 0;cursor:pointer">
+                <label class="ogrid-sidebar-col-label">
                   <input type="checkbox" [checked]="sideBarProps()?.visibleColumns?.has(col.columnId)" (change)="onVisibilityChange(col.columnId, $any($event.target).checked)" [disabled]="col.required" />
                   <span>{{ col.name }}</span>
                 </label>
@@ -179,37 +224,37 @@ SideBarComponent = __decorate([
             }
             @if (sideBarProps()?.activePanel === 'filters') {
               @if ((sideBarProps()?.filterableColumns ?? []).length === 0) {
-                <div style="color:var(--ogrid-muted, #999);font-style:italic">No filterable columns</div>
+                <div class="ogrid-sidebar-empty">No filterable columns</div>
               }
               @for (col of sideBarProps()?.filterableColumns ?? []; track col.columnId) {
-                <div style="margin-bottom:12px">
-                  <div style="font-weight:500;margin-bottom:4px;font-size:13px">{{ col.name }}</div>
+                <div class="ogrid-sidebar-filter-group">
+                  <div class="ogrid-sidebar-filter-label">{{ col.name }}</div>
                   @if (col.filterType === 'text') {
                     <input
                       type="text"
+                      class="ogrid-sidebar-text-input"
                       [value]="getTextFilterValue(col.filterField)"
                       (input)="onTextFilterChange(col.filterField, $any($event.target).value)"
                       [placeholder]="'Filter ' + col.name + '...'"
                       [attr.aria-label]="'Filter ' + col.name"
-                      style="width:100%;box-sizing:border-box;padding:4px 6px;background:var(--ogrid-bg, #fff);color:var(--ogrid-fg, #242424);border:1px solid var(--ogrid-border, #e0e0e0);border-radius:4px"
                     />
                   }
                   @if (col.filterType === 'date') {
-                    <div style="display:flex;flex-direction:column;gap:4px">
-                      <label style="display:flex;align-items:center;gap:4px;font-size:12px">
+                    <div class="ogrid-sidebar-date-row">
+                      <label class="ogrid-sidebar-date-label">
                         From:
-                        <input type="date" [value]="getDateFrom(col.filterField)" (change)="onDateFromChange(col.filterField, $any($event.target).value)" [attr.aria-label]="col.name + ' from date'" style="flex:1;padding:2px 4px;background:var(--ogrid-bg, #fff);color:var(--ogrid-fg, #242424);border:1px solid var(--ogrid-border, #e0e0e0);border-radius:4px" />
+                        <input type="date" class="ogrid-sidebar-date-input" [value]="getDateFrom(col.filterField)" (change)="onDateFromChange(col.filterField, $any($event.target).value)" [attr.aria-label]="col.name + ' from date'" />
                       </label>
-                      <label style="display:flex;align-items:center;gap:4px;font-size:12px">
+                      <label class="ogrid-sidebar-date-label">
                         To:
-                        <input type="date" [value]="getDateTo(col.filterField)" (change)="onDateToChange(col.filterField, $any($event.target).value)" [attr.aria-label]="col.name + ' to date'" style="flex:1;padding:2px 4px;background:var(--ogrid-bg, #fff);color:var(--ogrid-fg, #242424);border:1px solid var(--ogrid-border, #e0e0e0);border-radius:4px" />
+                        <input type="date" class="ogrid-sidebar-date-input" [value]="getDateTo(col.filterField)" (change)="onDateToChange(col.filterField, $any($event.target).value)" [attr.aria-label]="col.name + ' to date'" />
                       </label>
                     </div>
                   }
                   @if (col.filterType === 'multiSelect') {
-                    <div style="max-height:120px;overflow-y:auto" role="group" [attr.aria-label]="col.name + ' options'">
+                    <div class="ogrid-sidebar-multiselect-list" role="group" [attr.aria-label]="col.name + ' options'">
                       @for (opt of getFilterOptions(col.filterField); track opt) {
-                        <label style="display:flex;align-items:center;gap:4px;padding:1px 0;cursor:pointer;font-size:13px">
+                        <label class="ogrid-sidebar-multiselect-item">
                           <input type="checkbox" [checked]="isMultiSelectChecked(col.filterField, opt)" (change)="onMultiSelectChange(col.filterField, opt, $any($event.target).checked)" />
                           <span>{{ opt }}</span>
                         </label>

package/dist/esm/index.js

@@ -13,4 +13,5 @@ export { GridContextMenuComponent } from './components/grid-context-menu.compone
 export { SideBarComponent } from './components/sidebar.component';
 export { MarchingAntsOverlayComponent } from './components/marching-ants-overlay.component';
 export { EmptyStateComponent } from './components/empty-state.component';
+export { BaseDataGridTableComponent } from './components/base-datagrid-table.component';
 export { getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, createDebouncedSignal, createDebouncedCallback, debounce, createLatestRef, createLatestCallback, } from './utils';

package/dist/types/components/base-datagrid-table.component.d.ts

@@ -0,0 +1,160 @@
+import { ElementRef } from '@angular/core';
+import { DataGridStateService } from '../services/datagrid-state.service';
+import { ColumnReorderService } from '../services/column-reorder.service';
+import { VirtualScrollService } from '../services/virtual-scroll.service';
+import type { IOGridDataGridProps, IColumnDef, RowId } from '../types';
+import type { HeaderFilterConfig, CellRenderDescriptor } from '../utils';
+/**
+ * Abstract base class containing all shared TypeScript logic for DataGridTable components.
+ * Framework-specific UI packages extend this with their templates and style overrides.
+ *
+ * Subclasses must:
+ * 1. Provide a @Component decorator with template and styles
+ * 2. Call `initBase()` in the constructor (effects require injection context)
+ * 3. Implement abstract accessors for propsInput, wrapperRef, and tableContainerRef
+ */
+export declare abstract class BaseDataGridTableComponent<T = any> {
+    readonly stateService: DataGridStateService<T>;
+    readonly columnReorderService: ColumnReorderService<T>;
+    readonly virtualScrollService: VirtualScrollService;
+    protected lastMouseShift: boolean;
+    readonly columnSizingVersion: import("@angular/core").WritableSignal<number>;
+    /** Return the IOGridDataGridProps from however the subclass receives them */
+    protected abstract getProps(): IOGridDataGridProps<T> | undefined;
+    /** Return the wrapper element ref */
+    protected abstract getWrapperRef(): ElementRef<HTMLElement> | undefined;
+    /** Return the table container element ref */
+    protected abstract getTableContainerRef(): ElementRef<HTMLElement> | undefined;
+    readonly state: import("@angular/core").Signal<import("../services/datagrid-state.service").DataGridStateResult<T>>;
+    readonly tableContainerEl: import("@angular/core").Signal<HTMLElement | null>;
+    readonly items: import("@angular/core").Signal<T[]>;
+    readonly getRowId: import("@angular/core").Signal<(item: T) => RowId>;
+    readonly isLoading: import("@angular/core").Signal<boolean>;
+    readonly loadingMessage: import("@angular/core").Signal<string>;
+    readonly freezeRows: import("@angular/core").Signal<number | undefined>;
+    readonly freezeCols: import("@angular/core").Signal<number | undefined>;
+    readonly layoutModeFit: import("@angular/core").Signal<boolean>;
+    readonly ariaLabel: import("@angular/core").Signal<string>;
+    readonly ariaLabelledBy: import("@angular/core").Signal<string | undefined>;
+    readonly emptyState: import("@angular/core").Signal<{
+        onClearAll: () => void;
+        hasActiveFilters: boolean;
+        message?: string;
+        render?: import("@angular/core").TemplateRef<unknown>;
+    } | undefined>;
+    readonly currentPage: import("@angular/core").Signal<number>;
+    readonly pageSize: import("@angular/core").Signal<number>;
+    readonly rowNumberOffset: import("@angular/core").Signal<number>;
+    readonly visibleCols: import("@angular/core").Signal<IColumnDef<T>[]>;
+    readonly hasCheckboxCol: import("@angular/core").Signal<boolean>;
+    readonly hasRowNumbersCol: import("@angular/core").Signal<boolean>;
+    readonly colOffset: import("@angular/core").Signal<number>;
+    readonly containerWidth: import("@angular/core").Signal<number>;
+    readonly minTableWidth: import("@angular/core").Signal<number>;
+    readonly desiredTableWidth: import("@angular/core").Signal<number>;
+    readonly columnSizingOverrides: import("@angular/core").Signal<Record<string, {
+        widthPx: number;
+    }>>;
+    readonly selectedRowIds: import("@angular/core").Signal<Set<RowId>>;
+    readonly allSelected: import("@angular/core").Signal<boolean>;
+    readonly someSelected: import("@angular/core").Signal<boolean>;
+    readonly editingCell: import("@angular/core").Signal<{
+        rowId: RowId;
+        columnId: string;
+    } | null>;
+    readonly pendingEditorValue: import("@angular/core").Signal<unknown>;
+    readonly activeCell: import("@angular/core").Signal<import("@alaarab/ogrid-core").IActiveCell | null>;
+    readonly selectionRange: import("@angular/core").Signal<import("@alaarab/ogrid-core").ISelectionRange | null>;
+    readonly hasCellSelection: import("@angular/core").Signal<boolean>;
+    readonly cutRange: import("@angular/core").Signal<import("@alaarab/ogrid-core").ISelectionRange | null>;
+    readonly copyRange: import("@angular/core").Signal<import("@alaarab/ogrid-core").ISelectionRange | null>;
+    readonly canUndo: import("@angular/core").Signal<boolean>;
+    readonly canRedo: import("@angular/core").Signal<boolean>;
+    readonly isDragging: import("@angular/core").Signal<boolean>;
+    readonly menuPosition: import("@angular/core").Signal<{
+        x: number;
+        y: number;
+    } | null>;
+    readonly statusBarConfig: import("@angular/core").Signal<import("@alaarab/ogrid-core").IStatusBarProps | null>;
+    readonly showEmptyInGrid: import("@angular/core").Signal<boolean>;
+    readonly headerFilterInput: import("@angular/core").Signal<{
+        sortBy?: string;
+        sortDirection: "asc" | "desc";
+        onColumnSort: (columnKey: string) => void;
+        filters: import("@alaarab/ogrid-core").IFilters;
+        onFilterChange: (key: string, value: import("@alaarab/ogrid-core").FilterValue | undefined) => void;
+        filterOptions: Record<string, string[]>;
+        loadingFilterOptions: Record<string, boolean>;
+        peopleSearch?: (query: string) => Promise<import("@alaarab/ogrid-core").UserLike[]>;
+    }>;
+    readonly cellDescriptorInput: import("@angular/core").Signal<{
+        editingCell: {
+            rowId: RowId;
+            columnId: string;
+        } | null;
+        activeCell: import("@alaarab/ogrid-core").IActiveCell | null;
+        selectionRange: import("@alaarab/ogrid-core").ISelectionRange | null;
+        cutRange: import("@alaarab/ogrid-core").ISelectionRange | null;
+        copyRange: import("@alaarab/ogrid-core").ISelectionRange | null;
+        colOffset: number;
+        itemsLength: number;
+        getRowId: (item: T) => RowId;
+        editable?: boolean;
+        onCellValueChanged?: ((event: import("@alaarab/ogrid-core").ICellValueChangedEvent<T>) => void) | undefined;
+        isDragging: boolean;
+    }>;
+    readonly allowOverflowX: import("@angular/core").Signal<boolean>;
+    readonly selectionCellCount: import("@angular/core").Signal<number | undefined>;
+    readonly headerRows: import("@angular/core").Signal<import("@alaarab/ogrid-core").HeaderRow<T>[]>;
+    readonly columnLayouts: import("@angular/core").Signal<{
+        col: IColumnDef<T>;
+        pinnedLeft: boolean;
+        pinnedRight: boolean;
+        minWidth: number;
+        width: number;
+    }[]>;
+    /**
+     * Initialize base wiring effects. Must be called from subclass constructor
+     * (effects need to run inside an injection context).
+     */
+    protected initBase(): void;
+    asColumnDef(colDef: unknown): IColumnDef<T>;
+    visibleColIndex(col: IColumnDef<T>): number;
+    getColumnWidth(col: IColumnDef<T>): number;
+    getFilterConfig(col: IColumnDef<T>): HeaderFilterConfig;
+    getCellDescriptor(item: T, col: IColumnDef<T>, rowIndex: number, colIdx: number): CellRenderDescriptor;
+    resolveCellContent(col: IColumnDef<T>, item: T, displayValue: unknown): string;
+    resolveCellStyleFn(col: IColumnDef<T>, item: T): Record<string, string> | undefined;
+    getSelectValues(col: IColumnDef<T>): string[];
+    formatDateForInput(value: unknown): string;
+    onWrapperMouseDown(event: MouseEvent): void;
+    onGridKeyDown(event: KeyboardEvent): void;
+    onCellMouseDown(event: MouseEvent, rowIndex: number, globalColIndex: number): void;
+    onCellClick(rowIndex: number, globalColIndex: number): void;
+    onCellContextMenu(event: MouseEvent): void;
+    onCellDblClick(rowId: RowId, columnId: string): void;
+    onFillHandleMouseDown(event: MouseEvent): void;
+    onResizeStart(event: MouseEvent, col: IColumnDef<T>): void;
+    onSelectAllChange(event: Event): void;
+    onRowClick(event: MouseEvent, rowId: RowId): void;
+    onRowCheckboxChange(rowId: RowId, event: Event, rowIndex: number): void;
+    commitEdit(item: T, columnId: string, oldValue: unknown, newValue: unknown, rowIndex: number, globalColIndex: number): void;
+    cancelEdit(): void;
+    onEditorKeydown(event: KeyboardEvent, item: T, columnId: string, oldValue: unknown, rowIndex: number, globalColIndex: number): void;
+    closeContextMenu(): void;
+    handleCopy(): void;
+    handleCut(): void;
+    handlePaste(): void;
+    handleSelectAllCells(): void;
+    onUndo(): void;
+    onRedo(): void;
+    onHeaderMouseDown(columnId: string, event: MouseEvent): void;
+    onPinColumn(columnId: string, side: 'left' | 'right'): void;
+    onUnpinColumn(columnId: string): void;
+    isPinned(columnId: string): 'left' | 'right' | undefined;
+    getPinState(columnId: string): {
+        canPinLeft: boolean;
+        canPinRight: boolean;
+        canUnpin: boolean;
+    };
+}

package/dist/types/index.d.ts

@@ -17,5 +17,6 @@ export { SideBarComponent } from './components/sidebar.component';
 export type { SideBarProps, SideBarFilterColumn } from './components/sidebar.component';
 export { MarchingAntsOverlayComponent } from './components/marching-ants-overlay.component';
 export { EmptyStateComponent } from './components/empty-state.component';
+export { BaseDataGridTableComponent } from './components/base-datagrid-table.component';
 export type { HeaderFilterConfigInput, HeaderFilterConfig, CellRenderDescriptorInput, CellRenderDescriptor, CellRenderMode, } from './utils';
 export { getHeaderFilterConfig, getCellRenderDescriptor, resolveCellDisplayContent, resolveCellStyle, createDebouncedSignal, createDebouncedCallback, debounce, createLatestRef, createLatestCallback, } from './utils';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-angular",
-  "version": "2.0.5",
+  "version": "2.0.6",
   "description": "OGrid Angular – Angular services, signals, and headless components for OGrid data grids.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -22,7 +22,7 @@
   "files": ["dist", "README.md", "LICENSE"],
   "engines": { "node": ">=18" },
   "dependencies": {
-    "@alaarab/ogrid-core": "2.0.5"
+    "@alaarab/ogrid-core": "2.0.6"
   },
   "peerDependencies": {
     "@angular/core": "^21.0.0",
@@ -34,9 +34,10 @@
     "@angular/compiler": "^21.1.4",
     "@angular/platform-browser": "^21.1.4",
     "@angular/platform-browser-dynamic": "^21.1.4",
-    "rxjs": "^7.8.0",
+    "rxjs": "^7.8.2",
     "zone.js": "^0.15.0",
-    "typescript": "^5.7.3"
+    "typescript": "^5.9.3"
   },
+  "sideEffects": false,
   "publishConfig": { "access": "public" }
 }