diff --git a/doc/treetable/scroll/FrozenColumnsDoc.vue b/doc/treetable/scroll/FrozenColumnsDoc.vue
index 6a3d90e72..c66c24ddc 100644
--- a/doc/treetable/scroll/FrozenColumnsDoc.vue
+++ b/doc/treetable/scroll/FrozenColumnsDoc.vue
@@ -3,7 +3,7 @@
         <p>A column can be fixed during horizontal scrolling by enabling the <i>frozen</i> property on a Column. The location is defined with the <i>alignFrozen</i> that can be <i>left</i> or <i>right</i>.</p>
     </DocSectionText>
     <div class="card">
-        <TreeTable :value="nodes" scrollable scrollHeight="200px" scrollDirection="both">
+        <TreeTable :value="nodes" scrollable scrollHeight="300px" scrollDirection="both">
             <Column field="name" header="Name" expander frozen style="width: 250px; height: 57px"></Column>
             <Column field="size" header="Size" style="width: 250px; height: 57px"></Column>
             <Column field="type" header="Type 2" style="width: 250px; height: 57px"></Column>
@@ -24,7 +24,7 @@ export default {
             nodes: null,
             code: {
                 basic: `
-<TreeTable :value="nodes" scrollable scrollHeight="200px" scrollDirection="both">
+<TreeTable :value="nodes" scrollable scrollHeight="300px" scrollDirection="both">
     <Column field="name" header="Name" expander frozen style="width: 250px; height: 57px"></Column>
     <Column field="size" header="Size" style="width: 250px; height: 57px"></Column>
     <Column field="type" header="Type 2" style="width: 250px; height: 57px"></Column>
@@ -36,7 +36,7 @@ export default {
                 options: `
 <template>
     <div class="card">
-        <TreeTable :value="nodes" scrollable scrollHeight="200px" scrollDirection="both">
+        <TreeTable :value="nodes" scrollable scrollHeight="300px" scrollDirection="both">
             <Column field="name" header="Name" expander frozen style="width: 250px; height: 57px"></Column>
             <Column field="size" header="Size" style="width: 250px; height: 57px"></Column>
             <Column field="type" header="Type 2" style="width: 250px; height: 57px"></Column>
@@ -65,7 +65,7 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <TreeTable :value="nodes" scrollable scrollHeight="200px" scrollDirection="both">
+        <TreeTable :value="nodes" scrollable scrollHeight="300px" scrollDirection="both">
             <Column field="name" header="Name" expander frozen style="width: 250px; height: 57px"></Column>
             <Column field="size" header="Size" style="width: 250px; height: 57px"></Column>
             <Column field="type" header="Type 2" style="width: 250px; height: 57px"></Column>
diff --git a/doc/treetable/scroll/HorizontalScrollDoc.vue b/doc/treetable/scroll/HorizontalScrollDoc.vue
index ff4ef5bdf..5c6cd2e07 100644
--- a/doc/treetable/scroll/HorizontalScrollDoc.vue
+++ b/doc/treetable/scroll/HorizontalScrollDoc.vue
@@ -3,7 +3,7 @@
         <p>Horizontal scrolling is enabled when the total width of columns exceeds table width.</p>
     </DocSectionText>
     <div class="card">
-        <TreeTable :value="nodes" scrollable scrollHeight="200px" scrollDirection="both">
+        <TreeTable :value="nodes" scrollable scrollHeight="300px" scrollDirection="both">
             <Column field="name" header="Name" expander style="width: 250px"></Column>
             <Column field="size" header="Size" style="width: 250px"></Column>
             <Column field="type" header="Type 2" style="width: 250px"></Column>
@@ -24,7 +24,7 @@ export default {
             nodes: null,
             code: {
                 basic: `
-<TreeTable :value="nodes" scrollable scrollHeight="200px" scrollDirection="both">
+<TreeTable :value="nodes" scrollable scrollHeight="300px" scrollDirection="both">
     <Column field="name" header="Name" expander style="width: 250px"></Column>
     <Column field="size" header="Size" style="width: 250px"></Column>
     <Column field="type" header="Type 2" style="width: 250px"></Column>
@@ -36,7 +36,7 @@ export default {
                 options: `
 <template>
     <div class="card">
-        <TreeTable :value="nodes" scrollable scrollHeight="200px" scrollDirection="both">
+        <TreeTable :value="nodes" scrollable scrollHeight="300px" scrollDirection="both">
             <Column field="name" header="Name" expander style="width: 250px"></Column>
             <Column field="size" header="Size" style="width: 250px"></Column>
             <Column field="type" header="Type 2" style="width: 250px"></Column>
@@ -65,7 +65,7 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <TreeTable :value="nodes" scrollable scrollHeight="200px" scrollDirection="both">
+        <TreeTable :value="nodes" scrollable scrollHeight="300px" scrollDirection="both">
             <Column field="name" header="Name" expander style="width: 250px"></Column>
             <Column field="size" header="Size" style="width: 250px"></Column>
             <Column field="type" header="Type 2" style="width: 250px"></Column>
diff --git a/doc/treetable/scroll/VerticalScrollDoc.vue b/doc/treetable/scroll/VerticalScrollDoc.vue
index 4f13a44cf..6e496ac22 100644
--- a/doc/treetable/scroll/VerticalScrollDoc.vue
+++ b/doc/treetable/scroll/VerticalScrollDoc.vue
@@ -3,7 +3,7 @@
         <p>Adding <i>scrollable</i> property along with a <i>scrollHeight</i> for the data viewport enables vertical scrolling with fixed headers.</p>
     </DocSectionText>
     <div class="card">
-        <TreeTable :value="nodes" scrollable scrollHeight="200px">
+        <TreeTable :value="nodes" scrollable scrollHeight="270px">
             <Column field="name" header="Name" expander></Column>
             <Column field="size" header="Size"></Column>
             <Column field="type" header="Type"></Column>
@@ -21,7 +21,7 @@ export default {
             nodes: null,
             code: {
                 basic: `
-<TreeTable :value="nodes" scrollable scrollHeight="200px">
+<TreeTable :value="nodes" scrollable scrollHeight="270px">
     <Column field="name" header="Name" expander></Column>
     <Column field="size" header="Size"></Column>
     <Column field="type" header="Type"></Column>
@@ -30,7 +30,7 @@ export default {
                 options: `
 <template>
     <div class="card">
-        <TreeTable :value="nodes" scrollable scrollHeight="200px">
+        <TreeTable :value="nodes" scrollable scrollHeight="270px">
             <Column field="name" header="Name" expander></Column>
             <Column field="size" header="Size"></Column>
             <Column field="type" header="Type"></Column>
@@ -56,7 +56,7 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <TreeTable :value="nodes" scrollable scrollHeight="200px">
+        <TreeTable :value="nodes" scrollable scrollHeight="270px">
             <Column field="name" header="Name" expander></Column>
             <Column field="size" header="Size"></Column>
             <Column field="type" header="Type"></Column>