You are here

views-view-table.html.twig in Drupal 10

Theme override for implementation of 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: A flag indicating whether table is responsive.
  • sticky: A flag indicating whether table header is sticky.
  • summary_element: A render array with table summary information (if any).

File

core/themes/olivero/templates/views/views-view-table.html.twig
View source
  1. {#
  2. /**
  3. * @file
  4. * Theme override for implementation of 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: A flag indicating whether table is responsive.
  28. * - sticky: A flag indicating whether table header is sticky.
  29. * - summary_element: A render array with table summary information (if any).
  30. *
  31. * @see template_preprocess_views_view_table()
  32. *
  33. * @ingroup themeable
  34. */
  35. #}
  36. {%
  37. set classes = [
  38. 'views-table',
  39. 'cols-' ~ header|length,
  40. responsive ? 'responsive-enabled',
  41. sticky ? 'sticky-enabled',
  42. ]
  43. %}
  44. <table{{ attributes.addClass(classes) }}>
  45. {% if caption_needed %}
  46. <caption>
  47. {% if caption %}
  48. {{ caption }}
  49. {% else %}
  50. {{ title }}
  51. {% endif %}
  52. {% if (summary_element is not empty) %}
  53. {{ summary_element }}
  54. {% endif %}
  55. </caption>
  56. {% endif %}
  57. {% if header %}
  58. <thead>
  59. <tr>
  60. {% for key, column in header %}
  61. {% if column.default_classes %}
  62. {%
  63. set column_classes = [
  64. 'views-field',
  65. 'views-field-' ~ fields[key],
  66. ]
  67. %}
  68. {% endif %}
  69. <th{{ column.attributes.addClass(column_classes).setAttribute('scope', 'col') }}>
  70. {%- if column.wrapper_element -%}
  71. <{{ column.wrapper_element }}>
  72. {%- if column.url -%}
  73. <a href="{{ column.url }}" title="{{ column.title }}" rel="nofollow">{{ column.content }}{{ column.sort_indicator }}</a>
  74. {%- else -%}
  75. {{ column.content }}{{ column.sort_indicator }}
  76. {%- endif -%}
  77. </{{ column.wrapper_element }}>
  78. {%- else -%}
  79. {%- if column.url -%}
  80. <a href="{{ column.url }}" title="{{ column.title }}" rel="nofollow">{{ column.content }}{{ column.sort_indicator }}</a>
  81. {%- else -%}
  82. {{- column.content }}{{ column.sort_indicator }}
  83. {%- endif -%}
  84. {%- endif -%}
  85. </th>
  86. {% endfor %}
  87. </tr>
  88. </thead>
  89. {% endif %}
  90. <tbody>
  91. {% for row in rows %}
  92. <tr{{ row.attributes }}>
  93. {% for key, column in row.columns %}
  94. {% if column.default_classes %}
  95. {%
  96. set column_classes = [
  97. 'views-field'
  98. ]
  99. %}
  100. {% for field in column.fields %}
  101. {% set column_classes = column_classes|merge(['views-field-' ~ field]) %}
  102. {% endfor %}
  103. {% endif %}
  104. <td{{ column.attributes.addClass(column_classes) }}>
  105. {%- if column.wrapper_element -%}
  106. <{{ column.wrapper_element }}>
  107. {% for content in column.content %}
  108. {{ content.separator }}{{ content.field_output }}
  109. {% endfor %}
  110. </{{ column.wrapper_element }}>
  111. {%- else -%}
  112. {% for content in column.content %}
  113. {{- content.separator }}{{ content.field_output -}}
  114. {% endfor %}
  115. {%- endif %}
  116. </td>
  117. {% endfor %}
  118. </tr>
  119. {% endfor %}
  120. </tbody>
  121. </table>

Related topics