@gridnexa/angular 0.0.1 → 0.0.3

package/README.md

@@ -1,10 +1,33 @@
 # @gridnexa/angular
 
-Angular package for GridNexa.
+Enterprise Angular data grid for modern UI products that need spreadsheet-grade power without giving up product polish.
+
+GridNexa is built for React, Angular, Vue, and JavaScript teams. The Angular package gives you a native Angular grid with typed columns, row selection, row numbers, sorting, filtering, advanced filters, formulas, inline editing, grouped headers, grouping, pivoting, tree data, master/detail, CSV export, Excel export, and theme-ready UI.
+
+## Install
+
+```bash
+npm install @gridnexa/angular
+```
+
+```bash
+pnpm add @gridnexa/angular
+```
+
+## Usage
 
 ```ts
 import { Component } from "@angular/core";
-import { GridNexaAngularComponent } from "@gridnexa/angular";
+import { GridNexaAngularComponent, type Column } from "@gridnexa/angular";
+
+interface Employee {
+  id: number;
+  name: string;
+  department: string;
+  city: string;
+  score: number;
+  adjustedScore: string;
+}
 
 @Component({
   selector: "app-root",
@@ -16,16 +39,52 @@ import { GridNexaAngularComponent } from "@gridnexa/angular";
       [rows]="rows"
       [rowNumbers]="true"
       [checkboxSelection]="true"
+      [enableFillHandle]="true"
+      [enableUndoRedo]="true"
+      [pageSize]="20"
+      [getRowId]="getRowId"
       (rowSelectionChange)="onSelection($event)"
+      (cellValueChange)="onCellValueChange($event)"
     />
   `,
 })
 export class AppComponent {
-  columns = columns;
-  rows = rows;
+  columns: Column<Employee>[] = [
+    { id: "name", field: "name", headerName: "Name", sortable: true, filter: "text", editable: true },
+    { id: "department", field: "department", headerName: "Department", filter: "set" },
+    { id: "score", field: "score", headerName: "Score", filter: "number", editable: true },
+    { id: "adjustedScore", field: "adjustedScore", headerName: "Adjusted" },
+  ];
 
-  onSelection(rows: unknown[]) {
+  rows: Employee[] = [
+    { id: 1, name: "John Carter", department: "Operations", city: "London", score: 92, adjustedScore: "=score * 1.05" },
+    { id: 2, name: "Alice Moreau", department: "Product", city: "Paris", score: 87, adjustedScore: "=score * 1.05" },
+  ];
+
+  getRowId = (row: Employee) => row.id;
+
+  onSelection(rows: Employee[]) {
     console.log(rows);
   }
+
+  onCellValueChange(event: unknown) {
+    console.log(event);
+  }
 }
 ```
+
+## Features
+
+- Native Angular data grid with TypeScript column models
+- Excel-style features: formulas, fill, copy/paste, undo/redo, find, CSV export, and Excel export
+- Filtering: column filters, quick filter, external filter, and advanced filter model
+- Data modeling: grouping, pivoting, tree data indentation, master/detail, and transactions
+- Grid UX: row selection, row numbers, pagination, status output, and tools panel
+- Columns: merged headers, column visibility tools, column reorder, and row reorder
+- Events: row selection, cell value changes, pivot model changes, advanced filter changes, and server-side operation events
+
+## Links
+
+- Website: https://www.gridnexa.in/
+- Help: https://www.gridnexa.in/help
+- Repository: https://github.com/mhalungekar9/SmartGrid

package/dist/index.cjs

@@ -135,6 +135,12 @@ function buildPivot(rows, columns, groupBy, pivotBy, pivotValueColumns, pivotAgg
   });
   return { columns: pivotColumns, rows: pivotRows, active: true };
 }
+function buildGroupSummary(rows, columns, groupBy) {
+  return columns.filter((column) => column.field !== groupBy).map((column) => {
+    const values = rows.map((row) => Number(value(row, column, columns))).filter(Number.isFinite);
+    return values.length ? `${column.headerName}: ${values.reduce((sum, entry) => sum + entry, 0).toLocaleString()}` : "";
+  }).filter(Boolean).slice(0, 3).join(" | ");
+}
 function cell(text, tag = "td") {
   const element = document.createElement(tag);
   element.textContent = text;
@@ -176,9 +182,17 @@ var GridNexaAngularComponent = class {
   sortState = null;
   hiddenColumnIds = /* @__PURE__ */ new Set();
   activeCell = null;
+  rangeAnchor = null;
+  rangeEnd = null;
+  contextMenu = null;
+  expandedDetailIds = /* @__PURE__ */ new Set();
+  collapsedGroups = /* @__PURE__ */ new Set();
+  collapsedTreeKeys = /* @__PURE__ */ new Set();
   findText = "";
   toolsOpen = false;
   draggedColumnId = null;
+  draggedRowIndex = null;
+  columnWidths = /* @__PURE__ */ new Map();
   undoStack = [];
   redoStack = [];
   ngAfterViewInit() {
@@ -186,6 +200,9 @@ var GridNexaAngularComponent = class {
   }
   ngOnChanges() {
     this.hiddenColumnIds = new Set(this.columns.filter((column) => column.hidden).map((column) => column.id));
+    this.columns.forEach((column) => {
+      if (column.width && !this.columnWidths.has(column.id)) this.columnWidths.set(column.id, column.width);
+    });
     this.applyTransaction();
     this.render();
   }
@@ -257,15 +274,36 @@ var GridNexaAngularComponent = class {
   }
   fillDown() {
     if (!this.activeCell || !this.enableFillHandle) return;
+    const column = this.columns.find((entry) => entry.id === this.activeCell?.columnId);
+    if (this.rangeAnchor && this.rangeEnd && column) {
+      const minRow = Math.min(this.rangeAnchor.rowIndex, this.rangeEnd.rowIndex);
+      const maxRow = Math.max(this.rangeAnchor.rowIndex, this.rangeEnd.rowIndex);
+      const sourceRow2 = this.rows[minRow];
+      if (!sourceRow2 || column.editable === false) return;
+      const sourceValue = rawValue(sourceRow2, column);
+      for (let rowIndex = minRow + 1; rowIndex <= maxRow; rowIndex += 1) {
+        const row = this.rows[rowIndex];
+        if (row) this.setCellValue(row, rowIndex, column, sourceValue);
+      }
+      this.render();
+      return;
+    }
     const sourceRow = this.rows[this.activeCell.rowIndex];
     const targetRow = this.rows[this.activeCell.rowIndex + 1];
-    const column = this.columns.find((entry) => entry.id === this.activeCell?.columnId);
     if (!sourceRow || !targetRow || !column || column.editable === false) return;
     this.setCellValue(targetRow, this.activeCell.rowIndex + 1, column, rawValue(sourceRow, column));
     this.render();
   }
   async copyActiveCell() {
     if (!this.activeCell || typeof navigator === "undefined") return;
+    if (this.rangeAnchor && this.rangeEnd) {
+      const columns = this.columns.filter((column2) => !this.hiddenColumnIds.has(column2.id) && !column2.hidden);
+      const anchorColumn = columns.findIndex((entry) => entry.id === this.rangeAnchor?.columnId);
+      const endColumn = columns.findIndex((entry) => entry.id === this.rangeEnd?.columnId);
+      const text = this.rows.slice(Math.min(this.rangeAnchor.rowIndex, this.rangeEnd.rowIndex), Math.max(this.rangeAnchor.rowIndex, this.rangeEnd.rowIndex) + 1).map((row2) => columns.slice(Math.min(anchorColumn, endColumn), Math.max(anchorColumn, endColumn) + 1).map((column2) => format(row2, column2, this.columns)).join("	")).join("\n");
+      await navigator.clipboard?.writeText(text);
+      return;
+    }
     const row = this.rows[this.activeCell.rowIndex];
     const column = this.columns.find((entry) => entry.id === this.activeCell?.columnId);
     if (!row || !column) return;
@@ -273,11 +311,17 @@ var GridNexaAngularComponent = class {
   }
   async pasteActiveCell() {
     if (!this.activeCell || typeof navigator === "undefined") return;
-    const row = this.rows[this.activeCell.rowIndex];
-    const column = this.columns.find((entry) => entry.id === this.activeCell?.columnId);
-    if (!row || !column || column.editable === false) return;
     const text = await navigator.clipboard?.readText();
-    this.setCellValue(row, this.activeCell.rowIndex, column, text);
+    const columns = this.columns.filter((column) => !this.hiddenColumnIds.has(column.id) && !column.hidden);
+    const startColumn = columns.findIndex((entry) => entry.id === this.activeCell?.columnId);
+    text.split(/\r?\n/).forEach((line, rowOffset) => {
+      line.split("	").forEach((value2, columnOffset) => {
+        const rowIndex = this.activeCell.rowIndex + rowOffset;
+        const row = this.rows[rowIndex];
+        const column = columns[startColumn + columnOffset];
+        if (row && column && column.editable !== false) this.setCellValue(row, rowIndex, column, value2);
+      });
+    });
     this.render();
   }
   moveRow(rowIndex, direction) {
@@ -289,6 +333,14 @@ var GridNexaAngularComponent = class {
     this.rows = rows;
     this.render();
   }
+  reorderRow(sourceIndex, targetIndex) {
+    if (sourceIndex === targetIndex || sourceIndex < 0 || targetIndex < 0 || sourceIndex >= this.rows.length || targetIndex >= this.rows.length) return;
+    const rows = [...this.rows];
+    const [row] = rows.splice(sourceIndex, 1);
+    rows.splice(targetIndex, 0, row);
+    this.rows = rows;
+    this.render();
+  }
   moveColumn(sourceId, targetId) {
     if (sourceId === targetId) return;
     const columns = [...this.columns];
@@ -300,6 +352,63 @@ var GridNexaAngularComponent = class {
     this.columns = columns;
     this.render();
   }
+  makeDisplayRows(rows) {
+    if (this.groupBy) {
+      const buckets = /* @__PURE__ */ new Map();
+      rows.forEach((row) => {
+        const key = String(row[this.groupBy] ?? "Ungrouped");
+        buckets.set(key, [...buckets.get(key) ?? [], row]);
+      });
+      return Array.from(buckets.entries()).flatMap(([key, bucket]) => [
+        { kind: "group", key, label: key, rows: bucket, summaries: buildGroupSummary(bucket, this.columns, this.groupBy) },
+        ...this.collapsedGroups.has(key) ? [] : bucket.map((row) => ({ kind: "data", row, rowIndex: this.rows.indexOf(row) }))
+      ]);
+    }
+    if (this.getTreeDataPath) {
+      return rows.map((row) => {
+        const path = this.getTreeDataPath?.(row).filter(Boolean) ?? [];
+        return { row, path, key: path.join("/") };
+      }).sort((left, right) => left.key.localeCompare(right.key)).filter((entry) => entry.path.slice(0, -1).every((_, index) => !this.collapsedTreeKeys.has(entry.path.slice(0, index + 1).join("/")))).map((entry, _index, entries) => ({
+        kind: "data",
+        row: entry.row,
+        rowIndex: this.rows.indexOf(entry.row),
+        depth: Math.max(0, entry.path.length - 1),
+        treeKey: entry.key,
+        hasChildren: entries.some((other) => other.key.startsWith(`${entry.key}/`))
+      }));
+    }
+    return rows.map((row) => ({ kind: "data", row, rowIndex: this.rows.indexOf(row) }));
+  }
+  isCellInRange(rowIndex, columnId, columns) {
+    if (!this.rangeAnchor || !this.rangeEnd || !this.enableRangeSelection) return false;
+    const columnIndex = columns.findIndex((column) => column.id === columnId);
+    const anchorIndex = columns.findIndex((column) => column.id === this.rangeAnchor?.columnId);
+    const endIndex = columns.findIndex((column) => column.id === this.rangeEnd?.columnId);
+    return rowIndex >= Math.min(this.rangeAnchor.rowIndex, this.rangeEnd.rowIndex) && rowIndex <= Math.max(this.rangeAnchor.rowIndex, this.rangeEnd.rowIndex) && columnIndex >= Math.min(anchorIndex, endIndex) && columnIndex <= Math.max(anchorIndex, endIndex);
+  }
+  startColumnResize(event, column) {
+    event.preventDefault();
+    event.stopPropagation();
+    const startX = event.clientX;
+    const startWidth = this.columnWidths.get(column.id) ?? column.width ?? 150;
+    const move = (moveEvent) => {
+      this.columnWidths.set(column.id, Math.max(72, startWidth + moveEvent.clientX - startX));
+      this.render();
+    };
+    const up = () => {
+      document.removeEventListener("mousemove", move);
+      document.removeEventListener("mouseup", up);
+    };
+    document.addEventListener("mousemove", move);
+    document.addEventListener("mouseup", up);
+  }
+  pinnedStyle(column, columns) {
+    if (!column.pinned) return "";
+    const index = columns.findIndex((entry) => entry.id === column.id);
+    const width = (entry) => this.columnWidths.get(entry.id) ?? entry.width ?? 150;
+    const offset = column.pinned === "left" ? columns.slice(0, index).filter((entry) => entry.pinned === "left").reduce((sum, entry) => sum + width(entry), 0) : columns.slice(index + 1).filter((entry) => entry.pinned === "right").reduce((sum, entry) => sum + width(entry), 0);
+    return `position:sticky;${column.pinned}:${offset}px;z-index:2;background:white;box-shadow:${column.pinned === "left" ? "inset -1px 0 #dbe3ef" : "inset 1px 0 #dbe3ef"};`;
+  }
   updateAdvancedFilter(columnId, operator, filterValue) {
     const model = {
       kind: "group",
@@ -328,13 +437,15 @@ var GridNexaAngularComponent = class {
     if (!this.host) return;
     const sourceRows = this.visibleRows();
     const pivot = buildPivot(sourceRows, this.columns, this.groupBy, this.pivotBy, this.pivotValueColumns, this.pivotAggregation);
-    const columns = pivot.columns.filter((column) => !this.hiddenColumnIds.has(column.id) && !column.hidden);
+    const columns = pivot.columns.filter((column) => !this.hiddenColumnIds.has(column.id) && !column.hidden).sort((left, right) => (left.pinned === "left" ? 0 : left.pinned === "right" ? 2 : 1) - (right.pinned === "left" ? 0 : right.pinned === "right" ? 2 : 1));
     const pageRows = this.pageSize ? pivot.rows.slice(this.pageIndex * this.pageSize, this.pageIndex * this.pageSize + this.pageSize) : pivot.rows;
+    const displayRows = pivot.active ? pageRows.map((row) => ({ kind: "data", row, rowIndex: pivot.rows.indexOf(row) })) : this.makeDisplayRows(pageRows);
     const root = document.createElement("div");
     root.className = "gridnexa-angular-grid";
-    root.append(this.renderToolbar(columns, pivot.rows), this.renderTable(columns, pageRows));
+    root.append(this.renderToolbar(columns, pivot.rows), this.renderTable(columns, displayRows));
     if (this.toolsOpen) root.appendChild(this.renderToolsPanel());
     root.appendChild(this.renderStatus(pivot.rows.length));
+    if (this.contextMenu) root.appendChild(this.renderContextMenu());
     this.host.nativeElement.replaceChildren(root);
     this.serverSideOperation.emit({
       sortModel: this.sortState ? [this.sortState] : [],
@@ -366,6 +477,16 @@ var GridNexaAngularComponent = class {
       this.findText = find.value;
       this.render();
     });
+    const quickFilter = document.createElement("input");
+    quickFilter.type = "search";
+    quickFilter.placeholder = "Quick filter";
+    quickFilter.value = this.quickFilterText;
+    quickFilter.style.cssText = "min-height:32px;padding:0 10px;border:1px solid #bfdbfe;border-radius:8px";
+    quickFilter.addEventListener("input", () => {
+      this.quickFilterText = quickFilter.value;
+      this.pageIndex = 0;
+      this.render();
+    });
     const pageCount = this.pageSize ? Math.max(1, Math.ceil(rows.length / this.pageSize)) : 1;
     if (this.pageSize) {
       const prev = this.button("Prev", () => {
@@ -380,7 +501,7 @@ var GridNexaAngularComponent = class {
       next.disabled = this.pageIndex >= pageCount - 1;
       actions.append(prev, ` Page ${this.pageIndex + 1} `, next);
     }
-    actions.appendChild(find);
+    actions.append(quickFilter, find);
     if (this.enableUndoRedo) {
       const undo = this.button("Undo", () => this.undo());
       undo.disabled = !this.undoStack.length;
@@ -413,7 +534,7 @@ var GridNexaAngularComponent = class {
     if (this.rowNumbers) header.appendChild(cell("#", "th"));
     columns.forEach((column) => {
       const th = cell(`${column.headerName}${this.sortState?.columnId === column.id ? this.sortState.direction === "asc" ? " \u2191" : " \u2193" : ""}`, "th");
-      th.style.cssText = "padding:10px;border:1px solid #dbe3ef;background:#f8fbff;text-align:left";
+      th.style.cssText = `padding:10px;border:1px solid #dbe3ef;background:#f8fbff;text-align:left;width:${this.columnWidths.get(column.id) ?? column.width ?? 150}px;${this.pinnedStyle(column, columns)}`;
       th.draggable = true;
       th.addEventListener("dragstart", () => {
         this.draggedColumnId = column.id;
@@ -429,12 +550,25 @@ var GridNexaAngularComponent = class {
         this.sortState = this.sortState?.columnId !== column.id ? { columnId: column.id, direction: "asc" } : this.sortState.direction === "asc" ? { columnId: column.id, direction: "desc" } : null;
         this.render();
       });
+      if (column.resizable !== false) {
+        const resizer = document.createElement("span");
+        resizer.style.cssText = "float:right;width:7px;height:24px;cursor:col-resize;border-right:2px solid #bfdbfe";
+        resizer.addEventListener("mousedown", (event) => this.startColumnResize(event, column));
+        th.appendChild(resizer);
+      }
       header.appendChild(th);
     });
     thead.appendChild(header);
     table.appendChild(thead);
     const tbody = document.createElement("tbody");
-    rows.forEach((row, rowIndex) => this.appendRow(tbody, row, rowIndex, columns, leading));
+    rows.forEach((entry) => {
+      if (entry.kind === "group") this.appendGroupRow(tbody, entry, columns.length + leading);
+      if (entry.kind === "data") {
+        this.appendRow(tbody, entry.row, entry.rowIndex, columns, leading, entry);
+        const rowId = this.rowId(entry.row, entry.rowIndex);
+        if (this.masterDetailRenderer && this.expandedDetailIds.has(rowId)) this.appendDetailRow(tbody, entry.row, columns.length + leading);
+      }
+    });
     table.appendChild(tbody);
     return table;
   }
@@ -455,8 +589,41 @@ var GridNexaAngularComponent = class {
     });
     return row;
   }
-  appendRow(tbody, row, rowIndex, columns, leading) {
+  appendGroupRow(tbody, entry, colSpan) {
+    const tr = document.createElement("tr");
+    const td = document.createElement("td");
+    td.colSpan = colSpan;
+    td.style.cssText = "padding:10px;border:1px solid #dbe3ef;background:#eef4ff;color:#153e90;font-weight:800;text-transform:uppercase";
+    const toggle = this.button(this.collapsedGroups.has(entry.key) ? "+" : "-", () => {
+      this.collapsedGroups.has(entry.key) ? this.collapsedGroups.delete(entry.key) : this.collapsedGroups.add(entry.key);
+      this.render();
+    });
+    td.append(toggle, `${entry.label}  ${entry.rows.length} rows${entry.summaries ? `  ${entry.summaries}` : ""}`);
+    tr.appendChild(td);
+    tbody.appendChild(tr);
+  }
+  appendDetailRow(tbody, row, colSpan) {
+    const detailRow = document.createElement("tr");
+    const detail = document.createElement("td");
+    detail.colSpan = colSpan;
+    detail.style.cssText = "padding:12px;border:1px solid #dbe3ef;background:#f8fbff;color:#334155";
+    const content = this.masterDetailRenderer?.(row);
+    content instanceof Node ? detail.appendChild(content) : detail.textContent = String(content ?? "");
+    detailRow.appendChild(detail);
+    tbody.appendChild(detailRow);
+  }
+  appendRow(tbody, row, rowIndex, columns, leading, display) {
     const tr = document.createElement("tr");
+    tr.draggable = true;
+    tr.addEventListener("dragstart", () => {
+      this.draggedRowIndex = rowIndex;
+    });
+    tr.addEventListener("dragover", (event) => event.preventDefault());
+    tr.addEventListener("drop", (event) => {
+      event.preventDefault();
+      if (this.draggedRowIndex != null) this.reorderRow(this.draggedRowIndex, rowIndex);
+      this.draggedRowIndex = null;
+    });
     if (this.checkboxSelection) {
       const td = document.createElement("td");
       const checkbox = document.createElement("input");
@@ -481,45 +648,123 @@ var GridNexaAngularComponent = class {
     }
     columns.forEach((column, columnIndex) => {
       const td = cell(format(row, column, this.columns));
-      td.style.cssText = "padding:10px;border:1px solid #dbe3ef";
+      td.style.cssText = `padding:10px;border:1px solid #dbe3ef;width:${this.columnWidths.get(column.id) ?? column.width ?? 150}px;${this.pinnedStyle(column, columns)}`;
       if (this.activeCell?.rowIndex === rowIndex && this.activeCell.columnId === column.id) {
         td.style.outline = "2px solid #2563eb";
         td.style.outlineOffset = "-2px";
       }
+      if (this.isCellInRange(rowIndex, column.id, columns)) td.style.background = "rgba(37,99,235,.12)";
       if (this.findText && format(row, column, this.columns).toLowerCase().includes(this.findText.toLowerCase())) {
         td.style.background = "rgba(37,99,235,.1)";
       }
-      if (this.getTreeDataPath && columnIndex === 0) td.style.paddingLeft = `${12 + Math.max(0, this.getTreeDataPath(row).length - 1) * 24}px`;
-      td.addEventListener("click", () => {
+      if (this.getTreeDataPath && columnIndex === 0) {
+        td.style.paddingLeft = `${12 + (display?.depth ?? Math.max(0, this.getTreeDataPath(row).length - 1)) * 24}px`;
+        if (display?.hasChildren && display.treeKey) {
+          const treeKey = display.treeKey;
+          const toggle = this.button(this.collapsedTreeKeys.has(treeKey) ? "+" : "-", () => {
+            this.collapsedTreeKeys.has(treeKey) ? this.collapsedTreeKeys.delete(treeKey) : this.collapsedTreeKeys.add(treeKey);
+            this.render();
+          });
+          td.prepend(toggle);
+        }
+      } else if (this.masterDetailRenderer && columnIndex === 0) {
+        const rowId = this.rowId(row, rowIndex);
+        const toggle = this.button(this.expandedDetailIds.has(rowId) ? "-" : "+", () => {
+          this.expandedDetailIds.has(rowId) ? this.expandedDetailIds.delete(rowId) : this.expandedDetailIds.add(rowId);
+          this.render();
+        });
+        td.prepend(toggle);
+      }
+      td.addEventListener("click", (event) => {
+        this.contextMenu = null;
         this.activeCell = { rowIndex, columnId: column.id };
+        if (event.shiftKey && this.rangeAnchor) {
+          this.rangeEnd = { rowIndex, columnId: column.id };
+        } else {
+          this.rangeAnchor = { rowIndex, columnId: column.id };
+          this.rangeEnd = { rowIndex, columnId: column.id };
+        }
         this.cellClick.emit({ row, rowIndex, column });
         this.render();
       });
+      td.addEventListener("contextmenu", (event) => {
+        event.preventDefault();
+        this.activeCell = { rowIndex, columnId: column.id };
+        this.contextMenu = { x: event.clientX, y: event.clientY, rowIndex, columnId: column.id };
+        this.render();
+      });
       if (column.editable) td.addEventListener("dblclick", () => this.editCell(td, row, rowIndex, column));
       tr.appendChild(td);
     });
     tbody.appendChild(tr);
-    if (this.masterDetailRenderer) {
-      const detailRow = document.createElement("tr");
-      const detail = document.createElement("td");
-      detail.colSpan = columns.length + leading;
-      const content = this.masterDetailRenderer(row);
-      content instanceof Node ? detail.appendChild(content) : detail.textContent = String(content ?? "");
-      detailRow.appendChild(detail);
-      tbody.appendChild(detailRow);
-    }
   }
   editCell(td, row, rowIndex, column) {
     const oldValue = rawValue(row, column);
-    const input = document.createElement("input");
-    input.value = String(oldValue ?? "");
+    const input = this.createEditor(column, oldValue);
     td.replaceChildren(input);
     input.focus();
     input.addEventListener("blur", () => {
-      this.setCellValue(row, rowIndex, column, input.value);
+      this.setCellValue(row, rowIndex, column, input instanceof HTMLInputElement && input.type === "checkbox" ? input.checked : input.value);
       this.render();
     }, { once: true });
   }
+  createEditor(column, current) {
+    const editor = column.editor;
+    if (editor === "checkbox") {
+      const input2 = document.createElement("input");
+      input2.type = "checkbox";
+      input2.checked = Boolean(current);
+      return input2;
+    }
+    if (editor === "number" || editor === "date") {
+      const input2 = document.createElement("input");
+      input2.type = editor;
+      input2.value = String(current ?? "");
+      return input2;
+    }
+    if (editor && typeof editor === "object" && (editor.type === "select" || editor.type === "advancedSelect")) {
+      const select = document.createElement("select");
+      (editor.values ?? []).forEach((item) => {
+        const option = document.createElement("option");
+        option.value = String(item);
+        option.textContent = String(item);
+        select.appendChild(option);
+      });
+      select.value = String(current ?? "");
+      return select;
+    }
+    const input = document.createElement("input");
+    input.value = String(current ?? "");
+    return input;
+  }
+  renderContextMenu() {
+    const menu = document.createElement("div");
+    menu.style.cssText = `position:fixed;z-index:9999;left:${this.contextMenu?.x ?? 0}px;top:${this.contextMenu?.y ?? 0}px;display:grid;min-width:150px;padding:6px;border:1px solid #dbe3ef;border-radius:10px;background:white;box-shadow:0 18px 48px rgba(15,23,42,.18)`;
+    const row = this.contextMenu ? this.rows[this.contextMenu.rowIndex] : void 0;
+    const column = this.columns.find((entry) => entry.id === this.contextMenu?.columnId);
+    menu.append(
+      this.button("Copy", () => void this.copyActiveCell()),
+      this.button("Paste", () => void this.pasteActiveCell()),
+      this.button("Edit cell", () => {
+        if (!row || !column || column.editable === false || !this.contextMenu) return;
+        const nextValue = window.prompt(`Edit ${column.headerName}`, String(rawValue(row, column) ?? ""));
+        if (nextValue != null) this.setCellValue(row, this.contextMenu.rowIndex, column, nextValue);
+        this.contextMenu = null;
+        this.render();
+      }),
+      this.button("Clear cell", () => {
+        if (row && column && column.editable !== false && this.contextMenu) this.setCellValue(row, this.contextMenu.rowIndex, column, "");
+        this.contextMenu = null;
+        this.render();
+      }),
+      this.button("Hide column", () => {
+        if (column) this.hiddenColumnIds.add(column.id);
+        this.contextMenu = null;
+        this.render();
+      })
+    );
+    return menu;
+  }
   renderToolsPanel() {
     const panel = document.createElement("div");
     panel.style.cssText = "display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;padding:12px;border:1px solid #dbe3ef;border-top:0;background:#f8fbff";

package/dist/index.d.cts

@@ -57,9 +57,17 @@ declare class GridNexaAngularComponent<T = Record<string, unknown>> implements A
     private sortState;
     private hiddenColumnIds;
     private activeCell;
+    private rangeAnchor;
+    private rangeEnd;
+    private contextMenu;
+    private expandedDetailIds;
+    private collapsedGroups;
+    private collapsedTreeKeys;
     private findText;
     private toolsOpen;
     private draggedColumnId;
+    private draggedRowIndex;
+    private columnWidths;
     private undoStack;
     private redoStack;
     ngAfterViewInit(): void;
@@ -75,15 +83,24 @@ declare class GridNexaAngularComponent<T = Record<string, unknown>> implements A
     private copyActiveCell;
     private pasteActiveCell;
     private moveRow;
+    private reorderRow;
     private moveColumn;
+    private makeDisplayRows;
+    private isCellInRange;
+    private startColumnResize;
+    private pinnedStyle;
     private updateAdvancedFilter;
     private updatePivot;
     private render;
     private renderToolbar;
     private renderTable;
     private renderMergedHeaders;
+    private appendGroupRow;
+    private appendDetailRow;
     private appendRow;
     private editCell;
+    private createEditor;
+    private renderContextMenu;
     private renderToolsPanel;
     private select;
     private renderStatus;

package/dist/index.d.ts

@@ -57,9 +57,17 @@ declare class GridNexaAngularComponent<T = Record<string, unknown>> implements A
     private sortState;
     private hiddenColumnIds;
     private activeCell;
+    private rangeAnchor;
+    private rangeEnd;
+    private contextMenu;
+    private expandedDetailIds;
+    private collapsedGroups;
+    private collapsedTreeKeys;
     private findText;
     private toolsOpen;
     private draggedColumnId;
+    private draggedRowIndex;
+    private columnWidths;
     private undoStack;
     private redoStack;
     ngAfterViewInit(): void;
@@ -75,15 +83,24 @@ declare class GridNexaAngularComponent<T = Record<string, unknown>> implements A
     private copyActiveCell;
     private pasteActiveCell;
     private moveRow;
+    private reorderRow;
     private moveColumn;
+    private makeDisplayRows;
+    private isCellInRange;
+    private startColumnResize;
+    private pinnedStyle;
     private updateAdvancedFilter;
     private updatePivot;
     private render;
     private renderToolbar;
     private renderTable;
     private renderMergedHeaders;
+    private appendGroupRow;
+    private appendDetailRow;
     private appendRow;
     private editCell;
+    private createEditor;
+    private renderContextMenu;
     private renderToolsPanel;
     private select;
     private renderStatus;

package/dist/index.js

@@ -119,6 +119,12 @@ function buildPivot(rows, columns, groupBy, pivotBy, pivotValueColumns, pivotAgg
   });
   return { columns: pivotColumns, rows: pivotRows, active: true };
 }
+function buildGroupSummary(rows, columns, groupBy) {
+  return columns.filter((column) => column.field !== groupBy).map((column) => {
+    const values = rows.map((row) => Number(value(row, column, columns))).filter(Number.isFinite);
+    return values.length ? `${column.headerName}: ${values.reduce((sum, entry) => sum + entry, 0).toLocaleString()}` : "";
+  }).filter(Boolean).slice(0, 3).join(" | ");
+}
 function cell(text, tag = "td") {
   const element = document.createElement(tag);
   element.textContent = text;
@@ -160,9 +166,17 @@ var GridNexaAngularComponent = class {
   sortState = null;
   hiddenColumnIds = /* @__PURE__ */ new Set();
   activeCell = null;
+  rangeAnchor = null;
+  rangeEnd = null;
+  contextMenu = null;
+  expandedDetailIds = /* @__PURE__ */ new Set();
+  collapsedGroups = /* @__PURE__ */ new Set();
+  collapsedTreeKeys = /* @__PURE__ */ new Set();
   findText = "";
   toolsOpen = false;
   draggedColumnId = null;
+  draggedRowIndex = null;
+  columnWidths = /* @__PURE__ */ new Map();
   undoStack = [];
   redoStack = [];
   ngAfterViewInit() {
@@ -170,6 +184,9 @@ var GridNexaAngularComponent = class {
   }
   ngOnChanges() {
     this.hiddenColumnIds = new Set(this.columns.filter((column) => column.hidden).map((column) => column.id));
+    this.columns.forEach((column) => {
+      if (column.width && !this.columnWidths.has(column.id)) this.columnWidths.set(column.id, column.width);
+    });
     this.applyTransaction();
     this.render();
   }
@@ -241,15 +258,36 @@ var GridNexaAngularComponent = class {
   }
   fillDown() {
     if (!this.activeCell || !this.enableFillHandle) return;
+    const column = this.columns.find((entry) => entry.id === this.activeCell?.columnId);
+    if (this.rangeAnchor && this.rangeEnd && column) {
+      const minRow = Math.min(this.rangeAnchor.rowIndex, this.rangeEnd.rowIndex);
+      const maxRow = Math.max(this.rangeAnchor.rowIndex, this.rangeEnd.rowIndex);
+      const sourceRow2 = this.rows[minRow];
+      if (!sourceRow2 || column.editable === false) return;
+      const sourceValue = rawValue(sourceRow2, column);
+      for (let rowIndex = minRow + 1; rowIndex <= maxRow; rowIndex += 1) {
+        const row = this.rows[rowIndex];
+        if (row) this.setCellValue(row, rowIndex, column, sourceValue);
+      }
+      this.render();
+      return;
+    }
     const sourceRow = this.rows[this.activeCell.rowIndex];
     const targetRow = this.rows[this.activeCell.rowIndex + 1];
-    const column = this.columns.find((entry) => entry.id === this.activeCell?.columnId);
     if (!sourceRow || !targetRow || !column || column.editable === false) return;
     this.setCellValue(targetRow, this.activeCell.rowIndex + 1, column, rawValue(sourceRow, column));
     this.render();
   }
   async copyActiveCell() {
     if (!this.activeCell || typeof navigator === "undefined") return;
+    if (this.rangeAnchor && this.rangeEnd) {
+      const columns = this.columns.filter((column2) => !this.hiddenColumnIds.has(column2.id) && !column2.hidden);
+      const anchorColumn = columns.findIndex((entry) => entry.id === this.rangeAnchor?.columnId);
+      const endColumn = columns.findIndex((entry) => entry.id === this.rangeEnd?.columnId);
+      const text = this.rows.slice(Math.min(this.rangeAnchor.rowIndex, this.rangeEnd.rowIndex), Math.max(this.rangeAnchor.rowIndex, this.rangeEnd.rowIndex) + 1).map((row2) => columns.slice(Math.min(anchorColumn, endColumn), Math.max(anchorColumn, endColumn) + 1).map((column2) => format(row2, column2, this.columns)).join("	")).join("\n");
+      await navigator.clipboard?.writeText(text);
+      return;
+    }
     const row = this.rows[this.activeCell.rowIndex];
     const column = this.columns.find((entry) => entry.id === this.activeCell?.columnId);
     if (!row || !column) return;
@@ -257,11 +295,17 @@ var GridNexaAngularComponent = class {
   }
   async pasteActiveCell() {
     if (!this.activeCell || typeof navigator === "undefined") return;
-    const row = this.rows[this.activeCell.rowIndex];
-    const column = this.columns.find((entry) => entry.id === this.activeCell?.columnId);
-    if (!row || !column || column.editable === false) return;
     const text = await navigator.clipboard?.readText();
-    this.setCellValue(row, this.activeCell.rowIndex, column, text);
+    const columns = this.columns.filter((column) => !this.hiddenColumnIds.has(column.id) && !column.hidden);
+    const startColumn = columns.findIndex((entry) => entry.id === this.activeCell?.columnId);
+    text.split(/\r?\n/).forEach((line, rowOffset) => {
+      line.split("	").forEach((value2, columnOffset) => {
+        const rowIndex = this.activeCell.rowIndex + rowOffset;
+        const row = this.rows[rowIndex];
+        const column = columns[startColumn + columnOffset];
+        if (row && column && column.editable !== false) this.setCellValue(row, rowIndex, column, value2);
+      });
+    });
     this.render();
   }
   moveRow(rowIndex, direction) {
@@ -273,6 +317,14 @@ var GridNexaAngularComponent = class {
     this.rows = rows;
     this.render();
   }
+  reorderRow(sourceIndex, targetIndex) {
+    if (sourceIndex === targetIndex || sourceIndex < 0 || targetIndex < 0 || sourceIndex >= this.rows.length || targetIndex >= this.rows.length) return;
+    const rows = [...this.rows];
+    const [row] = rows.splice(sourceIndex, 1);
+    rows.splice(targetIndex, 0, row);
+    this.rows = rows;
+    this.render();
+  }
   moveColumn(sourceId, targetId) {
     if (sourceId === targetId) return;
     const columns = [...this.columns];
@@ -284,6 +336,63 @@ var GridNexaAngularComponent = class {
     this.columns = columns;
     this.render();
   }
+  makeDisplayRows(rows) {
+    if (this.groupBy) {
+      const buckets = /* @__PURE__ */ new Map();
+      rows.forEach((row) => {
+        const key = String(row[this.groupBy] ?? "Ungrouped");
+        buckets.set(key, [...buckets.get(key) ?? [], row]);
+      });
+      return Array.from(buckets.entries()).flatMap(([key, bucket]) => [
+        { kind: "group", key, label: key, rows: bucket, summaries: buildGroupSummary(bucket, this.columns, this.groupBy) },
+        ...this.collapsedGroups.has(key) ? [] : bucket.map((row) => ({ kind: "data", row, rowIndex: this.rows.indexOf(row) }))
+      ]);
+    }
+    if (this.getTreeDataPath) {
+      return rows.map((row) => {
+        const path = this.getTreeDataPath?.(row).filter(Boolean) ?? [];
+        return { row, path, key: path.join("/") };
+      }).sort((left, right) => left.key.localeCompare(right.key)).filter((entry) => entry.path.slice(0, -1).every((_, index) => !this.collapsedTreeKeys.has(entry.path.slice(0, index + 1).join("/")))).map((entry, _index, entries) => ({
+        kind: "data",
+        row: entry.row,
+        rowIndex: this.rows.indexOf(entry.row),
+        depth: Math.max(0, entry.path.length - 1),
+        treeKey: entry.key,
+        hasChildren: entries.some((other) => other.key.startsWith(`${entry.key}/`))
+      }));
+    }
+    return rows.map((row) => ({ kind: "data", row, rowIndex: this.rows.indexOf(row) }));
+  }
+  isCellInRange(rowIndex, columnId, columns) {
+    if (!this.rangeAnchor || !this.rangeEnd || !this.enableRangeSelection) return false;
+    const columnIndex = columns.findIndex((column) => column.id === columnId);
+    const anchorIndex = columns.findIndex((column) => column.id === this.rangeAnchor?.columnId);
+    const endIndex = columns.findIndex((column) => column.id === this.rangeEnd?.columnId);
+    return rowIndex >= Math.min(this.rangeAnchor.rowIndex, this.rangeEnd.rowIndex) && rowIndex <= Math.max(this.rangeAnchor.rowIndex, this.rangeEnd.rowIndex) && columnIndex >= Math.min(anchorIndex, endIndex) && columnIndex <= Math.max(anchorIndex, endIndex);
+  }
+  startColumnResize(event, column) {
+    event.preventDefault();
+    event.stopPropagation();
+    const startX = event.clientX;
+    const startWidth = this.columnWidths.get(column.id) ?? column.width ?? 150;
+    const move = (moveEvent) => {
+      this.columnWidths.set(column.id, Math.max(72, startWidth + moveEvent.clientX - startX));
+      this.render();
+    };
+    const up = () => {
+      document.removeEventListener("mousemove", move);
+      document.removeEventListener("mouseup", up);
+    };
+    document.addEventListener("mousemove", move);
+    document.addEventListener("mouseup", up);
+  }
+  pinnedStyle(column, columns) {
+    if (!column.pinned) return "";
+    const index = columns.findIndex((entry) => entry.id === column.id);
+    const width = (entry) => this.columnWidths.get(entry.id) ?? entry.width ?? 150;
+    const offset = column.pinned === "left" ? columns.slice(0, index).filter((entry) => entry.pinned === "left").reduce((sum, entry) => sum + width(entry), 0) : columns.slice(index + 1).filter((entry) => entry.pinned === "right").reduce((sum, entry) => sum + width(entry), 0);
+    return `position:sticky;${column.pinned}:${offset}px;z-index:2;background:white;box-shadow:${column.pinned === "left" ? "inset -1px 0 #dbe3ef" : "inset 1px 0 #dbe3ef"};`;
+  }
   updateAdvancedFilter(columnId, operator, filterValue) {
     const model = {
       kind: "group",
@@ -312,13 +421,15 @@ var GridNexaAngularComponent = class {
     if (!this.host) return;
     const sourceRows = this.visibleRows();
     const pivot = buildPivot(sourceRows, this.columns, this.groupBy, this.pivotBy, this.pivotValueColumns, this.pivotAggregation);
-    const columns = pivot.columns.filter((column) => !this.hiddenColumnIds.has(column.id) && !column.hidden);
+    const columns = pivot.columns.filter((column) => !this.hiddenColumnIds.has(column.id) && !column.hidden).sort((left, right) => (left.pinned === "left" ? 0 : left.pinned === "right" ? 2 : 1) - (right.pinned === "left" ? 0 : right.pinned === "right" ? 2 : 1));
     const pageRows = this.pageSize ? pivot.rows.slice(this.pageIndex * this.pageSize, this.pageIndex * this.pageSize + this.pageSize) : pivot.rows;
+    const displayRows = pivot.active ? pageRows.map((row) => ({ kind: "data", row, rowIndex: pivot.rows.indexOf(row) })) : this.makeDisplayRows(pageRows);
     const root = document.createElement("div");
     root.className = "gridnexa-angular-grid";
-    root.append(this.renderToolbar(columns, pivot.rows), this.renderTable(columns, pageRows));
+    root.append(this.renderToolbar(columns, pivot.rows), this.renderTable(columns, displayRows));
     if (this.toolsOpen) root.appendChild(this.renderToolsPanel());
     root.appendChild(this.renderStatus(pivot.rows.length));
+    if (this.contextMenu) root.appendChild(this.renderContextMenu());
     this.host.nativeElement.replaceChildren(root);
     this.serverSideOperation.emit({
       sortModel: this.sortState ? [this.sortState] : [],
@@ -350,6 +461,16 @@ var GridNexaAngularComponent = class {
       this.findText = find.value;
       this.render();
     });
+    const quickFilter = document.createElement("input");
+    quickFilter.type = "search";
+    quickFilter.placeholder = "Quick filter";
+    quickFilter.value = this.quickFilterText;
+    quickFilter.style.cssText = "min-height:32px;padding:0 10px;border:1px solid #bfdbfe;border-radius:8px";
+    quickFilter.addEventListener("input", () => {
+      this.quickFilterText = quickFilter.value;
+      this.pageIndex = 0;
+      this.render();
+    });
     const pageCount = this.pageSize ? Math.max(1, Math.ceil(rows.length / this.pageSize)) : 1;
     if (this.pageSize) {
       const prev = this.button("Prev", () => {
@@ -364,7 +485,7 @@ var GridNexaAngularComponent = class {
       next.disabled = this.pageIndex >= pageCount - 1;
       actions.append(prev, ` Page ${this.pageIndex + 1} `, next);
     }
-    actions.appendChild(find);
+    actions.append(quickFilter, find);
     if (this.enableUndoRedo) {
       const undo = this.button("Undo", () => this.undo());
       undo.disabled = !this.undoStack.length;
@@ -397,7 +518,7 @@ var GridNexaAngularComponent = class {
     if (this.rowNumbers) header.appendChild(cell("#", "th"));
     columns.forEach((column) => {
       const th = cell(`${column.headerName}${this.sortState?.columnId === column.id ? this.sortState.direction === "asc" ? " \u2191" : " \u2193" : ""}`, "th");
-      th.style.cssText = "padding:10px;border:1px solid #dbe3ef;background:#f8fbff;text-align:left";
+      th.style.cssText = `padding:10px;border:1px solid #dbe3ef;background:#f8fbff;text-align:left;width:${this.columnWidths.get(column.id) ?? column.width ?? 150}px;${this.pinnedStyle(column, columns)}`;
       th.draggable = true;
       th.addEventListener("dragstart", () => {
         this.draggedColumnId = column.id;
@@ -413,12 +534,25 @@ var GridNexaAngularComponent = class {
         this.sortState = this.sortState?.columnId !== column.id ? { columnId: column.id, direction: "asc" } : this.sortState.direction === "asc" ? { columnId: column.id, direction: "desc" } : null;
         this.render();
       });
+      if (column.resizable !== false) {
+        const resizer = document.createElement("span");
+        resizer.style.cssText = "float:right;width:7px;height:24px;cursor:col-resize;border-right:2px solid #bfdbfe";
+        resizer.addEventListener("mousedown", (event) => this.startColumnResize(event, column));
+        th.appendChild(resizer);
+      }
       header.appendChild(th);
     });
     thead.appendChild(header);
     table.appendChild(thead);
     const tbody = document.createElement("tbody");
-    rows.forEach((row, rowIndex) => this.appendRow(tbody, row, rowIndex, columns, leading));
+    rows.forEach((entry) => {
+      if (entry.kind === "group") this.appendGroupRow(tbody, entry, columns.length + leading);
+      if (entry.kind === "data") {
+        this.appendRow(tbody, entry.row, entry.rowIndex, columns, leading, entry);
+        const rowId = this.rowId(entry.row, entry.rowIndex);
+        if (this.masterDetailRenderer && this.expandedDetailIds.has(rowId)) this.appendDetailRow(tbody, entry.row, columns.length + leading);
+      }
+    });
     table.appendChild(tbody);
     return table;
   }
@@ -439,8 +573,41 @@ var GridNexaAngularComponent = class {
     });
     return row;
   }
-  appendRow(tbody, row, rowIndex, columns, leading) {
+  appendGroupRow(tbody, entry, colSpan) {
+    const tr = document.createElement("tr");
+    const td = document.createElement("td");
+    td.colSpan = colSpan;
+    td.style.cssText = "padding:10px;border:1px solid #dbe3ef;background:#eef4ff;color:#153e90;font-weight:800;text-transform:uppercase";
+    const toggle = this.button(this.collapsedGroups.has(entry.key) ? "+" : "-", () => {
+      this.collapsedGroups.has(entry.key) ? this.collapsedGroups.delete(entry.key) : this.collapsedGroups.add(entry.key);
+      this.render();
+    });
+    td.append(toggle, `${entry.label}  ${entry.rows.length} rows${entry.summaries ? `  ${entry.summaries}` : ""}`);
+    tr.appendChild(td);
+    tbody.appendChild(tr);
+  }
+  appendDetailRow(tbody, row, colSpan) {
+    const detailRow = document.createElement("tr");
+    const detail = document.createElement("td");
+    detail.colSpan = colSpan;
+    detail.style.cssText = "padding:12px;border:1px solid #dbe3ef;background:#f8fbff;color:#334155";
+    const content = this.masterDetailRenderer?.(row);
+    content instanceof Node ? detail.appendChild(content) : detail.textContent = String(content ?? "");
+    detailRow.appendChild(detail);
+    tbody.appendChild(detailRow);
+  }
+  appendRow(tbody, row, rowIndex, columns, leading, display) {
     const tr = document.createElement("tr");
+    tr.draggable = true;
+    tr.addEventListener("dragstart", () => {
+      this.draggedRowIndex = rowIndex;
+    });
+    tr.addEventListener("dragover", (event) => event.preventDefault());
+    tr.addEventListener("drop", (event) => {
+      event.preventDefault();
+      if (this.draggedRowIndex != null) this.reorderRow(this.draggedRowIndex, rowIndex);
+      this.draggedRowIndex = null;
+    });
     if (this.checkboxSelection) {
       const td = document.createElement("td");
       const checkbox = document.createElement("input");
@@ -465,45 +632,123 @@ var GridNexaAngularComponent = class {
     }
     columns.forEach((column, columnIndex) => {
       const td = cell(format(row, column, this.columns));
-      td.style.cssText = "padding:10px;border:1px solid #dbe3ef";
+      td.style.cssText = `padding:10px;border:1px solid #dbe3ef;width:${this.columnWidths.get(column.id) ?? column.width ?? 150}px;${this.pinnedStyle(column, columns)}`;
       if (this.activeCell?.rowIndex === rowIndex && this.activeCell.columnId === column.id) {
         td.style.outline = "2px solid #2563eb";
         td.style.outlineOffset = "-2px";
       }
+      if (this.isCellInRange(rowIndex, column.id, columns)) td.style.background = "rgba(37,99,235,.12)";
       if (this.findText && format(row, column, this.columns).toLowerCase().includes(this.findText.toLowerCase())) {
         td.style.background = "rgba(37,99,235,.1)";
       }
-      if (this.getTreeDataPath && columnIndex === 0) td.style.paddingLeft = `${12 + Math.max(0, this.getTreeDataPath(row).length - 1) * 24}px`;
-      td.addEventListener("click", () => {
+      if (this.getTreeDataPath && columnIndex === 0) {
+        td.style.paddingLeft = `${12 + (display?.depth ?? Math.max(0, this.getTreeDataPath(row).length - 1)) * 24}px`;
+        if (display?.hasChildren && display.treeKey) {
+          const treeKey = display.treeKey;
+          const toggle = this.button(this.collapsedTreeKeys.has(treeKey) ? "+" : "-", () => {
+            this.collapsedTreeKeys.has(treeKey) ? this.collapsedTreeKeys.delete(treeKey) : this.collapsedTreeKeys.add(treeKey);
+            this.render();
+          });
+          td.prepend(toggle);
+        }
+      } else if (this.masterDetailRenderer && columnIndex === 0) {
+        const rowId = this.rowId(row, rowIndex);
+        const toggle = this.button(this.expandedDetailIds.has(rowId) ? "-" : "+", () => {
+          this.expandedDetailIds.has(rowId) ? this.expandedDetailIds.delete(rowId) : this.expandedDetailIds.add(rowId);
+          this.render();
+        });
+        td.prepend(toggle);
+      }
+      td.addEventListener("click", (event) => {
+        this.contextMenu = null;
         this.activeCell = { rowIndex, columnId: column.id };
+        if (event.shiftKey && this.rangeAnchor) {
+          this.rangeEnd = { rowIndex, columnId: column.id };
+        } else {
+          this.rangeAnchor = { rowIndex, columnId: column.id };
+          this.rangeEnd = { rowIndex, columnId: column.id };
+        }
         this.cellClick.emit({ row, rowIndex, column });
         this.render();
       });
+      td.addEventListener("contextmenu", (event) => {
+        event.preventDefault();
+        this.activeCell = { rowIndex, columnId: column.id };
+        this.contextMenu = { x: event.clientX, y: event.clientY, rowIndex, columnId: column.id };
+        this.render();
+      });
       if (column.editable) td.addEventListener("dblclick", () => this.editCell(td, row, rowIndex, column));
       tr.appendChild(td);
     });
     tbody.appendChild(tr);
-    if (this.masterDetailRenderer) {
-      const detailRow = document.createElement("tr");
-      const detail = document.createElement("td");
-      detail.colSpan = columns.length + leading;
-      const content = this.masterDetailRenderer(row);
-      content instanceof Node ? detail.appendChild(content) : detail.textContent = String(content ?? "");
-      detailRow.appendChild(detail);
-      tbody.appendChild(detailRow);
-    }
   }
   editCell(td, row, rowIndex, column) {
     const oldValue = rawValue(row, column);
-    const input = document.createElement("input");
-    input.value = String(oldValue ?? "");
+    const input = this.createEditor(column, oldValue);
     td.replaceChildren(input);
     input.focus();
     input.addEventListener("blur", () => {
-      this.setCellValue(row, rowIndex, column, input.value);
+      this.setCellValue(row, rowIndex, column, input instanceof HTMLInputElement && input.type === "checkbox" ? input.checked : input.value);
       this.render();
     }, { once: true });
   }
+  createEditor(column, current) {
+    const editor = column.editor;
+    if (editor === "checkbox") {
+      const input2 = document.createElement("input");
+      input2.type = "checkbox";
+      input2.checked = Boolean(current);
+      return input2;
+    }
+    if (editor === "number" || editor === "date") {
+      const input2 = document.createElement("input");
+      input2.type = editor;
+      input2.value = String(current ?? "");
+      return input2;
+    }
+    if (editor && typeof editor === "object" && (editor.type === "select" || editor.type === "advancedSelect")) {
+      const select = document.createElement("select");
+      (editor.values ?? []).forEach((item) => {
+        const option = document.createElement("option");
+        option.value = String(item);
+        option.textContent = String(item);
+        select.appendChild(option);
+      });
+      select.value = String(current ?? "");
+      return select;
+    }
+    const input = document.createElement("input");
+    input.value = String(current ?? "");
+    return input;
+  }
+  renderContextMenu() {
+    const menu = document.createElement("div");
+    menu.style.cssText = `position:fixed;z-index:9999;left:${this.contextMenu?.x ?? 0}px;top:${this.contextMenu?.y ?? 0}px;display:grid;min-width:150px;padding:6px;border:1px solid #dbe3ef;border-radius:10px;background:white;box-shadow:0 18px 48px rgba(15,23,42,.18)`;
+    const row = this.contextMenu ? this.rows[this.contextMenu.rowIndex] : void 0;
+    const column = this.columns.find((entry) => entry.id === this.contextMenu?.columnId);
+    menu.append(
+      this.button("Copy", () => void this.copyActiveCell()),
+      this.button("Paste", () => void this.pasteActiveCell()),
+      this.button("Edit cell", () => {
+        if (!row || !column || column.editable === false || !this.contextMenu) return;
+        const nextValue = window.prompt(`Edit ${column.headerName}`, String(rawValue(row, column) ?? ""));
+        if (nextValue != null) this.setCellValue(row, this.contextMenu.rowIndex, column, nextValue);
+        this.contextMenu = null;
+        this.render();
+      }),
+      this.button("Clear cell", () => {
+        if (row && column && column.editable !== false && this.contextMenu) this.setCellValue(row, this.contextMenu.rowIndex, column, "");
+        this.contextMenu = null;
+        this.render();
+      }),
+      this.button("Hide column", () => {
+        if (column) this.hiddenColumnIds.add(column.id);
+        this.contextMenu = null;
+        this.render();
+      })
+    );
+    return menu;
+  }
   renderToolsPanel() {
     const panel = document.createElement("div");
     panel.style.cssText = "display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;padding:12px;border:1px solid #dbe3ef;border-top:0;background:#f8fbff";

package/package.json

@@ -1,37 +1,70 @@
 {
   "name": "@gridnexa/angular",
-  "version": "0.0.1",
-  "description": "Angular package for GridNexa",
+  "version": "0.0.3",
+  "description": "Enterprise Angular data grid for modern UI apps with Excel-like filtering, editing, formulas, grouping, pivoting, export, and native Angular UX.",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
   "files": [
-    "dist"
+    "dist",
+    "README.md"
   ],
-  "scripts": {
-    "build": "tsup src/index.ts --format esm,cjs --dts --external @angular/core",
-    "dev": "tsup src/index.ts --watch --external @angular/core",
-    "clean": "rimraf dist"
-  },
   "keywords": [
     "gridnexa",
+    "angular-grid",
+    "angular-data-grid",
     "angular",
     "data-grid",
+    "datagrid",
+    "enterprise-grid",
+    "excel-grid",
+    "spreadsheet",
     "table",
-    "excel"
+    "pivot-table",
+    "tree-grid",
+    "filtering",
+    "sorting",
+    "editable-grid",
+    "csv-export",
+    "excel-export",
+    "typescript"
   ],
+  "homepage": "https://www.gridnexa.in/",
+  "bugs": {
+    "url": "https://www.gridnexa.in/help"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mhalungekar9/SmartGrid.git",
+    "directory": "packages/angular"
+  },
   "author": "Sachin M",
   "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
   "peerDependencies": {
     "@angular/core": ">=16"
   },
   "dependencies": {
-    "@gridnexa/core": "workspace:*"
+    "@gridnexa/core": "^0.0.3"
   },
   "devDependencies": {
     "rimraf": "^6.1.3",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format esm,cjs --dts --external @angular/core",
+    "dev": "tsup src/index.ts --watch --external @angular/core",
+    "clean": "rimraf dist"
   }
-}
+}