Add click-to-sort column headers to all entity list table views by slick-daddy · Pull Request #6934 · stashapp/stash

slick-daddy · 2026-05-16T02:44:52Z

~~This PR shouldn't be merged before #6933 gets merged.~~ We are good now.

The only thing I didn't like about this PR is reverse mapping approach. Maybe we should edit onClick instead. I am open to feedbacks.

Summary

Makes column headers clickable in list table views for Scenes, Galleries,
Performers, Studios, and Tags. The sort infrastructure is generic so all
entity tables benefit without per-entity duplication.

Changes

Changes After Review

Server: favorite sort option for Performer, Studio, Tag sort options
Server: birthdate sort case for age column support
StudioListTable: Favourite column with FavoriteCell
StudioListTable: RelatedCell uses sub_studios pluralized label

Generic sort support (`ListTable.tsx`)

Added optional sortable flag to IColumn — columns without a backend
sort field (image, composite, etc.) are marked sortable: false.
Added onSort, sortBy, sortDirection props. Active sort column
renders ▲ (ASC) or ▼ (DEC) indicator.
Clicking a header fires onSort(column.value) — new column starts ASC,
same column toggles direction.

Per-entity wiring (`List.tsx` + `ListTable.tsx`)

Each entity follows the same pattern:

*ListTable.tsx — accepts onSort/sortBy/sortDirection props
and threads them through to ListTable. Non-sortable columns marked
sortable: false.
*List.tsx — Filtered*List defines a module-level
columnSortMap translating column values to backend sort fields.
onSort useCallback maps the column value via this map before calling
filter.setSortBy(). The inner *List component derives
activeSortColumn by reverse-mapping filter.sortBy back to the
column value so ListTable matches correctly for arrow display.

Column mappings (value → backend field)

Entity	Mappings
Studios	`scene_count→scenes_count`, `image_count→images_count`, `gallery_count→galleries_count`
Scenes	`scene_code→code`
Galleries	`images→images_count`
Performers	`height_cm→height`, `penis_length_cm→penis_length`, `scene_count→scenes_count`, `gallery_count→galleries_count`, `image_count→images_count`, `age→birthdate`
Tags	`scene_count→scenes_count`, `gallery_count→galleries_count`, `image_count→images_count`, `group_count→groups_count`, `performer_count→performers_count`, `studio_count→studios_count`

Bug fixes

Active sort arrow not showing: filter.sortBy contained the backend
field name (e.g. "scenes_count") but ListTable compared against
column.value (e.g. "scene_count"). Fixed by reverse-mapping to
column value before passing to the table.
TypeScript index error: filter.sortBy could be undefined, which
can't be used as an object index. Fixed with ?? "" fallback.

Studio child count label

StudioListTable RelatedCell now shows "N Studios" (pluralized via
intl.formatMessage) instead of a bare number.

Files changed (11 files)

File	Changes
`ui/.../List/ListTable.tsx`	Generic sort header support
`ui/.../Studios/StudioList.tsx`	Sort plumbing + column map
`ui/.../Studios/StudioListTable.tsx`	Sort props + non-sortable columns + "N Studios" label
`ui/.../Scenes/SceneList.tsx`	Sort plumbing + column map
`ui/.../Scenes/SceneListTable.tsx`	Sort props + non-sortable columns
`ui/.../Galleries/GalleryList.tsx`	Sort plumbing + column map
`ui/.../Galleries/GalleryListTable.tsx`	Sort props + non-sortable columns
`ui/.../Performers/PerformerList.tsx`	Sort plumbing + column map
`ui/.../Performers/PerformerListTable.tsx`	Sort props + non-sortable columns
`ui/.../Tags/TagList.tsx`	Sort plumbing + column map
`ui/.../Tags/TagListTable.tsx`	Sort props + non-sortable columns

WithoutPants

Please include screenshots when making UI changes. Users shouldn't need to try it locally to find out what has changed.

For reference, here's how it looks on the scenes page, sorting by title ascending:

I think it would look more consistent if we used the same icons as the sort selector and that the icon should be placed at the right edge:

I would extract the Icon element from ListFilter.tsx and create an exported React component in the same file called SortByIcon which accepts a SortDirectionEnum. SortBySelect should replace its Icon with the new component.

I was able to style it like above by putting contents of the column header th element into a div and styling it with display: flex; align-items: center; justify-content: space-between.

The other thing I noticed is that you've used string instead of SortDirectionEnum for the sortBy parameter. Please change these to use the enum.

While you are in there, please add padding-bottom: 0 to the .table-list .table thead th css rule. The bottom padding is unnecessary and would be a good incidental fix.

WithoutPants · 2026-06-15T01:11:23Z

  const playScene = usePlayScene();

  const playSelected = useCallback(() => {
-    // populate queue and go to first scene


Please revert these removals. There's no reason to remove them for this change.

WithoutPants · 2026-06-15T01:14:25Z

+    const reverseSortMap = useMemo(() => {
+      const rev: Record<string, string> = {};
+      Object.entries(sceneColumnSortMap).forEach(([k, v]) => {
+        rev[v] = k;
+      });
+      return rev;
+    }, []);


This can be moved out of the function component. I would probably add a utility function for creating the reverse map (probably in src/utils/data/ts), and the reverse sort map can be declared below the sort map above.

Do this for the other list components as well.

WithoutPants · 2026-06-15T01:17:22Z

-    ));
-  }, [visibleColumns]);
+    return visibleColumns.map((column) => {
+      const isSortable = column.sortable !== false && onSort;


Do sortable columns outnumber non-sortable columns? If not, then perhaps we should consider defaulting to sortable = false.

Answering my own question, it appears that there's more sortable than not. I don't love defaulting to false with a name like sortable, but I don't have an alternative.

WithoutPants · 2026-06-24T05:59:51Z

There's a bunch of unrelated changes to the server code.

…views

…t, CSS padding fix

- Add sortable: false to performer_count column in StudioListTable (backend does not support sorting by performer_count) - Add weight_kg: weight mapping to performerColumnSortMap (backend expects 'weight', not 'weight_kg')

- Revert unnecessary comment removals in SceneList.tsx - Create getActiveSortColumn utility in src/utils/data.ts - Use utility in all 5 entity List.tsx files, removing duplicated useMemo+reverseSortMap pattern

- Add 'favorite' to performerSortOptions, studioSortOptions, tagSortOptions - Remove sortable:false from favourite columns in PerformerListTable and TagListTable - Add favourite column to StudioListTable with FavoriteCell - Add favourite/favorite mapping to all three entity ColumnSortMaps

SQLite sorts NULLs first for both ASC and DESC. Add IS NULL ordering clause to push NULL values to the end in all sort directions. - getSort: add IS NULL to default, name, title, and filesize cases - performer: sortByOCounter, sortByLastPlayedAt, sortByLastOAt, sortByLatestScene - group: sortByOCounter - studio: sortByLatestScene - scene: last_played_at, last_o_at

- Revert IS NULL addition in getSort (caused unintended side effects) - Add targeted birthdate case in getPerformerSort that flips direction (birthdate is inverse to age: lower date = older, so ASC exchanges with DESC) and adds IS NULL for nulls-last behavior

slick-daddy · 2026-06-25T12:32:09Z

There's a bunch of unrelated changes to the server code.

Dropped unrelated 3 UI fix commits. My initial thought was it would be nice apply them on the way as well but I agree that they are out of scope, so let's drop them.
Commit 4193f2a has also been dropped since it came from syncing fork by mistake.
Rebased with cherry-picking and ready for review.

WithoutPants · 2026-06-26T00:22:20Z

There's still changes to server files in this PR - specifically the sqlite package.

These IS NULL ORDER BY changes were server-side SQL behavior improvements that don't belong in the click-to-sort column headers PR. The sort options arrays (favorite, birthdate handling) are kept since they directly enable the clickable column feature.

…alleryList.tsx

slick-daddy · 2026-06-26T10:43:19Z

 		sortQuery += qb.sortByLastOAt(direction)
 	case "latest_scene":
 		sortQuery += qb.sortByLatestScene(direction)
+	case "birthdate":


Didn't drop favorite sort option and birthdate case because they are needed for Favourite/Age column clicks.

You didn't include these changes in the original description.

…istFilter.tsx

WithoutPants

Please ensure that the description in your PRs matches the changes you've made. You made undocumented changes in this PR, specifically changes to the server sorting behaviour, changing the related studios column presentation, and the favourite column to the studio list table. Having to pore through the changes to discover undocumented changes is significantly time-consuming.

WithoutPants · 2026-07-01T01:34:01Z

-    ));
-  }, [visibleColumns]);
+    return visibleColumns.map((column) => {
+      const isSortable = column.sortable !== false && onSort;


Answering my own question, it appears that there's more sortable than not. I don't love defaulting to false with a name like sortable, but I don't have an alternative.

WithoutPants · 2026-07-01T01:39:09Z

 		sortQuery += qb.sortByLastOAt(direction)
 	case "latest_scene":
 		sortQuery += qb.sortByLatestScene(direction)
+	case "birthdate":


You didn't include these changes in the original description.

…studio.go and StudioListTable.tsx

… key

slick-daddy · 2026-07-07T21:04:37Z

                    withoutContext
                  />
-                  {showAllCounts && !!studio.o_counter_all ? (
+                  {showAllCounts && studio.o_counter_all ? (


This was an incidental fix from pnpm run lint:js:fix. It flagged unnecessary double-negation (!!) on o_counter fields which are already numbers, not booleans.

WithoutPants requested changes Jun 11, 2026

View reviewed changes

WithoutPants added this to the Version 0.32.0 milestone Jun 11, 2026

WithoutPants added the improvement Something needed tweaking. label Jun 11, 2026

WithoutPants requested changes Jun 15, 2026

View reviewed changes

slick-daddy force-pushed the clickable-elements branch from 3d495a0 to c192113 Compare June 16, 2026 04:00

slick-daddy requested a review from WithoutPants June 16, 2026 04:23

slick-daddy and others added 9 commits June 25, 2026 15:26

Add click-to-sort column headers to list views

d68d042

Fix missing useAddKeybinds and TypeScript sortBy index error in list …

f061d84

…views

Address PR review: use SortByIcon, SortDirectionEnum type, flex layou…

8f638cf

…t, CSS padding fix

Run biome format on modified files

cb728f4

Fix sortability of performer_count and weight_kg columns

dd6a4a3

- Add sortable: false to performer_count column in StudioListTable (backend does not support sorting by performer_count) - Add weight_kg: weight mapping to performerColumnSortMap (backend expects 'weight', not 'weight_kg')

Address PR review comments

a19e937

- Revert unnecessary comment removals in SceneList.tsx - Create getActiveSortColumn utility in src/utils/data.ts - Use utility in all 5 entity List.tsx files, removing duplicated useMemo+reverseSortMap pattern

slick-daddy force-pushed the clickable-elements branch from 9c8df38 to bffc293 Compare June 25, 2026 12:29

slick-daddy force-pushed the clickable-elements branch from 89287e8 to bffc293 Compare June 26, 2026 10:23

Merge upstream/develop into clickable-elements, resolve conflict in G…

10a8ef2

…alleryList.tsx

slick-daddy commented Jun 26, 2026

View reviewed changes

Merge upstream/develop into clickable-elements, resolve conflict in L…

c71771a

…istFilter.tsx

WithoutPants requested changes Jul 1, 2026

View reviewed changes

slick-daddy added 2 commits July 7, 2026 21:54

Merge upstream/develop into clickable-elements, resolve conflicts in …

278c185

…studio.go and StudioListTable.tsx

Address PR review: fix birthdate sort direction, add sub-studios i18n…

4eab9d5

… key

slick-daddy commented Jul 7, 2026

View reviewed changes

slick-daddy requested a review from WithoutPants July 8, 2026 15:01

Uh oh!

Uh oh!

Conversation

slick-daddy commented May 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

Changes After Review

Generic sort support (ListTable.tsx)

Per-entity wiring (*List.tsx + *ListTable.tsx)

Column mappings (value → backend field)

Bug fixes

Studio child count label

Files changed (11 files)

Uh oh!

WithoutPants left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

WithoutPants commented Jun 24, 2026

Uh oh!

slick-daddy commented Jun 25, 2026

Uh oh!

WithoutPants commented Jun 26, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

WithoutPants left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

slick-daddy Jul 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

slick-daddy commented May 16, 2026 •

edited

Loading

Generic sort support (`ListTable.tsx`)

Per-entity wiring (`List.tsx` + `ListTable.tsx`)

slick-daddy Jul 7, 2026 •

edited

Loading