Dev

package.json

@@ -1,6 +1,6 @@
 {
   "name": "spread-diff-patch",
-  "version": "1.2.2",
+  "version": "1.2.5",
   "description": "Diff & patch SpreadSheet files",
   "main": "./lib/index.js",
   "module": "./lib/index.mjs",
@@ -14,14 +14,14 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/dev-DTECH/spread-diff-patch.git"
+    "url": "git+https://github.com/dtech-labs/spread-diff-patch.git"
   },
   "author": "DTech",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/dev-DTECH/spread-diff-patch/issues"
+    "url": "https://github.com/dtech-labs/spread-diff-patch/issues"
   },
-  "homepage": "https://github.com/dev-DTECH/spread-diff-patch#readme",
+  "homepage": "https://github.com/dtech-labs/spread-diff-patch#readme",
   "keywords": [
     "csv",
     "html",

src/formatter/html.ts

@@ -41,7 +41,7 @@ export class HTML extends Formatter<string> {
             }
             </style>
             <div id="spread-diff-patch-data" data-raw-diffAOA='${escapeHTML(JSON.stringify(patchedAOA))}'></div>
-            <script src="https://unpkg.com/canvas-datagrid"></script>
+            <script src="https://cdn.jsdelivr.net/npm/ag-grid-community@34.1.2/dist/ag-grid-community.min.js"></script>
             <script>
                 ${script}
             </script>

src/formatter/script.js

@@ -1,26 +1,52 @@
 /* eslint-disable no-undef */
 function isHTML(str) {
+    if (typeof str !== 'string') return false;
     var doc = new DOMParser().parseFromString(str, "text/html");
     return Array.from(doc.body.childNodes).some(node => node.nodeType === 1);
 }
 
-const diffAOA = JSON.parse(document.querySelector("#spread-diff-patch-data").dataset.rawDiffaoa)
+const diffAOA = JSON.parse(document.querySelector("#spread-diff-patch-data").dataset.rawDiffaoa);
 
 const app = document.querySelector('#spread-diff-patch');
 const gridElement = document.createElement('div');
-gridElement.id = "diff-grid"
-const grid = canvasDatagrid({
-    parentNode: gridElement,
-    editable: false,
-});
-
+gridElement.id = "diff-grid";
+gridElement.style.height = '100vh';
+gridElement.style.width = '100%';
+gridElement.className = 'ag-theme-alpine'; // or other theme
 app.append(gridElement);
 
-grid.style.height = '100%';
-grid.style.width = '100%';
-grid.data = diffAOA
+// Generate column definitions
+const columnDefs = diffAOA[0] ? diffAOA[0].map((_, index) => ({
+    headerName: String.fromCharCode(65 + index), // A, B, C...
+    field: String(index),
+    cellRenderer: params => {
+        if (isHTML(params.value)) {
+            const e = document.createElement("div")
+            e.innerHTML = params.value
+            return e
+        }
+        return params.value
+    }
+})) : [];
+
+// Convert array of arrays to array of objects
+const rowData = diffAOA.map(row => {
+    const rowObject = {};
+    row.forEach((cell, index) => {
+        rowObject[String(index)] = cell;
+    });
+    return rowObject;
+});
+
+const gridOptions = {
+    columnDefs: columnDefs,
+    rowData: rowData,
+    defaultColDef: {
+        editable: false,
+        sortable: true,
+        filter: true,
+        resizable: true
+    }
+};
 
-grid.addEventListener('afterrendercell', function (e) {
-    if (isHTML(e.cell.value))
-        e.cell.innerHTML = e.cell.value
-});
+agGrid.createGrid(gridElement, gridOptions);