Freeze left-hand column of data table (#14594)

* Freeze left-hand column of data table

* Freeze left-hand column of datatable

* Don't use position-absolute on first th as it messes with column placement.

* Use a spacer column to prevent label column from overlapping with first value column

* Set margin of second td

* Use position:sticky

* Fix missing border in Safari/Firefox

* Cross-browser fixes

* Increase space available for first data column

* Don't put dataTableScroller around non-HTML table vizs

* Only apply negative margin/width to datatables in widgets

* Reduce border radius to adjust for border-collapse: separate

* Updated reference screenshots

* UI test fixes

* Don't let live widget overflow dashboard card

* Updated reference images

* Reduce left margin to make data action icons visible on smaller screens

* Update reference images

* Back out change to TestSetupFixture (should not have been committed on this branch) to avoid merge conflicts

* Update UI screenshots

1 files changed, 2 insertions, 0 deletions

diff --git a/plugins/CoreVisualizations/templates/_dataTableViz_htmlTable.twig b/plugins/CoreVisualizations/templates/_dataTableViz_htmlTable.twig
index c4b4659e03..38c2101168 100644
--- a/plugins/CoreVisualizations/templates/_dataTableViz_htmlTable.twig
+++ b/plugins/CoreVisualizations/templates/_dataTableViz_htmlTable.twig
@@ -6,6 +6,7 @@
     {{ error.message }}
 {% else %}
     {%- if not showingEmbeddedSubtable -%}
+    <div class="dataTableScroller">
     <table cellspacing="0" class="dataTable">
         {% include "@CoreHome/_dataTableHead.twig" %}
 
@@ -67,5 +68,6 @@
     {%- if not showingEmbeddedSubtable -%}
         </tbody>
     </table>
+    </div>
     {%- endif -%}
 {% endif %}
\ No newline at end of file