diff --git a/src/views/datatable/DataTableBasicDemo.vue b/src/views/datatable/DataTableBasicDemo.vue
index e4c0486b5..079e60142 100755
--- a/src/views/datatable/DataTableBasicDemo.vue
+++ b/src/views/datatable/DataTableBasicDemo.vue
@@ -9,7 +9,7 @@
 
 		<div class="content-section implementation">
             <div class="card">
-                <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/datatable/DataTableBasicDoc.vue b/src/views/datatable/DataTableBasicDoc.vue
index dbffe131d..4fc1f45b8 100644
--- a/src/views/datatable/DataTableBasicDoc.vue
+++ b/src/views/datatable/DataTableBasicDoc.vue
@@ -1,5 +1,5 @@
 <template>
-    <AppDoc :sources="sources" service="ProductService" data="products-small" />
+    <AppDoc name="DataTableDemo" :sources="sources" service="ProductService" data="products-small" />
 </template>
 
 <script>
@@ -13,7 +13,7 @@ export default {
 <template>
     <div>
         <div class="card">
-            <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>
@@ -24,7 +24,7 @@ export default {
 </template>
 
 <script>
-import ProductService from '../../service/ProductService';
+import ProductService from './service/ProductService';
 
 export default {
     data() {
@@ -42,6 +42,41 @@ export default {
 }
 <\\/script>
                     `
+                },
+                'composition-api': {
+                    tabName: 'Composition API',
+                    content: `
+<template>
+	<div>
+        <div class="card">
+            <DataTable :value="products" responsiveLayout="scroll">
+                <Column field="code" header="Code"></Column>
+                <Column field="name" header="Name"></Column>
+                <Column field="category" header="Category"></Column>
+                <Column field="quantity" header="Quantity"></Column>
+            </DataTable>
+        </div>
+	</div>
+</template>
+
+<script>
+import { ref, onMounted } from 'vue';
+import ProductService from './service/ProductService';
+
+export default {
+    setup() {
+        onMounted(() => {
+            productService.value.getProductsSmall().then(data => products.value = data);
+        })
+
+        const products = ref();
+        const productService = ref(new ProductService());
+
+        return { products, productService }
+    }
+}
+<\\/script>         
+`
                 }
             }
         }