add: prefs table local example

addon/chrome/locale/en-US/addon.properties

@@ -5,5 +5,7 @@ menupopup.label=Addon Template: Menupopup
 menuitem.submenulabel=Addon Template
 menuitem.filemenulabel=Addon Template: File Menuitem
 prefs.title=Template
+prefs.table.title=Title
+prefs.table.detail=Detail
 tabpanel.lib.tab.label=Lib Tab
 tabpanel.reader.tab.label=Reader Tab

addon/chrome/locale/zh-CN/addon.properties

@@ -5,5 +5,7 @@ menupopup.label=插件模板: 弹出菜单
 menuitem.submenulabel=插件模板：子菜单
 menuitem.filemenulabel=插件模板: 文件菜单
 prefs.title=插件模板
+prefs.table.title=标题
+prefs.table.detail=详情
 tabpanel.lib.tab.label=库标签
 tabpanel.reader.tab.label=阅读器标签

src/modules/preferenceScript.ts

@@ -1,4 +1,5 @@
 import { config } from "../../package.json";
+import { getString } from "./locale";
 
 export function registerPrefsScripts(_window: Window) {
   // This function is called when the prefs window is opened
@@ -9,13 +10,13 @@ export function registerPrefsScripts(_window: Window) {
       columns: [
         {
           dataKey: "title",
-          label: "Title",
+          label: "prefs.table.title",
           fixedWidth: true,
           width: 100,
         },
         {
           dataKey: "detail",
-          label: "Detail",
+          label: "prefs.table.detail",
         },
       ],
       rows: [
@@ -45,6 +46,18 @@ async function updatePrefsUI() {
   const renderLock = ztoolkit.getGlobal("Zotero").Promise.defer();
   const tableHelper = new ztoolkit.VirtualizedTabel(addon.data.prefs?.window!)
     .setContainerId(`${config.addonRef}-table-container`)
+    // Add locale for table columns
+    .setLocale(
+      Object.fromEntries(
+        new Map(
+          addon.data.prefs?.columns.map((column) => [
+            column.label,
+            getString(column.label),
+          ])
+        )
+      )
+    )
+    // id and getRowCount are required, others are optional.
     .setProp({
       id: `${config.addonRef}-prefs-table`,
       columns: addon.data.prefs?.columns,
@@ -62,6 +75,7 @@ async function updatePrefsUI() {
           detail: "no data",
         }
     )
+    // Show a progress window when selection changes
     .setProp("onSelectionChange", (selection) => {
       new ztoolkit.ProgressWindow(config.addonName)
         .createLine({
@@ -73,6 +87,8 @@ async function updatePrefsUI() {
         })
         .show();
     })
+    // When pressing delete, delete selected line and refresh table.
+    // Returning false to prevent default event.
     .setProp("onKeyDown", (event: KeyboardEvent) => {
       if (event.key == "Delete" || (Zotero.isMac && event.key == "Backspace")) {
         addon.data.prefs!.rows =
@@ -89,6 +105,7 @@ async function updatePrefsUI() {
       "getRowString",
       (index) => addon.data.prefs?.rows[index].title || ""
     )
+    // Render the table.
     .render(-1, () => {
       renderLock.resolve();
     });