From 5df8a614d670d24bf517b827cb7743867bcd559c Mon Sep 17 00:00:00 2001 From: Pascal Jufer Date: Tue, 5 Dec 2023 13:15:46 +0100 Subject: [PATCH] Default sort by sort field in tabular layout (#20629) * Default sort by sort field in tabular layout * Add changeset * Undo previous solution --------- Co-authored-by: Rijk van Zanten --- .changeset/metal-spiders-boil.md | 5 +++++ app/src/layouts/tabular/index.ts | 19 ++++++------------- 2 files changed, 11 insertions(+), 13 deletions(-) create mode 100644 .changeset/metal-spiders-boil.md diff --git a/.changeset/metal-spiders-boil.md b/.changeset/metal-spiders-boil.md new file mode 100644 index 0000000000..b2b5ff4aff --- /dev/null +++ b/.changeset/metal-spiders-boil.md @@ -0,0 +1,5 @@ +--- +"@directus/app": patch +--- + +Ensured collections in tabular layout are sorted by the sort field by default, if available diff --git a/app/src/layouts/tabular/index.ts b/app/src/layouts/tabular/index.ts index 10daddcdcf..b05eab72d2 100644 --- a/app/src/layouts/tabular/index.ts +++ b/app/src/layouts/tabular/index.ts @@ -90,18 +90,6 @@ export default defineLayout({ return formatCollectionItemsCount(itemCount.value || 0, page.value, limit.value, filtering); }); - watch( - sortField, - (value) => { - if (!value) { - return; - } - - onSortChange({ by: value, desc: false }); - }, - { immediate: true }, - ); - return { tableHeaders, items, @@ -168,7 +156,12 @@ export default defineLayout({ function useItemOptions() { const page = syncRefProperty(layoutQuery, 'page', 1); const limit = syncRefProperty(layoutQuery, 'limit', 25); - const defaultSort = computed(() => (primaryKeyField.value ? [primaryKeyField.value?.field] : [])); + + const defaultSort = computed(() => { + const field = sortField.value ?? primaryKeyField.value?.field; + return field ? [field] : []; + }); + const sort = syncRefProperty(layoutQuery, 'sort', defaultSort); const fieldsDefaultValue = computed(() => {