You are here

Home » API reference » UIkit Components 8.3

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

Same filename and directory in other branches
  1. 8 uikit_views/templates/views/uikit-view-table.html.twig
  2. 8.2 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-small',

  48.     justified ? 'uk-table-justify',

  49.     'cols-' ~ header|length,

  50.     sticky ? 'sticky-enabled',

  51.   ]

  52. %}

  53. {% if responsive_table %}

  54.   <div data-uk-overflow-auto>

  55. {% endif %}

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

  57.   {% if caption_needed %}

  58.     <caption>

  59.     {% if caption %}

  60.       {{ caption }}

  61.     {% else %}

  62.       {{ title }}

  63.     {% endif %}

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

  65.       <details>

  66.         {% if summary is not empty %}

  67.           <summary>{{ summary }}</summary>

  68.         {% endif %}

  69.         {% if description is not empty %}

  70.           {{ description }}

  71.         {% endif %}

  72.       </details>

  73.     {% endif %}

  74.     </caption>

  75.   {% endif %}

  76.   {% if header %}

  77.     <thead>

  78.       <tr{{ table_row_attributes }}>

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

  80.           {% if column.default_classes %}

  81.             {%

  82.               set column_classes = [

  83.                 'views-field',

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

  85.               ]

  86.             %}

  87.           {% endif %}

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

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

  90.               <{{ column.wrapper_element }}>

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

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

  93.                 {%- else -%}

  94.                   {{ column.content }}{{ column.sort_indicator }}

  95.                 {%- endif -%}

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

  97.             {%- else -%}

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

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

  100.               {%- else -%}

  101.                 {{- column.content }}{{ column.sort_indicator }}

  102.               {%- endif -%}

  103.             {%- endif -%}

  104.           </th>

  105.         {% endfor %}

  106.       </tr>

  107.     </thead>

  108.   {% endif %}

  109.   <tbody>

  110.     {% for row in rows %}

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

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

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

  114.           {% if column.default_classes %}

  115.             {%

  116.               set column_classes = [

  117.                 'views-field'

  118.               ]

  119.             %}

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

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

  122.             {% endfor %}

  123.           {% endif %}

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

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

  126.               <{{ column.wrapper_element }}>

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

  128.                 {{ content.separator }}{{ content.field_output }}

  129.               {% endfor %}

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

  131.             {%- else -%}

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

  133.                 {{- content.separator }}{{ content.field_output -}}

  134.               {% endfor %}

  135.             {%- endif %}

  136.           </td>

  137.         {% endfor %}

  138.       </tr>

  139.     {% endfor %}

  140.   </tbody>

  141. </table>

  142. 

  143. {% if responsive_table %}

  144.   </div>

  145. {% endif %}