add horizontal scrolling

Author: contactashish13

classes/Visualizer/Render/Sidebar/Type/DataTable/DataTable.php

@@ -202,6 +202,14 @@ protected function _renderTableSettings() {
 					)
 				);
 
+				self::_renderCheckboxItem(
+					esc_html__( 'Enable Horizontal Scrolling', 'visualizer' ),
+					'scrollX',
+					$this->scrollX,
+					'true',
+					esc_html__( 'To disable wrapping of columns and enabling horizontal scrolling.', 'visualizer' )
+				);
+
 				echo '<div class="viz-section-delimiter section-delimiter"></div>';
 
 				self::_renderCheckboxItem(

css/library.css

@@ -292,10 +292,6 @@ button.media-modal-close {
 	display: none !important;
 }
 
-.dataTables_scrollBody {
-	overflow: hidden !important;
-}
-
 .dataTables_wrapper {
     max-height: 300px;
     overflow: hidden !important;

js/render-datatables.js

@@ -29,8 +29,7 @@
         if($('#' + id).find('table.visualizer-data-table').length > 0){
             $('#' + id).empty();
         }
-        $('#' + id).append($('<table class="dataTable visualizer-data-table table table-striped"></table>'));
-
+        
         settings = {
             destroy: true,
             paging: false,
@@ -48,26 +47,40 @@
             dom: 'Bfrtip',
         };
 
+        var $classes = 'dataTable visualizer-data-table table table-striped';
+
         if(typeof v.page_type !== 'undefined'){
             switch(v.page_type){
                 case 'post':
+                    // fall-through.
                 case 'library':
                     // remove scrollY if its greater than what will fit in the box (along with the legend).
                     if(parseInt(chart.settings['scrollY_int']) > 180){
                         chart.settings['scrollY_int'];
                     }
+                    delete chart.settings['scrollX'];
                     $.extend( settings, { 
                             scrollX: 150,
                             scrollY: 180,
                     } );
                     break;
-                case 'frontend':
                 case 'chart':
+                    delete chart.settings['scrollX'];
+                    // fall-through.
+                case 'frontend':
                     // empty.
                     break;
             }
         }
 
+        if(typeof chart.settings['scrollX'] !== 'undefined'){
+            if(chart.settings['scrollX'] == 'true'){
+                $classes = $classes + ' nowrap';
+            }
+        }
+
+        $('#' + id).append($('<table class="' + $classes + '"></table>'));
+
         var select = {
             info: false
         };