Style row plugins

15. Style & Row Plugins

When to Use

When configuring how Views formats output (style) and renders individual rows (row).

Style Plugins

Table Style

style:
  type: table
  options:
    grouping: {}
    row_class: ''
    default_row_class: true
    columns:
      title: title
      type: type
      name: name
    default: changed  # Default sort column
    info:
      title:
        sortable: true
        default_sort_order: asc
        align: ''
        separator: ''
        empty_column: false
        responsive: ''
      type:
        sortable: true
        default_sort_order: asc
        align: ''
        separator: ''
        empty_column: false
        responsive: priority-low  # Hide on mobile
    override: true  # Override default columns
    sticky: true  # Sticky table headers
    summary: ''
    empty_table: true  # Show table structure when empty
    caption: ''
    description: ''

Reference: core/modules/node/config/optional/views.view.content.yml lines 535-625

Unformatted List

style:
  type: default  # Unformatted list
  options:
    grouping: {}
    row_class: ''
    default_row_class: true
    uses_fields: false

HTML List

style:
  type: html_list
  options:
    grouping: {}
    row_class: ''
    default_row_class: true
    type: ul  # ul, ol
    wrapper_class: item-list
    class: ''

Grid

style:
  type: grid
  options:
    grouping: {}
    columns: 4
    automatic_width: true
    alignment: horizontal  # horizontal, vertical
    col_class: ''
    row_class: ''

Serializer (for REST Export)

style:
  type: serializer
  options:
    formats:
      json: json
      xml: xml
    uses_fields: false  # Use entity serialization

Row Plugins

Fields Row

row:
  type: fields
  options: {}

Uses field configuration from fields section. Most flexible.

Entity Row

row:
  type: 'entity:node'
  options:
    view_mode: teaser  # View mode for entity rendering

Renders full entity using view mode display. Simpler than fields but less control.

Reference: core/modules/views/config/schema/views.data_types.schema.yml lines 897-902

Data Entity (for REST Export)

row:
  type: data_entity
  options:
    view_mode: default

Data Field (for REST Export)

row:
  type: data_field
  options: {}

Uses field-level serialization instead of entity-level.

Decision

If you need...	Use style...	Use row...	Why
Admin table with sortable columns	table	fields	Full control over columns, sorting
Teaser listings	default/html_list	entity:node	Reuse view mode theming
Grid layout (products, images)	grid	fields/entity	Automatic responsive columns
JSON API output	serializer	data_entity	Entity serialization
Custom field-only JSON	serializer	data_field	Field-level control

Pattern

Table with responsive columns:

style:
  type: table
  options:
    grouping: {}
    row_class: ''
    default_row_class: true
    columns:
      title: title
      changed: changed
      operations: operations
    default: changed
    info:
      title:
        sortable: true
        default_sort_order: asc
        responsive: ''
      changed:
        sortable: true
        default_sort_order: desc
        responsive: priority-low
      operations:
        sortable: false
        responsive: ''
    override: true
    sticky: true
    empty_table: true
row:
  type: fields

15.1 UI Patterns Views Plugins

When the ui_patterns_views sub-module is enabled, UI Patterns becomes available as both a views style plugin and row plugin, enabling component-driven rendering without custom views templates.

Style plugin — wraps the entire view output in a component (e.g., grid layout, card deck):

# views.view.my_view.yml
display:
  default:
    display_options:
      style:
        type: ui_patterns
        options:
          pattern_id: 'my_theme:card_grid'
          # Component props configured here
          variants: ''

Row plugin — renders each view row as a component, mapping view fields to component props/slots:

row:
  type: ui_patterns
  options:
    pattern_id: 'my_theme:card'
    # View fields mapped to component props/slots
    pattern_mapping:
      title: field_title
      image: field_image
      content: body

When to use UI Patterns views plugins:

If you need...	Use...	Why
Each view row rendered as a component	UI Patterns row plugin	Maps view fields to component props, no Twig override needed
View output wrapped in component	UI Patterns style plugin	Component handles grid/list layout
Complex custom views templates	Standard style/row + Twig overrides	Full template control when component mapping is insufficient

Views field sources automatically map to component inputs in the admin UI.

Common Mistakes

Table style with entity row → Table expects fields; use row: fields
Serializer style with fields row when entity serialization intended → Use row: data_entity for entity serialization, data_field for field-based
Not setting responsive on table columns → All columns show on mobile; use priority-low, priority-medium to hide on narrow screens
Grid style with odd number of items and automatic_width: false → Last row looks broken; use automatic_width: true
Forgetting override: true on table style → Default columns used instead of custom config
Using UI Patterns row plugin without defining view fields → The row plugin maps view fields to component props; add fields first, then configure the mapping