Skip to content

Add column sorting functionality to models table - #6

Closed
hazelnutcloud wants to merge 1 commit into
anomalyco:devfrom
hazelnutcloud:feature/column-sorting
Closed

hazelnutcloud wants to merge 1 commit into
anomalyco:devfrom
hazelnutcloud:feature/column-sorting

Conversation

@hazelnutcloud

Copy link
Copy Markdown

Summary

  • Refactored table to support client-side column sorting
  • Made all table headers clickable with visual sort indicators
  • Added support for sorting by all data types (strings, numbers, booleans)
  • Implemented ascending/descending sort toggle on header clicks
  • Preserved existing search functionality

Changes Made

  • app/worker.tsx: Removed hardcoded server-side sorting, added data attributes to table rows, made headers clickable with sort indicators
  • dist/index.css: Added styling for sortable headers with hover effects and sort direction indicators
  • dist/index.js: Implemented comprehensive sorting logic for all column types with visual feedback

Test plan

  • Click any column header to sort by that column
  • Click same header again to toggle sort direction (asc/desc)
  • Verify all columns sort correctly (text, numbers, booleans)
  • Confirm search functionality still works after sorting
  • Check visual indicators (arrows) show current sort state
  • Test default sort by provider name on page load

This enhancement allows users to easily sort the models table by any column, improving the browsing experience when comparing AI models by cost, features, or capabilities.

🤖 Generated with Claude Code

- Remove hardcoded server-side sorting from worker.tsx
- Make table headers clickable with sort indicators
- Add comprehensive client-side sorting for all columns
- Support string, number, and boolean data types
- Toggle ascending/descending order on header clicks
- Add visual sort direction indicators (↑/↓)
- Default to provider name sorting on page load
- Preserve existing search functionality

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>
@thdxr

thdxr commented Jun 18, 2025

Copy link
Copy Markdown
Member

hey sorry i totally reworked the repo structure - you can see in packages/web/src/ render.tsx and index.tsx

@fwang

fwang commented Jun 18, 2025

Copy link
Copy Markdown
Contributor

Thanks @hazelnutcloud! Added sorting after restructuring the repo.

@fwang fwang closed this Jun 18, 2025
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