diff --git a/package-lock.json b/package-lock.json
index d2cbe588..c8b02549 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "vue-data-ui",
-  "version": "1.9.70",
+  "version": "1.9.71",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "vue-data-ui",
-      "version": "1.9.70",
+      "version": "1.9.71",
       "license": "MIT",
       "devDependencies": {
         "@vitejs/plugin-vue": "^4.2.3",
diff --git a/package.json b/package.json
index d13324f8..43893ba7 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue-data-ui",
   "private": false,
-  "version": "1.9.70",
+  "version": "1.9.71",
   "type": "module",
   "description": "A user-empowering data visualization Vue components library",
   "keywords": [
diff --git a/src/atoms/DataTable.vue b/src/atoms/DataTable.vue
index 4e5f9976..2305a152 100644
--- a/src/atoms/DataTable.vue
+++ b/src/atoms/DataTable.vue
@@ -1,7 +1,14 @@
 <script setup>
+import { computed, onMounted, ref } from "vue";
 import Shape from "./Shape.vue";
 
 const props = defineProps({
+    colNames: {
+        type: Array,
+        default() {
+            return []
+        }
+    },
     head: Array,
     body: Array,
     title: String,
@@ -11,61 +18,121 @@ const props = defineProps({
 const { backgroundColor:thbg, color:thc, outline:tho } = props.config.th;
 const { backgroundColor:tdbg, color:tdc, outline:tdo } = props.config.td;
 
+const breakpoint = computed(() => {
+    return props.config.breakpoint
+})
+
+const tableContainer = ref(null)
+const isResponsive = ref(false)
+
+onMounted(() => {
+    const observer = new ResizeObserver((entries) => {
+        entries.forEach(entry => {
+            isResponsive.value = entry.contentRect.width < breakpoint.value;
+        })
+    })
+    if(tableContainer.value) {
+        observer.observe(tableContainer.value)
+    }
+        
+})
+
 </script>
 
 <template>
-    <table data-cy="vue-data-ui-table-data" class="vue-ui-data-table">
-        <thead>
-            <tr>
-                <th :style="{backgroundColor: thbg, color: thc, outline: tho}" :colspan="head.length">
-                    {{  title }}
-                </th>
-            </tr>
-            <tr>
-                <th :style="{backgroundColor: thbg, color: thc, outline: tho}" v-for="(th, i) in head" :key="`th_${i}`">
-                    <div style="display: flex; align-items:center; justify-content:center; justify-content:flex-end;padding-right: 3px; gap:3px">
-                        <svg height="12" width="12" v-if="th.color" viewBox="0 0 20 20" style="background: none;">
-                            <circle cx="10" cy="10" r="10" :fill="th.color"/>
-                        </svg>
-                        <slot name="th" :th="th"/>
-                    </div>
-                </th>
-            </tr>
-        </thead>
-
-        <tbody>
-            <tr v-for="(tr, i) in body">
-                <td v-for="(td, j) in tr" :style="{backgroundColor: tdbg, color: tdc, outline: tdo}">
-                    <div style="display: flex; align-items:center; gap: 5px; justify-content:flex-end; width:100%; padding-right:3px;">
-                        <svg height="12" width="12" v-if="td.color" viewBox="0 0 20 20" style="background: none;overflow: visible">
-                            <Shape
-                                :plot="{ x: 10, y: 10 }"
-                                :color="td.color"
-                                :radius="9"
-                                :shape="config.shape || 'circle'"
-                            />
-                        </svg>
-                        <slot name="td" :td="td"></slot>
-                    </div>
-                </td>
-            </tr>
-        </tbody>
-    </table>
+    <div ref="tableContainer" style="width: 100%; container-type: inline-size;" :class="{'vue-ui-responsive': isResponsive}"> 
+        <table data-cy="vue-data-ui-table-data" class="vue-ui-data-table">
+        <caption :style="{backgroundColor: thbg, color: thc, outline: tho}">
+            {{  title }}
+        </caption>
+            <thead>
+                <tr>
+                    <th :style="{backgroundColor: thbg, color: thc, outline: tho}" v-for="(th, i) in head" :key="`th_${i}`">
+                        <div style="display: flex; align-items:center; justify-content:center; justify-content:flex-end;padding-right: 3px; gap:3px">
+                            <svg height="12" width="12" v-if="th.color" viewBox="0 0 20 20" style="background: none;">
+                                <circle cx="10" cy="10" r="10" :fill="th.color"/>
+                            </svg>
+                            <slot name="th" :th="th"/>
+                        </div>
+                    </th>
+                </tr>
+            </thead>
+
+            <tbody>
+                <tr v-for="(tr, i) in body">
+                    <td role="" v-for="(td, j) in tr" :data-cell="colNames[j]" :style="{backgroundColor: tdbg, color: tdc, outline: tdo}">
+                        <div style="display: flex; align-items:center; gap: 5px; justify-content:flex-end; width:100%; padding-right:3px;">
+                            <svg height="12" width="12" v-if="td.color" viewBox="0 0 20 20" style="background: none;overflow: visible">
+                                <Shape
+                                    :plot="{ x: 10, y: 10 }"
+                                    :color="td.color"
+                                    :radius="9"
+                                    :shape="config.shape || 'circle'"
+                                />
+                            </svg>
+                            <slot name="td" :td="td"></slot>
+                        </div>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
 </template>
 
-<style scoped>
-table.vue-ui-data-table {
-    width: 100%;
-    border-collapse:collapse;
-}
-.vue-ui-data-table td {
-    padding-right: 6px;
-    font-variant-numeric: tabular-nums;
-}
+<style scoped lang="scss">
 .vue-ui-data-table th {
     position: sticky;
     top:0;
     font-weight: 400;
     user-select: none;
 }
+
+table {
+    width: 100%;
+    padding: 1rem;
+    border-collapse:collapse;
+}
+
+caption,
+th,
+td {
+    padding: 0.5rem;
+    font-variant-numeric: tabular-nums;
+}
+
+caption {
+    font-size: 1.3rem;
+    font-weight: 700;
+}
+
+.vue-ui-responsive {
+    th {
+        display: none;
+    }
+    td {
+        display: grid;
+        gap: 0.5rem;
+        grid-template-columns: repeat(2, 1fr);
+        padding: 0.5rem 1rem;
+        outline: none !important;
+        text-align: left;
+    }
+    tr {
+        outline: 1px solid #CCCCCC;
+    }
+
+    td:first-child {
+        padding-top: 1rem;
+    }
+
+    td:last-child {
+        padding-bottom: 1rem;
+    }
+
+    td::before {
+        content: attr(data-cell) ": ";
+        font-weight: 700;
+        text-transform: capitalize;
+    }
+}
 </style>
\ No newline at end of file
diff --git a/src/components/vue-ui-donut-evolution.cy.js b/src/components/vue-ui-donut-evolution.cy.js
index 7ef87f08..26cbdec5 100644
--- a/src/components/vue-ui-donut-evolution.cy.js
+++ b/src/components/vue-ui-donut-evolution.cy.js
@@ -1,7 +1,16 @@
 import VueUiDonutEvolution from './vue-ui-donut-evolution.vue'
 
+
+
 describe('<VueUiDonutEvolution />', () => {
   beforeEach(function () {
+    const stub = cy.stub()
+    Cypress.on('uncaught:exception', (err, runnable) => {
+      if (err.message.includes('ResizeObserver')) {
+          stub()
+          return false
+      }
+    })
     cy.fixture('donut-evolution.json').as('fixture');
     cy.viewport(400, 400);
     cy.get('@fixture').then((fixture) => {
diff --git a/src/components/vue-ui-donut-evolution.vue b/src/components/vue-ui-donut-evolution.vue
index 97ff4a06..5dfcc090 100644
--- a/src/components/vue-ui-donut-evolution.vue
+++ b/src/components/vue-ui-donut-evolution.vue
@@ -349,10 +349,15 @@ const table = computed(() => {
             backgroundColor: donutEvolutionConfig.value.table.td.backgroundColor,
             color: donutEvolutionConfig.value.table.td.color,
             outline: donutEvolutionConfig.value.table.td.outline
-        }
+        },
+        breakpoint: donutEvolutionConfig.value.table.responsiveBreakpoint
     }
 
-    return { head, body, config };
+    const colNames = [
+         donutEvolutionConfig.value.table.columnNames.period
+    ].concat(convertedDataset.value.filter(ds => !segregated.value.includes(ds.uid)).map(ds => ds.name)).concat(donutEvolutionConfig.value.table.columnNames.total)
+
+    return { head, body, config, colNames };
 });
 
 function getData() {
@@ -773,6 +778,7 @@ defineExpose({
 
         <DataTable
             v-if="mutableConfig.showTable"
+            :colNames="table.colNames"
             :head="table.head" 
             :body="table.body" 
             :config="table.config" 
diff --git a/src/components/vue-ui-donut.cy.js b/src/components/vue-ui-donut.cy.js
index c48478c7..e7df1569 100644
--- a/src/components/vue-ui-donut.cy.js
+++ b/src/components/vue-ui-donut.cy.js
@@ -2,6 +2,13 @@ import VueUiDonut from './vue-ui-donut.vue';
 
 describe('<VueUiDonut />', () => {
   beforeEach(function () {
+    const stub = cy.stub()
+    Cypress.on('uncaught:exception', (err, runnable) => {
+      if (err.message.includes('ResizeObserver')) {
+          stub()
+          return false
+      }
+    })
     cy.fixture('donut.json').as('fixture');
     cy.viewport(1000, 1100);
   });
diff --git a/src/components/vue-ui-donut.vue b/src/components/vue-ui-donut.vue
index 78d4d3b0..ecbb3f51 100644
--- a/src/components/vue-ui-donut.vue
+++ b/src/components/vue-ui-donut.vue
@@ -283,10 +283,18 @@ const dataTable = computed(() => {
             backgroundColor: donutConfig.value.table.td.backgroundColor,
             color: donutConfig.value.table.td.color,
             outline: donutConfig.value.table.td.outline
-        }
+        },
+        breakpoint: donutConfig.value.table.responsiveBreakpoint
     }
 
+    const colNames = [
+        donutConfig.value.table.columnNames.series,
+        donutConfig.value.table.columnNames.value,
+        donutConfig.value.table.columnNames.percentage
+    ]
+
     return {
+        colNames,
         head,
         body,
         config
@@ -608,6 +616,7 @@ defineExpose({
         <!-- DATA TABLE -->
         <DataTable
             v-if="mutableConfig.showTable"
+            :colNames="dataTable.colNames"
             :head="dataTable.head" 
             :body="dataTable.body"
             :config="dataTable.config"
diff --git a/src/components/vue-ui-molecule.vue b/src/components/vue-ui-molecule.vue
index 40ba254c..ce0b5ec4 100644
--- a/src/components/vue-ui-molecule.vue
+++ b/src/components/vue-ui-molecule.vue
@@ -384,13 +384,21 @@ const dataTable = computed(() => {
             backgroundColor: moleculeConfig.value.table.td.backgroundColor,
             color: moleculeConfig.value.table.td.color,
             outline: moleculeConfig.value.table.td.outline
-        }
+        },
+        breakpoint: moleculeConfig.value.table.responsiveBreakpoint
     }
 
+    const colNames = [
+        moleculeConfig.value.table.translations.nodeName,
+        moleculeConfig.value.table.translations.details,
+        moleculeConfig.value.table.translations.parentNode
+    ]
+
     return {
         head,
         body,
-        config
+        config,
+        colNames
     }
 });
 
@@ -535,6 +543,7 @@ defineExpose({
 
         <DataTable
             v-if="mutableConfig.showTable"
+            :colNames="dataTable.colNames"
             :head="dataTable.head" 
             :body="dataTable.body"
             :config="dataTable.config"
diff --git a/src/components/vue-ui-mood-radar.vue b/src/components/vue-ui-mood-radar.vue
index 214b4104..954d076a 100644
--- a/src/components/vue-ui-mood-radar.vue
+++ b/src/components/vue-ui-mood-radar.vue
@@ -223,13 +223,21 @@ const dataTable = computed(() => {
             backgroundColor: radarConfig.value.table.td.backgroundColor,
             color: radarConfig.value.table.td.color,
             outline: radarConfig.value.table.td.outline
-        }
+        },
+        breakpoint: radarConfig.value.table.responsiveBreakpoint
     }
 
+    const colNames = [
+        radarConfig.value.table.columnNames.series,
+        radarConfig.value.table.columnNames.value,
+        radarConfig.value.table.columnNames.percentage
+    ]
+
     return {
         head,
         body,
-        config
+        config,
+        colNames
     }
 });
 
@@ -436,6 +444,7 @@ defineExpose({
         <!-- DATA TABLE -->
         <DataTable
             v-if="mutableConfig.showTable"
+            :colNames="dataTable.colNames"
             :head="dataTable.head" 
             :body="dataTable.body"
             :config="dataTable.config"
diff --git a/src/components/vue-ui-rings.cy.js b/src/components/vue-ui-rings.cy.js
index a4a51a15..4f68d67f 100644
--- a/src/components/vue-ui-rings.cy.js
+++ b/src/components/vue-ui-rings.cy.js
@@ -3,6 +3,13 @@ import VueUiRings from './vue-ui-rings.vue'
 describe('<VueUiRings />', () => {
 
   beforeEach(function() {
+    const stub = cy.stub()
+    Cypress.on('uncaught:exception', (err, runnable) => {
+      if (err.message.includes('ResizeObserver')) {
+          stub()
+          return false
+      }
+    })
     cy.fixture('rings.json').as('fixture');
     cy.viewport(600, 800);
   });
diff --git a/src/components/vue-ui-rings.vue b/src/components/vue-ui-rings.vue
index 1c4ab2a9..de33cb9b 100644
--- a/src/components/vue-ui-rings.vue
+++ b/src/components/vue-ui-rings.vue
@@ -263,6 +263,7 @@ const table = computed(() => {
         }
     });
     const body = convertedDataset.value.map(ds => ds.value);
+
     return { head, body };
 });
 
@@ -294,13 +295,21 @@ const dataTable = computed(() => {
             backgroundColor: ringsConfig.value.table.td.backgroundColor,
             color: ringsConfig.value.table.td.color,
             outline: ringsConfig.value.table.td.outline
-        }
+        },
+        breakpoint: ringsConfig.value.table.responsiveBreakpoint
     }
 
+    const colNames = [
+      ringsConfig.value.table.columnNames.series,
+      ringsConfig.value.table.columnNames.value,
+      ringsConfig.value.table.columnNames.percentage
+    ]
+
     return {
         head,
         body,
-        config
+        config,
+        colNames
     }
 });
 
@@ -517,6 +526,7 @@ defineExpose({
     <!-- DATA TABLE -->
     <DataTable
             v-if="mutableConfig.showTable"
+            :colNames="dataTable.colNames"
             :head="dataTable.head" 
             :body="dataTable.body"
             :config="dataTable.config"
diff --git a/src/components/vue-ui-waffle.cy.js b/src/components/vue-ui-waffle.cy.js
index b11b82f6..3af6c187 100644
--- a/src/components/vue-ui-waffle.cy.js
+++ b/src/components/vue-ui-waffle.cy.js
@@ -3,6 +3,13 @@ import VueUiWaffle from './vue-ui-waffle.vue'
 
 describe('<VueUiWaffle />', () => {
   beforeEach(function () {
+    const stub = cy.stub()
+    Cypress.on('uncaught:exception', (err, runnable) => {
+      if (err.message.includes('ResizeObserver')) {
+          stub()
+          return false
+      }
+    })
     cy.fixture('waffle.json').as('fixture');
     cy.viewport(800, 950);
   });
diff --git a/src/components/vue-ui-waffle.vue b/src/components/vue-ui-waffle.vue
index 2fd4b0fd..a5e32c1b 100644
--- a/src/components/vue-ui-waffle.vue
+++ b/src/components/vue-ui-waffle.vue
@@ -365,13 +365,21 @@ const dataTable = computed(() => {
             color: waffleConfig.value.table.td.color,
             outline: waffleConfig.value.table.td.outline
         },
-        shape: 'square'
+        shape: 'square',
+        breakpoint: waffleConfig.value.table.responsiveBreakpoint
     }
 
+    const colNames = [
+        waffleConfig.value.table.columnNames.series,
+        waffleConfig.value.table.columnNames.value,
+        waffleConfig.value.table.columnNames.percentage
+    ]
+
     return {
         head,
         body,
-        config
+        config,
+        colNames
     }
 });
 
@@ -580,6 +588,7 @@ defineExpose({
         <!-- DATA TABLE -->
         <DataTable
             v-if="mutableConfig.showTable"
+            :colNames="dataTable.colNames"
             :head="dataTable.head" 
             :body="dataTable.body"
             :config="dataTable.config"
diff --git a/src/default_configs.json b/src/default_configs.json
index 33c1b40d..a9e65f9d 100644
--- a/src/default_configs.json
+++ b/src/default_configs.json
@@ -434,6 +434,12 @@
         },
         "table": {
             "show": false,
+            "responsiveBreakpoint": 300,
+            "columnNames": {
+                "series": "Series",
+                "value": "Value",
+                "percentage": "Percentage"
+            },
             "th": {
                 "backgroundColor": "#FAFAFA",
                 "color": "#2D353C",
@@ -514,6 +520,12 @@
         },
         "table": {
             "show": false,
+            "responsiveBreakpoint": 400,
+            "columnNames": {
+                "series": "Series",
+                "value": "Value",
+                "percentage": "Percentage"
+            },
             "th": {
                 "backgroundColor": "#FAFAFA",
                 "color": "#2D353C",
@@ -2508,6 +2520,12 @@
         },
         "table": {
             "show": false,
+            "responsiveBreakpoint": 400,
+            "columnNames": {
+                "series": "Series",
+                "value": "Value",
+                "percentage": "Percentage"
+            },
             "th": {
                 "backgroundColor": "#FAFAFA",
                 "color": "#2D353C",
@@ -2717,6 +2735,11 @@
         },
         "table": {
             "show": false,
+            "responsiveBreakpoint": 400,
+            "columnNames": {
+                "period": "Period",
+                "total": "Total"
+            },
             "th": {
                 "backgroundColor": "#FAFAFA",
                 "color": "#2D353C",
@@ -2802,6 +2825,12 @@
         },
         "table": {
             "show": false,
+            "responsiveBreakpoint": 300,
+            "columnNames": {
+                "series": "Series",
+                "value": "Value",
+                "percentage": "Percentage"
+            },
             "th": {
                 "backgroundColor": "#FAFAFA",
                 "color": "#2D353C",
@@ -2922,6 +2951,7 @@
         },
         "table": {
             "show": false,
+            "responsiveBreakpoint": 400,
             "th": {
                 "backgroundColor": "#FAFAFA",
                 "color": "#2D353C",
diff --git a/types/vue-data-ui.d.ts b/types/vue-data-ui.d.ts
index 87615f79..0395b053 100644
--- a/types/vue-data-ui.d.ts
+++ b/types/vue-data-ui.d.ts
@@ -49,6 +49,7 @@ declare module 'vue-data-ui' {
         };
         table?: {
             show?: boolean;
+            responsiveBreakpoint?: number;
             th?: {
                 backgroundColor?: string;
                 color?: string;
@@ -232,6 +233,12 @@ declare module 'vue-data-ui' {
         };
         table?: {
             show?: boolean;
+            responsiveBreakpoint?: number;
+            columnNames?: {
+                series?: string;
+                value?: string;
+                percentage?: string;
+            };
             th?: {
                 backgroundColor?: string;
                 color?: string;
@@ -351,6 +358,11 @@ declare module 'vue-data-ui' {
         };
         table?: {
             show?: boolean;
+            responsiveBreakpoint?: number;
+            columnNames?: {
+                period?: string;
+                total?: string;
+            };
             th?: {
                 backgroundColor?: string;
                 color?: string;
@@ -567,6 +579,12 @@ declare module 'vue-data-ui' {
         };
         table?: {
             show?: string;
+            responsiveBreakpoint?: number;
+            columnNames?: {
+                series?: string;
+                value?: string;
+                percentage?: string;
+            }
             th?: {
                 backgroundColor?: string;
                 color?: string;
@@ -1867,6 +1885,12 @@ declare module 'vue-data-ui' {
         };
         table?: {
             show?: boolean;
+            responsiveBreakpoint?: number;
+            columnNames?: {
+                series?: string;
+                value?: string;
+                percentage?: string;
+            },
             th?: {
                 backgroundColor?: string;
                 color?: string;
@@ -1959,6 +1983,12 @@ declare module 'vue-data-ui' {
         };
         table?: {
             show?: boolean;
+            responsiveBreakpoint?: number;
+            columnNames?: {
+                series?: string;
+                value?: string;
+                percentage?: string;
+            };
             th?: {
                 backgroundColor?: string;
                 color?: string;