add: preferencepane virtualized-table example

addon/chrome/content/preferences.xhtml

@@ -19,6 +19,9 @@
         preference="extensions.zotero.__addonRef__.input"
       ></html:input>
     </hbox>
+    <hbox class="virtualized-table-container" flex="1" height="300px">
+      <html:div id="__addonRef__-table-container" />
+    </hbox>
   </groupbox>
 </vbox>
 <vbox>

package.json

@@ -31,7 +31,7 @@
   },
   "homepage": "https://github.com/windingwind/zotero-addon-template#readme",
   "dependencies": {
-    "zotero-plugin-toolkit": "^1.0.0"
+    "zotero-plugin-toolkit": "^1.0.1"
   },
   "devDependencies": {
     "@types/node": "^18.11.17",

src/addon.ts

@@ -1,4 +1,5 @@
 import ZoteroToolkit from "zotero-plugin-toolkit/dist/index";
+import { ColumnOptions } from "zotero-plugin-toolkit/dist/helpers/virtualizedTable";
 import hooks from "./hooks";
 
 class Addon {
@@ -12,10 +13,14 @@ class Addon {
     };
     prefs?: {
       window: Window;
+      columns: Array<ColumnOptions>;
+      rows: Array<{ [dataKey: string]: string }>;
     };
   };
   // Lifecycle hooks
   public hooks: typeof hooks;
+  // APIs
+  public api: {};
 
   constructor() {
     this.data = {
@@ -24,6 +29,7 @@ class Addon {
       ztoolkit: new ZoteroToolkit(),
     };
     this.hooks = hooks;
+    this.api = {};
   }
 }
 

src/modules/preferenceScript.ts

@@ -3,17 +3,97 @@ import { config } from "../../package.json";
 export function registerPrefsScripts(_window: Window) {
   // This function is called when the prefs window is opened
   // See addon/chrome/content/preferences.xul onpaneload
-  addon.data.prefs = {
+  if (!addon.data.prefs) {
-    window: _window,
+    addon.data.prefs = {
-  };
+      window: _window,
+      columns: [
+        {
+          dataKey: "title",
+          label: "Title",
+          fixedWidth: true,
+          width: 100,
+        },
+        {
+          dataKey: "detail",
+          label: "Detail",
+        },
+      ],
+      rows: [
+        {
+          title: "Orange",
+          detail: "It's juicy",
+        },
+        {
+          title: "Banana",
+          detail: "It's sweet",
+        },
+        {
+          title: "Apple",
+          detail: "I mean the fruit APPLE",
+        },
+      ],
+    };
+  }
   updatePrefsUI();
   bindPrefEvents();
 }
 
-function updatePrefsUI() {
+async function updatePrefsUI() {
   // You can initialize some UI elements on prefs window
   // with addon.data.prefs.window.document
   // Or bind some events to the elements
+  const renderLock = ztoolkit.getGlobal("Zotero").Promise.defer();
+  const tableHelper = new ztoolkit.VirtualizedTabel(addon.data.prefs?.window!)
+    .setContainerId(`${config.addonRef}-table-container`)
+    .setProp({
+      id: `${config.addonRef}-prefs-table`,
+      columns: addon.data.prefs?.columns,
+      showHeader: true,
+      multiSelect: true,
+      staticColumns: true,
+      disableFontSizeScaling: true,
+    })
+    .setProp("getRowCount", () => addon.data.prefs?.rows.length || 0)
+    .setProp(
+      "getRowData",
+      (index) =>
+        addon.data.prefs?.rows[index] || {
+          title: "no data",
+          detail: "no data",
+        }
+    )
+    .setProp("onSelectionChange", (selection) => {
+      new ztoolkit.ProgressWindow(config.addonName)
+        .createLine({
+          text: `Selected line: ${addon.data.prefs?.rows
+            .filter((v, i) => selection.isSelected(i))
+            .map((row) => row.title)
+            .join(",")}`,
+          progress: 100,
+        })
+        .show();
+    })
+    .setProp("onKeyDown", (event: KeyboardEvent) => {
+      if (event.key == "Delete" || (Zotero.isMac && event.key == "Backspace")) {
+        addon.data.prefs!.rows =
+          addon.data.prefs?.rows.filter(
+            (v, i) => !tableHelper.treeInstance.selection.isSelected(i)
+          ) || [];
+        tableHelper.render();
+        return false;
+      }
+      return true;
+    })
+    // For find-as-you-type
+    .setProp(
+      "getRowString",
+      (index) => addon.data.prefs?.rows[index].title || ""
+    )
+    .render(-1, () => {
+      renderLock.resolve();
+    });
+  await renderLock.promise;
+  ztoolkit.log("Preference table rendered!", tableHelper);
 }
 
 function bindPrefEvents() {