Skip to content

Conversation

@bnGil
Copy link
Contributor

@bnGil bnGil commented Sep 30, 2025

Add Sorting Support to CMS Collection

Implements sorting functionality for CMS collections following the CMS Collection Interface specification.

Changes

Service Layer (cms-collection-service.ts)

  • Added sortSignal to track current sort state
  • Added setSort() method to update sort and reload items
  • Added initialSort to service configuration
  • Updated loadCollectionItems() to apply sort using query.ascending() / query.descending()
  • Updated loadCmsCollectionServiceInitialData() to accept optional sort parameter

Components

  • New: CmsCollectionSort.tsx - Headless component providing sort state from service
  • New: CmsCollection.Sort - Styled wrapper around Sort primitive with CMS state management
  • New: CmsCollection.SortOption - Re-export of Sort primitive's Option component
  • Updated CmsCollection.Root to accept initialSort in collection config

Features

  • ✅ Supports dynamic field names (unknown schemas)
  • ✅ Native <select> and custom list rendering modes
  • ✅ AsChild pattern support for full customization
  • ✅ Automatic collection reload on sort change
  • ✅ Preserves sort state during pagination
  • ✅ Data attributes for testing: data-sorted-by, data-sort-direction

Usage Examples

// Native select
<CmsCollection.Sort
  as="select"
  sortOptions={[
    { fieldName: 'title', order: 'ASC', label: 'Title (A-Z)' },
    { fieldName: 'created', order: 'DESC', label: 'Newest First' },
  ]}
/>

// Custom buttons
<CmsCollection.Sort as="list">
  <CmsCollection.SortOption fieldName="title" order="ASC" label="Title (A-Z)" />
  <CmsCollection.SortOption fieldName="created" order="DESC" label="Newest" />
</CmsCollection.Sort>

Technical Notes

  • Uses platform Sort primitive for consistent behavior across packages
  • Sort state is reactive (signal-based) and triggers automatic reloads
  • Designed for extensibility (supports SortValue array for future multi-sort)
  • Currently applies first sort item only (Wix Data SDK limitation)

Copy link
Contributor

@jordanlaor jordanlaor left a comment

Choose a reason for hiding this comment

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

  1. update the package version :)
  2. can you have multiple sorts? How do you do that?

@bnGil
Copy link
Contributor Author

bnGil commented Oct 5, 2025

  1. update the package version :)
  2. can you have multiple sorts? How do you do that?

What do you mean by multiple sorts?

@bnGil bnGil force-pushed the gil/implement-sort branch from 2f800e0 to 1ba48f5 Compare October 5, 2025 09:09
@bnGil bnGil merged commit 1e723a8 into main Oct 5, 2025
1 check passed
@bnGil bnGil deleted the gil/implement-sort branch October 5, 2025 12:44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants