file views-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.
  • 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.
  • responsive: Whether or not to use the .table-responsive wrapper.
  • 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.
  • bordered: Flag indicating whether or not the table should be bordered.
  • condensed: Flag indicating whether or not the table should be condensed.
  • hover: Flag indicating whether or not table rows should be hoverable.
  • striped: Flag indicating whether or not table rows should be striped.
  • responsive: Flag indicating whether or not the table should be wrapped to be responsive (using the Bootstrap Framework .table-responsive wrapper).

See Also

  • template_preprocess_views_view_table()
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. * - caption_needed: Is the caption tag needed.
  15. * - caption: The caption for this table.
  16. * - accessibility_description: Extended description for the table details.
  17. * - accessibility_summary: Summary for the table details.
  18. * - responsive: Whether or not to use the .table-responsive wrapper.
  19. * - rows: Table row items. Rows are keyed by row number.
  20. * - attributes: HTML classes to apply to each row.
  21. * - columns: Row column items. Columns are keyed by column number.
  22. * - attributes: HTML classes to apply to each column.
  23. * - content: The column content.
  24. * - bordered: Flag indicating whether or not the table should be bordered.
  25. * - condensed: Flag indicating whether or not the table should be condensed.
  26. * - hover: Flag indicating whether or not table rows should be hoverable.
  27. * - striped: Flag indicating whether or not table rows should be striped.
  28. * - responsive: Flag indicating whether or not the table should be wrapped to
  29. * be responsive (using the Bootstrap Framework .table-responsive wrapper).
  30. *
  31. * @ingroup templates
  32. *
  33. * @see template_preprocess_views_view_table()
  34. */
  35. #}
  36. {% if responsive %}
  37. <div class="table-responsive">
  38. {% endif %}
  39. {%
  40. set classes = [
  41. 'table',
  42. bordered ? 'table-bordered',
  43. condensed ? 'table-condensed',
  44. hover ? 'table-hover',
  45. striped ? 'table-striped',
  46. sticky ? 'sticky-enabled',
  47. ]
  48. %}
  49. <table{{ attributes.addClass(classes) }}>
  50. {% if caption_needed %}
  51. <caption>
  52. {% if caption %}
  53. {{ caption }}
  54. {% else %}
  55. {{ title }}
  56. {% endif %}
  57. {% if (summary is not empty) or (description is not empty) %}
  58. <details>
  59. {% if summary is not empty %}
  60. <summary>{{ summary }}</summary>
  61. {% endif %}
  62. {% if description is not empty %}
  63. {{ description }}
  64. {% endif %}
  65. </details>
  66. {% endif %}
  67. </caption>
  68. {% endif %}
  69. {% if header %}
  70. <thead>
  71. <tr>
  72. {% for key, column in header %}
  73. {% if column.default_classes %}
  74. {%
  75. set column_classes = [
  76. 'views-field',
  77. 'views-field-' ~ fields[key],
  78. ]
  79. %}
  80. {% endif %}
  81. <th{{ column.attributes.addClass(column_classes).setAttribute('scope', 'col') }}>
  82. {%- if column.wrapper_element -%}
  83. <{{ column.wrapper_element }}>
  84. {%- if column.url -%}
  85. <a href="{{ column.url }}" title="{{ column.title }}">{{ column.content }}{{ column.sort_indicator }}</a>
  86. {%- else -%}
  87. {{ column.content }}{{ column.sort_indicator }}
  88. {%- endif -%}
  89. </{{ column.wrapper_element }}>
  90. {%- else -%}
  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. {%- endif -%}
  97. </th>
  98. {% endfor %}
  99. </tr>
  100. </thead>
  101. {% endif %}
  102. <tbody>
  103. {% for row in rows %}
  104. <tr{{ row.attributes }}>
  105. {% for key, column in row.columns %}
  106. {% if column.default_classes %}
  107. {% set column_classes = [ 'views-field' ] %}
  108. {% for field in column.fields %}
  109. {% set column_classes = column_classes|merge(['views-field-' ~ field]) %}
  110. {% endfor %}
  111. {% endif %}
  112. <td{{ column.attributes.addClass(column_classes) }}>
  113. {%- if column.wrapper_element -%}
  114. <{{ column.wrapper_element }}>
  115. {% for content in column.content %}
  116. {{ content.separator }}{{ content.field_output }}
  117. {% endfor %}
  118. </{{ column.wrapper_element }}>
  119. {%- else -%}
  120. {% for content in column.content %}
  121. {{- content.separator }}{{ content.field_output -}}
  122. {% endfor %}
  123. {%- endif %}
  124. </td>
  125. {% endfor %}
  126. </tr>
  127. {% endfor %}
  128. </tbody>
  129. </table>
  130. {% if responsive %}
  131. </div>
  132. {% endif %}

Related topics