From 826e82b1c9f13dd26e8d9e69f25ed2a02badc5a1 Mon Sep 17 00:00:00 2001
From: Alex Carpenter <alex.carpenter@clerk.dev>
Date: Thu, 29 Jan 2026 14:14:39 -0500
Subject: [PATCH 1/3] fix(ui): Right align table action cells

---
 .../ui/src/components/APIKeys/ApiKeysTable.tsx |  4 ++--
 .../OrganizationProfile/ActiveMembersList.tsx  |  2 +-
 .../OrganizationProfile/InvitedMembersList.tsx |  2 +-
 .../OrganizationProfile/MemberListTable.tsx    | 18 +++++++++++-------
 .../OrganizationProfile/RequestToJoinList.tsx  |  2 +-
 5 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/packages/ui/src/components/APIKeys/ApiKeysTable.tsx b/packages/ui/src/components/APIKeys/ApiKeysTable.tsx
index 14cf911c2c3..819f65ecdc0 100644
--- a/packages/ui/src/components/APIKeys/ApiKeysTable.tsx
+++ b/packages/ui/src/components/APIKeys/ApiKeysTable.tsx
@@ -42,7 +42,7 @@ export const APIKeysTable = ({
           <Tr>
             <Th>Name</Th>
             <Th>Last used</Th>
-            {canManageAPIKeys && <Th>Actions</Th>}
+            {canManageAPIKeys && <Th sx={{ textAlign: 'right' }}>Actions</Th>}
           </Tr>
         </Thead>
         <Tbody>
@@ -98,7 +98,7 @@ export const APIKeysTable = ({
                   </Box>
                 </Td>
                 {canManageAPIKeys && (
-                  <Td>
+                  <Td sx={{ textAlign: 'right' }}>
                     <ThreeDotsMenu
                       actions={[
                         {
diff --git a/packages/ui/src/components/OrganizationProfile/ActiveMembersList.tsx b/packages/ui/src/components/OrganizationProfile/ActiveMembersList.tsx
index acb28b9cfaa..fd4e760d59e 100644
--- a/packages/ui/src/components/OrganizationProfile/ActiveMembersList.tsx
+++ b/packages/ui/src/components/OrganizationProfile/ActiveMembersList.tsx
@@ -122,7 +122,7 @@ const MemberRow = (props: {
           />
         </Protect>
       </Td>
-      <Td>
+      <Td sx={{ textAlign: 'right' }}>
         <Protect permission={'org:sys_memberships:manage'}>
           <ThreeDotsMenu
             actions={[
diff --git a/packages/ui/src/components/OrganizationProfile/InvitedMembersList.tsx b/packages/ui/src/components/OrganizationProfile/InvitedMembersList.tsx
index 2578af1ceb9..2beb13863d3 100644
--- a/packages/ui/src/components/OrganizationProfile/InvitedMembersList.tsx
+++ b/packages/ui/src/components/OrganizationProfile/InvitedMembersList.tsx
@@ -98,7 +98,7 @@ const InvitationRow = (props: {
           localizationKey={localizeCustomRole(invitation.role) || unlocalizedRoleLabel}
         />
       </Td>
-      <Td>
+      <Td sx={{ textAlign: 'right' }}>
         <ThreeDotsMenu
           actions={[
             {
diff --git a/packages/ui/src/components/OrganizationProfile/MemberListTable.tsx b/packages/ui/src/components/OrganizationProfile/MemberListTable.tsx
index 9eb9592e108..0423e518783 100644
--- a/packages/ui/src/components/OrganizationProfile/MemberListTable.tsx
+++ b/packages/ui/src/components/OrganizationProfile/MemberListTable.tsx
@@ -59,13 +59,17 @@ export const DataTable = (props: MembersListTableProps) => {
         <Table>
           <Thead>
             <Tr>
-              {headers.map((h, index) => (
-                <Th
-                  elementDescriptor={descriptors.tableHead}
-                  key={index}
-                  localizationKey={h}
-                />
-              ))}
+              {headers.map((h, index) => {
+                const isActionsHeader = h?.key?.includes('tableHeader__actions');
+                return (
+                  <Th
+                    elementDescriptor={descriptors.tableHead}
+                    key={index}
+                    localizationKey={h}
+                    sx={isActionsHeader ? { textAlign: 'right' } : undefined}
+                  />
+                );
+              })}
             </Tr>
           </Thead>
           <Tbody>
diff --git a/packages/ui/src/components/OrganizationProfile/RequestToJoinList.tsx b/packages/ui/src/components/OrganizationProfile/RequestToJoinList.tsx
index 331b636d3f1..7e1cd06b51a 100644
--- a/packages/ui/src/components/OrganizationProfile/RequestToJoinList.tsx
+++ b/packages/ui/src/components/OrganizationProfile/RequestToJoinList.tsx
@@ -97,7 +97,7 @@ const RequestRow = withCardStateProvider(
           </Box>
         </Td>
 
-        <Td>
+        <Td sx={{ textAlign: 'right' }}>
           <AcceptRejectRequestButtons {...{ onAccept, onReject }} />
         </Td>
       </RowContainer>

From e7d30d18b2f490098e23d411cfcb4a8ab3d2298e Mon Sep 17 00:00:00 2001
From: Alex Carpenter <alex.carpenter@clerk.dev>
Date: Thu, 29 Jan 2026 14:20:30 -0500
Subject: [PATCH 2/3] update to object

---
 .../OrganizationProfile/ActiveMembersList.tsx | 11 +++++---
 .../InvitedMembersList.tsx                    | 11 +++++---
 .../OrganizationProfile/MemberListTable.tsx   | 26 ++++++++++---------
 .../OrganizationProfile/RequestToJoinList.tsx |  9 ++++---
 .../PaymentAttempts/PaymentAttemptsList.tsx   |  6 ++---
 .../components/Statements/StatementsList.tsx  |  4 +--
 packages/ui/src/elements/DataTable.tsx        | 14 +++++++---
 7 files changed, 50 insertions(+), 31 deletions(-)

diff --git a/packages/ui/src/components/OrganizationProfile/ActiveMembersList.tsx b/packages/ui/src/components/OrganizationProfile/ActiveMembersList.tsx
index fd4e760d59e..cfb28a0fa9f 100644
--- a/packages/ui/src/components/OrganizationProfile/ActiveMembersList.tsx
+++ b/packages/ui/src/components/OrganizationProfile/ActiveMembersList.tsx
@@ -49,10 +49,13 @@ export const ActiveMembersList = ({ memberships, pageSize }: ActiveMembersListPr
       isLoading={(memberships?.isLoading && !memberships?.data.length) || loadingRoles}
       emptyStateLocalizationKey={localizationKeys('organizationProfile.membersPage.detailsTitle__emptyRow')}
       headers={[
-        localizationKeys('organizationProfile.membersPage.activeMembersTab.tableHeader__user'),
-        localizationKeys('organizationProfile.membersPage.activeMembersTab.tableHeader__joined'),
-        localizationKeys('organizationProfile.membersPage.activeMembersTab.tableHeader__role'),
-        localizationKeys('organizationProfile.membersPage.activeMembersTab.tableHeader__actions'),
+        { key: localizationKeys('organizationProfile.membersPage.activeMembersTab.tableHeader__user') },
+        { key: localizationKeys('organizationProfile.membersPage.activeMembersTab.tableHeader__joined') },
+        { key: localizationKeys('organizationProfile.membersPage.activeMembersTab.tableHeader__role') },
+        {
+          key: localizationKeys('organizationProfile.membersPage.activeMembersTab.tableHeader__actions'),
+          align: 'right',
+        },
       ]}
       rows={(memberships?.data || []).map(m => (
         <MemberRow
diff --git a/packages/ui/src/components/OrganizationProfile/InvitedMembersList.tsx b/packages/ui/src/components/OrganizationProfile/InvitedMembersList.tsx
index 2beb13863d3..47badeb9621 100644
--- a/packages/ui/src/components/OrganizationProfile/InvitedMembersList.tsx
+++ b/packages/ui/src/components/OrganizationProfile/InvitedMembersList.tsx
@@ -47,10 +47,13 @@ export const InvitedMembersList = () => {
       isLoading={invitations?.isLoading || loadingRoles}
       emptyStateLocalizationKey={localizationKeys('organizationProfile.membersPage.invitationsTab.table__emptyRow')}
       headers={[
-        localizationKeys('organizationProfile.membersPage.activeMembersTab.tableHeader__user'),
-        localizationKeys('organizationProfile.membersPage.invitedMembersTab.tableHeader__invited'),
-        localizationKeys('organizationProfile.membersPage.activeMembersTab.tableHeader__role'),
-        localizationKeys('organizationProfile.membersPage.activeMembersTab.tableHeader__actions'),
+        { key: localizationKeys('organizationProfile.membersPage.activeMembersTab.tableHeader__user') },
+        { key: localizationKeys('organizationProfile.membersPage.invitedMembersTab.tableHeader__invited') },
+        { key: localizationKeys('organizationProfile.membersPage.activeMembersTab.tableHeader__role') },
+        {
+          key: localizationKeys('organizationProfile.membersPage.activeMembersTab.tableHeader__actions'),
+          align: 'right',
+        },
       ]}
       rows={(invitations?.data || []).map(i => (
         <InvitationRow
diff --git a/packages/ui/src/components/OrganizationProfile/MemberListTable.tsx b/packages/ui/src/components/OrganizationProfile/MemberListTable.tsx
index 0423e518783..3a2587192c5 100644
--- a/packages/ui/src/components/OrganizationProfile/MemberListTable.tsx
+++ b/packages/ui/src/components/OrganizationProfile/MemberListTable.tsx
@@ -22,8 +22,13 @@ import {
 import { useLocalizeCustomRoles } from '../../hooks/useFetchRoles';
 import { type PropsOfComponent, type ThemableCssProp } from '../../styledSystem';
 
+type ColumnHeader = {
+  key: LocalizationKey;
+  align?: 'left' | 'right' | 'center';
+};
+
 type MembersListTableProps = {
-  headers: LocalizationKey[];
+  headers: ColumnHeader[];
   rows: React.ReactNode[];
   isLoading?: boolean;
   page: number;
@@ -59,17 +64,14 @@ export const DataTable = (props: MembersListTableProps) => {
         <Table>
           <Thead>
             <Tr>
-              {headers.map((h, index) => {
-                const isActionsHeader = h?.key?.includes('tableHeader__actions');
-                return (
-                  <Th
-                    elementDescriptor={descriptors.tableHead}
-                    key={index}
-                    localizationKey={h}
-                    sx={isActionsHeader ? { textAlign: 'right' } : undefined}
-                  />
-                );
-              })}
+              {headers.map((h, index) => (
+                <Th
+                  elementDescriptor={descriptors.tableHead}
+                  key={index}
+                  localizationKey={h.key}
+                  sx={h.align ? { textAlign: h.align } : undefined}
+                />
+              ))}
             </Tr>
           </Thead>
           <Tbody>
diff --git a/packages/ui/src/components/OrganizationProfile/RequestToJoinList.tsx b/packages/ui/src/components/OrganizationProfile/RequestToJoinList.tsx
index 7e1cd06b51a..e17f08f3980 100644
--- a/packages/ui/src/components/OrganizationProfile/RequestToJoinList.tsx
+++ b/packages/ui/src/components/OrganizationProfile/RequestToJoinList.tsx
@@ -33,9 +33,12 @@ export const RequestToJoinList = () => {
       isLoading={membershipRequests?.isLoading}
       emptyStateLocalizationKey={localizationKeys('organizationProfile.membersPage.requestsTab.table__emptyRow')}
       headers={[
-        localizationKeys('organizationProfile.membersPage.activeMembersTab.tableHeader__user'),
-        localizationKeys('organizationProfile.membersPage.requestsTab.tableHeader__requested'),
-        localizationKeys('organizationProfile.membersPage.activeMembersTab.tableHeader__actions'),
+        { key: localizationKeys('organizationProfile.membersPage.activeMembersTab.tableHeader__user') },
+        { key: localizationKeys('organizationProfile.membersPage.requestsTab.tableHeader__requested') },
+        {
+          key: localizationKeys('organizationProfile.membersPage.activeMembersTab.tableHeader__actions'),
+          align: 'right',
+        },
       ]}
       rows={(membershipRequests?.data || []).map(request => (
         <RequestRow
diff --git a/packages/ui/src/components/PaymentAttempts/PaymentAttemptsList.tsx b/packages/ui/src/components/PaymentAttempts/PaymentAttemptsList.tsx
index 2a358454ed8..6f1991a1bb5 100644
--- a/packages/ui/src/components/PaymentAttempts/PaymentAttemptsList.tsx
+++ b/packages/ui/src/components/PaymentAttempts/PaymentAttemptsList.tsx
@@ -26,9 +26,9 @@ export const PaymentAttemptsList = () => {
       isLoading={isLoading}
       emptyStateLocalizationKey={localizationKeys(`${localizationRoot}.billingPage.paymentHistorySection.empty`)}
       headers={[
-        localizationKeys(`${localizationRoot}.billingPage.paymentHistorySection.tableHeader__date`),
-        localizationKeys(`${localizationRoot}.billingPage.paymentHistorySection.tableHeader__amount`),
-        localizationKeys(`${localizationRoot}.billingPage.paymentHistorySection.tableHeader__status`),
+        { key: localizationKeys(`${localizationRoot}.billingPage.paymentHistorySection.tableHeader__date`) },
+        { key: localizationKeys(`${localizationRoot}.billingPage.paymentHistorySection.tableHeader__amount`) },
+        { key: localizationKeys(`${localizationRoot}.billingPage.paymentHistorySection.tableHeader__status`) },
       ]}
       rows={paymentAttempts.map(i => (
         <PaymentAttemptsListRow
diff --git a/packages/ui/src/components/Statements/StatementsList.tsx b/packages/ui/src/components/Statements/StatementsList.tsx
index 6b6b757c83b..4a69264f77a 100644
--- a/packages/ui/src/components/Statements/StatementsList.tsx
+++ b/packages/ui/src/components/Statements/StatementsList.tsx
@@ -26,8 +26,8 @@ export const StatementsList = () => {
       isLoading={isLoading}
       emptyStateLocalizationKey={localizationKeys(`${localizationRoot}.billingPage.statementsSection.empty`)}
       headers={[
-        localizationKeys(`${localizationRoot}.billingPage.statementsSection.tableHeader__date`),
-        localizationKeys(`${localizationRoot}.billingPage.statementsSection.tableHeader__amount`),
+        { key: localizationKeys(`${localizationRoot}.billingPage.statementsSection.tableHeader__date`) },
+        { key: localizationKeys(`${localizationRoot}.billingPage.statementsSection.tableHeader__amount`) },
       ]}
       rows={statements.map(i => (
         <StatementsListRow
diff --git a/packages/ui/src/elements/DataTable.tsx b/packages/ui/src/elements/DataTable.tsx
index 3cd5a35060f..e0a2de205b1 100644
--- a/packages/ui/src/elements/DataTable.tsx
+++ b/packages/ui/src/elements/DataTable.tsx
@@ -9,8 +9,16 @@ import { Pagination } from './Pagination';
  * DataTable
  * -----------------------------------------------------------------------------------------------*/
 
+type ColumnHeader = {
+  key: LocalizationKey | string;
+  /**
+   * @default 'left'
+   */
+  align?: 'left' | 'right';
+};
+
 export type DataTableProps = {
-  headers: (LocalizationKey | string)[];
+  headers: ColumnHeader[];
   rows: React.ReactNode[];
   isLoading?: boolean;
   page: number;
@@ -50,8 +58,8 @@ export const DataTable = (props: DataTableProps) => {
                 <Th
                   elementDescriptor={descriptors.tableHead}
                   key={index}
-                  localizationKey={h}
-                  sx={{ width: index === 0 ? 'auto' : '25%' }}
+                  localizationKey={h.key}
+                  sx={[{ width: index === 0 ? 'auto' : '25%' }, h.align ? { textAlign: h.align } : undefined]}
                 />
               ))}
             </Tr>

From 7c90884543e0af4eb2712845e878f3927181fdbd Mon Sep 17 00:00:00 2001
From: Alex Carpenter <alex.carpenter@clerk.dev>
Date: Thu, 29 Jan 2026 14:22:27 -0500
Subject: [PATCH 3/3] add changeset

---
 .changeset/dry-rice-exist.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/dry-rice-exist.md

diff --git a/.changeset/dry-rice-exist.md b/.changeset/dry-rice-exist.md
new file mode 100644
index 00000000000..ca17b855513
--- /dev/null
+++ b/.changeset/dry-rice-exist.md
@@ -0,0 +1,5 @@
+---
+'@clerk/ui': patch
+---
+
+Right align table actions.