adjust ordering of header (#9403)

## 📝 Summary

<!--
If this PR closes any issues, list them here by number (e.g., Closes
#123).

Detail the specific changes made in this pull request. Explain the
problem addressed and how it was resolved. If applicable, provide before
and after comparisons, screenshots, or any relevant details to help
reviewers understand the changes easily.
-->
- Fixes #9396 — header alignment regressed in #9006, which redesigned
the header and dropped the justify wiring from #8236.
- Re-threads text_justify_columns into DataTableColumnHeader: right uses
flex-row-reverse, center uses mx-auto + a small reorder so the title
sits between the sort and menu buttons.

<img width="950" height="865" alt="image"
src="https://github.com/user-attachments/assets/60e6f976-8284-459f-be3e-afdff216947e"
/>

## 📋 Pre-Review Checklist
<!-- These checks need to be completed before a PR is reviewed -->

- [x] For large changes, or changes that affect the public API: this
change was discussed or approved through an issue, on
[Discord](https://marimo.io/discord?ref=pr), or the community
[discussions](https://github.com/marimo-team/marimo/discussions) (Please
provide a link if applicable).
- [ ] Any AI generated code has been reviewed line-by-line by the human
PR author, who stands by it.
- [x] Video or media evidence is provided for any visual changes
(optional). <!-- PR is more likely to be merged if evidence is provided
for changes made -->

## ✅ Merge Checklist

- [x] I have read the [contributor
guidelines](https://github.com/marimo-team/marimo/blob/main/CONTRIBUTING.md).
- [ ] Documentation has been updated where applicable, including
docstrings for API changes.
- [x] Tests have been added for the changes made.

Author: Light2Dark

frontend/src/components/data-table/__tests__/columns.test.tsx

@@ -312,7 +312,7 @@ describe("generateColumns", () => {
     expect(cell?.props.className).toContain("center");
   });
 
-  it("should always left-align column headers regardless of text justification", () => {
+  it("should align column headers to match textJustifyColumns", () => {
     const columns = generateColumns({
       rowHeaders: [],
       selection: null,
@@ -330,7 +330,8 @@ describe("generateColumns", () => {
       columnDef: { meta: col.meta },
     });
 
-    // Even with right justification, header is left-aligned with sort + menu buttons
+    // Right-justified column: outer summary wrapper aligns to end, and the
+    // header row uses flex-row-reverse so the title sits at the right edge.
     const { container: rightContainer } = render(
       <TooltipProvider>
         {/* oxlint-disable-next-line typescript/no-explicit-any */}
@@ -345,12 +346,11 @@ describe("generateColumns", () => {
         "[data-testid='data-table-column-menu-button']",
       ),
     ).toBeTruthy();
-    // No flex-row-reverse or items-end on header
-    const rightWrapper = rightContainer.firstElementChild;
-    expect(rightWrapper?.className).not.toContain("items-end");
-    expect(rightWrapper?.className).not.toContain("flex-row-reverse");
+    expect(rightContainer.firstElementChild?.className).toContain("items-end");
+    expect(rightContainer.querySelector(".flex-row-reverse")).toBeTruthy();
 
-    // Same for center-justified column
+    // Center-justified column: outer summary wrapper centers; header row
+    // keeps natural order.
     const { container: centerContainer } = render(
       <TooltipProvider>
         {/* oxlint-disable-next-line typescript/no-explicit-any */}
@@ -365,9 +365,39 @@ describe("generateColumns", () => {
         "[data-testid='data-table-column-menu-button']",
       ),
     ).toBeTruthy();
-    const centerWrapper = centerContainer.firstElementChild;
-    expect(centerWrapper?.className).not.toContain("items-center");
-    expect(centerWrapper?.className).not.toContain("flex-row-reverse");
+    expect(centerContainer.firstElementChild?.className).toContain(
+      "items-center",
+    );
+    expect(centerContainer.querySelector(".flex-row-reverse")).toBeNull();
+  });
+
+  it("should not auto-align numeric column headers without explicit override", () => {
+    const columns = generateColumns({
+      rowHeaders: [],
+      selection: null,
+      fieldTypes,
+    });
+
+    const mockColumn = (col: (typeof columns)[number]) => ({
+      id: col.id,
+      getCanSort: () => true,
+      getCanFilter: () => false,
+      getIsSorted: () => false,
+      getSortIndex: () => -1,
+      getFilterValue: () => undefined,
+      columnDef: { meta: col.meta },
+    });
+
+    // "age" is numeric: cells auto right-align, but the header stays
+    // left-aligned unless the user explicitly opts in via text_justify_columns.
+    const { container } = render(
+      <TooltipProvider>
+        {/* oxlint-disable-next-line typescript/no-explicit-any */}
+        {(columns[1].header as any)({ column: mockColumn(columns[1]) })}
+      </TooltipProvider>,
+    );
+    expect(container.firstElementChild?.className).not.toContain("items-end");
+    expect(container.querySelector(".flex-row-reverse")).toBeNull();
   });
 
   it("should cycle sort button through asc, desc, and clear on clicks", () => {

frontend/src/components/data-table/column-header.tsx

@@ -66,6 +66,7 @@ interface DataTableColumnHeaderProps<
   column: Column<TData, TValue>;
   header: React.ReactNode;
   subheader?: React.ReactNode;
+  justify?: "left" | "center" | "right";
   calculateTopKRows?: CalculateTopKRows;
   table?: Table<TData>;
 }
@@ -74,6 +75,7 @@ export const DataTableColumnHeader = <TData, TValue>({
   column,
   header,
   subheader,
+  justify,
   className,
   calculateTopKRows,
   table,
@@ -89,7 +91,13 @@ export const DataTableColumnHeader = <TData, TValue>({
   // No sorting or filtering
   if (!column.getCanSort() && !column.getCanFilter()) {
     return (
-      <div className={cn(className)}>
+      <div
+        className={cn(
+          justify === "center" && "text-center",
+          justify === "right" && "text-right",
+          className,
+        )}
+      >
         {header}
         {subheader}
       </div>
@@ -103,9 +111,24 @@ export const DataTableColumnHeader = <TData, TValue>({
       <div
         className={cn("group flex flex-col my-1 w-full select-none", className)}
       >
-        <div className="flex items-center gap-1">
-          <span>{header}</span>
-          {column.getCanSort() && <SortButton column={column} />}
+        <div
+          className={cn(
+            "flex items-center gap-1",
+            justify === "right" && "flex-row-reverse",
+            justify === "center" && "mx-auto",
+          )}
+        >
+          {justify === "center" ? (
+            <>
+              {column.getCanSort() && <SortButton column={column} />}
+              <span>{header}</span>
+            </>
+          ) : (
+            <>
+              <span>{header}</span>
+              {column.getCanSort() && <SortButton column={column} />}
+            </>
+          )}
           <DropdownMenu modal={false}>
             <DropdownMenuTrigger asChild={true}>
               <button

frontend/src/components/data-table/columns.tsx

@@ -197,9 +197,17 @@ export function generateColumns<T>({
         const stats = chartSpecModel?.getColumnStats(key);
         const dtype = column.columnDef.meta?.dtype;
         const headerTitle = headerTooltip?.[key];
+        const headerJustify = textJustifyColumns?.[key];
+
         const dtypeHeader =
           showDataTypes && dtype ? (
-            <div className="flex flex-row gap-1">
+            <div
+              className={cn(
+                "flex flex-row gap-1",
+                headerJustify === "center" && "justify-center",
+                headerJustify === "right" && "justify-end",
+              )}
+            >
               <span className="text-xs text-muted-foreground">{dtype}</span>
               {stats && typeof stats.nulls === "number" && stats.nulls > 0 && (
                 <span className="text-xs text-muted-foreground">
@@ -233,6 +241,7 @@ export function generateColumns<T>({
             header={headerWithTooltip}
             subheader={dtypeHeader}
             column={column}
+            justify={headerJustify}
             calculateTopKRows={calculateTopKRows}
             table={table}
           />
@@ -247,6 +256,8 @@ export function generateColumns<T>({
           <div
             className={cn(
               "flex flex-col h-full pt-0.5 pb-3 justify-between items-start",
+              headerJustify === "center" && "items-center",
+              headerJustify === "right" && "items-end",
             )}
           >
             {dataTableColumnHeader}