Improved data tables

Author: graphieros

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-data-ui",
   "private": false,
-  "version": "1.9.74",
+  "version": "1.9.75",
   "type": "module",
   "description": "A user-empowering data visualization Vue components library",
   "keywords": [

package.json

@@ -970,8 +970,8 @@ defineExpose({
         </svg>
         <!-- DATA TABLE -->
         <div ref="tableContainer" class="vue-ui-chestnut-table">        
-            <div :style="`width:100%;overflow-x:auto`" v-if="mutableConfig.showTable">
-                <div style="width: 100%; container-type: inline-size;" :class="{'vue-ui-responsive': isResponsive}">
+            <div v-if="mutableConfig.showTable">
+                <div style="width: 100%" :class="{'vue-ui-responsive': isResponsive}">
                     <table data-cy="chestnut-table" class="vue-ui-data-table">
                         <caption :style="{backgroundColor: chestnutConfig.table.th.backgroundColor, color: chestnutConfig.table.th.color, outline: chestnutConfig.table.th.outline }" class="vue-ui-data-table__caption">
                             {{ chestnutConfig.style.chart.layout.title.text }} <span v-if="chestnutConfig.style.chart.layout.title.subtitle.text">{{  chestnutConfig.style.chart.layout.title.subtitle.text }}</span>
@@ -1169,6 +1169,7 @@ table {
     width: 100%;
     padding: 1rem;
     border-collapse:collapse;
+    overflow-x: auto;
 }
 
 caption,

src/components/vue-ui-chestnut.vue

@@ -455,7 +455,7 @@ defineExpose({
 
         <!-- DATA TABLE -->
         <div ref="tableContainer" class="vue-ui-heatmap-table">
-            <div :style="`${isPrinting ? '' : 'max-height:400px'};overflow:auto;width:100%;margin-top:${mutableConfig.inside ? '48px' : ''}`" v-if="mutableConfig.showTable" :class="{'vue-ui-responsive' : isResponsive}">
+            <div :style="`width:100%;overflow-x:auto`" v-if="mutableConfig.showTable" :class="{'vue-ui-responsive' : isResponsive}">
                 <table class="vue-ui-data-table">
                     <caption :style="`backgroundColor:${heatmapConfig.table.th.backgroundColor};color:${heatmapConfig.table.th.color};outline:${heatmapConfig.table.th.outline}`">
                         {{ heatmapConfig.style.title.text }} <span v-if="heatmapConfig.style.title.subtitle.text">{{  heatmapConfig.style.title.subtitle.text }}</span>