diff --git a/src/components/datatable/DataTable.vue b/src/components/datatable/DataTable.vue
index e76203a39..38b3553ef 100755
--- a/src/components/datatable/DataTable.vue
+++ b/src/components/datatable/DataTable.vue
@@ -385,7 +385,7 @@ export default {
             this.updateScrollWidth();
         }
 
-        if (this.responsiveLayout === 'stack') {
+        if (this.responsiveLayout === 'stack' && !this.scrollable) {
             this.createResponsiveStyle();
         }
     },
@@ -1591,6 +1591,12 @@ export default {
         border: 0 none;
     }
 
+    .p-datatable[${this.attributeSelector}].p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {
+        border-top: 0;
+        border-right: 0;
+        border-left: 0;
+    }
+
     .p-datatable[${this.attributeSelector}] .p-datatable-tbody > tr > td > .p-column-title {
         display: block;
     }
@@ -1769,7 +1775,6 @@ export default {
     border-collapse: collapse;
     width: 100%;
     table-layout: fixed;
-    white-space: nowrap;
 }
 
 .p-datatable .p-sortable-column {
diff --git a/src/views/datatable/DataTableColGroupDemo.vue b/src/views/datatable/DataTableColGroupDemo.vue
index d633d766e..a629ca6b7 100755
--- a/src/views/datatable/DataTableColGroupDemo.vue
+++ b/src/views/datatable/DataTableColGroupDemo.vue
@@ -9,7 +9,7 @@
 
 		<div class="content-section implementation">
             <div class="card">
-                <DataTable :value="sales">
+                <DataTable :value="sales" responsiveLayout="scroll">
                     <ColumnGroup type="header">
                         <Row>
                             <Column header="Product" :rowspan="3" />
diff --git a/src/views/datatable/DataTableCrudDemo.vue b/src/views/datatable/DataTableCrudDemo.vue
index 40d0e6a78..a5a03246c 100755
--- a/src/views/datatable/DataTableCrudDemo.vue
+++ b/src/views/datatable/DataTableCrudDemo.vue
@@ -24,7 +24,7 @@
                 <DataTable ref="dt" :value="products" v-model:selection="selectedProducts" dataKey="id"
                     :paginator="true" :rows="10" :filters="filters"
                     paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown" :rowsPerPageOptions="[5,10,25]"
-                    currentPageReportTemplate="Showing {first} to {last} of {totalRecords} products">
+                    currentPageReportTemplate="Showing {first} to {last} of {totalRecords} products" responsiveLayout="scroll">
                     <template #header>
                         <div class="table-header">
                             <h5 class="p-m-0">Manage Products</h5>
@@ -35,26 +35,26 @@
                         </div>
                     </template>
 
-                    <Column selectionMode="multiple" headerStyle="width: 3rem" :exportable="false"></Column>
-                    <Column field="code" header="Code" :sortable="true"></Column>
-                    <Column field="name" header="Name" :sortable="true"></Column>
+                    <Column selectionMode="multiple" style="width: 3rem" :exportable="false"></Column>
+                    <Column field="code" header="Code" :sortable="true" style="min-width:12rem"></Column>
+                    <Column field="name" header="Name" :sortable="true" style="min-width:16rem"></Column>
                     <Column header="Image">
                          <template #body="slotProps">
                             <img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" />
                         </template>
                     </Column>
-                    <Column field="price" header="Price" :sortable="true">
+                    <Column field="price" header="Price" :sortable="true" style="min-width:8rem">
                         <template #body="slotProps">
                             {{formatCurrency(slotProps.data.price)}}
                         </template>
                     </Column>
-                    <Column field="category" header="Category" :sortable="true"></Column>
-                    <Column field="rating" header="Reviews" :sortable="true">
+                    <Column field="category" header="Category" :sortable="true" style="min-width:10rem">></Column>
+                    <Column field="rating" header="Reviews" :sortable="true" style="min-width:12rem">>
                         <template #body="slotProps">
                            <Rating :modelValue="slotProps.data.rating" :readonly="true" :cancel="false" />
                         </template>
                     </Column>
-                    <Column field="inventoryStatus" header="Status" :sortable="true">
+                    <Column field="inventoryStatus" header="Status" :sortable="true" style="min-width:12rem">>
                         <template #body="slotProps">
                             <span :class="'product-badge status-' + (slotProps.data.inventoryStatus ? slotProps.data.inventoryStatus.toLowerCase() : '')">{{slotProps.data.inventoryStatus}}</span>
                         </template>
@@ -192,26 +192,26 @@
             &lt;/div&gt;
         &lt;/template&gt;
 
-        &lt;Column selectionMode="multiple" headerStyle="width: 3rem" :exportable="false"&gt;&lt;/Column&gt;
-        &lt;Column field="code" header="Code" :sortable="true"&gt;&lt;/Column&gt;
-        &lt;Column field="name" header="Name" :sortable="true"&gt;&lt;/Column&gt;
+        &lt;Column selectionMode="multiple" style="width: 3rem" :exportable="false"&gt;&lt;/Column&gt;
+        &lt;Column field="code" header="Code" :sortable="true" style="min-width:12rem"&gt;&lt;/Column&gt;
+        &lt;Column field="name" header="Name" :sortable="true" style="min-width:16rem"&gt;&lt;/Column&gt;
         &lt;Column header="Image"&gt;
                 &lt;template #body="slotProps"&gt;
                 &lt;img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" /&gt;
             &lt;/template&gt;
         &lt;/Column&gt;
-        &lt;Column field="price" header="Price" :sortable="true"&gt;
+        &lt;Column field="price" header="Price" :sortable="true" style="min-width:8rem"&gt;
             &lt;template #body="slotProps"&gt;
                 {{formatCurrency(slotProps.data.price)}}
             &lt;/template&gt;
         &lt;/Column&gt;
-        &lt;Column field="category" header="Category" :sortable="true"&gt;&lt;/Column&gt;
-        &lt;Column field="rating" header="Reviews" :sortable="true"&gt;
+        &lt;Column field="category" header="Category" :sortable="true" style="min-width:10rem"&gt;&lt;/Column&gt;
+        &lt;Column field="rating" header="Reviews" :sortable="true" style="min-width:12rem"&gt;
             &lt;template #body="slotProps"&gt;
                 &lt;Rating :modelValue="slotProps.data.rating" :readonly="true" :cancel="false" /&gt;
             &lt;/template&gt;
         &lt;/Column&gt;
-        &lt;Column field="inventoryStatus" header="Status" :sortable="true"&gt;
+        &lt;Column field="inventoryStatus" header="Status" :sortable="true" style="min-width:12rem"&gt;
             &lt;template #body="slotProps"&gt;
                 &lt;span :class="'product-badge status-' + (slotProps.data.inventoryStatus ? slotProps.data.inventoryStatus.toLowerCase() : '')"&gt;{{slotProps.data.inventoryStatus}}&lt;/span&gt;
             &lt;/template&gt;
@@ -481,26 +481,26 @@ export default {
                         </div>
                     </template>
 
-                    <Column selectionMode="multiple" headerStyle="width: 3rem" :exportable="false"></Column>
-                    <Column field="code" header="Code" :sortable="true"></Column>
-                    <Column field="name" header="Name" :sortable="true"></Column>
+                    <Column selectionMode="multiple" style="width: 3rem" :exportable="false"></Column>
+                    <Column field="code" header="Code" :sortable="true" style="min-width:12rem"></Column>
+                    <Column field="name" header="Name" :sortable="true" style="min-width:16rem"></Column>
                     <Column header="Image">
                          <template #body="slotProps">
                             <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.image" class="product-image" />
                         </template>
                     </Column>
-                    <Column field="price" header="Price" :sortable="true">
+                    <Column field="price" header="Price" :sortable="true" style="min-width:8rem">
                         <template #body="slotProps">
                             {{formatCurrency(slotProps.data.price)}}
                         </template>
                     </Column>
-                    <Column field="category" header="Category" :sortable="true"></Column>
-                    <Column field="rating" header="Reviews" :sortable="true">
+                    <Column field="category" header="Category" :sortable="true" style="min-width:10rem"></Column>
+                    <Column field="rating" header="Reviews" :sortable="true" style="min-width:12rem">
                         <template #body="slotProps">
                            <Rating :modelValue="slotProps.data.rating" :readonly="true" :cancel="false" />
                         </template>
                     </Column>
-                    <Column field="inventoryStatus" header="Status" :sortable="true">
+                    <Column field="inventoryStatus" header="Status" :sortable="true" style="min-width:12rem">
                         <template #body="slotProps">
                             <span :class="'product-badge status-' + (slotProps.data.inventoryStatus ? slotProps.data.inventoryStatus.toLowerCase() : '')">{{slotProps.data.inventoryStatus}}</span>
                         </template>
diff --git a/src/views/datatable/DataTableDemo.vue b/src/views/datatable/DataTableDemo.vue
index 206c2a232..183fed211 100755
--- a/src/views/datatable/DataTableDemo.vue
+++ b/src/views/datatable/DataTableDemo.vue
@@ -13,7 +13,7 @@
                     dataKey="id" :rowHover="true" v-model:selection="selectedCustomers" v-model:filters="filters" filterDisplay="menu" :loading="loading"
                     paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown" :rowsPerPageOptions="[10,25,50]"
                     currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
-                    :globalFilterFields="['name','country.name','representative.name','status']">
+                    :globalFilterFields="['name','country.name','representative.name','status']" responsiveLayout="scroll">
                     <template #header>
                          <div class="p-d-flex p-jc-between p-ai-center">
                             <h5 class="p-m-0">Customers</h5>
@@ -29,8 +29,8 @@
                     <template #loading>
                         Loading customers data. Please wait.
                     </template>
-                    <Column selectionMode="multiple" headerStyle="width: 3rem"></Column>
-                    <Column field="name" header="Name" sortable>
+                    <Column selectionMode="multiple" style="min-width: 3rem"></Column>
+                    <Column field="name" header="Name" sortable style="min-width: 14rem">
                         <template #body="{data}">
                             {{data.name}}
                         </template>
@@ -38,7 +38,7 @@
                             <InputText type="text" v-model="filterModel.value" class="p-column-filter" placeholder="Search by name"/>
                         </template>
                     </Column>
-                    <Column field="country.name" header="Country" sortable filterMatchMode="contains">
+                    <Column field="country.name" header="Country" sortable filterMatchMode="contains" style="min-width: 14rem">
                         <template #body="{data}">
                             <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" />
                             <span class="image-text">{{data.country.name}}</span>
@@ -47,7 +47,7 @@
                             <InputText type="text" v-model="filterModel.value" class="p-column-filter" placeholder="Search by country"/>
                         </template>
                     </Column>
-                    <Column header="Agent" sortable filterField="representative" sortField="representative.name" :showFilterMatchModes="false" :filterMenuStyle="{'width':'14rem'}">
+                    <Column header="Agent" sortable filterField="representative" sortField="representative.name" :showFilterMatchModes="false" :filterMenuStyle="{'width':'14rem'}" style="min-width: 14rem">
                          <template #body="{data}">
                             <img :alt="data.representative.name" :src="'demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
                             <span class="image-text">{{data.representative.name}}</span>
@@ -64,7 +64,7 @@
                             </MultiSelect>
                         </template>
                     </Column>
-                    <Column field="date" header="Date" sortable dataType="date">
+                    <Column field="date" header="Date" sortable dataType="date" style="min-width: 8rem">
                         <template #body="{data}">
                             {{formatDate(data.date)}}
                         </template>
@@ -72,7 +72,7 @@
                             <Calendar v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" />
                         </template>
                     </Column>
-                    <Column field="balance" header="Balance" sortable dataType="numeric">
+                    <Column field="balance" header="Balance" sortable dataType="numeric" style="min-width: 8rem">
                         <template #body="{data}">
                             {{formatCurrency(data.balance)}}
                         </template>
@@ -80,7 +80,7 @@
                             <InputNumber v-model="filterModel.value" mode="currency" currency="USD" locale="en-US" />
                         </template>
                     </Column>
-                    <Column field="status" header="Status" sortable :filterMenuStyle="{'width':'14rem'}">
+                    <Column field="status" header="Status" sortable :filterMenuStyle="{'width':'14rem'}" style="min-width: 10rem">
                         <template #body="{data}">
                             <span :class="'customer-badge status-' + data.status">{{data.status}}</span>
                         </template>
@@ -95,7 +95,7 @@
                             </Dropdown>
                         </template>
                     </Column>
-                    <Column field="activity" header="Activity" sortable :showFilterMatchModes="false">
+                    <Column field="activity" header="Activity" sortable :showFilterMatchModes="false" style="min-width: 10rem">
                         <template #body="{data}">
                             <ProgressBar :value="data.activity" :showValue="false" />
                         </template>
@@ -107,7 +107,7 @@
                             </div>
                         </template>
                     </Column>
-                    <Column headerStyle="width: 8rem; text-align: center" bodyStyle="text-align: center; overflow: visible">
+                    <Column headerStyle="min-width: 4rem; text-align: center" bodyStyle="text-align: center; overflow: visible">
                         <template #body>
                             <Button type="button" icon="pi pi-cog"></Button>
                         </template>
diff --git a/src/views/datatable/DataTableDoc.vue b/src/views/datatable/DataTableDoc.vue
index fa9fa9047..133bb9e92 100755
--- a/src/views/datatable/DataTableDoc.vue
+++ b/src/views/datatable/DataTableDoc.vue
@@ -2611,7 +2611,7 @@ export default {
     dataKey="id" :rowHover="true" v-model:selection="selectedCustomers" v-model:filters="filters" filterDisplay="menu" :loading="loading"
     paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown" :rowsPerPageOptions="[10,25,50]"
     currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
-    :globalFilterFields="['name','country.name','representative.name','status']"&gt;
+    :globalFilterFields="['name','country.name','representative.name','status']" responsiveLayout="scroll"&gt;
     &lt;template #header&gt;
             &lt;div class="p-d-flex p-jc-between p-ai-center"&gt;
             &lt;h5 class="p-m-0"&gt;Customers&lt;/h5&gt;
@@ -2627,8 +2627,8 @@ export default {
     &lt;template #loading&gt;
         Loading customers data. Please wait.
     &lt;/template&gt;
-    &lt;Column selectionMode="multiple" headerStyle="width: 3rem"&gt;&lt;/Column&gt;
-    &lt;Column field="name" header="Name" sortable&gt;
+    &lt;Column selectionMode="multiple" style="min-width: 3rem"&gt;&lt;/Column&gt;
+    &lt;Column field="name" header="Name" sortable style="min-width: 14rem"&gt;
         &lt;template #body="{data}"&gt;
             {{data.name}}
         &lt;/template&gt;
@@ -2636,7 +2636,7 @@ export default {
             &lt;InputText type="text" v-model="filterModel.value" class="p-column-filter" placeholder="Search by name"/&gt;
         &lt;/template&gt;
     &lt;/Column&gt;
-    &lt;Column field="country.name" header="Country" sortable filterMatchMode="contains"&gt;
+    &lt;Column field="country.name" header="Country" sortable filterMatchMode="contains" style="min-width: 14rem"&gt;
         &lt;template #body="{data}"&gt;
             &lt;img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" /&gt;
             &lt;span class="image-text"&gt;{{data.country.name}}&lt;/span&gt;
@@ -2645,7 +2645,7 @@ export default {
             &lt;InputText type="text" v-model="filterModel.value" class="p-column-filter" placeholder="Search by country"/&gt;
         &lt;/template&gt;
     &lt;/Column&gt;
-    &lt;Column header="Agent" sortable filterField="representative" sortField="representative.name" :showFilterMatchModes="false" :filterMenuStyle="{'width':'14rem'}"&gt;
+    &lt;Column header="Agent" sortable filterField="representative" sortField="representative.name" :showFilterMatchModes="false" :filterMenuStyle="{'width':'14rem'}" style="min-width: 14rem"&gt;
             &lt;template #body="{data}"&gt;
             &lt;img :alt="data.representative.name" :src="'demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" /&gt;
             &lt;span class="image-text"&gt;{{data.representative.name}}&lt;/span&gt;
@@ -2662,7 +2662,7 @@ export default {
             &lt;/MultiSelect&gt;
         &lt;/template&gt;
     &lt;/Column&gt;
-    &lt;Column field="date" header="Date" sortable dataType="date"&gt;
+    &lt;Column field="date" header="Date" sortable dataType="date" style="min-width: 8rem"&gt;
         &lt;template #body="{data}"&gt;
             {{formatDate(data.date)}}
         &lt;/template&gt;
@@ -2670,7 +2670,7 @@ export default {
             &lt;Calendar v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" /&gt;
         &lt;/template&gt;
     &lt;/Column&gt;
-    &lt;Column field="balance" header="Balance" sortable dataType="numeric"&gt;
+    &lt;Column field="balance" header="Balance" sortable dataType="numeric" style="min-width: 8rem"&gt;
         &lt;template #body="{data}"&gt;
             {{formatCurrency(data.balance)}}
         &lt;/template&gt;
@@ -2678,7 +2678,7 @@ export default {
             &lt;InputNumber v-model="filterModel.value" mode="currency" currency="USD" locale="en-US" /&gt;
         &lt;/template&gt;
     &lt;/Column&gt;
-    &lt;Column field="status" header="Status" sortable :filterMenuStyle="{'width':'14rem'}"&gt;
+    &lt;Column field="status" header="Status" sortable :filterMenuStyle="{'width':'14rem'}" style="min-width: 10rem"&gt;
         &lt;template #body="{data}"&gt;
             &lt;span :class="'customer-badge status-' + data.status"&gt;{{data.status}}&lt;/span&gt;
         &lt;/template&gt;
@@ -2693,7 +2693,7 @@ export default {
             &lt;/Dropdown&gt;
         &lt;/template&gt;
     &lt;/Column&gt;
-    &lt;Column field="activity" header="Activity" sortable :showFilterMatchModes="false"&gt;
+    &lt;Column field="activity" header="Activity" sortable :showFilterMatchModes="false" style="min-width: 10rem"&gt;
         &lt;template #body="{data}"&gt;
             &lt;ProgressBar :value="data.activity" :showValue="false" /&gt;
         &lt;/template&gt;
@@ -2705,7 +2705,7 @@ export default {
             &lt;/div&gt;
         &lt;/template&gt;
     &lt;/Column&gt;
-    &lt;Column headerStyle="width: 8rem; text-align: center" bodyStyle="text-align: center; overflow: visible"&gt;
+    &lt;Column headerStyle="width: 4rem; text-align: center" bodyStyle="text-align: center; overflow: visible"&gt;
         &lt;template #body&gt;
             &lt;Button type="button" icon="pi pi-cog"&gt;&lt;/Button&gt;
         &lt;/template&gt;
@@ -2798,7 +2798,7 @@ export default {
                     dataKey="id" :rowHover="true" v-model:selection="selectedCustomers" v-model:filters="filters" filterDisplay="menu" :loading="loading"
                     paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown" :rowsPerPageOptions="[10,25,50]"
                     currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
-                    :globalFilterFields="['name','country.name','representative.name','status']">
+                    :globalFilterFields="['name','country.name','representative.name','status']" responsiveLayout="scroll">
                     <template #header>
                          <div class="p-d-flex p-jc-between p-ai-center">
                             <h5 class="p-m-0">Customers</h5>
@@ -2815,7 +2815,7 @@ export default {
                         Loading customers data. Please wait.
                     </template>
                     <Column selectionMode="multiple" headerStyle="width: 3rem"></Column>
-                    <Column field="name" header="Name" sortable>
+                    <Column field="name" header="Name" sortable style="min-width: 14rem">
                         <template #body="{data}">
                             {{data.name}}
                         </template>
@@ -2823,7 +2823,7 @@ export default {
                             <InputText type="text" v-model="filterModel.value" class="p-column-filter" placeholder="Search by name"/>
                         </template>
                     </Column>
-                    <Column field="country.name" header="Country" sortable filterMatchMode="contains">
+                    <Column field="country.name" header="Country" sortable filterMatchMode="contains" style="min-width: 14rem">
                         <template #body="{data}">
                             <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :class="'flag flag-' + data.country.code" width="30" />
                             <span class="image-text">{{data.country.name}}</span>
@@ -2832,7 +2832,7 @@ export default {
                             <InputText type="text" v-model="filterModel.value" class="p-column-filter" placeholder="Search by country"/>
                         </template>
                     </Column>
-                    <Column header="Agent" sortable filterField="representative" sortField="representative.name" :showFilterMatchModes="false" :filterMenuStyle="{'width':'14rem'}">
+                    <Column header="Agent" sortable filterField="representative" sortField="representative.name" :showFilterMatchModes="false" :filterMenuStyle="{'width':'14rem'}" style="min-width: 14rem">
                          <template #body="{data}">
                             <img :alt="data.representative.name" :src="'demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
                             <span class="image-text">{{data.representative.name}}</span>
@@ -2849,7 +2849,7 @@ export default {
                             </MultiSelect>
                         </template>
                     </Column>
-                    <Column field="date" header="Date" sortable dataType="date">
+                    <Column field="date" header="Date" sortable dataType="date" style="min-width: 8rem">
                         <template #body="{data}">
                             {{formatDate(data.date)}}
                         </template>
@@ -2857,7 +2857,7 @@ export default {
                             <Calendar v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" />
                         </template>
                     </Column>
-                    <Column field="balance" header="Balance" sortable dataType="numeric">
+                    <Column field="balance" header="Balance" sortable dataType="numeric" style="min-width: 8rem">
                         <template #body="{data}">
                             {{formatCurrency(data.balance)}}
                         </template>
@@ -2865,7 +2865,7 @@ export default {
                             <InputNumber v-model="filterModel.value" mode="currency" currency="USD" locale="en-US" />
                         </template>
                     </Column>
-                    <Column field="status" header="Status" sortable :filterMenuStyle="{'width':'14rem'}">
+                    <Column field="status" header="Status" sortable :filterMenuStyle="{'width':'14rem'}" style="min-width: 10rem">
                         <template #body="{data}">
                             <span :class="'customer-badge status-' + data.status">{{data.status}}</span>
                         </template>
@@ -2880,7 +2880,7 @@ export default {
                             </Dropdown>
                         </template>
                     </Column>
-                    <Column field="activity" header="Activity" sortable :showFilterMatchModes="false">
+                    <Column field="activity" header="Activity" sortable :showFilterMatchModes="false" style="min-width: 10rem">
                         <template #body="{data}">
                             <ProgressBar :value="data.activity" :showValue="false" />
                         </template>
@@ -2892,7 +2892,7 @@ export default {
                             </div>
                         </template>
                     </Column>
-                    <Column headerStyle="width: 8rem; text-align: center" bodyStyle="text-align: center; overflow: visible">
+                    <Column headerStyle="width: 4rem; text-align: center" bodyStyle="text-align: center; overflow: visible">
                         <template #body>
                             <Button type="button" icon="pi pi-cog"></Button>
                         </template>
diff --git a/src/views/datatable/DataTableEditDemo.vue b/src/views/datatable/DataTableEditDemo.vue
index a5b8aba6f..60a36a42d 100755
--- a/src/views/datatable/DataTableEditDemo.vue
+++ b/src/views/datatable/DataTableEditDemo.vue
@@ -13,7 +13,7 @@
             <div class="card">
                 <h5>Basic Cell Editing</h5>
                 <p>Simple editors with v-model.</p>
-                <DataTable :value="products1" editMode="cell" class="editable-cells-table">
+                <DataTable :value="products1" editMode="cell" class="editable-cells-table" responsiveLayout="scroll">
                     <Column field="code" header="Code">
                         <template #editor="slotProps">
                             <InputText v-model="slotProps.data[slotProps.column.props.field]" />
@@ -47,7 +47,7 @@
             <div class="card">
                 <h5>Advanced Cell Editing</h5>
                 <p>Custom implementation with validations, dynamic columns and reverting values with the escape key.</p>
-                <DataTable :value="products2" editMode="cell" @cell-edit-complete="onCellEditComplete" class="editable-cells-table" >
+                <DataTable :value="products2" editMode="cell" @cell-edit-complete="onCellEditComplete" class="editable-cells-table" responsiveLayout="scroll">
                     <Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field">
                         <template #editor="slotProps">
                             <InputText :modelValue="slotProps.data[slotProps.column.props.field]" @update:modelValue="onCellEdit($event, slotProps)" />
@@ -59,7 +59,7 @@
             <div class="card">
                 <h5>Row Editing</h5>
                 <DataTable :value="products3" editMode="row" dataKey="id" v-model:editingRows="editingRows"
-                    @row-edit-init="onRowEditInit" @row-edit-cancel="onRowEditCancel">
+                    @row-edit-init="onRowEditInit" @row-edit-cancel="onRowEditCancel" responsiveLayout="scroll">
                     <Column field="code" header="Code">
                         <template #editor="slotProps">
                             <InputText v-model="slotProps.data[slotProps.column.props.field]" autofocus />
@@ -101,7 +101,7 @@
 <pre v-code><code><template v-pre>
 &lt;h5&gt;Basic Cell Editing&lt;/h5&gt;
 &lt;p&gt;Simple editors with v-model.&lt;/p&gt;
-&lt;DataTable :value="products1" editMode="cell" class="editable-cells-table"&gt;
+&lt;DataTable :value="products1" editMode="cell" class="editable-cells-table" responsiveLayout="scroll"&gt;
     &lt;Column field="code" header="Code"&gt;
         &lt;template #editor="slotProps"&gt;
             &lt;InputText v-model="slotProps.data[slotProps.column.props.field]" /&gt;
@@ -135,7 +135,7 @@
 &lt;div class="card"&gt;
 &lt;h5&gt;Advanced Cell Editing&lt;/h5&gt;
 &lt;p&gt;Custom implementation with validations, dynamic columns and reverting values with the escape key.&lt;/p&gt;
-&lt;DataTable :value="products2" editMode="cell" @cell-edit-complete="onCellEditComplete" class="editable-cells-table" &gt;
+&lt;DataTable :value="products2" editMode="cell" @cell-edit-complete="onCellEditComplete" class="editable-cells-table" responsiveLayout="scroll"&gt;
     &lt;Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"&gt;
         &lt;template #editor="slotProps"&gt;
             &lt;InputText :modelValue="slotProps.data[slotProps.column.props.field]" @update:modelValue="onCellEdit($event, slotProps)" /&gt;
@@ -147,7 +147,7 @@
 &lt;div class="card"&gt;
 &lt;h5&gt;Row Editing&lt;/h5&gt;
 &lt;DataTable :value="products3" editMode="row" dataKey="id" v-model:editingRows="editingRows"
-    @row-edit-init="onRowEditInit" @row-edit-cancel="onRowEditCancel"&gt;
+    @row-edit-init="onRowEditInit" @row-edit-cancel="onRowEditCancel" responsiveLayout="scroll"&gt;
     &lt;Column field="code" header="Code"&gt;
         &lt;template #editor="slotProps"&gt;
             &lt;InputText v-model="slotProps.data[slotProps.column.props.field]" autofocus /&gt;
@@ -321,7 +321,7 @@ export default {
             <div class="card">
                 <h5>Basic Cell Editing</h5>
                 <p>Simple editors with v-model.</p>
-                <DataTable :value="products1" editMode="cell" class="editable-cells-table">
+                <DataTable :value="products1" editMode="cell" class="editable-cells-table" responsiveLayout="scroll">
                     <Column field="code" header="Code">
                         <template #editor="slotProps">
                             <InputText v-model="slotProps.data[slotProps.column.props.field]" />
@@ -355,7 +355,7 @@ export default {
             <div class="card">
                 <h5>Advanced Cell Editing</h5>
                 <p>Custom implementation with validations, dynamic columns and reverting values with the escape key.</p>
-                <DataTable :value="products2" editMode="cell" @cellEditComplete="onCellEditComplete" class="editable-cells-table" >
+                <DataTable :value="products2" editMode="cell" @cellEditComplete="onCellEditComplete" class="editable-cells-table" responsiveLayout="scroll">
                     <Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field">
                         <template #editor="slotProps">
                             <InputText :modelValue="slotProps.data[slotProps.column.props.field]" @update:modelValue="onCellEdit($event, slotProps)" />
@@ -367,7 +367,7 @@ export default {
             <div class="card">
                 <h5>Row Editing</h5>
                 <DataTable :value="products3" editMode="row" dataKey="id" v-model:editingRows="editingRows"
-                    @rowEditInit="onRowEditInit" @rowEditCancel="onRowEditCancel">
+                    @rowEditInit="onRowEditInit" @rowEditCancel="onRowEditCancel" responsiveLayout="scroll">
                     <Column field="code" header="Code">
                         <template #editor="slotProps">
                             <InputText v-model="slotProps.data[slotProps.column.props.field]" autofocus />
diff --git a/src/views/datatable/DataTableFilterDemo.vue b/src/views/datatable/DataTableFilterDemo.vue
index 096687a2e..2a0817af0 100755
--- a/src/views/datatable/DataTableFilterDemo.vue
+++ b/src/views/datatable/DataTableFilterDemo.vue
@@ -12,7 +12,7 @@
                 <h5>Filter Menu</h5>
                 <p>Filters are displayed in an overlay.</p>
                 <DataTable :value="customers1" :paginator="true" class="p-datatable-customers p-datatable-gridlines" :rows="10"
-                    dataKey="id" v-model:filters="filters1" filterDisplay="menu" :loading="loading1"
+                    dataKey="id" v-model:filters="filters1" filterDisplay="menu" :loading="loading1" responsiveLayout="scroll"
                     :globalFilterFields="['name','country.name','representative.name','balance','status']">
                     <template #header>
                         <div class="p-d-flex p-jc-between">
@@ -29,7 +29,7 @@
                     <template #loading>
                         Loading customers data. Please wait.
                     </template>
-                    <Column field="name" header="Name">
+                    <Column field="name" header="Name" style="min-width:12rem">
                         <template #body="{data}">
                             {{data.name}}
                         </template>
@@ -37,7 +37,7 @@
                             <InputText type="text" v-model="filterModel.value" class="p-column-filter" placeholder="Search by name"/>
                         </template>
                     </Column>
-                    <Column header="Country" filterField="country.name">
+                    <Column header="Country" filterField="country.name" style="min-width:12rem">
                         <template #body="{data}">
                             <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" />
                             <span class="image-text">{{data.country.name}}</span>
@@ -55,7 +55,7 @@
                             <div class="p-px-3 p-pt-0 p-pb-3 p-text-center p-text-bold">Customized Buttons</div>
                         </template>
                     </Column>
-                    <Column header="Agent" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{'width':'14rem'}">
+                    <Column header="Agent" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{'width':'14rem'}" style="min-width:14rem">
                         <template #body="{data}">
                             <img :alt="data.representative.name" :src="'demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
                             <span class="image-text">{{data.representative.name}}</span>
@@ -72,7 +72,7 @@
                             </MultiSelect>
                         </template>
                     </Column>
-                    <Column header="Date" filterField="date" dataType="date">
+                    <Column header="Date" filterField="date" dataType="date" style="min-width:10rem">
                         <template #body="{data}">
                             {{formatDate(data.date)}}
                         </template>
@@ -80,7 +80,7 @@
                             <Calendar v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" />
                         </template>
                     </Column>
-                    <Column header="Balance" filterField="balance" dataType="numeric">
+                    <Column header="Balance" filterField="balance" dataType="numeric" style="min-width:10rem">
                         <template #body="{data}">
                             {{formatCurrency(data.balance)}}
                         </template>
@@ -88,7 +88,7 @@
                             <InputNumber v-model="filterModel.value" mode="currency" currency="USD" locale="en-US" />
                         </template>
                     </Column>
-                    <Column field="status" header="Status" :filterMenuStyle="{'width':'14rem'}">
+                    <Column field="status" header="Status" :filterMenuStyle="{'width':'14rem'}" style="min-width:12rem">
                         <template #body="{data}">
                             <span :class="'customer-badge status-' + data.status">{{data.status}}</span>
                         </template>
@@ -104,7 +104,7 @@
                             </Dropdown>
                         </template>
                     </Column>
-                    <Column field="activity" header="Activity" :showFilterMatchModes="false">
+                    <Column field="activity" header="Activity" :showFilterMatchModes="false" style="min-width:12rem">
                         <template #body="{data}">
                             <ProgressBar :value="data.activity" :showValue="false"></ProgressBar>
                         </template>
@@ -116,7 +116,7 @@
                             </div>
                         </template>
                     </Column>
-                    <Column field="verified" header="Verified" dataType="boolean" headerStyle="width: 8rem" bodyClass="p-text-center">
+                    <Column field="verified" header="Verified" dataType="boolean" bodyClass="p-text-center" style="min-width:8rem">
                         <template #body="{data}">
                             <i class="pi" :class="{'true-icon pi-check-circle': data.verified, 'false-icon pi-times-circle': !data.verified}"></i>
                         </template>
@@ -131,7 +131,7 @@
                 <h5>Filter Row</h5>
                 <p>Filters are displayed inline within a separate row.</p>
                 <DataTable :value="customers2" :paginator="true" class="p-datatable-customers" :rows="10"
-                    dataKey="id" v-model:filters="filters2" filterDisplay="row" :loading="loading2"
+                    dataKey="id" v-model:filters="filters2" filterDisplay="row" :loading="loading2" responsiveLayout="scroll"
                     :globalFilterFields="['name','country.name','representative.name','status']">
                     <template #header>
                         <div class="p-d-flex p-jc-end">
@@ -147,7 +147,7 @@
                     <template #loading>
                         Loading customers data. Please wait.
                     </template>
-                    <Column field="name" header="Name">
+                    <Column field="name" header="Name" style="min-width:12rem">
                         <template #body="{data}">
                             {{data.name}}
                         </template>
@@ -155,7 +155,7 @@
                             <InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" :placeholder="`Search by name - ${filterModel.matchMode}`" v-tooltip.top.focus="'Hit enter key to filter'"/>
                         </template>
                     </Column>
-                    <Column header="Country" filterField="country.name">
+                    <Column header="Country" filterField="country.name" style="min-width:12rem">
                         <template #body="{data}">
                             <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" />
                             <span class="image-text">{{data.country.name}}</span>
@@ -164,7 +164,7 @@
                             <InputText type="text" v-model="filterModel.value" @input="filterCallback()" class="p-column-filter" placeholder="Search by country" v-tooltip.top.focus="'Filter as you type'"/>
                         </template>
                     </Column>
-                    <Column header="Agent" filterField="representative" :showFilterMenu="false">
+                    <Column header="Agent" filterField="representative" :showFilterMenu="false" style="min-width:14rem">
                         <template #body="{data}">
                             <img :alt="data.representative.name" :src="'demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
                             <span class="image-text">{{data.representative.name}}</span>
@@ -180,7 +180,7 @@
                             </MultiSelect>
                         </template>
                     </Column>
-                    <Column field="status" header="Status" :showFilterMenu="false">
+                    <Column field="status" header="Status" :showFilterMenu="false" style="min-width:12rem">
                         <template #body="{data}">
                             <span :class="'customer-badge status-' + data.status">{{data.status}}</span>
                         </template>
@@ -196,7 +196,7 @@
                             </Dropdown>
                         </template>
                     </Column>
-                    <Column field="verified" header="Verified" dataType="boolean" headerStyle="width: 6rem">
+                    <Column field="verified" header="Verified" dataType="boolean" style="min-width:6rem">
                         <template #body="{data}">
                             <i class="pi" :class="{'true-icon pi-check-circle': data.verified, 'false-icon pi-times-circle': !data.verified}"></i>
                         </template>
@@ -216,7 +216,7 @@
     &lt;h5&gt;Filter Menu&lt;/h5&gt;
     &lt;p&gt;Filters are displayed in an overlay.&lt;/p&gt;
     &lt;DataTable :value="customers1" :paginator="true" class="p-datatable-customers p-datatable-gridlines" :rows="10"
-        dataKey="id" v-model:filters="filters1" filterDisplay="menu" :loading="loading1"
+        dataKey="id" v-model:filters="filters1" filterDisplay="menu" :loading="loading1" responsiveLayout="scroll"
         :globalFilterFields="['name','country.name','representative.name','balance','status']"&gt;
         &lt;template #header&gt;
             &lt;div class="p-d-flex p-jc-between"&gt;
@@ -233,7 +233,7 @@
         &lt;template #loading&gt;
             Loading customers data. Please wait.
         &lt;/template&gt;
-        &lt;Column field="name" header="Name"&gt;
+        &lt;Column field="name" header="Name" style="min-width:12rem"&gt;
             &lt;template #body="{data}"&gt;
                 {{data.name}}
             &lt;/template&gt;
@@ -241,7 +241,7 @@
                 &lt;InputText type="text" v-model="filterModel.value" class="p-column-filter" placeholder="Search by name"/&gt;
             &lt;/template&gt;
         &lt;/Column&gt;
-        &lt;Column header="Country" filterField="country.name"&gt;
+        &lt;Column header="Country" filterField="country.name" style="min-width:12rem"&gt;
             &lt;template #body="{data}"&gt;
                 &lt;img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" /&gt;
                 &lt;span class="image-text"&gt;{{data.country.name}}&lt;/span&gt;
@@ -259,7 +259,7 @@
                 &lt;div class="p-px-3 p-pt-0 p-pb-3 p-text-center p-text-bold"&gt;Customized Buttons&lt;/div&gt;
             &lt;/template&gt;
         &lt;/Column&gt;
-        &lt;Column header="Agent" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{'width':'14rem'}"&gt;
+        &lt;Column header="Agent" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{'width':'14rem'}" style="min-width:14rem"&gt;
             &lt;template #body="{data}"&gt;
                 &lt;img :alt="data.representative.name" :src="'demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" /&gt;
                 &lt;span class="image-text"&gt;{{data.representative.name}}&lt;/span&gt;
@@ -276,7 +276,7 @@
                 &lt;/MultiSelect&gt;
             &lt;/template&gt;
         &lt;/Column&gt;
-        &lt;Column header="Date" filterField="date" dataType="date"&gt;
+        &lt;Column header="Date" filterField="date" dataType="date" style="min-width:10rem"&gt;
             &lt;template #body="{data}"&gt;
                 {{formatDate(data.date)}}
             &lt;/template&gt;
@@ -284,7 +284,7 @@
                 &lt;Calendar v-model="filterModel.value" dateFormat="mm/dd/yy" placeholder="mm/dd/yyyy" /&gt;
             &lt;/template&gt;
         &lt;/Column&gt;
-        &lt;Column header="Balance" filterField="balance" dataType="numeric"&gt;
+        &lt;Column header="Balance" filterField="balance" dataType="numeric" style="min-width:10rem"&gt;
             &lt;template #body="{data}"&gt;
                 {{formatCurrency(data.balance)}}
             &lt;/template&gt;
@@ -292,7 +292,7 @@
                 &lt;InputNumber v-model="filterModel.value" mode="currency" currency="USD" locale="en-US" /&gt;
             &lt;/template&gt;
         &lt;/Column&gt;
-        &lt;Column field="status" header="Status" :filterMenuStyle="{'width':'14rem'}"&gt;
+        &lt;Column field="status" header="Status" :filterMenuStyle="{'width':'14rem'}" style="min-width:12rem"&gt;
             &lt;template #body="{data}"&gt;
                 &lt;span :class="'customer-badge status-' + data.status"&gt;{{data.status}}&lt;/span&gt;
             &lt;/template&gt;
@@ -320,7 +320,7 @@
                 &lt;/div&gt;
             &lt;/template&gt;
         &lt;/Column&gt;
-        &lt;Column field="verified" header="Verified" dataType="boolean" headerStyle="width: 8rem" bodyClass="p-text-center"&gt;
+        &lt;Column field="verified" header="Verified" dataType="boolean" bodyClass="p-text-center" style="min-width:8rem"&gt;
             &lt;template #body="{data}"&gt;
                 &lt;i class="pi" :class="{'true-icon pi-check-circle': data.verified, 'false-icon pi-times-circle': !data.verified}"&gt;&lt;/i&gt;
             &lt;/template&gt;
@@ -335,7 +335,7 @@
     &lt;h5&gt;Filter Row&lt;/h5&gt;
     &lt;p&gt;Filters are displayed inline within a separate row.&lt;/p&gt;
     &lt;DataTable :value="customers2" :paginator="true" class="p-datatable-customers" :rows="10"
-        dataKey="id" v-model:filters="filters2" filterDisplay="row" :loading="loading2"
+        dataKey="id" v-model:filters="filters2" filterDisplay="row" :loading="loading2" responsiveLayout="scroll"
         :globalFilterFields="['name','country.name','representative.name','status']"&gt;
         &lt;template #header&gt;
             &lt;div class="p-d-flex p-jc-end"&gt;
@@ -351,7 +351,7 @@
         &lt;template #loading&gt;
             Loading customers data. Please wait.
         &lt;/template&gt;
-        &lt;Column field="name" header="Name"&gt;
+        &lt;Column field="name" header="Name" style="min-width:12rem"&gt;
             &lt;template #body="{data}"&gt;
                 {{data.name}}
             &lt;/template&gt;
@@ -359,7 +359,7 @@
                 &lt;InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" :placeholder="`Search by name - ${filterModel.matchMode}`" v-tooltip.top.focus="'Hit enter key to filter'"/&gt;
             &lt;/template&gt;
         &lt;/Column&gt;
-        &lt;Column header="Country" filterField="country.name"&gt;
+        &lt;Column header="Country" filterField="country.name" style="min-width:12rem"&gt;
             &lt;template #body="{data}"&gt;
                 &lt;img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" /&gt;
                 &lt;span class="image-text"&gt;{{data.country.name}}&lt;/span&gt;
@@ -368,7 +368,7 @@
                 &lt;InputText type="text" v-model="filterModel.value" @input="filterCallback()" class="p-column-filter" placeholder="Search by country" v-tooltip.top.focus="'Filter as you type'"/&gt;
             &lt;/template&gt;
         &lt;/Column&gt;
-        &lt;Column header="Agent" filterField="representative" :showFilterMenu="false"&gt;
+        &lt;Column header="Agent" filterField="representative" :showFilterMenu="false" style="min-width:14rem"&gt;
             &lt;template #body="{data}"&gt;
                 &lt;img :alt="data.representative.name" :src="'demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" /&gt;
                 &lt;span class="image-text"&gt;{{data.representative.name}}&lt;/span&gt;
@@ -384,7 +384,7 @@
                 &lt;/MultiSelect&gt;
             &lt;/template&gt;
         &lt;/Column&gt;
-        &lt;Column field="status" header="Status" :showFilterMenu="false"&gt;
+        &lt;Column field="status" header="Status" :showFilterMenu="false" style="min-width:12rem"&gt;
             &lt;template #body="{data}"&gt;
                 &lt;span :class="'customer-badge status-' + data.status"&gt;{{data.status}}&lt;/span&gt;
             &lt;/template&gt;
@@ -400,7 +400,7 @@
                 &lt;/Dropdown&gt;
             &lt;/template&gt;
         &lt;/Column&gt;
-        &lt;Column field="verified" header="Verified" dataType="boolean" headerStyle="width: 6rem"&gt;
+        &lt;Column field="verified" header="Verified" dataType="boolean" style="min-width:6rem"&gt;
             &lt;template #body="{data}"&gt;
                 &lt;i class="pi" :class="{'true-icon pi-check-circle': data.verified, 'false-icon pi-times-circle': !data.verified}"&gt;&lt;/i&gt;
             &lt;/template&gt;
diff --git a/src/views/datatable/DataTableRowExpandDemo.vue b/src/views/datatable/DataTableRowExpandDemo.vue
index c75f52048..4644426a2 100755
--- a/src/views/datatable/DataTableRowExpandDemo.vue
+++ b/src/views/datatable/DataTableRowExpandDemo.vue
@@ -10,7 +10,7 @@
 		<div class="content-section implementation">
             <div class="card">
                 <DataTable :value="products" v-model:expandedRows="expandedRows" dataKey="id"
-                    @row-expand="onRowExpand" @row-collapse="onRowCollapse">
+                    @row-expand="onRowExpand" @row-collapse="onRowCollapse" responsiveLayout="scroll">
                     <template #header>
                         <div class="table-header-container">
                             <Button icon="pi pi-plus" label="Expand All" @click="expandAll" class="p-mr-2" />
@@ -43,7 +43,7 @@
                     <template #expansion="slotProps">
                         <div class="orders-subtable">
                             <h5>Orders for {{slotProps.data.name}}</h5>
-                            <DataTable :value="slotProps.data.orders">
+                            <DataTable :value="slotProps.data.orders" responsiveLayout="scroll">
                                 <Column field="id" header="Id" sortable></Column>
                                 <Column field="customer" header="Customer" sortable></Column>
                                 <Column field="date" header="Date" sortable></Column>
@@ -77,7 +77,7 @@
                     </div>
 <pre v-code><code><template v-pre>
 &lt;DataTable :value="products" v-model:expandedRows="expandedRows" dataKey="id"
-    @row-expand="onRowExpand" @row-collapse="onRowCollapse"&gt;
+    @row-expand="onRowExpand" @row-collapse="onRowCollapse" responsiveLayout="scroll"&gt;
     &lt;template #header&gt;
         &lt;div class="table-header-container"&gt;
             &lt;Button icon="pi pi-plus" label="Expand All" @click="expandAll" class="p-mr-2" /&gt;
@@ -110,7 +110,7 @@
     &lt;template #expansion="slotProps"&gt;
         &lt;div class="orders-subtable"&gt;
             &lt;h5&gt;Orders for {{slotProps.data.name}}&lt;/h5&gt;
-            &lt;DataTable :value="slotProps.data.orders"&gt;
+            &lt;DataTable :value="slotProps.data.orders" responsiveLayout="scroll"&gt;
                 &lt;Column field="id" header="Id" sortable&gt;&lt;/Column&gt;
                 &lt;Column field="customer" header="Customer" sortable&gt;&lt;/Column&gt;
                 &lt;Column field="date" header="Date" sortable&gt;&lt;/Column&gt;
diff --git a/src/views/datatable/DataTableRowGroupDemo.vue b/src/views/datatable/DataTableRowGroupDemo.vue
index aad2e22ea..046183d8c 100755
--- a/src/views/datatable/DataTableRowGroupDemo.vue
+++ b/src/views/datatable/DataTableRowGroupDemo.vue
@@ -43,7 +43,7 @@
                 <h5>Expandable Row Groups</h5>
                 <p>Group customers by their representative.</p>
                 <DataTable :value="customers" rowGroupMode="subheader" groupRowsBy="representative.name"
-                    sortMode="single" sortField="representative.name" :sortOrder="1"
+                    sortMode="single" sortField="representative.name" :sortOrder="1" responsiveLayout="scroll"
                     :expandableRowGroups="true" v-model:expandedRowGroups="expandedRowGroups"
                     @rowgroup-expand="onRowGroupExpand" @rowgroup-collapse="onRowGroupCollapse">
                     <Column field="representative.name" header="Representative"></Column>
@@ -75,7 +75,7 @@
             <div class="card">
                 <h5>RowSpan Grouping</h5>
                 <DataTable :value="customers" rowGroupMode="rowspan"  groupRowsBy="representative.name"
-                    sortMode="single" sortField="representative.name" :sortOrder="1">
+                    sortMode="single" sortField="representative.name" :sortOrder="1" responsiveLayout="scroll">
                     <Column header="#" headerStyle="width:3em">
                         <template #body="slotProps">
                             {{slotProps.index}}
@@ -115,7 +115,7 @@
 &lt;div class="card"&gt;
     &lt;h5&gt;Subheader Grouping&lt;/h5&gt;
     &lt;p&gt;Group customers by their representative.&lt;/p&gt;
-    &lt;DataTable :value="customers" rowGroupMode="subheader" groupRowsBy="representative.name"
+    &lt;DataTable :value="customers" rowGroupMode="subheader" groupRowsBy="representative.name"  responsiveLayout="scroll"
         sortMode="single" sortField="representative.name" :sortOrder="1" scrollable scrollHeight="400px"&gt;
         &lt;Column field="representative.name" header="Representative"&gt;&lt;/Column&gt;
         &lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
@@ -147,7 +147,7 @@
     &lt;h5&gt;Expandable Row Groups&lt;/h5&gt;
     &lt;p&gt;Group customers by their representative.&lt;/p&gt;
     &lt;DataTable :value="customers" rowGroupMode="subheader" groupRowsBy="representative.name"
-        sortMode="single" sortField="representative.name" :sortOrder="1"
+        sortMode="single" sortField="representative.name" :sortOrder="1" responsiveLayout="scroll"
         :expandableRowGroups="true" v-model:expandedRowGroups="expandedRowGroups"
         @rowgroup-expand="onRowGroupExpand" @rowgroup-collapse="onRowGroupCollapse"&gt;
         &lt;Column field="representative.name" header="Representative"&gt;&lt;/Column&gt;
@@ -179,7 +179,7 @@
 &lt;div class="card"&gt;
     &lt;h5&gt;RowSpan Grouping&lt;/h5&gt;
     &lt;DataTable :value="customers" rowGroupMode="rowspan"  groupRowsBy="representative.name"
-        sortMode="single" sortField="representative.name" :sortOrder="1"&gt;
+        sortMode="single" sortField="representative.name" :sortOrder="1" responsiveLayout="scroll"&gt;
         &lt;Column header="#" headerStyle="width:3em"&gt;
             &lt;template #body="slotProps"&gt;
                 {{slotProps.index}}
diff --git a/src/views/datatable/DataTableStateDemo.vue b/src/views/datatable/DataTableStateDemo.vue
index f2fb7d4fd..d78d258dd 100755
--- a/src/views/datatable/DataTableStateDemo.vue
+++ b/src/views/datatable/DataTableStateDemo.vue
@@ -12,19 +12,19 @@
                 <h5>Session Storage</h5>
                 <DataTable :value="customers" :paginator="true" :rows="10" v-model:filters="filters1"
                     v-model:selection="selectedCustomer1" selectionMode="single" dataKey="id"
-                    stateStorage="session" stateKey="dt-state-demo-session">
+                    stateStorage="session" stateKey="dt-state-demo-session" responsiveLayout="scroll">
                     <template #header>
                        <span class="p-input-icon-left">
                             <i class="pi pi-search" />
                             <InputText v-model="filters1['global']" placeholder="Global Search" />
                         </span>
                     </template>
-                    <Column field="name" header="Name" :sortable="true">
+                    <Column field="name" header="Name" :sortable="true" style="width:25%">
                         <template #filter>
                             <InputText type="text" v-model="filters1['name']" class="p-column-filter" placeholder="Search by name"/>
                         </template>
                     </Column>
-                    <Column header="Country" :sortable="true" sortField="country.name" filterField="country.name" filterMatchMode="contains">
+                    <Column header="Country" :sortable="true" sortField="country.name" filterField="country.name" filterMatchMode="contains" style="width:25%">
                         <template #body="slotProps">
                             <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" />
                             <span class="image-text">{{slotProps.data.country.name}}</span>
@@ -33,7 +33,7 @@
                             <InputText type="text" v-model="filters1['country.name']" class="p-column-filter" placeholder="Search by country"/>
                         </template>
                     </Column>
-                    <Column header="Representative" :sortable="true" sortField="representative.name" filterField="representative.name" filterMatchMode="in">
+                    <Column header="Representative" :sortable="true" sortField="representative.name" filterField="representative.name" filterMatchMode="in" style="width:25%">
                         <template #body="slotProps">
                             <img :alt="slotProps.data.representative.name" :src="'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
                             <span class="image-text">{{slotProps.data.representative.name}}</span>
@@ -49,7 +49,7 @@
                             </MultiSelect>
                         </template>
                     </Column>
-                    <Column field="status" header="Status" :sortable="true" filterMatchMode="equals">
+                    <Column field="status" header="Status" :sortable="true" filterMatchMode="equals" style="width:25%">
                         <template #body="slotProps">
                             <span :class="'customer-badge status-' + slotProps.data.status">{{slotProps.data.status}}</span>
                         </template>
@@ -71,19 +71,19 @@
                 <h5>Local Storage</h5>
                 <DataTable :value="customers" :paginator="true" :rows="10" v-model:filters="filters2"
                     v-model:selection="selectedCustomer2" selectionMode="single" dataKey="id"
-                    stateStorage="session" stateKey="dt-state-demo-local">
+                    stateStorage="session" stateKey="dt-state-demo-local" responsiveLayout="scroll">
                     <template #header>
                        <span class="p-input-icon-left">
                             <i class="pi pi-search" />
                             <InputText v-model="filters2['global']" placeholder="Global Search" />
                         </span>
                     </template>
-                    <Column field="name" header="Name" :sortable="true">
+                    <Column field="name" header="Name" :sortable="true" style="width:25%">
                         <template #filter>
                             <InputText type="text" v-model="filters2['name']" class="p-column-filter" placeholder="Search by name"/>
                         </template>
                     </Column>
-                    <Column header="Country" :sortable="true" sortField="country.name" filterField="country.name" filterMatchMode="contains">
+                    <Column header="Country" :sortable="true" sortField="country.name" filterField="country.name" filterMatchMode="contains" style="width:25%">
                         <template #body="slotProps">
                             <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" />
                             <span class="image-text">{{slotProps.data.country.name}}</span>
@@ -92,7 +92,7 @@
                             <InputText type="text" v-model="filters2['country.name']" class="p-column-filter" placeholder="Search by country"/>
                         </template>
                     </Column>
-                    <Column header="Representative" :sortable="true" sortField="representative.name" filterField="representative.name" filterMatchMode="in">
+                    <Column header="Representative" :sortable="true" sortField="representative.name" filterField="representative.name" filterMatchMode="in" style="width:25%">
                         <template #body="slotProps">
                             <img :alt="slotProps.data.representative.name" :src="'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" />
                             <span class="image-text">{{slotProps.data.representative.name}}</span>
@@ -108,7 +108,7 @@
                             </MultiSelect>
                         </template>
                     </Column>
-                    <Column field="status" header="Status" :sortable="true" filterMatchMode="equals">
+                    <Column field="status" header="Status" :sortable="true" filterMatchMode="equals" style="width:25%">
                         <template #body="slotProps">
                             <span :class="'customer-badge status-' + slotProps.data.status">{{slotProps.data.status}}</span>
                         </template>
@@ -138,19 +138,19 @@
     &lt;h5&gt;Session Storage&lt;/h5&gt;
     &lt;DataTable :value="customers" :paginator="true" :rows="10" v-model:filters="filters1"
         v-model:selection="selectedCustomer1" selectionMode="single" dataKey="id"
-        stateStorage="session" stateKey="dt-state-demo-session"&gt;
+        stateStorage="session" stateKey="dt-state-demo-session" responsiveLayout="scroll"&gt;
         &lt;template #header&gt;
             &lt;span class="p-input-icon-left"&gt;
                 &lt;i class="pi pi-search" /&gt;
                 &lt;InputText v-model="filters1['global']" placeholder="Global Search" /&gt;
             &lt;/span&gt;
         &lt;/template&gt;
-        &lt;Column field="name" header="Name" :sortable="true"&gt;
+        &lt;Column field="name" header="Name" :sortable="true" style="width:25%"&gt;
             &lt;template #filter&gt;
                 &lt;InputText type="text" v-model="filters1['name']" class="p-column-filter" placeholder="Search by name"/&gt;
             &lt;/template&gt;
         &lt;/Column&gt;
-        &lt;Column header="Country" :sortable="true" sortField="country.name" filterField="country.name" filterMatchMode="contains"&gt;
+        &lt;Column header="Country" :sortable="true" sortField="country.name" filterField="country.name" filterMatchMode="contains" style="width:25%"&gt;
             &lt;template #body="slotProps"&gt;
                 &lt;img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" /&gt;
                 &lt;span class="image-text"&gt;{{slotProps.data.country.name}}&lt;/span&gt;
@@ -159,7 +159,7 @@
                 &lt;InputText type="text" v-model="filters1['country.name']" class="p-column-filter" placeholder="Search by country"/&gt;
             &lt;/template&gt;
         &lt;/Column&gt;
-        &lt;Column header="Representative" :sortable="true" sortField="representative.name" filterField="representative.name" filterMatchMode="in"&gt;
+        &lt;Column header="Representative" :sortable="true" sortField="representative.name" filterField="representative.name" filterMatchMode="in" style="width:25%"&gt;
             &lt;template #body="slotProps"&gt;
                 &lt;img :alt="slotProps.data.representative.name" :src="'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" /&gt;
                 &lt;span class="image-text"&gt;{{slotProps.data.representative.name}}&lt;/span&gt;
@@ -175,7 +175,7 @@
                 &lt;/MultiSelect&gt;
             &lt;/template&gt;
         &lt;/Column&gt;
-        &lt;Column field="status" header="Status" :sortable="true" filterMatchMode="equals"&gt;
+        &lt;Column field="status" header="Status" :sortable="true" filterMatchMode="equals" style="width:25%"&gt;
             &lt;template #body="slotProps"&gt;
                 &lt;span :class="'customer-badge status-' + slotProps.data.status"&gt;{{slotProps.data.status}}&lt;/span&gt;
             &lt;/template&gt;
@@ -197,19 +197,19 @@
     &lt;h5&gt;Local Storage&lt;/h5&gt;
     &lt;DataTable :value="customers" :paginator="true" :rows="10" v-model:filters="filters2"
         v-model:selection="selectedCustomer2" selectionMode="single" dataKey="id"
-        stateStorage="session" stateKey="dt-state-demo-local"&gt;
+        stateStorage="session" stateKey="dt-state-demo-local" responsiveLayout="scroll"&gt;
         &lt;template #header&gt;
             &lt;span class="p-input-icon-left"&gt;
                 &lt;i class="pi pi-search" /&gt;
                 &lt;InputText v-model="filters2['global']" placeholder="Global Search" /&gt;
             &lt;/span&gt;
         &lt;/template&gt;
-        &lt;Column field="name" header="Name" :sortable="true"&gt;
+        &lt;Column field="name" header="Name" :sortable="true" style="width:25%"&gt;
             &lt;template #filter&gt;
                 &lt;InputText type="text" v-model="filters2['name']" class="p-column-filter" placeholder="Search by name"/&gt;
             &lt;/template&gt;
         &lt;/Column&gt;
-        &lt;Column header="Country" :sortable="true" sortField="country.name" filterField="country.name" filterMatchMode="contains"&gt;
+        &lt;Column header="Country" :sortable="true" sortField="country.name" filterField="country.name" filterMatchMode="contains" style="width:25%"&gt;
             &lt;template #body="slotProps"&gt;
                 &lt;img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" /&gt;
                 &lt;span class="image-text"&gt;{{slotProps.data.country.name}}&lt;/span&gt;
@@ -218,7 +218,7 @@
                 &lt;InputText type="text" v-model="filters2['country.name']" class="p-column-filter" placeholder="Search by country"/&gt;
             &lt;/template&gt;
         &lt;/Column&gt;
-        &lt;Column header="Representative" :sortable="true" sortField="representative.name" filterField="representative.name" filterMatchMode="in"&gt;
+        &lt;Column header="Representative" :sortable="true" sortField="representative.name" filterField="representative.name" filterMatchMode="in" style="width:25%"&gt;
             &lt;template #body="slotProps"&gt;
                 &lt;img :alt="slotProps.data.representative.name" :src="'demo/images/avatar/' + slotProps.data.representative.image" width="32" style="vertical-align: middle" /&gt;
                 &lt;span class="image-text"&gt;{{slotProps.data.representative.name}}&lt;/span&gt;
@@ -234,7 +234,7 @@
                 &lt;/MultiSelect&gt;
             &lt;/template&gt;
         &lt;/Column&gt;
-        &lt;Column field="status" header="Status" :sortable="true" filterMatchMode="equals"&gt;
+        &lt;Column field="status" header="Status" :sortable="true" filterMatchMode="equals" style="width:25%"&gt;
             &lt;template #body="slotProps"&gt;
                 &lt;span :class="'customer-badge status-' + slotProps.data.status"&gt;{{slotProps.data.status}}&lt;/span&gt;
             &lt;/template&gt;
diff --git a/src/views/datatable/DataTableTemplatingDemo.vue b/src/views/datatable/DataTableTemplatingDemo.vue
index ff933997c..43d93d9a7 100755
--- a/src/views/datatable/DataTableTemplatingDemo.vue
+++ b/src/views/datatable/DataTableTemplatingDemo.vue
@@ -27,7 +27,6 @@
                             {{formatCurrency(slotProps.data.price)}}
                         </template>
                     </Column>
-                    <Column field="category" header="Category"></Column>
                     <Column field="rating" header="Reviews">
                         <template #body="slotProps">
                            <Rating :modelValue="slotProps.data.rating" :readonly="true" :cancel="false" />
@@ -70,7 +69,6 @@
             {{formatCurrency(slotProps.data.price)}}
         &lt;/template&gt;
     &lt;/Column&gt;
-    &lt;Column field="category" header="Category"&gt;&lt;/Column&gt;
     &lt;Column field="rating" header="Reviews"&gt;
         &lt;template #body="slotProps"&gt;
             &lt;Rating :modelValue="slotProps.data.rating" :readonly="true" :cancel="false" /&gt;
@@ -165,7 +163,6 @@ export default {
                             {{formatCurrency(slotProps.data.price)}}
                         </template>
                     </Column>
-                    <Column field="category" header="Category"></Column>
                     <Column field="rating" header="Reviews">
                         <template #body="slotProps">
                            <Rating :modelValue="slotProps.data.rating" :readonly="true" :cancel="false" />
diff --git a/src/views/deferredcontent/DeferredContentDemo.vue b/src/views/deferredcontent/DeferredContentDemo.vue
index 8cc149ce9..98e88681e 100755
--- a/src/views/deferredcontent/DeferredContentDemo.vue
+++ b/src/views/deferredcontent/DeferredContentDemo.vue
@@ -21,7 +21,7 @@
                 </div>
 
                 <DeferredContent @load="onDataLoad">
-                    <DataTable :value="products">
+                    <DataTable :value="products" responsiveLayout="scroll">
                         <Column field="code" header="Code"></Column>
                         <Column field="name" header="Name"></Column>
                         <Column field="category" header="Category"></Column>
diff --git a/src/views/deferredcontent/DeferredContentDoc.vue b/src/views/deferredcontent/DeferredContentDoc.vue
index 897985337..f225e3849 100755
--- a/src/views/deferredcontent/DeferredContentDoc.vue
+++ b/src/views/deferredcontent/DeferredContentDoc.vue
@@ -86,7 +86,7 @@ import DeferredContent from 'primevue/deferredcontent';
 &lt;/div&gt;
 
 &lt;DeferredContent @load="onDataLoad"&gt;
-    &lt;DataTable :value="products"&gt;
+    &lt;DataTable :value="products" responsiveLayout="scroll"&gt;
         &lt;Column field="code" header="Code"&gt;&lt;/Column&gt;
         &lt;Column field="name" header="Name"&gt;&lt;/Column&gt;
         &lt;Column field="category" header="Category"&gt;&lt;/Column&gt;
diff --git a/src/views/filterservice/FilterServiceDemo.vue b/src/views/filterservice/FilterServiceDemo.vue
index 8092ad661..5325f222c 100644
--- a/src/views/filterservice/FilterServiceDemo.vue
+++ b/src/views/filterservice/FilterServiceDemo.vue
@@ -12,7 +12,7 @@
                 <h5>Table Integration</h5>
                 <p>A custom equals filter that checks for exact case sensitive value is registered and defined as a match mode of a column filter.</p>
 
-                <DataTable :value="customers" :paginator="true" :rows="10"
+                <DataTable :value="customers" :paginator="true" :rows="10" responsiveLayout="scroll"
                     dataKey="id" v-model:filters="filters" filterDisplay="row" :loading="loading">
                     <template #empty>
                         No customers found.
diff --git a/src/views/filterservice/FilterServiceDoc.vue b/src/views/filterservice/FilterServiceDoc.vue
index 86f5330f7..3acb114dd 100644
--- a/src/views/filterservice/FilterServiceDoc.vue
+++ b/src/views/filterservice/FilterServiceDoc.vue
@@ -206,7 +206,7 @@ FilterService.filters['isPrimeNumber'](568985673);              //false
 					</a>
 				</div>
 <pre v-code><code><template v-pre>
-&lt;DataTable :value="customers" :paginator="true" :rows="10"
+&lt;DataTable :value="customers" :paginator="true" :rows="10" responsiveLayout="scroll"
 	dataKey="id" v-model:filters="filters" filterDisplay="row" :loading="loading"&gt;
 	&lt;template #empty&gt;
 		No customers found.
diff --git a/src/views/overlaypanel/OverlayPanelDemo.vue b/src/views/overlaypanel/OverlayPanelDemo.vue
index f5f40faeb..0bb5c13ee 100755
--- a/src/views/overlaypanel/OverlayPanelDemo.vue
+++ b/src/views/overlaypanel/OverlayPanelDemo.vue
@@ -12,7 +12,7 @@
                 <Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria:haspopup="true" aria-controls="overlay_panel" />
 
                 <OverlayPanel ref="op" appendTo="body" :showCloseIcon="true" id="overlay_panel" style="width: 450px">
-                    <DataTable :value="products" v-model:selection="selectedProduct" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect">
+                    <DataTable :value="products" v-model:selection="selectedProduct" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect" responsiveLayout="scroll">
                         <Column field="name" header="Name" sortable></Column>
                         <Column header="Image">
                             <template #body="slotProps">
diff --git a/src/views/overlaypanel/OverlayPanelDoc.vue b/src/views/overlaypanel/OverlayPanelDoc.vue
index d8ac2b383..60aaff190 100755
--- a/src/views/overlaypanel/OverlayPanelDoc.vue
+++ b/src/views/overlaypanel/OverlayPanelDoc.vue
@@ -161,7 +161,7 @@ toggle(event) {
 &lt;Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria:haspopup="true" aria-controls="overlay_panel" /&gt;
 
 &lt;OverlayPanel ref="op" appendTo="body" :showCloseIcon="true" id="overlay_panel" style="width: 450px"&gt;
-    &lt;DataTable :value="products" v-model:selection="selectedProduct" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect"&gt;
+    &lt;DataTable :value="products" v-model:selection="selectedProduct" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect" responsiveLayout="scroll"&gt;
         &lt;Column field="name" header="Name" sortable&gt;&lt;/Column&gt;
         &lt;Column header="Image"&gt;
             &lt;template #body="slotProps"&gt;
diff --git a/src/views/responsive/ResponsiveDemo.vue b/src/views/responsive/ResponsiveDemo.vue
index ca5f5445b..853600abe 100644
--- a/src/views/responsive/ResponsiveDemo.vue
+++ b/src/views/responsive/ResponsiveDemo.vue
@@ -263,7 +263,7 @@
                         <DataTable :value="customers" :paginator="true" :rows="10"
                             dataKey="id" :rowHover="true" v-model:selection="selectedCustomers" :filters="filters"
                             paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown" :rowsPerPageOptions="[10,25,50]"
-                            currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries">
+                            currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries" responsiveLayout="scroll">
                             <template #header>
                                 <div class="p-d-flex p-ai-center p-jc-between">
                                     DataTable
@@ -276,24 +276,24 @@
                             <template #empty>
                                 No customers found.
                             </template>
-                            <Column selectionMode="multiple" headerStyle="width: 3em"></Column>
-                            <Column field="name" header="Name" :sortable="true">
+                            <Column selectionMode="multiple" headerStyle="width: 3rem"></Column>
+                            <Column field="name" header="Name" :sortable="true" style="min-width:16rem">
                                 <template #body="slotProps">
                                     {{slotProps.data.name}}
                                 </template>
                             </Column>
-                            <Column header="Country" :sortable="true" sortField="country.name" filterField="country.name" filterMatchMode="contains">
+                            <Column header="Country" :sortable="true" sortField="country.name" filterField="country.name" filterMatchMode="contains" style="min-width:16rem">
                                 <template #body="slotProps">
                                     <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" class="p-mr-2" />
                                     <span class="image-text">{{slotProps.data.country.name}}</span>
                                 </template>
                             </Column>
-                            <Column field="status" header="Status" :sortable="true" filterMatchMode="equals">
+                            <Column field="status" header="Status" :sortable="true" filterMatchMode="equals" style="min-width:16rem">
                                 <template #body="slotProps">
                                     <span :class="'customer-badge status-' + slotProps.data.status">{{slotProps.data.status}}</span>
                                 </template>
                             </Column>
-                            <Column field="activity" header="Activity" :sortable="true" filterMatchMode="gte">
+                            <Column field="activity" header="Activity" :sortable="true" filterMatchMode="gte" style="min-width:16rem">
                                 <template #body="slotProps">
                                     <ProgressBar :value="slotProps.data.activity" :showValue="false" style="width: 100px"/>
                                 </template>
diff --git a/src/views/skeleton/SkeletonDemo.vue b/src/views/skeleton/SkeletonDemo.vue
index 85e029324..cab793186 100644
--- a/src/views/skeleton/SkeletonDemo.vue
+++ b/src/views/skeleton/SkeletonDemo.vue
@@ -114,7 +114,7 @@
                  </div>
 
                 <h5>DataTable</h5>
-                <DataTable :value="products">
+                <DataTable :value="products" responsiveLayout="scroll">
                     <Column field="code" header="Code">
                         <template #body>
                             <Skeleton></Skeleton>
diff --git a/src/views/skeleton/SkeletonDoc.vue b/src/views/skeleton/SkeletonDoc.vue
index 47ad5791a..05a73b64f 100644
--- a/src/views/skeleton/SkeletonDoc.vue
+++ b/src/views/skeleton/SkeletonDoc.vue
@@ -389,7 +389,7 @@ export default {
                  </div>
 
                 <h5>DataTable</h5>
-                <DataTable :value="products">
+                <DataTable :value="products" responsiveLayout="scroll">
                     <Column field="code" header="Code">
                         <template #body>
                             <Skeleton></Skeleton>