diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/MemberListTable.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/MemberListTable.tsx
index 43a5b19e2f..5e4fbcf820 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/MemberListTable.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/MemberListTable.tsx
@@ -2,7 +2,20 @@ import type { MembershipRole } from '@clerk/types';
import React from 'react';
import type { LocalizationKey } from '../../customizables';
-import { Col, Flex, Spinner, Table, Tbody, Td, Text, Th, Thead, Tr, useLocalizations } from '../../customizables';
+import {
+ Col,
+ descriptors,
+ Flex,
+ Spinner,
+ Table,
+ Tbody,
+ Td,
+ Text,
+ Th,
+ Thead,
+ Tr,
+ useLocalizations,
+} from '../../customizables';
import { Pagination, Select, SelectButton, SelectOptionList } from '../../elements';
import type { PropsOfComponent } from '../../styledSystem';
import { roleLocalizationKey } from '../../utils';
@@ -54,6 +67,7 @@ export const DataTable = (props: MembersListTableProps) => {
{headers.map((h, index) => (
|
diff --git a/packages/clerk-js/src/ui/customizables/elementDescriptors.ts b/packages/clerk-js/src/ui/customizables/elementDescriptors.ts
index 675216aa3f..a91891deed 100644
--- a/packages/clerk-js/src/ui/customizables/elementDescriptors.ts
+++ b/packages/clerk-js/src/ui/customizables/elementDescriptors.ts
@@ -190,6 +190,11 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
'tabButton',
'tabListContainer',
+ 'tableHead',
+
+ 'paginationPageButton',
+ 'paginationInfoText',
+
'selectButton',
'selectSearchInput',
'selectButtonIcon',
diff --git a/packages/clerk-js/src/ui/elements/Pagination.tsx b/packages/clerk-js/src/ui/elements/Pagination.tsx
index 391a06b3f9..767eab1d03 100644
--- a/packages/clerk-js/src/ui/elements/Pagination.tsx
+++ b/packages/clerk-js/src/ui/elements/Pagination.tsx
@@ -1,6 +1,6 @@
import { useState } from 'react';
-import { Button, Flex, localizationKeys, Text } from '../customizables';
+import { Button, descriptors, Flex, localizationKeys, Text } from '../customizables';
import type { PropsOfComponent } from '../styledSystem';
import { mqu } from '../styledSystem';
import { range } from '../utils';
@@ -31,6 +31,7 @@ const PageButton = (props: PropsOfComponent & { isActive?: boolea
},
sx,
]}
+ elementDescriptor={descriptors.paginationPageButton}
{...rest}
/>
);
@@ -52,32 +53,27 @@ const RowInformation = (props: RowInfoProps) => {
} = props;
return (
-
+
({
- color: t.colors.$blackAlpha700,
- })}
+ colorScheme='inherit'
localizationKey={localizationKeys('paginationRowText__displaying')}
/>{' '}
({ fontWeight: t.fontWeights.$medium })}
>
{startingRow === endingRow && [0, 1].includes(startingRow) ? startingRow : `${startingRow} – ${endingRow}`}
{' '}
({
- color: t.colors.$blackAlpha700,
- })}
+ colorScheme='inherit'
localizationKey={localizationKeys('paginationRowText__of')}
/>{' '}
({
- color: t.colors.$blackAlpha700,
- })}
+ colorScheme='inherit'
>
{allRowsCount}
diff --git a/packages/types/src/appearance.ts b/packages/types/src/appearance.ts
index a06b59352d..8fb69f4bc8 100644
--- a/packages/types/src/appearance.ts
+++ b/packages/types/src/appearance.ts
@@ -344,6 +344,11 @@ export type ElementsConfig = {
tabButton: WithOptions;
tabListContainer: WithOptions;
+ tableHead: WithOptions;
+
+ paginationPageButton: WithOptions;
+ paginationInfoText: WithOptions;
+
selectButton: WithOptions;
selectSearchInput: WithOptions;
selectButtonIcon: WithOptions;