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.
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 = ({
@@ -98,7 +98,7 @@ export const APIKeysTable = ({
{canManageAPIKeys && (
-
+ |
(
|
-
+ |
{
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 => (
|
-
+ |
{
|
))}
diff --git a/packages/ui/src/components/OrganizationProfile/RequestToJoinList.tsx b/packages/ui/src/components/OrganizationProfile/RequestToJoinList.tsx
index 331b636d3f1..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 => (
|
-
+ |
|
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 => (
{
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 => (
{
|
))}