From 3c37046cf84500979d17e1ba3d34bc75be17e389 Mon Sep 17 00:00:00 2001
From: maxkoretskyi <m.koretskyi@gmail.com>
Date: Sat, 7 Feb 2026 13:17:18 +0100
Subject: [PATCH] fix: align table column headers with text_justify_columns
 setting (#7967)

---
 .../data-table/__tests__/columns.test.tsx     | 47 +++++++++++++++++++
 .../components/data-table/column-header.tsx   | 25 +++++++++-
 .../src/components/data-table/columns.tsx     |  1 +
 3 files changed, 71 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/data-table/__tests__/columns.test.tsx b/frontend/src/components/data-table/__tests__/columns.test.tsx
index 7599840706a..96e01cb1f32 100644
--- a/frontend/src/components/data-table/__tests__/columns.test.tsx
+++ b/frontend/src/components/data-table/__tests__/columns.test.tsx
@@ -243,6 +243,53 @@ describe("generateColumns", () => {
     expect(cell?.props.className).toContain("center");
   });
 
+  it("should apply text justification to column headers", () => {
+    const columns = generateColumns({
+      rowHeaders: [],
+      selection: null,
+      fieldTypes,
+      textJustifyColumns: { name: "right", age: "center" },
+    });
+
+    const mockColumn = (col: (typeof columns)[number]) => ({
+      id: col.id,
+      getCanSort: () => true,
+      getCanFilter: () => false,
+      getIsSorted: () => false,
+      getSortIndex: () => -1,
+      getFilterValue: () => undefined,
+      columnDef: { meta: col.meta },
+    });
+
+    // Right-justified header should have flex-row-reverse and text-right
+    const { container: rightContainer } = render(
+      <TooltipProvider>
+        {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+        {(columns[0].header as any)({ column: mockColumn(columns[0]) })}
+      </TooltipProvider>,
+    );
+    const rightHeader = rightContainer.querySelector(
+      "[data-testid='data-table-sort-button']",
+    );
+    expect(rightHeader?.className).toContain("flex-row-reverse");
+    const rightSpan = rightHeader?.querySelector("span");
+    expect(rightSpan?.className).toContain("text-right");
+
+    // Center-justified header should have text-center but not flex-row-reverse
+    const { container: centerContainer } = render(
+      <TooltipProvider>
+        {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+        {(columns[1].header as any)({ column: mockColumn(columns[1]) })}
+      </TooltipProvider>,
+    );
+    const centerHeader = centerContainer.querySelector(
+      "[data-testid='data-table-sort-button']",
+    );
+    expect(centerHeader?.className).not.toContain("flex-row-reverse");
+    const centerSpan = centerHeader?.querySelector("span");
+    expect(centerSpan?.className).toContain("text-center");
+  });
+
   it("should not include index column if it exists", () => {
     const columns = generateColumns({
       rowHeaders: [],
diff --git a/frontend/src/components/data-table/column-header.tsx b/frontend/src/components/data-table/column-header.tsx
index 315bc4860d0..6b82911276e 100644
--- a/frontend/src/components/data-table/column-header.tsx
+++ b/frontend/src/components/data-table/column-header.tsx
@@ -67,6 +67,7 @@ interface DataTableColumnHeaderProps<TData, TValue>
   extends React.HTMLAttributes<HTMLDivElement> {
   column: Column<TData, TValue>;
   header: React.ReactNode;
+  justify?: "left" | "center" | "right";
   calculateTopKRows?: CalculateTopKRows;
   table?: Table<TData>;
 }
@@ -74,6 +75,7 @@ interface DataTableColumnHeaderProps<TData, TValue>
 export const DataTableColumnHeader = <TData, TValue>({
   column,
   header,
+  justify,
   className,
   calculateTopKRows,
   table,
@@ -88,7 +90,17 @@ export const DataTableColumnHeader = <TData, TValue>({
 
   // No sorting or filtering
   if (!column.getCanSort() && !column.getCanFilter()) {
-    return <div className={cn(className)}>{header}</div>;
+    return (
+      <div
+        className={cn(
+          className,
+          justify === "center" && "text-center",
+          justify === "right" && "text-right",
+        )}
+      >
+        {header}
+      </div>
+    );
   }
 
   const hasFilter = column.getFilterValue() !== undefined;
@@ -101,11 +113,20 @@ export const DataTableColumnHeader = <TData, TValue>({
           <div
             className={cn(
               "group flex items-center my-1 space-between w-full select-none gap-2 border hover:border-border border-transparent hover:bg-(--slate-3) data-[state=open]:bg-(--slate-3) data-[state=open]:border-border rounded px-1 -mx-1",
+              justify === "right" && "flex-row-reverse",
               className,
             )}
             data-testid="data-table-sort-button"
           >
-            <span className="flex-1">{header}</span>
+            <span
+              className={cn(
+                "flex-1",
+                justify === "center" && "text-center",
+                justify === "right" && "text-right",
+              )}
+            >
+              {header}
+            </span>
             <span
               className={cn(
                 "h-5 py-1 px-1",
diff --git a/frontend/src/components/data-table/columns.tsx b/frontend/src/components/data-table/columns.tsx
index 429acacdbb3..1760d4500d0 100644
--- a/frontend/src/components/data-table/columns.tsx
+++ b/frontend/src/components/data-table/columns.tsx
@@ -212,6 +212,7 @@ export function generateColumns<T>({
           <DataTableColumnHeader
             header={headerWithTooltip}
             column={column}
+            justify={textJustifyColumns?.[key]}
             calculateTopKRows={calculateTopKRows}
             table={table}
           />