Header - Media Manager

Header

The header sits above the table and can include filters, an upload button, a status indicator, and breadcrumbs. It is configured via the header property inside context.

settings: {
  context: {
    type: 'myMedia',
    header: {
      type: 'default',
      filters: { /* ... */ },
      upload: { /* ... */ },
      status: { /* ... */ },
    },
  },
}

Filters

A search box and media-type filter chips can be added:

header: {
  type: 'default',
  filters: {
    show: true,
    items: [
      { type: 'predefined', subType: 'freeText' },
      { type: 'predefined', subType: 'media-types', include: ['video', 'image'] },
    ],
  },
}

Filter	Description
freeText	Free-text search input
media-types	Type filter chips. Use include to limit which types appear ('video', 'image', 'audio', 'document')

Omitting items displays all predefined filters with their defaults. Setting show: false hides filters entirely.

Upload button

To show the upload button in the header:

header: {
  type: 'default',
  upload: { show: true },
}

Accepted file types can be restricted by passing bare extensions (without a leading dot):

upload: { show: true, allowedUploadExtensions: ['mp4', 'mov', 'png', 'jpg'] }

For upload lifecycle details, see Uploads.

Status indicator

A library item count badge can be displayed:

header: {
  type: 'default',
  status: { show: true },
}

Breadcrumbs (category context only)

When using type: 'category', folder navigation breadcrumbs can be enabled:

settings: {
  context: {
    type: 'category',
    initialCategoryId: '12345',
    header: {
      type: 'default',
      breadcrumbs: { show: true, rootLabel: 'Media Library' },
    },
  },
}

Field	Description
breadcrumbs.show	Show/hide the breadcrumb trail
breadcrumbs.rootLabel	Label for the root node

Full header example

header: {
  type: 'default',
  filters: {
    show: true,
    items: [
      { type: 'predefined', subType: 'freeText' },
      { type: 'predefined', subType: 'media-types', include: ['video', 'image', 'audio'] },
    ],
  },
  upload: { show: true, allowedUploadExtensions: ['mp4', 'png', 'jpg'] },
  status: { show: true },
}