Fix header alignment for multi-dimension reports (#15134)

3 files changed, 9 insertions, 5 deletions

diff --git a/plugins/CoreHome/stylesheets/dataTable/_dataTable.less b/plugins/CoreHome/stylesheets/dataTable/_dataTable.less
index 5db4177fa1..41c10bdf34 100644
--- a/plugins/CoreHome/stylesheets/dataTable/_dataTable.less
+++ b/plugins/CoreHome/stylesheets/dataTable/_dataTable.less
@@ -153,10 +153,13 @@ table.subActionsDataTable td.label,
 table.actionsDataTable td.label {
   border-top: 0;
   border-left: 0;
-  position: sticky; position: -webkit-sticky;
   left: 0;
   z-index: 1;
   background-clip: padding-box;
+
+  &.first {
+    position: sticky; position: -webkit-sticky;
+  }
 }
 
 .dataTableActions table.dataTable th.label {
@@ -663,6 +666,6 @@ div.dataTableScroller {
   table.dataTable td.label,
   table.subActionsDataTable td.label,
   table.actionsDataTable td.label {
-    position: static;
+    position: static !important;
   }
 }
diff --git a/plugins/CoreHome/templates/_dataTableHead.twig b/plugins/CoreHome/templates/_dataTableHead.twig
index d607f7ad04..9ef585c240 100644
--- a/plugins/CoreHome/templates/_dataTableHead.twig
+++ b/plugins/CoreHome/templates/_dataTableHead.twig
@@ -1,7 +1,8 @@
+{% set dimensions = dataTable.getMetadata('dimensions')|default([]) %}
 <thead>
    <tr>
        {% for column in properties.columns_to_display %}
-           <th class="{% if properties.enable_sort %}sortable{% endif %} {% if loop.first %}first{% elseif loop.last %}last{% endif %} {% if column == 'label' %}label{% endif %}" id="{{ column }}">
+           <th class="{% if properties.enable_sort %}sortable{% endif %} {% if loop.first %}first{% elseif loop.last %}last{% endif %} {% if column == 'label' or column in dimensions %}label{% endif %}" id="{{ column }}">
                {% if properties.metrics_documentation[column]|default is not empty %}
                    <div class="columnDocumentation">
                        <div class="columnDocumentationTitle">
diff --git a/plugins/CoreVisualizations/templates/_dataTableViz_htmlTable.twig b/plugins/CoreVisualizations/templates/_dataTableViz_htmlTable.twig
index a9ac3f4dae..6178e33cec 100644
--- a/plugins/CoreVisualizations/templates/_dataTableViz_htmlTable.twig
+++ b/plugins/CoreVisualizations/templates/_dataTableViz_htmlTable.twig
@@ -42,7 +42,7 @@
                     {% if rowHasSubtable %}title="{{ 'CoreHome_ClickRowToExpandOrContract'|translate }}"{% endif %}>
                     {% for column in properties.columns_to_display %}
                         {% set cellAttributes = visualization.getCellHtmlAttributes(row, column) %}
-                        <td class="{% if column =='label' or column in dimensions %}label{% else %}column{% endif %} {{ cellAttributes.class|default|e('html_attr') }}"
+                        <td class="{% if column =='label' or column in dimensions %}label{% else %}column{% endif %} {% if loop.first %}first{% endif %} {{ cellAttributes.class|default|e('html_attr') }}"
                             {% if cellAttributes is not empty %}{% for name, value in cellAttributes %}{{ name|e('html') }}="{{ value|e('html_attr') }}" {% endfor %}{% endif %}
                         >
                             {% if isComparing and column == 'label' %}
@@ -77,7 +77,7 @@
                 <tr class="{{ row.getMetadata('css_class') }} totalsRow"
                         title="Total values for this table">
                     {% for column in properties.columns_to_display %}
-                        <td class="{% if column =='label' %}label{% else %}column{% endif %}">
+                        <td class="{% if column =='label' %}label{% else %}column{% endif %} {% if loop.first %}first{% endif %}">
                             {% include "@CoreHome/_dataTableCell.twig" with properties %}
                         </td>
                     {% endfor %}