From e3d9a120cbc78eb7abd58a68e6741d2f24d953eb Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Tue, 9 Sep 2025 21:03:55 +0300
Subject: [PATCH] chore(react/collections/table): port row number formatter

---
 .../src/widgets/collections/table/columns.tsx     | 15 ++++++++++++---
 .../src/widgets/collections/table/formatters.ts   | 11 -----------
 2 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/apps/client/src/widgets/collections/table/columns.tsx b/apps/client/src/widgets/collections/table/columns.tsx
index 197ccba54..1e04822f4 100644
--- a/apps/client/src/widgets/collections/table/columns.tsx
+++ b/apps/client/src/widgets/collections/table/columns.tsx
@@ -1,5 +1,5 @@
 import { NoteFormatter, NoteTitleFormatter, RowNumberFormatter } from "./formatters.js";
-import type { CellComponent, ColumnDefinition, EmptyCallback } from "tabulator-tables";
+import type { CellComponent, ColumnDefinition, EmptyCallback, FormatterParams } from "tabulator-tables";
 import { LabelType } from "../../../services/promoted_attribute_definition_parser.js";
 import { RelationEditor } from "./relation_editor.js";
 import { JSX } from "preact";
@@ -60,6 +60,10 @@ interface BuildColumnArgs {
     position?: number;
 }
 
+interface RowNumberFormatterParams {
+    movableRows?: boolean;
+}
+
 export function buildColumnDefinitions({ info, movableRows, existingColumnData, rowNumberHint, position }: BuildColumnArgs) {
     let columnDefs: ColumnDefinition[] = [
         {
@@ -70,7 +74,11 @@ export function buildColumnDefinitions({ info, movableRows, existingColumnData,
             frozen: true,
             rowHandle: movableRows,
             width: calculateIndexColumnWidth(rowNumberHint, movableRows),
-            formatter: RowNumberFormatter(movableRows)
+            formatter: wrapFormatter(({ cell, formatterParams }) => <div>
+                {(formatterParams as RowNumberFormatterParams).movableRows && <><span class="bx bx-dots-vertical-rounded"></span>{" "}</>}
+                {cell.getRow().getPosition(true)}
+            </div>),
+            formatterParams: { movableRows } satisfies RowNumberFormatterParams
         },
         {
             field: "noteId",
@@ -159,11 +167,12 @@ function calculateIndexColumnWidth(rowNumberHint: number, movableRows: boolean):
 
 interface FormatterOpts {
     cell: CellComponent
+    formatterParams: FormatterParams;
 }
 
 function wrapFormatter(Component: (opts: FormatterOpts) => JSX.Element): ((cell: CellComponent, formatterParams: {}, onRendered: EmptyCallback) => string | HTMLElement) {
     return (cell, formatterParams, onRendered) => {
-        const elWithParams = <Component cell={cell} />;
+        const elWithParams = <Component cell={cell} formatterParams={formatterParams} />;
         return renderReactWidget(null, elWithParams)[0];
     };
 }
diff --git a/apps/client/src/widgets/collections/table/formatters.ts b/apps/client/src/widgets/collections/table/formatters.ts
index 85aee6025..873231381 100644
--- a/apps/client/src/widgets/collections/table/formatters.ts
+++ b/apps/client/src/widgets/collections/table/formatters.ts
@@ -60,17 +60,6 @@ export function NoteTitleFormatter(cell: CellComponent) {
     return $noteRef[0].outerHTML;
 }
 
-export function RowNumberFormatter(draggableRows: boolean) {
-    return (cell: CellComponent) => {
-        let html = "";
-        if (draggableRows) {
-            html += `<span class="bx bx-dots-vertical-rounded"></span> `;
-        }
-        html += cell.getRow().getPosition(true);
-        return html;
-    };
-}
-
 function buildNoteLink(noteId: string, title: string, iconClass: string, colorClass?: string) {
     const $noteRef = $("<span>");
     const href = `#root/${noteId}`;