Skip to content

Commit 026004b

Browse files
coreyleelarsonGermanJablo
authored andcommitted
fix(ui): reflect default sort in join tables (#12084)
<!-- Thank you for the PR! Please go through the checklist below and make sure you've completed all the steps. Please review the [CONTRIBUTING.md](https://github.com/payloadcms/payload/blob/main/CONTRIBUTING.md) document in this repository if you haven't already. The following items will ensure that your PR is handled as smoothly as possible: - PR Title must follow conventional commits format. For example, `feat: my new feature`, `fix(plugin-seo): my fix`. - Minimal description explained as if explained to someone not immediately familiar with the code. - Provide before/after screenshots or code diffs if applicable. - Link any related issues/discussions from GitHub or Discord. - Add review comments if necessary to explain to the reviewer the logic behind a change ### What? ### Why? ### How? Fixes # --> ### What? This PR ensures defaultSort is reflected in join tables. ### Why? Currently, default sort is not reflected in the join table state. The data _is_ sorted correctly, but the table state sort is undefined. This is mainly an issue for join fields with `orderable: true` because you can't re-order the table until `order` is the selected sort column. ### How? Added `defaultSort` prop to the `<ListQueryProvider />` in the `<RelationshipTable />` and ensured the default state gets set in `<ListQueryProvider />` when `modifySearchParams` is false. **Before:** <img width="1390" alt="Screenshot 2025-04-11 at 2 33 19 AM" src="https://github.com/user-attachments/assets/4a008d98-d308-4397-a35a-69795e5a6070" /> **After:** <img width="1362" alt="Screenshot 2025-04-11 at 3 04 07 AM" src="https://github.com/user-attachments/assets/4748e354-36e4-451f-83e8-6f84fe58d5b5" /> Fixes #12083 --------- Co-authored-by: Germán Jabloñski <43938777+GermanJablo@users.noreply.github.com>
1 parent 28a43f8 commit 026004b

File tree

3 files changed

+5
-5
lines changed

3 files changed

+5
-5
lines changed

packages/ui/src/elements/RelationshipTable/index.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -335,6 +335,7 @@ export const RelationshipTable: React.FC<RelationshipTableComponentProps> = (pro
335335
defaultLimit={
336336
field.defaultLimit ?? collectionConfig?.admin?.pagination?.defaultLimit
337337
}
338+
defaultSort={field.defaultSort ?? collectionConfig?.defaultSort}
338339
modifySearchParams={false}
339340
onQueryChange={setQuery}
340341
orderableFieldName={

packages/ui/src/providers/ListQuery/index.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,10 @@ export const ListQueryProvider: React.FC<ListQueryProps> = ({
4848
if (modifySearchParams) {
4949
return searchParams
5050
} else {
51-
return {}
51+
return {
52+
limit: String(defaultLimit),
53+
sort: defaultSort,
54+
}
5255
}
5356
})
5457

test/sort/e2e.spec.ts

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -82,19 +82,15 @@ describe('Sort functionality', () => {
8282
await page.getByText('Join A').click()
8383
await expect(page.locator('.sort-header button')).toHaveCount(2)
8484

85-
await page.locator('.sort-header button').nth(0).click()
8685
await assertRows(0, 'A', 'B', 'C', 'D')
8786
await moveRow(2, 3, 'success', 0) // move to middle
8887
await assertRows(0, 'A', 'C', 'B', 'D')
8988

90-
await page.locator('.sort-header button').nth(1).click()
9189
await assertRows(1, 'A', 'B', 'C', 'D')
9290
await moveRow(1, 4, 'success', 1) // move to end
9391
await assertRows(1, 'B', 'C', 'D', 'A')
9492

9593
await page.reload()
96-
await page.locator('.sort-header button').nth(0).click()
97-
await page.locator('.sort-header button').nth(1).click()
9894
await assertRows(0, 'A', 'C', 'B', 'D')
9995
await assertRows(1, 'B', 'C', 'D', 'A')
10096
})

0 commit comments

Comments
 (0)