fix: align column headers with text_justify_columns setting

[maxkoretskyi]

Summary

Column headers now follow the same alignment as cell data when using text_justify_columns.

Closes #7967

Description of Changes

When text_justify_columns is set (e.g., {"Age": "right"}), only cell data was aligned — column headers stayed left-aligned, creating a visual mismatch.

The fix passes the justify value from generateColumns through to DataTableColumnHeader, which applies:

• flex-row-reverse for right-aligned columns (swaps the sort/filter icon to the left)
• text-right / text-center on the header text span

Before:
Headers left-aligned, data right-aligned.

After:
Headers match the cell data alignment.

Files changed:

• column-header.tsx — accepts justify prop, applies alignment classes
• columns.tsx — passes justify to the header component
• columns.test.tsx — adds test for header justification

Checklist

• I have read the contributor guidelines.
• For large changes, or changes that affect the public API: this change was discussed or approved through an issue, on Discord, or the community discussions (Please provide a link if applicable).
• Tests have been added for the changes made.
• Documentation has been updated where applicable, including docstrings for API changes.
• Pull request title is a good summary of the changes - it will be used in the release notes.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
marimo-docs	Ready	Preview, Comment	Feb 9, 2026 3:15pm

[Light2Dark]

I think you still want the flex-row-reverse css, so that the buttons are placed on the left

          <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,
            )}

else you get this

[maxkoretskyi]

@Light2Dark thanks, pushed

Just to clarify, but then there's no way for us to only use the prop on the parent columns.tsx, b/c parent doensn't control , we have to apply justify to both:

• Parent (columns.tsx): justify controls items-center / items-end on two wrappers
• Child (column-header.tsx): justify controls flex-row-reverse to flip sort/filter icons to the left

[Light2Dark]

maybe my comment disappeared lol, yeah that's fine. Thanks!

[maxkoretskyi]

thanks! take a look at this one, should be pretty straightforward #8183