DamListHeader Component

File Information

• Path: app/components/dam/DamListHeader.vue
• Purpose: Shared sticky table header for all DAM list views. Renders sortable column labels, a select-all checkbox, and a per-column sort spinner.

Overview

DamListHeader replaces per-page duplicated table header markup. Every list view (Library, Folder Detail, Collage Detail, Search, Trash, Uploaded) uses this same component, guaranteeing consistent sort-arrow behaviour and checkbox placement.

Key behaviours:

• Sort arrows appear on hover and on the currently active column (never on non-sortable columns, i.e. col.sortable === false).
• Sort spinner — when sortLoadingField matches a column's field, arrows on every column hide and a v-progress-circular replaces only that column's arrow. This prevents the user clicking again while the server request is in flight.
• Select-all checkbox — shows when showCheckbox and showSelectAll are both true. The .semi-selected class produces the indeterminate visual for partial cross-page selection.
• Clicking an already-active column emits the opposite direction; clicking a new column emits 'asc'.

Props

Prop	Type	Default	Description
columns	DamColumn[]	required	Column definitions (first entry is always the name/thumbnail column)
sortField	String	'display_file_name'	Currently active sort field
sortDir	'asc' | 'desc'	'asc'	Current sort direction
sortLoadingField	String	''	Field being sorted server-side — shows spinner, hides arrows
showCheckbox	Boolean	true	Whether to render the checkbox column
showSelectAll	Boolean	true	Whether to render a functional select-all checkbox
allSelected	Boolean	false	Drives the checkbox checked state
selectAllIndeterminate	Boolean	false	Renders the checkbox in indeterminate/semi-selected state
actionClass	String	''	Extra CSS class on the trailing actions column
headClass	String	''	Extra CSS class on the root div.table-header

Events

Event	Payload	When
sort-change	[field: string, dir: 'asc' | 'desc']	User clicks a sortable column header
select-all	[checked: boolean]	User toggles the select-all checkbox

DamColumn Type

interface DamColumn {
  field: string
  label: string
  cls?: string          // CSS class on the column header cell
  sortable?: boolean    // false → no sort arrow, no click handler
}

Usage

<DamListHeader
  :columns="listColumns"
  :sort-field="sortValue"
  :sort-dir="sortDir"
  :sort-loading-field="sortLoadingField"
  :all-selected="allSelected"
  :select-all-indeterminate="partialPageSelected"
  @sort-change="onSort"
  @select-all="onSelectAll"
/>

Related Documentation

• DamBulkActionsBar Component — bulk action bar that appears above this header when items are selected
• DisplayPanel Component — sort is also controllable via the display panel dropdown