feat: custom node list - sorting feature for author/title

README.md

@@ -312,7 +312,8 @@ NODE_CLASS_MAPPINGS.update({
 - [ ] List of currently used custom nodes.
 - [ ] Download support multiple model download.
 - [ ] Model download via url.
-- [ ] List sorting.
+- [x] List sorting (custom nodes).
+- [ ] List sorting (model).
 - [ ] Provides description of node.
 
 

__init__.py

@@ -30,7 +30,7 @@ except:
     print(f"[WARN] ComfyUI-Manager: Your ComfyUI version is outdated. Please update to the latest version.")
 
 
-version = [2, 14]
+version = [2, 15]
 version_str = f"V{version[0]}.{version[1]}" + (f'.{version[2]}' if len(version) > 2 else '')
 print(f"### Loading: ComfyUI-Manager ({version_str})")
 

js/custom-nodes-downloader.js

@@ -383,7 +383,7 @@ export class CustomNodesInstaller extends ComfyDialog {
 	}
 
 	resetHeaderStyles() {
-		const headers = ['th_stars', 'th_last_update']; // Add the IDs of all your sortable headers here
+		const headers = ['th_author', 'th_title', 'th_stars', 'th_last_update']; // Add the IDs of all your sortable headers here
 		headers.forEach(headerId => {
 			const header = this.element.querySelector(`#${headerId}`);
 			if (header) {
@@ -410,6 +410,10 @@ export class CustomNodesInstaller extends ComfyDialog {
 			headerId = 'th_stars';
 		} else if (property === 'last_update') {
 			headerId = 'th_last_update';
+		} else if (property === 'author') {
+			headerId = 'th_author';
+		} else if (property === 'title') {
+			headerId = 'th_title';
 		}
 
 		// If we have a valid headerId, change its style to indicate it's the active sort column
@@ -462,28 +466,40 @@ export class CustomNodesInstaller extends ComfyDialog {
 			var header1 = document.createElement('th');
 			header1.innerHTML = '  ID  ';
 			header1.style.width = "20px";
+
 			var header2 = document.createElement('th');
 			header2.innerHTML = 'Author';
 			header2.style.width = "150px";
+			header2.style.cursor = 'pointer';
+			header2.setAttribute('id', 'th_author');
+			header2.onclick = () => this.toggleSort('author');
+
 			var header3 = document.createElement('th');
 			header3.innerHTML = 'Name';
 			header3.style.width = "20%";
+			header3.style.cursor = 'pointer';
+			header3.setAttribute('id', 'th_title');
+			header3.onclick = () => this.toggleSort('title');
+
 			var header4 = document.createElement('th');
 			header4.innerHTML = 'Description';
 			header4.style.width = "60%";
 	//		header4.classList.add('expandable-column');
+
 			var header5 = document.createElement('th');
-			header5.innerHTML = 'GitHub Stars';
+			header5.innerHTML = '   ★   ';
 			header5.style.width = "130px";
 			header5.setAttribute('id', 'th_stars');
 			header5.style.cursor = 'pointer';
 			header5.onclick = () => this.toggleSort('stars');
+
 			var header6 = document.createElement('th');
 			header6.innerHTML = 'Last Update';
 			header6.style.width = "130px";
 			header6.setAttribute('id', 'th_last_update');
 			header6.style.cursor = 'pointer';
 			header6.onclick = () => this.toggleSort('last_update');
+
 			var header7 = document.createElement('th');
 			header7.innerHTML = 'Install';
 			header7.style.width = "130px";
@@ -593,7 +609,12 @@ export class CustomNodesInstaller extends ComfyDialog {
 				var data5 = document.createElement('td');
 				data5.style.maxWidth = "100px";
 				data5.className = "cm-node-stars"
-				data5.textContent = `${data.stars}`;
+				if(data.stars < 0) {
+					data5.textContent = 'N/A';
+				}
+				else {
+					data5.textContent = `${data.stars}`;
+				}
 				data5.style.whiteSpace = "nowrap";
 				data5.style.overflow = "hidden";
 				data5.style.textOverflow = "ellipsis";
@@ -602,8 +623,13 @@ export class CustomNodesInstaller extends ComfyDialog {
 				var lastUpdateDate = new Date();
 				var data6 = document.createElement('td');
 				data6.style.maxWidth = "100px";
-				data6.className = "cm-node-last-update"
-				data6.textContent = `${data.last_update}`.split(' ')[0];
+				data6.className = "cm-node-last-update";
+				if(data.last_update < 0) {
+					data6.textContent = 'N/A';
+				}
+				else {
+					data6.textContent = `${data.last_update}`.split(' ')[0];
+				}
 				data6.style.whiteSpace = "nowrap";
 				data6.style.overflow = "hidden";
 				data6.style.textOverflow = "ellipsis";
@@ -685,6 +711,7 @@ export class CustomNodesInstaller extends ComfyDialog {
 					installBtn.style.backgroundColor = 'black';
 					installBtn.style.color = 'white';
 					break;
+
 				default:
 					installBtn.innerHTML = `Try Install`;
 					installBtn.style.backgroundColor = 'Gray';

node_db/new/custom-node-list.json

@@ -184,7 +184,9 @@
             "author": "jiaxiangc",
             "title": "ResAdapter for ComfyUI",
             "reference": "https://github.com/jiaxiangc/ComfyUI-ResAdapter",
-            "files": "https://github.com/jiaxiangc/ComfyUI-ResAdapter",
+            "files": [
+                "https://github.com/jiaxiangc/ComfyUI-ResAdapter"
+            ],
             "install_type": "git-clone",
             "description": "We provide ComfyUI-ResAdapter node to help users to use [a/ResAdapter](https://github.com/bytedance/res-adapter) in ComfyUI."
         },