fix(ui): Right align table action cells

[alexcarpenter]

Description

Table actions should be right aligned.

BEFORE	AFTER

Checklist

• pnpm test runs as expected.
• pnpm build runs as expected.
• (If applicable) JSDoc comments have been added or updated for any package exports
• (If applicable) Documentation has been updated

Type of change

• 🐛 Bug fix
• 🌟 New feature
• 🔨 Breaking change
• 📖 Refactoring / dependency upgrade / documentation
• other:

Summary by CodeRabbit

Release Notes

Style

• Action columns in tables are now right-aligned across API Keys management, Organization Members, Invitations, Request to Join, and Payment Attempts views for improved visual consistency and better layout.
• Enhanced table component architecture to support flexible column alignment configuration.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
clerk-js-sandbox	Ready	Preview, Comment	Jan 29, 2026 7:23pm

[changeset-bot]

🦋 Changeset detected

Latest commit: 7c90884

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@clerk/ui	Patch
@clerk/chrome-extension	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[coderabbitai]

📝 Walkthrough

Walkthrough

This pull request introduces a new ColumnHeader type to the DataTable component that allows specifying column alignment metadata. The headers prop of DataTable is updated from an array of localization keys to an array of objects containing a key and optional alignment property. Multiple components throughout the UI package are refactored to use the new header format, with action columns explicitly right-aligned. Additionally, React list keys are added to mapped table rows in several components to satisfy React requirements.

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'fix(ui): Right align table action cells' directly and specifically describes the main change across all files—implementing right alignment for table action cells.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[pkg-pr-new]

Open in StackBlitz

@clerk/agent-toolkit

npm i https://pkg.pr.new/@clerk/agent-toolkit@7701

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@7701

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@7701

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@7701

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@7701

@clerk/dev-cli

npm i https://pkg.pr.new/@clerk/dev-cli@7701

@clerk/expo

npm i https://pkg.pr.new/@clerk/expo@7701

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@7701

@clerk/express

npm i https://pkg.pr.new/@clerk/express@7701

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@7701

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@7701

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@7701

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@7701

@clerk/react

npm i https://pkg.pr.new/@clerk/react@7701

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@7701

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@7701

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@7701

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@7701

@clerk/ui

npm i https://pkg.pr.new/@clerk/ui@7701

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@7701

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@7701

commit: 7c90884

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In @.changeset/dry-rice-exist.md:
- Line 5: Update the release note phrase "Right align table actions." to use a
hyphenated compound modifier: change it to "Right-align table actions." so the
wording is grammatically consistent; locate and replace the exact string "Right
align table actions." in the .changeset entry.

[coderabbitai]

⚠️ Potential issue | 🟡 Minor

Hyphenate the compound modifier.

Consider “Right-align table actions.” for grammatical consistency in release notes.

🧰 Tools

🪛 LanguageTool

[grammar] ~5-~5: Use a hyphen to join words.
Context: --- '@clerk/ui': patch --- Right align table actions.

(QB_NEW_EN_HYPHEN)

🤖 Prompt for AI Agents

In @.changeset/dry-rice-exist.md at line 5, Update the release note phrase
"Right align table actions." to use a hyphenated compound modifier: change it to
"Right-align table actions." so the wording is grammatically consistent; locate
and replace the exact string "Right align table actions." in the .changeset
entry.