You are here

Home » API reference » UIkit Components 8.2

uikit-view-table.html.twig in UIkit Components 8.2

Same filename and directory in other branches
  1. 8.3 uikit_views/templates/views/uikit-view-table.html.twig
  2. 8 uikit_views/templates/views/uikit-view-table.html.twig

Default theme implementation for displaying a view as a table.

Available variables:

  • attributes: Remaining HTML attributes for the element.

    • class: HTML classes that can be used to style contextually through CSS.
  • title : The title of this group of rows.
  • header: The table header columns.
    • attributes: Remaining HTML attributes for the element.
    • content: HTML classes to apply to each header cell, indexed by

    the header's key.

    • default_classes: A flag indicating whether default classes should be used.
  • caption_needed: Is the caption tag needed.
  • caption: The caption for this table.
  • accessibility_description: Extended description for the table details.
  • accessibility_summary: Summary for the table details.
  • rows: Table row items. Rows are keyed by row number.
    • attributes: HTML classes to apply to each row.
    • columns: Row column items. Columns are keyed by column number.
      • attributes: HTML classes to apply to each column.
      • content: The column content.
    • default_classes: A flag indicating whether default classes should be used.
  • responsive_table: A flag indicating whether table is responsive.
  • sticky: A flag indicating whether table header is sticky.
  • hover: A flag indicating whether the table should have hover effects applied.
  • striped: A flag indicating whether the table should have striped styling applied.
  • condensed: A flag indicating whether the table should have condensed styling applied.

See also

template_preprocess_views_view_table()

template_preprocess_uikit_view_table()

File

uikit_views/templates/views/uikit-view-table.html.twig
View source 
  1. {#

  2. /**

  3.  * @file

  4.  * Default theme implementation for displaying a view as a table.

  5.  *

  6.  * Available variables:

  7.  * - attributes: Remaining HTML attributes for the element.

  8.  *   - class: HTML classes that can be used to style contextually through CSS.

  9.  * - title : The title of this group of rows.

  10.  * - header: The table header columns.

  11.  *   - attributes: Remaining HTML attributes for the element.

  12.  *   - content: HTML classes to apply to each header cell, indexed by

  13.  *   the header's key.

  14.  *   - default_classes: A flag indicating whether default classes should be

  15.  *     used.

  16.  * - caption_needed: Is the caption tag needed.

  17.  * - caption: The caption for this table.

  18.  * - accessibility_description: Extended description for the table details.

  19.  * - accessibility_summary: Summary for the table details.

  20.  * - rows: Table row items. Rows are keyed by row number.

  21.  *   - attributes: HTML classes to apply to each row.

  22.  *   - columns: Row column items. Columns are keyed by column number.

  23.  *     - attributes: HTML classes to apply to each column.

  24.  *     - content: The column content.

  25.  *   - default_classes: A flag indicating whether default classes should be

  26.  *     used.

  27.  * - responsive_table: A flag indicating whether table is responsive.

  28.  * - sticky: A flag indicating whether table header is sticky.

  29.  * - hover: A flag indicating whether the table should have hover effects

  30.  *   applied.

  31.  * - striped: A flag indicating whether the table should have striped styling

  32.  *   applied.

  33.  * - condensed: A flag indicating whether the table should have condensed

  34.  *   styling applied.

  35.  *

  36.  * @see template_preprocess_views_view_table()

  37.  * @see template_preprocess_uikit_view_table()

  38.  *

  39.  * @ingroup themeable

  40.  */

  41. #}

  42. {%

  43.   set classes = [

  44.     'uk-table',

  45.     hover ? 'uk-table-hover',

  46.     striped ? 'uk-table-striped',

  47.     condensed ? 'uk-table-condensed',

  48.     'cols-' ~ header|length,

  49.     sticky ? 'sticky-enabled',

  50.   ]

  51. %}

  52. {% if responsive_table %}

  53.   <div class="uk-overflow-container">

  54. {% endif %}

  55. <table{{ attributes.addClass(classes) }}>

  56.   {% if caption_needed %}

  57.     <caption>

  58.     {% if caption %}

  59.       {{ caption }}

  60.     {% else %}

  61.       {{ title }}

  62.     {% endif %}

  63.     {% if (summary is not empty) or (description is not empty) %}

  64.       <details>

  65.         {% if summary is not empty %}

  66.           <summary>{{ summary }}</summary>

  67.         {% endif %}

  68.         {% if description is not empty %}

  69.           {{ description }}

  70.         {% endif %}

  71.       </details>

  72.     {% endif %}

  73.     </caption>

  74.   {% endif %}

  75.   {% if header %}

  76.     <thead>

  77.       <tr{{ table_row_attributes }}>

  78.         {% for key, column in header %}

  79.           {% if column.default_classes %}

  80.             {%

  81.               set column_classes = [

  82.                 'views-field',

  83.                 'views-field-' ~ fields[key],

  84.               ]

  85.             %}

  86.           {% endif %}

  87.           <th{{ column.attributes.addClass(column_classes).setAttribute('scope', 'col') }}>

  88.             {%- if column.wrapper_element -%}

  89.               <{{ column.wrapper_element }}>

  90.                 {%- if column.url -%}

  91.                   <a href="{{ column.url }}" title="{{ column.title }}">{{ column.content }}{{ column.sort_indicator }}</a>

  92.                 {%- else -%}

  93.                   {{ column.content }}{{ column.sort_indicator }}

  94.                 {%- endif -%}

  95.               </{{ column.wrapper_element }}>

  96.             {%- else -%}

  97.               {%- if column.url -%}

  98.                 <a href="{{ column.url }}" title="{{ column.title }}">{{ column.content }}{{ column.sort_indicator }}</a>

  99.               {%- else -%}

  100.                 {{- column.content }}{{ column.sort_indicator }}

  101.               {%- endif -%}

  102.             {%- endif -%}

  103.           </th>

  104.         {% endfor %}

  105.       </tr>

  106.     </thead>

  107.   {% endif %}

  108.   <tbody>

  109.     {% for row in rows %}

  110.       {% set row_classes = [vertical_modifier ? 'uk-table-middle'] %}

  111.       <tr{{ row.attributes.addClass(row_classes) }}>

  112.         {% for key, column in row.columns %}

  113.           {% if column.default_classes %}

  114.             {%

  115.               set column_classes = [

  116.                 'views-field'

  117.               ]

  118.             %}

  119.             {% for field in column.fields %}

  120.               {% set column_classes = column_classes|merge(['views-field-' ~ field]) %}

  121.             {% endfor %}

  122.           {% endif %}

  123.           <td{{ column.attributes.addClass(column_classes) }}>

  124.             {%- if column.wrapper_element -%}

  125.               <{{ column.wrapper_element }}>

  126.               {% for content in column.content %}

  127.                 {{ content.separator }}{{ content.field_output }}

  128.               {% endfor %}

  129.               </{{ column.wrapper_element }}>

  130.             {%- else -%}

  131.               {% for content in column.content %}

  132.                 {{- content.separator }}{{ content.field_output -}}

  133.               {% endfor %}

  134.             {%- endif %}

  135.           </td>

  136.         {% endfor %}

  137.       </tr>

  138.     {% endfor %}

  139.   </tbody>

  140. </table>

  141. 

  142. {% if responsive_table %}

  143.   </div>

  144. {% endif %}