Skip to content

fix(ui): Right align table action cells #7701

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
alexcarpenter merged 3 commits into from
Jan 30, 2026
Merged

fix(ui): Right align table action cells #7701

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
826e82b
fix(ui): Right align table action cells
alexcarpenter Jan 29, 2026
e7d30d1
update to object
alexcarpenter Jan 29, 2026
7c90884
add changeset
alexcarpenter Jan 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/dry-rice-exist.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@clerk/ui': patch
---

Right align table actions.
Copy link
Contributor

@coderabbitai coderabbitai bot Jan 29, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ 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.

4 changes: 2 additions & 2 deletions packages/ui/src/components/APIKeys/ApiKeysTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -98,7 +98,7 @@ export const APIKeysTable = ({
</Box>
</Td>
{canManageAPIKeys && (
<Td>
<Td sx={{ textAlign: 'right' }}>
<ThreeDotsMenu
actions={[
{
Expand Down
13 changes: 8 additions & 5 deletions packages/ui/src/components/OrganizationProfile/ActiveMembersList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -122,7 +125,7 @@ const MemberRow = (props: {
/>
</Protect>
</Td>
<Td>
<Td sx={{ textAlign: 'right' }}>
<Protect permission={'org:sys_memberships:manage'}>
<ThreeDotsMenu
actions={[
Expand Down
13 changes: 8 additions & 5 deletions packages/ui/src/components/OrganizationProfile/InvitedMembersList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -98,7 +101,7 @@ const InvitationRow = (props: {
localizationKey={localizeCustomRole(invitation.role) || unlocalizedRoleLabel}
/>
</Td>
<Td>
<Td sx={{ textAlign: 'right' }}>
<ThreeDotsMenu
actions={[
{
Expand Down
10 changes: 8 additions & 2 deletions packages/ui/src/components/OrganizationProfile/MemberListTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -63,7 +68,8 @@ export const DataTable = (props: MembersListTableProps) => {
<Th
elementDescriptor={descriptors.tableHead}
key={index}
localizationKey={h}
localizationKey={h.key}
sx={h.align ? { textAlign: h.align } : undefined}
/>
))}
</Tr>
Expand Down
11 changes: 7 additions & 4 deletions packages/ui/src/components/OrganizationProfile/RequestToJoinList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -97,7 +100,7 @@ const RequestRow = withCardStateProvider(
</Box>
</Td>

<Td>
<Td sx={{ textAlign: 'right' }}>
<AcceptRejectRequestButtons {...{ onAccept, onReject }} />
</Td>
</RowContainer>
Expand Down
6 changes: 3 additions & 3 deletions packages/ui/src/components/PaymentAttempts/PaymentAttemptsList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 2 additions & 2 deletions packages/ui/src/components/Statements/StatementsList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
14 changes: 11 additions & 3 deletions packages/ui/src/elements/DataTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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>
Expand Down