diff --git a/doc/common/apidoc/index.json b/doc/common/apidoc/index.json
index 20c5d88ba..1fcc6154a 100644
--- a/doc/common/apidoc/index.json
+++ b/doc/common/apidoc/index.json
@@ -475,7 +475,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -748,7 +748,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -1019,7 +1019,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -1290,7 +1290,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -1710,7 +1710,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -1881,7 +1881,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -5137,7 +5137,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -5465,7 +5465,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -5693,7 +5693,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -5937,7 +5937,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -6246,7 +6246,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -6305,7 +6305,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -6461,7 +6461,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -6693,7 +6693,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -6997,7 +6997,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -7410,7 +7410,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -7864,7 +7864,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -8076,7 +8076,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -9896,7 +9896,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -10196,7 +10196,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -10886,7 +10886,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -11873,7 +11873,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -12240,7 +12240,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -12748,7 +12748,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -13106,7 +13106,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -13684,7 +13684,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -14144,7 +14144,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -15482,6 +15482,20 @@
                                 }
                             ],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "",
+                            "deprecated": "since v4.0. Use 'rowtoggleicon' slot instead.\nCustom row toggler icon template."
+                        },
+                        {
+                            "name": "rowtoggleicon",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <span class=\"ml-3 doc-option-parameter-name\">class</span>: <span class=\"doc-option-parameter-type\">string</span>, <span class=\"doc-option-parameter-type\">// Style class of the row toggler icon.</span>\n  \t <span class=\"ml-3 doc-option-parameter-name\">rowExpanded</span>: <span class=\"doc-option-parameter-type\">boolean</span>, <span class=\"doc-option-parameter-type\">// Current row expanded state.</span>\n }",
+                                    "description": "row toggler icon slot's params."
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
                             "description": "Custom row toggler icon template."
                         },
                         {
@@ -15570,6 +15584,19 @@
                             "parameters": [],
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
                             "description": "Custom row reorder icon template."
+                        },
+                        {
+                            "name": "nodetogglericon",
+                            "parameters": [],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "",
+                            "deprecated": "since v4.0. Use 'nodetoggleicon' slot instead.\nCustom node toggler icon template."
+                        },
+                        {
+                            "name": "nodetoggleicon",
+                            "parameters": [],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom node toggler icon template."
                         }
                     ]
                 },
@@ -15631,7 +15658,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -15891,7 +15918,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -18256,7 +18283,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -18650,7 +18677,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -19337,7 +19364,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -22527,7 +22554,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -23113,7 +23140,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -24951,7 +24978,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -25210,7 +25237,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -25929,7 +25956,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -26224,7 +26251,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -26774,7 +26801,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -27261,7 +27288,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -28467,7 +28494,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -28573,7 +28600,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -29316,7 +29343,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -29745,7 +29772,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -30754,7 +30781,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -30986,7 +31013,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -31179,7 +31206,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -32129,7 +32156,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -32357,7 +32384,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -32988,7 +33015,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -33277,7 +33304,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -33653,7 +33680,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -34245,7 +34272,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -34473,7 +34500,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -34700,7 +34727,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -34920,7 +34947,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -35331,7 +35358,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -36085,7 +36112,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -36547,7 +36574,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -36955,7 +36982,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -37246,7 +37273,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -37698,7 +37725,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -38657,7 +38684,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -39349,7 +39376,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -39996,7 +40023,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -40636,7 +40663,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -41212,7 +41239,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -41666,7 +41693,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -43041,7 +43068,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -43698,7 +43725,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -44362,7 +44389,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -44756,7 +44783,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -45402,7 +45429,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -45877,7 +45904,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -46581,7 +46608,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -47329,7 +47356,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -48427,7 +48454,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -48839,7 +48866,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -48952,7 +48979,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -49220,7 +49247,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -49481,7 +49508,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -49942,7 +49969,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -50426,7 +50453,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -50595,7 +50622,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -50815,7 +50842,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -51130,7 +51157,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -51464,7 +51491,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -52687,7 +52714,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -53157,7 +53184,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -53626,7 +53653,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -53895,7 +53922,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -54291,7 +54318,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -54968,7 +54995,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -55514,7 +55541,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -55953,7 +55980,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -56220,7 +56247,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -56582,7 +56609,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -56982,7 +57009,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -57376,7 +57403,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -57598,7 +57625,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -57872,7 +57899,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -58143,7 +58170,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -58602,7 +58629,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -59027,7 +59054,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -59266,7 +59293,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -59599,7 +59626,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -60139,7 +60166,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -60422,7 +60449,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -60754,7 +60781,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -61115,7 +61142,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -61791,7 +61818,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -62167,7 +62194,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -62769,7 +62796,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -63270,7 +63297,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -63693,7 +63720,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -63966,7 +63993,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -64355,7 +64382,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -65160,7 +65187,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -66033,7 +66060,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -67135,22 +67162,6 @@
                             "default": "",
                             "description": "Height of the scroll viewport in fixed pixels or the 'flex' keyword for a dynamic size."
                         },
-                        {
-                            "name": "scrollDirection",
-                            "optional": true,
-                            "readonly": false,
-                            "type": "\"both\" | \"horizontal\" | \"vertical\"",
-                            "default": "vertical",
-                            "description": "Orientation of the scrolling."
-                        },
-                        {
-                            "name": "responsiveLayout",
-                            "optional": true,
-                            "readonly": false,
-                            "type": "\"scroll\" | \"stack\"",
-                            "default": "stack",
-                            "description": "Defines the responsive mode, currently only option is scroll."
-                        },
                         {
                             "name": "size",
                             "optional": true,
@@ -67159,6 +67170,22 @@
                             "default": "",
                             "description": "Defines the size of the table."
                         },
+                        {
+                            "name": "tableStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string | object",
+                            "default": "",
+                            "description": "Inline style of the table element."
+                        },
+                        {
+                            "name": "tableClass",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string | object",
+                            "default": "",
+                            "description": "Style class of the table element."
+                        },
                         {
                             "name": "tableProps",
                             "optional": true,
@@ -67576,7 +67603,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
@@ -68739,7 +68766,7 @@
                             "default": ""
                         },
                         {
-                            "name": "loadStyle",
+                            "name": "load",
                             "optional": true,
                             "readonly": false,
                             "type": "Function",
diff --git a/doc/treetable/BasicDoc.vue b/doc/treetable/BasicDoc.vue
index 69a557fde..0089b701b 100644
--- a/doc/treetable/BasicDoc.vue
+++ b/doc/treetable/BasicDoc.vue
@@ -4,10 +4,10 @@
     </DocSectionText>
     <DeferredDemo @load="loadDemoData">
         <div class="card">
-            <TreeTable :value="nodes">
-                <Column field="name" header="Name" expander></Column>
-                <Column field="size" header="Size"></Column>
-                <Column field="type" header="Type"></Column>
+            <TreeTable :value="nodes" tableStyle="min-width: 50rem">
+                <Column field="name" header="Name" expander style="width: 34%"></Column>
+                <Column field="size" header="Size" style="width: 33%"></Column>
+                <Column field="type" header="Type" style="width: 33%"></Column>
             </TreeTable>
         </div>
     </DeferredDemo>
@@ -23,19 +23,19 @@ export default {
             nodes: null,
             code: {
                 basic: `
-<TreeTable :value="nodes">
-    <Column field="name" header="Name" expander></Column>
-    <Column field="size" header="Size"></Column>
-    <Column field="type" header="Type"></Column>
+<TreeTable :value="nodes" tableStyle="min-width: 50rem">
+    <Column field="name" header="Name" expander style="width: 34%"></Column>
+    <Column field="size" header="Size" style="width: 33%"></Column>
+    <Column field="type" header="Type" style="width: 33%"></Column>
 </TreeTable>
 `,
                 options: `
 <template>
     <div class="card">
-        <TreeTable :value="nodes">
-            <Column field="name" header="Name" expander></Column>
-            <Column field="size" header="Size"></Column>
-            <Column field="type" header="Type"></Column>
+        <TreeTable :value="nodes" tableStyle="min-width: 50rem">
+            <Column field="name" header="Name" expander style="width: 34%"></Column>
+            <Column field="size" header="Size" style="width: 33%"></Column>
+            <Column field="type" header="Type" style="width: 33%"></Column>
         </TreeTable>
     </div>
 </template>
@@ -58,10 +58,10 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <TreeTable :value="nodes">
-            <Column field="name" header="Name" expander></Column>
-            <Column field="size" header="Size"></Column>
-            <Column field="type" header="Type"></Column>
+        <TreeTable :value="nodes" tableStyle="min-width: 50rem">
+            <Column field="name" header="Name" expander style="width: 34%"></Column>
+            <Column field="size" header="Size" style="width: 33%"></Column>
+            <Column field="type" header="Type" style="width: 33%"></Column>
         </TreeTable>
     </div>
 </template>
diff --git a/doc/treetable/ColumnToggleDoc.vue b/doc/treetable/ColumnToggleDoc.vue
index c66219773..8b6dcc8c9 100644
--- a/doc/treetable/ColumnToggleDoc.vue
+++ b/doc/treetable/ColumnToggleDoc.vue
@@ -4,7 +4,7 @@
     </DocSectionText>
     <DeferredDemo @load="loadDemoData">
         <div class="card">
-            <TreeTable :value="nodes">
+            <TreeTable :value="nodes" tableStyle="min-width: 50rem">
                 <template #header>
                     <div style="text-align: left">
                         <MultiSelect :modelValue="selectedColumns" @update:modelValue="onToggle" :options="columns" optionLabel="header" class="w-full sm:w-16rem" display="chip" />
@@ -29,7 +29,7 @@ export default {
             columns: null,
             code: {
                 basic: `
-<TreeTable :value="nodes">
+<TreeTable :value="nodes" tableStyle="min-width: 50rem">
     <template #header>
         <div style="text-align:left">
             <MultiSelect :modelValue="selectedColumns" @update:modelValue="onToggle" :options="columns" optionLabel="header" class="w-full sm:w-16rem" display="chip"/>
@@ -42,7 +42,7 @@ export default {
                 options: `
 <template>
     <div class="card">
-        <TreeTable :value="nodes">
+        <TreeTable :value="nodes" tableStyle="min-width: 50rem">
             <template #header>
                 <div style="text-align:left">
                     <MultiSelect :modelValue="selectedColumns" @update:modelValue="onToggle" :options="columns" optionLabel="header" class="w-full sm:w-16rem" display="chip"/>
@@ -87,7 +87,7 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <TreeTable :value="nodes">
+        <TreeTable :value="nodes" tableStyle="min-width: 50rem">
             <template #header>
                 <div style="text-align:left">
                     <MultiSelect :modelValue="selectedColumns" @update:modelValue="onToggle" :options="columns" optionLabel="header" class="w-full sm:w-16rem" display="chip"/>
diff --git a/doc/treetable/ControlledDoc.vue b/doc/treetable/ControlledDoc.vue
index 6aea3fc99..71f865423 100644
--- a/doc/treetable/ControlledDoc.vue
+++ b/doc/treetable/ControlledDoc.vue
@@ -5,10 +5,10 @@
     <DeferredDemo @load="loadDemoData">
         <div class="card">
             <Button @click="toggleApplications" label="Toggle Applications" />
-            <TreeTable v-model:expandedKeys="expandedKeys" :value="nodes" class="mt-4">
-                <Column field="name" header="Name" expander></Column>
-                <Column field="size" header="Size"></Column>
-                <Column field="type" header="Type"></Column>
+            <TreeTable v-model:expandedKeys="expandedKeys" :value="nodes" class="mt-4" tableStyle="min-width: 50rem">
+                <Column field="name" header="Name" expander style="width: 34%"></Column>
+                <Column field="size" header="Size" style="width: 33%"></Column>
+                <Column field="type" header="Type" style="width: 33%"></Column>
             </TreeTable>
         </div>
     </DeferredDemo>
@@ -26,20 +26,20 @@ export default {
             code: {
                 basic: `
 <Button @click="toggleApplications" label="Toggle Applications" />
-<TreeTable v-model:expandedKeys="expandedKeys" :value="nodes">
-    <Column field="name" header="Name" expander></Column>
-    <Column field="size" header="Size"></Column>
-    <Column field="type" header="Type"></Column>
+<TreeTable v-model:expandedKeys="expandedKeys" :value="nodes" class="mt-4" tableStyle="min-width: 50rem">
+    <Column field="name" header="Name" expander style="width: 34%"></Column>
+    <Column field="size" header="Size" style="width: 33%"></Column>
+    <Column field="type" header="Type" style="width: 33%"></Column>
 </TreeTable>
 `,
                 options: `
 <template>
     <div class="card">
         <Button @click="toggleApplications" label="Toggle Applications" />
-        <TreeTable v-model:expandedKeys="expandedKeys" :value="nodes">
-            <Column field="name" header="Name" expander></Column>
-            <Column field="size" header="Size"></Column>
-            <Column field="type" header="Type"></Column>
+        <TreeTable v-model:expandedKeys="expandedKeys" :value="nodes" class="mt-4" tableStyle="min-width: 50rem">
+            <Column field="name" header="Name" expander style="width: 34%"></Column>
+            <Column field="size" header="Size" style="width: 33%"></Column>
+            <Column field="type" header="Type" style="width: 33%"></Column>
         </TreeTable>
     </div>
 </template>
@@ -74,10 +74,10 @@ export default {
 <template>
     <div class="card">
         <Button @click="toggleApplications" label="Toggle Applications" />
-        <TreeTable v-model:expandedKeys="expandedKeys" :value="nodes">
-            <Column field="name" header="Name" expander></Column>
-            <Column field="size" header="Size"></Column>
-            <Column field="type" header="Type"></Column>
+        <TreeTable v-model:expandedKeys="expandedKeys" :value="nodes" class="mt-4" tableStyle="min-width: 50rem">
+            <Column field="name" header="Name" expander style="width: 34%"></Column>
+            <Column field="size" header="Size" style="width: 33%"></Column>
+            <Column field="type" header="Type" style="width: 33%"></Column>
         </TreeTable>
     </div>
 </template>
diff --git a/doc/treetable/DynamicColumnsDoc.vue b/doc/treetable/DynamicColumnsDoc.vue
index c45415367..c05eb61d6 100644
--- a/doc/treetable/DynamicColumnsDoc.vue
+++ b/doc/treetable/DynamicColumnsDoc.vue
@@ -4,7 +4,7 @@
     </DocSectionText>
     <DeferredDemo @load="loadDemoData">
         <div class="card">
-            <TreeTable :value="nodes">
+            <TreeTable :value="nodes" tableStyle="min-width: 50rem">
                 <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" :expander="col.expander"></Column>
             </TreeTable>
         </div>
@@ -22,14 +22,14 @@ export default {
             columns: null,
             code: {
                 basic: `
-<TreeTable :value="nodes">
+<TreeTable :value="nodes" tableStyle="min-width: 50rem">
     <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" :expander="col.expander"></Column>
 </TreeTable>
 `,
                 options: `
 <template>
     <div class="card">
-        <TreeTable :value="nodes">
+        <TreeTable :value="nodes" tableStyle="min-width: 50rem">
             <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" :expander="col.expander"></Column>
         </TreeTable>
     </div>
@@ -61,7 +61,7 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <TreeTable :value="nodes">
+        <TreeTable :value="nodes" tableStyle="min-width: 50rem">
             <Column v-for="col of columns" :key="col.field" :field="col.field" :header="col.header" :expander="col.expander"></Column>
         </TreeTable>
     </div>
diff --git a/doc/treetable/FilterDoc.vue b/doc/treetable/FilterDoc.vue
index 64e591627..ceb25f31a 100644
--- a/doc/treetable/FilterDoc.vue
+++ b/doc/treetable/FilterDoc.vue
@@ -13,26 +13,24 @@
             </div>
             <TreeTable :value="nodes" :filters="filters" :filterMode="filterMode.value">
                 <template #header>
-                    <div class="text-right">
+                    <div class="flex justify-content-end">
                         <IconField>
-                            <InputIcon>
-                                <i class="pi pi-search" />
-                            </InputIcon>
+                            <InputIcon class="pi pi-search" />
                             <InputText v-model="filters['global']" placeholder="Global Search" />
                         </IconField>
                     </div>
                 </template>
-                <Column field="name" header="Name" expander>
+                <Column field="name" header="Name" expander style="min-width: 12rem">
                     <template #filter>
                         <InputText v-model="filters['name']" type="text" class="p-column-filter" placeholder="Filter by name" />
                     </template>
                 </Column>
-                <Column field="size" header="Size">
+                <Column field="size" header="Size" style="min-width: 12rem">
                     <template #filter>
                         <InputText v-model="filters['size']" type="text" class="p-column-filter" placeholder="Filter by size" />
                     </template>
                 </Column>
-                <Column field="type" header="Type">
+                <Column field="type" header="Type" style="min-width: 12rem">
                     <template #filter>
                         <InputText v-model="filters['type']" type="text" class="p-column-filter" placeholder="Filter by type" />
                     </template>
@@ -61,26 +59,24 @@ export default {
 <SelectButton v-model="filterMode" optionLabel="label" dataKey="label" :options="filterOptions" />
 <TreeTable :value="nodes" :filters="filters" :filterMode="filterMode.value">
     <template #header>
-        <div class="text-right">
+        <div class="flex justify-content-end">
             <IconField>
-                <InputIcon>
-                    <i class="pi pi-search" />
-                </InputIcon>
+                <InputIcon class="pi pi-search" />
                 <InputText v-model="filters['global']" placeholder="Global Search" />
             </IconField>
         </div>
     </template>
-    <Column field="name" header="Name" expander>
+    <Column field="name" header="Name" expander style="min-width: 12rem">
         <template #filter>
             <InputText v-model="filters['name']" type="text" class="p-column-filter" placeholder="Filter by name" />
         </template>
     </Column>
-    <Column field="size" header="Size">
+    <Column field="size" header="Size" style="min-width: 12rem">
         <template #filter>
             <InputText v-model="filters['size']" type="text" class="p-column-filter" placeholder="Filter by size" />
         </template>
     </Column>
-    <Column field="type" header="Type">
+    <Column field="type" header="Type" style="min-width: 12rem">
         <template #filter>
             <InputText v-model="filters['type']" type="text" class="p-column-filter" placeholder="Filter by type" />
         </template>
@@ -95,26 +91,24 @@ export default {
         </div>
         <TreeTable :value="nodes" :filters="filters" :filterMode="filterMode.value">
             <template #header>
-                <div class="text-right">
+                <div class="flex justify-content-end">
                     <IconField>
-                        <InputIcon>
-                            <i class="pi pi-search" />
-                        </InputIcon>
+                        <InputIcon class="pi pi-search" />
                         <InputText v-model="filters['global']" placeholder="Global Search" />
                     </IconField>
                 </div>
             </template>
-            <Column field="name" header="Name" expander>
+            <Column field="name" header="Name" expander style="min-width: 12rem">
                 <template #filter>
                     <InputText v-model="filters['name']" type="text" class="p-column-filter" placeholder="Filter by name" />
                 </template>
             </Column>
-            <Column field="size" header="Size">
+            <Column field="size" header="Size" style="min-width: 12rem">
                 <template #filter>
                     <InputText v-model="filters['size']" type="text" class="p-column-filter" placeholder="Filter by size" />
                 </template>
             </Column>
-            <Column field="type" header="Type">
+            <Column field="type" header="Type" style="min-width: 12rem">
                 <template #filter>
                     <InputText v-model="filters['type']" type="text" class="p-column-filter" placeholder="Filter by type" />
                 </template>
@@ -152,26 +146,24 @@ export default {
         </div>
         <TreeTable :value="nodes" :filters="filters" :filterMode="filterMode.value">
             <template #header>
-                <div class="text-right">
+                <div class="flex justify-content-end">
                     <IconField>
-                        <InputIcon>
-                            <i class="pi pi-search" />
-                        </InputIcon>
+                        <InputIcon class="pi pi-search" />
                         <InputText v-model="filters['global']" placeholder="Global Search" />
                     </IconField>
                 </div>
             </template>
-            <Column field="name" header="Name" expander>
+            <Column field="name" header="Name" expander style="min-width: 12rem">
                 <template #filter>
                     <InputText v-model="filters['name']" type="text" class="p-column-filter" placeholder="Filter by name" />
                 </template>
             </Column>
-            <Column field="size" header="Size">
+            <Column field="size" header="Size" style="min-width: 12rem">
                 <template #filter>
                     <InputText v-model="filters['size']" type="text" class="p-column-filter" placeholder="Filter by size" />
                 </template>
             </Column>
-            <Column field="type" header="Type">
+            <Column field="type" header="Type" style="min-width: 12rem">
                 <template #filter>
                     <InputText v-model="filters['type']" type="text" class="p-column-filter" placeholder="Filter by type" />
                 </template>
diff --git a/doc/treetable/LazyLoadDoc.vue b/doc/treetable/LazyLoadDoc.vue
index 8280855fb..07e044876 100644
--- a/doc/treetable/LazyLoadDoc.vue
+++ b/doc/treetable/LazyLoadDoc.vue
@@ -12,7 +12,7 @@
     </DocSectionText>
     <DeferredDemo @load="loadDemoData">
         <div class="card">
-            <TreeTable :value="nodes" :lazy="true" :paginator="true" :rows="rows" :loading="loading" @nodeExpand="onExpand" @page="onPage" :totalRecords="totalRecords">
+            <TreeTable :value="nodes" :lazy="true" :paginator="true" :rows="rows" :loading="loading" @nodeExpand="onExpand" @page="onPage" :totalRecords="totalRecords" tableStyle="min-width: 50rem">
                 <Column field="name" header="Name" expander></Column>
                 <Column field="size" header="Size"></Column>
                 <Column field="type" header="Type"></Column>
@@ -33,7 +33,7 @@ export default {
             code: {
                 basic: `
 <TreeTable :value="nodes" :lazy="true" :paginator="true" :rows="rows" :loading="loading"
-    @nodeExpand="onExpand" @page="onPage" :totalRecords="totalRecords">
+    @nodeExpand="onExpand" @page="onPage" :totalRecords="totalRecords" tableStyle="min-width: 50rem">
     <Column field="name" header="Name" expander></Column>
     <Column field="size" header="Size"></Column>
     <Column field="type" header="Type"></Column>
@@ -43,7 +43,7 @@ export default {
 <template>
     <div class="card">
         <TreeTable :value="nodes" :lazy="true" :paginator="true" :rows="rows" :loading="loading"
-            @nodeExpand="onExpand" @page="onPage" :totalRecords="totalRecords">
+            @nodeExpand="onExpand" @page="onPage" :totalRecords="totalRecords" tableStyle="min-width: 50rem">
             <Column field="name" header="Name" expander></Column>
             <Column field="size" header="Size"></Column>
             <Column field="type" header="Type"></Column>
@@ -144,7 +144,7 @@ export default {
 <template>
     <div>
         <TreeTable :value="nodes" :lazy="true" :paginator="true" :rows="rows" :loading="loading"
-            @nodeExpand="onExpand" @page="onPage" :totalRecords="totalRecords">
+            @nodeExpand="onExpand" @page="onPage" :totalRecords="totalRecords" tableStyle="min-width: 50rem">
             <Column field="name" header="Name" :expander="true"></Column>
             <Column field="size" header="Size"></Column>
             <Column field="type" header="Type"></Column>
diff --git a/doc/treetable/ResponsiveDoc.vue b/doc/treetable/ResponsiveDoc.vue
deleted file mode 100644
index 4a400fc91..000000000
--- a/doc/treetable/ResponsiveDoc.vue
+++ /dev/null
@@ -1,117 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>A horizontal scrollbar is displayed when parent of the table gets smaller than the defined <i>minWidth</i>.</p>
-    </DocSectionText>
-    <DeferredDemo @load="loadDemoData">
-        <div class="card">
-            <TreeTable :value="nodes" :tableProps="{ style: { minWidth: '650px' } }" style="overflow: auto">
-                <Column field="name" header="Name" expander></Column>
-                <Column field="size" header="Size"></Column>
-                <Column field="type" header="Type"></Column>
-            </TreeTable>
-        </div>
-    </DeferredDemo>
-    <DocSectionCode :code="code" :service="['NodeService']" />
-</template>
-
-<script>
-import { NodeService } from '@/service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-            code: {
-                basic: `
-<TreeTable :value="nodes" :tableProps="{ style: { minWidth: '650px' } }" style="overflow: auto">
-    <Column field="name" header="Name" expander></Column>
-    <Column field="size" header="Size"></Column>
-    <Column field="type" header="Type"></Column>
-</TreeTable>
-`,
-                options: `
-<template>
-    <div class="card">
-        <TreeTable :value="nodes" :tableProps="{ style: { minWidth: '650px' } }" style="overflow: auto">
-            <Column field="name" header="Name" expander></Column>
-            <Column field="size" header="Size"></Column>
-            <Column field="type" header="Type"></Column>
-        </TreeTable>
-    </div>
-</template>
-
-<script>
-import { NodeService } from '@/service/NodeService';
-
-export default {
-    data() {
-        return {
-            nodes: null,
-        }
-    },
-    mounted() {
-        NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
-    }
-}
-<\/script>
-`,
-                composition: `
-<template>
-    <div class="card">
-        <TreeTable :value="nodes" :tableProps="{ style: { minWidth: '650px' } }" style="overflow: auto">
-            <Column field="name" header="Name" expander></Column>
-            <Column field="size" header="Size"></Column>
-            <Column field="type" header="Type"></Column>
-        </TreeTable>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue';
-import { NodeService } from '@/service/NodeService';
-
-onMounted(() => {
-    NodeService.getTreeTableNodes().then((data) => (nodes.value = data));
-});
-
-const nodes = ref();
-<\/script>
-`,
-                data: `
-{
-    key: '0',
-    label: 'Documents',
-    data: 'Documents Folder',
-    icon: 'pi pi-fw pi-inbox',
-    children: [
-        {
-            key: '0-0',
-            label: 'Work',
-            data: 'Work Folder',
-            icon: 'pi pi-fw pi-cog',
-            children: [
-                { key: '0-0-0', label: 'Expenses.doc', icon: 'pi pi-fw pi-file', data: 'Expenses Document' },
-                { key: '0-0-1', label: 'Resume.doc', icon: 'pi pi-fw pi-file', data: 'Resume Document' }
-            ]
-        },
-        {
-            key: '0-1',
-            label: 'Home',
-            data: 'Home Folder',
-            icon: 'pi pi-fw pi-home',
-            children: [{ key: '0-1-0', label: 'Invoices.txt', icon: 'pi pi-fw pi-file', data: 'Invoices for this month' }]
-        }
-    ]
-},
-...
-`
-            }
-        };
-    },
-    methods: {
-        loadDemoData() {
-            NodeService.getTreeTableNodes().then((data) => (this.nodes = data));
-        }
-    }
-};
-</script>
diff --git a/doc/treetable/SizeDoc.vue b/doc/treetable/SizeDoc.vue
index 33f23c7af..ba354dee1 100644
--- a/doc/treetable/SizeDoc.vue
+++ b/doc/treetable/SizeDoc.vue
@@ -7,10 +7,10 @@
             <div class="flex justify-content-center mb-4">
                 <SelectButton v-model="size" :options="sizeOptions" optionLabel="label" dataKey="label" />
             </div>
-            <TreeTable :value="nodes" :class="`p-treetable-${size.class}`">
-                <Column field="name" header="Name" expander></Column>
-                <Column field="size" header="Size"></Column>
-                <Column field="type" header="Type"></Column>
+            <TreeTable :value="nodes" :size="size.value" tableStyle="min-width: 50rem">
+                <Column field="name" header="Name" expander style="width: 34%"></Column>
+                <Column field="size" header="Size" style="width: 33%"></Column>
+                <Column field="type" header="Type" style="width: 33%"></Column>
             </TreeTable>
         </div>
     </DeferredDemo>
@@ -26,25 +26,25 @@ export default {
             nodes: null,
             size: { label: 'Normal', value: 'normal' },
             sizeOptions: [
-                { label: 'Small', value: 'small', class: 'sm' },
+                { label: 'Small', value: 'small' },
                 { label: 'Normal', value: 'normal' },
-                { label: 'Large', value: 'large', class: 'lg' }
+                { label: 'Large', value: 'large' }
             ],
             code: {
                 basic: `
-<TreeTable :value="nodes" :class="\`p-treetable-\${size.class}\`">
-    <Column field="name" header="Name" expander></Column>
-    <Column field="size" header="Size"></Column>
-    <Column field="type" header="Type"></Column>
+<TreeTable :value="nodes" :size="size.value" tableStyle="min-width: 50rem">
+    <Column field="name" header="Name" expander style="width: 34%"></Column>
+    <Column field="size" header="Size" style="width: 33%"></Column>
+    <Column field="type" header="Type" style="width: 33%"></Column>
 </TreeTable>
 `,
                 options: `
 <template>
     <div class="card">
-        <TreeTable :value="nodes" :class="\`p-treetable-\${size.class}\`">
-            <Column field="name" header="Name" expander></Column>
-            <Column field="size" header="Size"></Column>
-            <Column field="type" header="Type"></Column>
+        <TreeTable :value="nodes" :size="size.value" tableStyle="min-width: 50rem">
+            <Column field="name" header="Name" expander style="width: 34%"></Column>
+            <Column field="size" header="Size" style="width: 33%"></Column>
+            <Column field="type" header="Type" style="width: 33%"></Column>
         </TreeTable>
     </div>
 </template>
@@ -73,10 +73,10 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <TreeTable :value="nodes" :class="\`p-treetable-\${size.class}\`">
-            <Column field="name" header="Name" expander></Column>
-            <Column field="size" header="Size"></Column>
-            <Column field="type" header="Type"></Column>
+        <TreeTable :value="nodes" :size="size.value" tableStyle="min-width: 50rem">
+            <Column field="name" header="Name" expander style="width: 34%"></Column>
+            <Column field="size" header="Size" style="width: 33%"></Column>
+            <Column field="type" header="Type" style="width: 33%"></Column>
         </TreeTable>
     </div>
 </template>
diff --git a/doc/treetable/TemplateDoc.vue b/doc/treetable/TemplateDoc.vue
index 1cd171c5a..60a6d7019 100644
--- a/doc/treetable/TemplateDoc.vue
+++ b/doc/treetable/TemplateDoc.vue
@@ -4,14 +4,14 @@
     </DocSectionText>
     <DeferredDemo @load="loadDemoData">
         <div class="card">
-            <TreeTable :value="nodes">
+            <TreeTable :value="nodes" tableStyle="min-width: 50rem">
                 <template #header>
                     <div class="text-xl font-bold">File Viewer</div>
                 </template>
-                <Column field="name" header="Name" :expander="true"></Column>
-                <Column field="size" header="Size"></Column>
-                <Column field="type" header="Type"></Column>
-                <Column headerStyle="width: 10rem">
+                <Column field="name" header="Name" expander style="width: 250px"></Column>
+                <Column field="size" header="Size" style="width: 150px"></Column>
+                <Column field="type" header="Type" style="width: 150px"></Column>
+                <Column style="width: 10rem">
                     <template #body>
                         <div class="flex flex-wrap gap-2">
                             <Button type="button" icon="pi pi-search" rounded />
@@ -39,14 +39,14 @@ export default {
             nodes: null,
             code: {
                 basic: `
-<TreeTable :value="nodes">
+<TreeTable :value="nodes" tableStyle="min-width: 50rem">
     <template #header>
         <div class="text-xl font-bold">File Viewer</div>
     </template>
-    <Column field="name" header="Name" :expander="true"></Column>
-    <Column field="size" header="Size"></Column>
-    <Column field="type" header="Type"></Column>
-    <Column headerStyle="width: 10rem">
+    <Column field="name" header="Name" expander style="width: 250px"></Column>
+    <Column field="size" header="Size" style="width: 150px"></Column>
+    <Column field="type" header="Type" style="width: 150px"></Column>
+    <Column style="width: 10rem">
         <template #body>
             <div class="flex flex-wrap gap-2">
                 <Button type="button" icon="pi pi-search" rounded />
@@ -64,14 +64,14 @@ export default {
                 options: `
 <template>
     <div class="card">
-        <TreeTable :value="nodes">
+        <TreeTable :value="nodes" tableStyle="min-width: 50rem">
             <template #header>
                 <div class="text-xl font-bold">File Viewer</div>
             </template>
-            <Column field="name" header="Name" :expander="true"></Column>
-            <Column field="size" header="Size"></Column>
-            <Column field="type" header="Type"></Column>
-            <Column headerStyle="width: 10rem">
+            <Column field="name" header="Name" expander style="width: 250px"></Column>
+            <Column field="size" header="Size" style="width: 150px"></Column>
+            <Column field="type" header="Type" style="width: 150px"></Column>
+            <Column style="width: 10rem">
                 <template #body>
                     <div class="flex flex-wrap gap-2">
                         <Button type="button" icon="pi pi-search" rounded/>
@@ -106,14 +106,14 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <TreeTable :value="nodes">
+        <TreeTable :value="nodes" tableStyle="min-width: 50rem">
             <template #header>
                 <div class="text-xl font-bold">File Viewer</div>
             </template>
-            <Column field="name" header="Name" :expander="true"></Column>
-            <Column field="size" header="Size"></Column>
-            <Column field="type" header="Type"></Column>
-            <Column headerStyle="width: 10rem">
+            <Column field="name" header="Name" expander style="width: 250px"></Column>
+            <Column field="size" header="Size" style="width: 150px"></Column>
+            <Column field="type" header="Type" style="width: 150px"></Column>
+            <Column style="width: 10rem">
                 <template #body>
                     <div class="flex flex-wrap gap-2">
                         <Button type="button" icon="pi pi-search" rounded/>
diff --git a/doc/treetable/paginator/PaginatorBasicDoc.vue b/doc/treetable/paginator/PaginatorBasicDoc.vue
index 439e0ac90..ef901741c 100644
--- a/doc/treetable/paginator/PaginatorBasicDoc.vue
+++ b/doc/treetable/paginator/PaginatorBasicDoc.vue
@@ -4,10 +4,10 @@
     </DocSectionText>
     <DeferredDemo @load="loadDemoData">
         <div class="card">
-            <TreeTable :value="nodes" :paginator="true" :rows="5" :rowsPerPageOptions="[5, 10, 25]">
-                <Column field="name" header="Name" expander></Column>
-                <Column field="size" header="Size"></Column>
-                <Column field="type" header="Type"></Column>
+            <TreeTable :value="nodes" :paginator="true" :rows="5" :rowsPerPageOptions="[5, 10, 25]" tableStyle="min-width: 50rem">
+                <Column field="name" header="Name" expander style="width: 34%"></Column>
+                <Column field="size" header="Size" style="width: 33%"></Column>
+                <Column field="type" header="Type" style="width: 33%"></Column>
             </TreeTable>
         </div>
     </DeferredDemo>
@@ -21,19 +21,19 @@ export default {
             nodes: null,
             code: {
                 basic: `
-<TreeTable :value="nodes" :paginator="true" :rows="5" :rowsPerPageOptions="[5, 10, 25]">
-    <Column field="name" header="Name" expander></Column>
-    <Column field="size" header="Size"></Column>
-    <Column field="type" header="Type"></Column>
+<TreeTable :value="nodes" :paginator="true" :rows="5" :rowsPerPageOptions="[5, 10, 25]" tableStyle="min-width: 50rem">
+    <Column field="name" header="Name" expander style="width: 34%"></Column>
+    <Column field="size" header="Size" style="width: 33%"></Column>
+    <Column field="type" header="Type" style="width: 33%"></Column>
 </TreeTable>
 `,
                 options: `
 <template>
     <div class="card">
-        <TreeTable :value="nodes" :paginator="true" :rows="5" :rowsPerPageOptions="[5, 10, 25]">
-            <Column field="name" header="Name" expander></Column>
-            <Column field="size" header="Size"></Column>
-            <Column field="type" header="Type"></Column>
+        <TreeTable :value="nodes" :paginator="true" :rows="5" :rowsPerPageOptions="[5, 10, 25]" tableStyle="min-width: 50rem">
+            <Column field="name" header="Name" expander style="width: 34%"></Column>
+            <Column field="size" header="Size" style="width: 33%"></Column>
+            <Column field="type" header="Type" style="width: 33%"></Column>
         </TreeTable>
     </div>
 </template>
@@ -79,10 +79,10 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <TreeTable :value="nodes" :paginator="true" :rows="5" :rowsPerPageOptions="[5, 10, 25]">
-            <Column field="name" header="Name" expander></Column>
-            <Column field="size" header="Size"></Column>
-            <Column field="type" header="Type"></Column>
+        <TreeTable :value="nodes" :paginator="true" :rows="5" :rowsPerPageOptions="[5, 10, 25]" tableStyle="min-width: 50rem">
+            <Column field="name" header="Name" expander style="width: 34%"></Column>
+            <Column field="size" header="Size" style="width: 33%"></Column>
+            <Column field="type" header="Type" style="width: 33%"></Column>
         </TreeTable>
     </div>
 </template>
diff --git a/doc/treetable/paginator/PaginatorTemplateDoc.vue b/doc/treetable/paginator/PaginatorTemplateDoc.vue
index 1894acabc..ffd68eea1 100644
--- a/doc/treetable/paginator/PaginatorTemplateDoc.vue
+++ b/doc/treetable/paginator/PaginatorTemplateDoc.vue
@@ -14,13 +14,14 @@
                 :rowsPerPageOptions="[5, 10, 25, 50]"
                 paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
                 currentPageReportTemplate="{first} to {last} of {totalRecords}"
+                tableStyle="min-width: 50rem"
             >
                 <template #paginatorstart>
                     <Button type="button" icon="pi pi-refresh" text />
                 </template>
-                <Column field="name" header="Name" expander></Column>
-                <Column field="size" header="Size"></Column>
-                <Column field="type" header="Type"></Column>
+                <Column field="name" header="Name" expander style="width: 34%"></Column>
+                <Column field="size" header="Size" style="width: 33%"></Column>
+                <Column field="type" header="Type" style="width: 33%"></Column>
                 <template #paginatorend>
                     <Button type="button" icon="pi pi-download" text />
                 </template>
@@ -37,15 +38,21 @@ export default {
             nodes: null,
             code: {
                 basic: `
-<TreeTable :value="nodes" :paginator="true" :rows="5" :rowsPerPageOptions="[5, 10, 25, 50]"
+<TreeTable
+    :value="nodes"
+    :paginator="true"
+    :rows="5"
+    :rowsPerPageOptions="[5, 10, 25, 50]"
     paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
-    currentPageReportTemplate="{first} to {last} of {totalRecords}">
+    currentPageReportTemplate="{first} to {last} of {totalRecords}"
+    tableStyle="min-width: 50rem"
+>
     <template #paginatorstart>
         <Button type="button" icon="pi pi-refresh" text />
     </template>
-    <Column field="name" header="Name" expander></Column>
-    <Column field="size" header="Size"></Column>
-    <Column field="type" header="Type"></Column>
+    <Column field="name" header="Name" expander style="width: 34%"></Column>
+    <Column field="size" header="Size" style="width: 33%"></Column>
+    <Column field="type" header="Type" style="width: 33%"></Column>
     <template #paginatorend>
         <Button type="button" icon="pi pi-download" text />
     </template>
@@ -54,15 +61,21 @@ export default {
                 options: `
 <template>
     <div class="card">
-        <TreeTable :value="nodes" :paginator="true" :rows="5" :rowsPerPageOptions="[5, 10, 25, 50]"
+        <TreeTable
+            :value="nodes"
+            :paginator="true"
+            :rows="5"
+            :rowsPerPageOptions="[5, 10, 25, 50]"
             paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
-            currentPageReportTemplate="{first} to {last} of {totalRecords}">
+            currentPageReportTemplate="{first} to {last} of {totalRecords}"
+            tableStyle="min-width: 50rem"
+        >
             <template #paginatorstart>
                 <Button type="button" icon="pi pi-refresh" text />
             </template>
-            <Column field="name" header="Name" expander></Column>
-            <Column field="size" header="Size"></Column>
-            <Column field="type" header="Type"></Column>
+            <Column field="name" header="Name" expander style="width: 34%"></Column>
+            <Column field="size" header="Size" style="width: 33%"></Column>
+            <Column field="type" header="Type" style="width: 33%"></Column>
             <template #paginatorend>
                 <Button type="button" icon="pi pi-download" text />
             </template>
@@ -111,15 +124,21 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <TreeTable :value="nodes" :paginator="true" :rows="5" :rowsPerPageOptions="[5, 10, 25, 50]"
+        <TreeTable
+            :value="nodes"
+            :paginator="true"
+            :rows="5"
+            :rowsPerPageOptions="[5, 10, 25, 50]"
             paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
-            currentPageReportTemplate="{first} to {last} of {totalRecords}">
+            currentPageReportTemplate="{first} to {last} of {totalRecords}"
+            tableStyle="min-width: 50rem"
+        >
             <template #paginatorstart>
                 <Button type="button" icon="pi pi-refresh" text />
             </template>
-            <Column field="name" header="Name" expander></Column>
-            <Column field="size" header="Size"></Column>
-            <Column field="type" header="Type"></Column>
+            <Column field="name" header="Name" expander style="width: 34%"></Column>
+            <Column field="size" header="Size" style="width: 33%"></Column>
+            <Column field="type" header="Type" style="width: 33%"></Column>
             <template #paginatorend>
                 <Button type="button" icon="pi pi-download" text />
             </template>
diff --git a/doc/treetable/resize/ExpandModeDoc.vue b/doc/treetable/resize/ExpandModeDoc.vue
index 3d92d351f..d60f52844 100644
--- a/doc/treetable/resize/ExpandModeDoc.vue
+++ b/doc/treetable/resize/ExpandModeDoc.vue
@@ -4,7 +4,7 @@
     </DocSectionText>
     <DeferredDemo @load="loadDemoData">
         <div class="card">
-            <TreeTable :value="nodes" :resizableColumns="true" columnResizeMode="expand" showGridlines :tableProps="{ style: { minWidth: '50rem' } }">
+            <TreeTable :value="nodes" :resizableColumns="true" columnResizeMode="expand" showGridlines tableStyle="min-width: 50rem">
                 <Column field="name" header="Name" expander></Column>
                 <Column field="size" header="Size"></Column>
                 <Column field="type" header="Type"></Column>
@@ -23,7 +23,7 @@ export default {
             nodes: null,
             code: {
                 basic: `
-<TreeTable :value="nodes" :resizableColumns="true" columnResizeMode="expand" showGridlines :tableProps="{ style: { minWidth: '50rem' } }">
+<TreeTable :value="nodes" :resizableColumns="true" columnResizeMode="expand" showGridlines tableStyle="min-width: 50rem">
     <Column field="name" header="Name" expander></Column>
     <Column field="size" header="Size"></Column>
     <Column field="type" header="Type"></Column>
@@ -32,7 +32,7 @@ export default {
                 options: `
 <template>
     <div class="card">
-        <TreeTable :value="nodes" :resizableColumns="true" columnResizeMode="expand" showGridlines :tableProps="{ style: { minWidth: '50rem' } }">
+        <TreeTable :value="nodes" :resizableColumns="true" columnResizeMode="expand" showGridlines tableStyle="min-width: 50rem">
             <Column field="name" header="Name" expander></Column>
             <Column field="size" header="Size"></Column>
             <Column field="type" header="Type"></Column>
@@ -58,7 +58,7 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <TreeTable :value="nodes" :resizableColumns="true" columnResizeMode="expand" showGridlines :tableProps="{ style: { minWidth: '50rem' } }">
+        <TreeTable :value="nodes" :resizableColumns="true" columnResizeMode="expand" showGridlines tableStyle="min-width: 50rem">
             <Column field="name" header="Name" expander></Column>
             <Column field="size" header="Size"></Column>
             <Column field="type" header="Type"></Column>
diff --git a/doc/treetable/resize/FitModeDoc.vue b/doc/treetable/resize/FitModeDoc.vue
index 6dd545529..418fcd872 100644
--- a/doc/treetable/resize/FitModeDoc.vue
+++ b/doc/treetable/resize/FitModeDoc.vue
@@ -7,7 +7,7 @@
     </DocSectionText>
     <DeferredDemo @load="loadDemoData">
         <div class="card">
-            <TreeTable :value="nodes" :resizableColumns="true" showGridlines :tableProps="{ style: { minWidth: '50rem' } }">
+            <TreeTable :value="nodes" :resizableColumns="true" showGridlines tableStyle="min-width: 50rem">
                 <Column field="name" header="Name" expander></Column>
                 <Column field="size" header="Size"></Column>
                 <Column field="type" header="Type"></Column>
@@ -26,7 +26,7 @@ export default {
             nodes: null,
             code: {
                 basic: `
-<TreeTable :value="nodes" :resizableColumns="true" showGridlines :tableProps="{ style: { minWidth: '50rem' } }">
+<TreeTable :value="nodes" :resizableColumns="true" showGridlines tableStyle="min-width: 50rem">
     <Column field="name" header="Name" expander></Column>
     <Column field="size" header="Size"></Column>
     <Column field="type" header="Type"></Column>
@@ -35,7 +35,7 @@ export default {
                 options: `
 <template>
     <div class="card">
-        <TreeTable :value="nodes" :resizableColumns="true" showGridlines :tableProps="{ style: { minWidth: '50rem' } }">
+        <TreeTable :value="nodes" :resizableColumns="true" showGridlines tableStyle="min-width: 50rem">
             <Column field="name" header="Name" expander></Column>
             <Column field="size" header="Size"></Column>
             <Column field="type" header="Type"></Column>
@@ -61,7 +61,7 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <TreeTable :value="nodes" :resizableColumns="true" showGridlines :tableProps="{ style: { minWidth: '50rem' } }">
+        <TreeTable :value="nodes" :resizableColumns="true" showGridlines tableStyle="min-width: 50rem">
             <Column field="name" header="Name" expander></Column>
             <Column field="size" header="Size"></Column>
             <Column field="type" header="Type"></Column>
diff --git a/doc/treetable/scroll/FlexibleScrollDoc.vue b/doc/treetable/scroll/FlexibleScrollDoc.vue
index 568df653f..5af540ae5 100644
--- a/doc/treetable/scroll/FlexibleScrollDoc.vue
+++ b/doc/treetable/scroll/FlexibleScrollDoc.vue
@@ -10,7 +10,7 @@
             <Button label="Show" icon="pi pi-external-link" @click="dialogVisible = true" />
 
             <Dialog v-model:visible="dialogVisible" header="Flex Scroll" :style="{ width: '75vw' }" maximizable modal :contentStyle="{ height: '300px' }">
-                <TreeTable :value="nodes" :scrollable="true" scrollHeight="flex">
+                <TreeTable :value="nodes" :scrollable="true" scrollHeight="flex" tableStyle="min-width: 50rem">
                     <Column field="name" header="Name" :expander="true" style="min-width: 200px"></Column>
                     <Column field="size" header="Size" style="min-width: 200px"></Column>
                     <Column field="type" header="Type" style="min-width: 200px"></Column>
@@ -36,7 +36,7 @@ export default {
                 basic: `
 <Button label="Show" icon="pi pi-external-link" @click="dialogVisible = true" />
 <Dialog v-model:visible="dialogVisible" header="Flex Scroll" :style="{ width: '75vw' }" maximizable modal :contentStyle="{ height: '300px' }">
-    <TreeTable :value="nodes" :scrollable="true" scrollHeight="flex">
+    <TreeTable :value="nodes" :scrollable="true" scrollHeight="flex" tableStyle="min-width: 50rem">
         <Column field="name" header="Name" :expander="true" style="min-width: 200px"></Column>
         <Column field="size" header="Size" style="min-width: 200px"></Column>
         <Column field="type" header="Type" style="min-width: 200px"></Column>
@@ -51,7 +51,7 @@ export default {
     <div class="card flex justify-content-center">
         <Button label="Show" icon="pi pi-external-link" @click="dialogVisible = true" />
         <Dialog v-model:visible="dialogVisible" header="Flex Scroll" :style="{ width: '75vw' }" maximizable modal :contentStyle="{ height: '300px' }">
-            <TreeTable :value="nodes" :scrollable="true" scrollHeight="flex">
+            <TreeTable :value="nodes" :scrollable="true" scrollHeight="flex" tableStyle="min-width: 50rem">
                 <Column field="name" header="Name" :expander="true" style="min-width: 200px"></Column>
                 <Column field="size" header="Size" style="min-width: 200px"></Column>
                 <Column field="type" header="Type" style="min-width: 200px"></Column>
@@ -84,7 +84,7 @@ export default {
     <div class="card flex justify-content-center">
         <Button label="Show" icon="pi pi-external-link" @click="dialogVisible = true" />
         <Dialog v-model:visible="dialogVisible" header="Flex Scroll" :style="{ width: '75vw' }" maximizable modal :contentStyle="{ height: '300px' }">
-            <TreeTable :value="nodes" :scrollable="true" scrollHeight="flex">
+            <TreeTable :value="nodes" :scrollable="true" scrollHeight="flex" tableStyle="min-width: 50rem">
                 <Column field="name" header="Name" :expander="true" style="min-width: 200px"></Column>
                 <Column field="size" header="Size" style="min-width: 200px"></Column>
                 <Column field="type" header="Type" style="min-width: 200px"></Column>
diff --git a/doc/treetable/scroll/FrozenColumnsDoc.vue b/doc/treetable/scroll/FrozenColumnsDoc.vue
index d559ff15e..1e7aa1274 100644
--- a/doc/treetable/scroll/FrozenColumnsDoc.vue
+++ b/doc/treetable/scroll/FrozenColumnsDoc.vue
@@ -4,13 +4,13 @@
     </DocSectionText>
     <DeferredDemo @load="loadDemoData">
         <div class="card">
-            <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>
-                <Column field="size" header="Size 2" style="width: 250px; height: 57px"></Column>
-                <Column field="type" header="Type 3" style="width: 250px; height: 57px"></Column>
-                <Column field="size" header="Size 3" style="width: 250px; height: 57px"></Column>
+            <TreeTable :value="nodes" scrollable scrollHeight="300px">
+                <Column field="name" header="Name" expander frozen style="min-width: 250px" class="font-bold"></Column>
+                <Column field="size" header="Size" style="min-width: 200px"></Column>
+                <Column field="type" header="Type 2" style="min-width: 200px"></Column>
+                <Column field="size" header="Size 2" style="min-width: 200px"></Column>
+                <Column field="type" header="Type 3" style="min-width: 200px"></Column>
+                <Column field="size" header="Size 3" style="min-width: 200px"></Column>
             </TreeTable>
         </div>
     </DeferredDemo>
@@ -26,25 +26,25 @@ export default {
             nodes: null,
             code: {
                 basic: `
-<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>
-    <Column field="size" header="Size 2" style="width: 250px; height: 57px"></Column>
-    <Column field="type" header="Type 3" style="width: 250px; height: 57px"></Column>
-    <Column field="size" header="Size 3" style="width: 250px; height: 57px"></Column>
+<TreeTable :value="nodes" scrollable scrollHeight="300px">
+    <Column field="name" header="Name" expander frozen style="min-width: 250px" class="font-bold"></Column>
+    <Column field="size" header="Size" style="min-width: 200px"></Column>
+    <Column field="type" header="Type 2" style="min-width: 200px"></Column>
+    <Column field="size" header="Size 2" style="min-width: 200px"></Column>
+    <Column field="type" header="Type 3" style="min-width: 200px"></Column>
+    <Column field="size" header="Size 3" style="min-width: 200px"></Column>
 </TreeTable>
 `,
                 options: `
 <template>
     <div class="card">
-        <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>
-            <Column field="size" header="Size 2" style="width: 250px; height: 57px"></Column>
-            <Column field="type" header="Type 3" style="width: 250px; height: 57px"></Column>
-            <Column field="size" header="Size 3" style="width: 250px; height: 57px"></Column>
+        <TreeTable :value="nodes" scrollable scrollHeight="300px">
+            <Column field="name" header="Name" expander frozen style="min-width: 250px" class="font-bold"></Column>
+            <Column field="size" header="Size" style="min-width: 200px"></Column>
+            <Column field="type" header="Type 2" style="min-width: 200px"></Column>
+            <Column field="size" header="Size 2" style="min-width: 200px"></Column>
+            <Column field="type" header="Type 3" style="min-width: 200px"></Column>
+            <Column field="size" header="Size 3" style="min-width: 200px"></Column>
         </TreeTable>
     </div>
 </template>
@@ -67,13 +67,13 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <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>
-            <Column field="size" header="Size 2" style="width: 250px; height: 57px"></Column>
-            <Column field="type" header="Type 3" style="width: 250px; height: 57px"></Column>
-            <Column field="size" header="Size 3" style="width: 250px; height: 57px"></Column>
+        <TreeTable :value="nodes" scrollable scrollHeight="300px">
+            <Column field="name" header="Name" expander frozen style="min-width: 250px" class="font-bold"></Column>
+            <Column field="size" header="Size" style="min-width: 200px"></Column>
+            <Column field="type" header="Type 2" style="min-width: 200px"></Column>
+            <Column field="size" header="Size 2" style="min-width: 200px"></Column>
+            <Column field="type" header="Type 3" style="min-width: 200px"></Column>
+            <Column field="size" header="Size 3" style="min-width: 200px"></Column>
         </TreeTable>
     </div>
 </template>
diff --git a/doc/treetable/scroll/HorizontalScrollDoc.vue b/doc/treetable/scroll/HorizontalScrollDoc.vue
index cdbd431fb..23b710777 100644
--- a/doc/treetable/scroll/HorizontalScrollDoc.vue
+++ b/doc/treetable/scroll/HorizontalScrollDoc.vue
@@ -1,16 +1,16 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Horizontal scrolling is enabled when the total width of columns exceeds table width.</p>
+        <p>Horizontal scrollbar is displayed when table width exceeds the parent width.</p>
     </DocSectionText>
     <DeferredDemo @load="loadDemoData">
         <div class="card">
-            <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>
-                <Column field="size" header="Size 2" style="width: 250px"></Column>
-                <Column field="type" header="Type 3" style="width: 250px"></Column>
-                <Column field="size" header="Size 3" style="width: 250px"></Column>
+            <TreeTable :value="nodes" scrollable scrollHeight="300px">
+                <Column field="name" header="Name" expander style="min-width: 250px"></Column>
+                <Column field="size" header="Size" style="min-width: 200px"></Column>
+                <Column field="type" header="Type 2" style="min-width: 200px"></Column>
+                <Column field="size" header="Size 2" style="min-width: 200px"></Column>
+                <Column field="type" header="Type 3" style="min-width: 200px"></Column>
+                <Column field="size" header="Size 3" style="min-width: 200px"></Column>
             </TreeTable>
         </div>
     </DeferredDemo>
@@ -26,25 +26,25 @@ export default {
             nodes: null,
             code: {
                 basic: `
-<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>
-    <Column field="size" header="Size 2" style="width: 250px"></Column>
-    <Column field="type" header="Type 3" style="width: 250px"></Column>
-    <Column field="size" header="Size 3" style="width: 250px"></Column>
+<TreeTable :value="nodes" scrollable scrollHeight="300px">
+    <Column field="name" header="Name" expander style="min-width: 250px"></Column>
+    <Column field="size" header="Size" style="min-width: 200px"></Column>
+    <Column field="type" header="Type 2" style="min-width: 200px"></Column>
+    <Column field="size" header="Size 2" style="min-width: 200px"></Column>
+    <Column field="type" header="Type 3" style="min-width: 200px"></Column>
+    <Column field="size" header="Size 3" style="min-width: 200px"></Column>
 </TreeTable>
 `,
                 options: `
 <template>
     <div class="card">
-        <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>
-            <Column field="size" header="Size 2" style="width: 250px"></Column>
-            <Column field="type" header="Type 3" style="width: 250px"></Column>
-            <Column field="size" header="Size 3" style="width: 250px"></Column>
+        <TreeTable :value="nodes" scrollable scrollHeight="300px">
+            <Column field="name" header="Name" expander style="min-width: 250px"></Column>
+            <Column field="size" header="Size" style="min-width: 200px"></Column>
+            <Column field="type" header="Type 2" style="min-width: 200px"></Column>
+            <Column field="size" header="Size 2" style="min-width: 200px"></Column>
+            <Column field="type" header="Type 3" style="min-width: 200px"></Column>
+            <Column field="size" header="Size 3" style="min-width: 200px"></Column>
         </TreeTable>
     </div>
 </template>
@@ -67,13 +67,13 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <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>
-            <Column field="size" header="Size 2" style="width: 250px"></Column>
-            <Column field="type" header="Type 3" style="width: 250px"></Column>
-            <Column field="size" header="Size 3" style="width: 250px"></Column>
+        <TreeTable :value="nodes" scrollable scrollHeight="300px">
+            <Column field="name" header="Name" expander style="min-width: 250px"></Column>
+            <Column field="size" header="Size" style="min-width: 200px"></Column>
+            <Column field="type" header="Type 2" style="min-width: 200px"></Column>
+            <Column field="size" header="Size 2" style="min-width: 200px"></Column>
+            <Column field="type" header="Type 3" style="min-width: 200px"></Column>
+            <Column field="size" header="Size 3" style="min-width: 200px"></Column>
         </TreeTable>
     </div>
 </template>
diff --git a/doc/treetable/scroll/VerticalScrollDoc.vue b/doc/treetable/scroll/VerticalScrollDoc.vue
index 361af26ff..f814eeac8 100644
--- a/doc/treetable/scroll/VerticalScrollDoc.vue
+++ b/doc/treetable/scroll/VerticalScrollDoc.vue
@@ -4,10 +4,10 @@
     </DocSectionText>
     <DeferredDemo @load="loadDemoData">
         <div class="card">
-            <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>
+            <TreeTable :value="nodes" scrollable scrollHeight="270px" tableStyle="min-width: 50rem">
+                <Column field="name" header="Name" expander style="width: 34%"></Column>
+                <Column field="size" header="Size" style="width: 33%"></Column>
+                <Column field="type" header="Type" style="width: 33%"></Column>
             </TreeTable>
         </div>
     </DeferredDemo>
@@ -23,19 +23,19 @@ export default {
             nodes: null,
             code: {
                 basic: `
-<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>
+<TreeTable :value="nodes" scrollable scrollHeight="270px" tableStyle="min-width: 50rem">
+    <Column field="name" header="Name" expander style="width: 34%"></Column>
+    <Column field="size" header="Size" style="width: 33%"></Column>
+    <Column field="type" header="Type" style="width: 33%"></Column>
 </TreeTable>
 `,
                 options: `
 <template>
     <div class="card">
-        <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>
+        <TreeTable :value="nodes" scrollable scrollHeight="270px" tableStyle="min-width: 50rem">
+            <Column field="name" header="Name" expander style="width: 34%"></Column>
+            <Column field="size" header="Size" style="width: 33%"></Column>
+            <Column field="type" header="Type" style="width: 33%"></Column>
         </TreeTable>
     </div>
 </template>
@@ -58,10 +58,10 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <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>
+        <TreeTable :value="nodes" scrollable scrollHeight="270px" tableStyle="min-width: 50rem">
+            <Column field="name" header="Name" expander style="width: 34%"></Column>
+            <Column field="size" header="Size" style="width: 33%"></Column>
+            <Column field="type" header="Type" style="width: 33%"></Column>
         </TreeTable>
     </div>
 </template>
diff --git a/doc/treetable/selection/CheckboxRowSelectionDoc.vue b/doc/treetable/selection/CheckboxRowSelectionDoc.vue
index 3bdd2e77e..51b54eb2c 100644
--- a/doc/treetable/selection/CheckboxRowSelectionDoc.vue
+++ b/doc/treetable/selection/CheckboxRowSelectionDoc.vue
@@ -8,10 +8,10 @@
     <DocSectionCode :code="introCode" hideToggleCode importCode hideStackBlitz />
     <DeferredDemo @load="loadDemoData">
         <div class="card">
-            <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="checkbox">
-                <Column field="name" header="Name" expander></Column>
-                <Column field="size" header="Size"></Column>
-                <Column field="type" header="Type"></Column>
+            <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="checkbox" tableStyle="min-width: 50rem">
+                <Column field="name" header="Name" expander style="width: 34%"></Column>
+                <Column field="size" header="Size" style="width: 33%"></Column>
+                <Column field="type" header="Type" style="width: 33%"></Column>
             </TreeTable>
         </div>
     </DeferredDemo>
@@ -38,19 +38,19 @@ export default {
             },
             code: {
                 basic: `
-<TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="checkbox">
-    <Column field="name" header="Name" expander></Column>
-    <Column field="size" header="Size"></Column>
-    <Column field="type" header="Type"></Column>
+<TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="checkbox" tableStyle="min-width: 50rem">
+    <Column field="name" header="Name" expander style="width: 34%"></Column>
+    <Column field="size" header="Size" style="width: 33%"></Column>
+    <Column field="type" header="Type" style="width: 33%"></Column>
 </TreeTable>
 `,
                 options: `
 <template>
     <div class="card">
-        <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="checkbox">
-            <Column field="name" header="Name" expander></Column>
-            <Column field="size" header="Size"></Column>
-            <Column field="type" header="Type"></Column>
+        <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="checkbox" tableStyle="min-width: 50rem">
+            <Column field="name" header="Name" expander style="width: 34%"></Column>
+            <Column field="size" header="Size" style="width: 33%"></Column>
+            <Column field="type" header="Type" style="width: 33%"></Column>
         </TreeTable>
     </div>
 </template>
@@ -74,10 +74,10 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="checkbox">
-            <Column field="name" header="Name" expander></Column>
-            <Column field="size" header="Size"></Column>
-            <Column field="type" header="Type"></Column>
+        <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="checkbox" tableStyle="min-width: 50rem">
+            <Column field="name" header="Name" expander style="width: 34%"></Column>
+            <Column field="size" header="Size" style="width: 33%"></Column>
+            <Column field="type" header="Type" style="width: 33%"></Column>
         </TreeTable>
     </div>
 </template>
diff --git a/doc/treetable/selection/MultipleRowsSelectionDoc.vue b/doc/treetable/selection/MultipleRowsSelectionDoc.vue
index ece1bc0b1..9f54d30c9 100644
--- a/doc/treetable/selection/MultipleRowsSelectionDoc.vue
+++ b/doc/treetable/selection/MultipleRowsSelectionDoc.vue
@@ -12,10 +12,10 @@
                 <ToggleSwitch v-model="metaKey" inputId="input-metakey" />
                 <label for="input-metakey">MetaKey</label>
             </div>
-            <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="multiple" :metaKeySelection="metaKey">
-                <Column field="name" header="Name" expander></Column>
-                <Column field="size" header="Size"></Column>
-                <Column field="type" header="Type"></Column>
+            <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="multiple" :metaKeySelection="metaKey" tableStyle="min-width: 50rem">
+                <Column field="name" header="Name" expander style="width: 34%"></Column>
+                <Column field="size" header="Size" style="width: 33%"></Column>
+                <Column field="type" header="Type" style="width: 33%"></Column>
             </TreeTable>
         </div>
     </DeferredDemo>
@@ -35,10 +35,10 @@ export default {
                 basic: `
 <ToggleSwitch v-model="metaKey" inputId="input-metakey" />
 
-<TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="multiple" :metaKeySelection="metaKey">
-    <Column field="name" header="Name" expander></Column>
-    <Column field="size" header="Size"></Column>
-    <Column field="type" header="Type"></Column>
+<TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="multiple" :metaKeySelection="metaKey" tableStyle="min-width: 50rem">
+    <Column field="name" header="Name" expander style="width: 34%"></Column>
+    <Column field="size" header="Size" style="width: 33%"></Column>
+    <Column field="type" header="Type" style="width: 33%"></Column>
 </TreeTable>
 `,
                 options: `
@@ -48,10 +48,10 @@ export default {
             <ToggleSwitch v-model="metaKey" inputId="input-metakey" />
             <label for="input-metakey">MetaKey</label>
         </div>
-        <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="multiple" :metaKeySelection="metaKey">
-            <Column field="name" header="Name" expander></Column>
-            <Column field="size" header="Size"></Column>
-            <Column field="type" header="Type"></Column>
+        <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="multiple" :metaKeySelection="metaKey" tableStyle="min-width: 50rem">
+            <Column field="name" header="Name" expander style="width: 34%"></Column>
+            <Column field="size" header="Size" style="width: 33%"></Column>
+            <Column field="type" header="Type" style="width: 33%"></Column>
         </TreeTable>
     </div>
 </template>
@@ -80,10 +80,10 @@ export default {
             <ToggleSwitch v-model="metaKey" inputId="input-metakey" />
             <label for="input-metakey">MetaKey</label>
         </div>
-        <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="multiple" :metaKeySelection="metaKey">
-            <Column field="name" header="Name" expander></Column>
-            <Column field="size" header="Size"></Column>
-            <Column field="type" header="Type"></Column>
+        <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="multiple" :metaKeySelection="metaKey" tableStyle="min-width: 50rem">
+            <Column field="name" header="Name" expander style="width: 34%"></Column>
+            <Column field="size" header="Size" style="width: 33%"></Column>
+            <Column field="type" header="Type" style="width: 33%"></Column>
         </TreeTable>
     </div>
 </template>
diff --git a/doc/treetable/selection/RowSelectionEventsDoc.vue b/doc/treetable/selection/RowSelectionEventsDoc.vue
index 031defc30..e3b131eb8 100644
--- a/doc/treetable/selection/RowSelectionEventsDoc.vue
+++ b/doc/treetable/selection/RowSelectionEventsDoc.vue
@@ -4,10 +4,10 @@
     </DocSectionText>
     <DeferredDemo @load="loadDemoData">
         <div class="card">
-            <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" @nodeSelect="onNodeSelect" @nodeUnselect="onNodeUnselect" :metaKeySelection="false">
-                <Column field="name" header="Name" expander></Column>
-                <Column field="size" header="Size"></Column>
-                <Column field="type" header="Type"></Column>
+            <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" @nodeSelect="onNodeSelect" @nodeUnselect="onNodeUnselect" :metaKeySelection="false" tableStyle="min-width: 50rem">
+                <Column field="name" header="Name" expander style="width: 34%"></Column>
+                <Column field="size" header="Size" style="width: 33%"></Column>
+                <Column field="type" header="Type" style="width: 33%"></Column>
             </TreeTable>
         </div>
     </DeferredDemo>
@@ -24,21 +24,19 @@ export default {
             selectedKey: null,
             code: {
                 basic: `
-<TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" :metaKeySelection="false"
-    @nodeSelect="onNodeSelect" @nodeUnselect="onNodeUnselect">
-    <Column field="name" header="Name" expander></Column>
-    <Column field="size" header="Size"></Column>
-    <Column field="type" header="Type"></Column>
+<TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" @nodeSelect="onNodeSelect" @nodeUnselect="onNodeUnselect" :metaKeySelection="false" tableStyle="min-width: 50rem">
+    <Column field="name" header="Name" expander style="width: 34%"></Column>
+    <Column field="size" header="Size" style="width: 33%"></Column>
+    <Column field="type" header="Type" style="width: 33%"></Column>
 </TreeTable>
 `,
                 options: `
 <template>
     <div class="card">
-        <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" :metaKeySelection="false"
-            @nodeSelect="onNodeSelect" @nodeUnselect="onNodeUnselect">
-            <Column field="name" header="Name" expander></Column>
-            <Column field="size" header="Size"></Column>
-            <Column field="type" header="Type"></Column>
+        <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" @nodeSelect="onNodeSelect" @nodeUnselect="onNodeUnselect" :metaKeySelection="false" tableStyle="min-width: 50rem">
+            <Column field="name" header="Name" expander style="width: 34%"></Column>
+            <Column field="size" header="Size" style="width: 33%"></Column>
+            <Column field="type" header="Type" style="width: 33%"></Column>
         </TreeTable>
         <Toast />
     </div>
@@ -71,11 +69,10 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" :metaKeySelection="false"
-            @nodeSelect="onNodeSelect" @nodeUnselect="onNodeUnselect">
-            <Column field="name" header="Name" expander></Column>
-            <Column field="size" header="Size"></Column>
-            <Column field="type" header="Type"></Column>
+        <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" @nodeSelect="onNodeSelect" @nodeUnselect="onNodeUnselect" :metaKeySelection="false" tableStyle="min-width: 50rem">
+                <Column field="name" header="Name" expander style="width: 34%"></Column>
+            <Column field="size" header="Size" style="width: 33%"></Column>
+            <Column field="type" header="Type" style="width: 33%"></Column>
         </TreeTable>
         <Toast />
     </div>
diff --git a/doc/treetable/selection/SingleRowSelectionDoc.vue b/doc/treetable/selection/SingleRowSelectionDoc.vue
index fb78fa71d..0c7c3d93b 100644
--- a/doc/treetable/selection/SingleRowSelectionDoc.vue
+++ b/doc/treetable/selection/SingleRowSelectionDoc.vue
@@ -12,10 +12,10 @@
                 <ToggleSwitch v-model="metaKey" inputId="input-metakey" />
                 <label for="input-metakey">MetaKey</label>
             </div>
-            <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" :metaKeySelection="metaKey">
-                <Column field="name" header="Name" expander></Column>
-                <Column field="size" header="Size"></Column>
-                <Column field="type" header="Type"></Column>
+            <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" :metaKeySelection="metaKey" tableStyle="min-width: 50rem">
+                <Column field="name" header="Name" expander style="width: 34%"></Column>
+                <Column field="size" header="Size" style="width: 33%"></Column>
+                <Column field="type" header="Type" style="width: 33%"></Column>
             </TreeTable>
         </div>
     </DeferredDemo>
@@ -35,10 +35,10 @@ export default {
                 basic: `
 <ToggleSwitch v-model="metaKey" inputId="input-metakey" />
 
-<TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" :metaKeySelection="metaKey">
-    <Column field="name" header="Name" expander></Column>
-    <Column field="size" header="Size"></Column>
-    <Column field="type" header="Type"></Column>
+<TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" :metaKeySelection="metaKey" tableStyle="min-width: 50rem">
+    <Column field="name" header="Name" expander style="width: 34%"></Column>
+    <Column field="size" header="Size" style="width: 33%"></Column>
+    <Column field="type" header="Type" style="width: 33%"></Column>
 </TreeTable>
 `,
                 options: `
@@ -48,10 +48,10 @@ export default {
             <ToggleSwitch v-model="metaKey" inputId="input-metakey" />
             <label for="input-metakey">MetaKey</label>
         </div>
-        <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" :metaKeySelection="metaKey">
-            <Column field="name" header="Name" expander></Column>
-            <Column field="size" header="Size"></Column>
-            <Column field="type" header="Type"></Column>
+        <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" :metaKeySelection="metaKey" tableStyle="min-width: 50rem">
+            <Column field="name" header="Name" expander style="width: 34%"></Column>
+            <Column field="size" header="Size" style="width: 33%"></Column>
+            <Column field="type" header="Type" style="width: 33%"></Column>
         </TreeTable>
     </div>
 </template>
@@ -80,10 +80,10 @@ export default {
             <ToggleSwitch v-model="metaKey" inputId="input-metakey" />
             <label for="input-metakey">MetaKey</label>
         </div>
-        <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" :metaKeySelection="metaKey">
-            <Column field="name" header="Name" expander></Column>
-            <Column field="size" header="Size"></Column>
-            <Column field="type" header="Type"></Column>
+        <TreeTable v-model:selectionKeys="selectedKey" :value="nodes" selectionMode="single" :metaKeySelection="metaKey" tableStyle="min-width: 50rem">
+            <Column field="name" header="Name" expander style="width: 34%"></Column>
+            <Column field="size" header="Size" style="width: 33%"></Column>
+            <Column field="type" header="Type" style="width: 33%"></Column>
         </TreeTable>
     </div>
 </template>
diff --git a/doc/treetable/sort/MultipleColumnsDoc.vue b/doc/treetable/sort/MultipleColumnsDoc.vue
index 9d3855bcd..a4d43fbb2 100644
--- a/doc/treetable/sort/MultipleColumnsDoc.vue
+++ b/doc/treetable/sort/MultipleColumnsDoc.vue
@@ -4,10 +4,10 @@
     </DocSectionText>
     <DeferredDemo @load="loadDemoData">
         <div class="card">
-            <TreeTable :value="nodes" sortMode="multiple">
-                <Column field="name" header="Name" sortable expander></Column>
-                <Column field="size" header="Size" sortable></Column>
-                <Column field="type" header="Type" sortable></Column>
+            <TreeTable :value="nodes" sortMode="multiple" tableStyle="min-width: 50rem">
+                <Column field="name" header="Name" sortable expander style="width: 34%"></Column>
+                <Column field="size" header="Size" sortable style="width: 33%"></Column>
+                <Column field="type" header="Type" sortable style="width: 33%"></Column>
             </TreeTable>
         </div>
     </DeferredDemo>
@@ -23,19 +23,19 @@ export default {
             nodes: null,
             code: {
                 basic: `
-<TreeTable :value="nodes" sortMode="multiple">
-    <Column field="name" header="Name" sortable expander></Column>
-    <Column field="size" header="Size" sortable></Column>
-    <Column field="type" header="Type" sortable></Column>
+<TreeTable :value="nodes" sortMode="multiple" tableStyle="min-width: 50rem">
+    <Column field="name" header="Name" sortable expander style="width: 34%"></Column>
+    <Column field="size" header="Size" sortable style="width: 33%"></Column>
+    <Column field="type" header="Type" sortable style="width: 33%"></Column>
 </TreeTable>
 `,
                 options: `
 <template>
     <div class="card">
-        <TreeTable :value="nodes" sortMode="multiple">
-            <Column field="name" header="Name" sortable expander></Column>
-            <Column field="size" header="Size" sortable></Column>
-            <Column field="type" header="Type" sortable></Column>
+        <TreeTable :value="nodes" sortMode="multiple" tableStyle="min-width: 50rem">
+            <Column field="name" header="Name" sortable expander style="width: 34%"></Column>
+            <Column field="size" header="Size" sortable style="width: 33%"></Column>
+            <Column field="type" header="Type" sortable style="width: 33%"></Column>
         </TreeTable>
     </div>
 </template>
@@ -58,10 +58,10 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <TreeTable :value="nodes" sortMode="multiple">
-            <Column field="name" header="Name" sortable expander></Column>
-            <Column field="size" header="Size" sortable></Column>
-            <Column field="type" header="Type" sortable></Column>
+        <TreeTable :value="nodes" sortMode="multiple" tableStyle="min-width: 50rem">
+            <Column field="name" header="Name" sortable expander style="width: 34%"></Column>
+            <Column field="size" header="Size" sortable style="width: 33%"></Column>
+            <Column field="type" header="Type" sortable style="width: 33%"></Column>
         </TreeTable>
     </div>
 </template>
diff --git a/doc/treetable/sort/RemovableSortDoc.vue b/doc/treetable/sort/RemovableSortDoc.vue
index 70d5846ec..cf789134a 100644
--- a/doc/treetable/sort/RemovableSortDoc.vue
+++ b/doc/treetable/sort/RemovableSortDoc.vue
@@ -4,10 +4,10 @@
     </DocSectionText>
     <DeferredDemo @load="loadDemoData">
         <div class="card">
-            <TreeTable :value="nodes" sortMode="multiple" removableSort>
-                <Column field="name" header="Name" sortable expander></Column>
-                <Column field="size" header="Size" sortable></Column>
-                <Column field="type" header="Type" sortable></Column>
+            <TreeTable :value="nodes" sortMode="multiple" removableSort tableStyle="min-width: 50rem">
+                <Column field="name" header="Name" sortable expander style="width: 34%"></Column>
+                <Column field="size" header="Size" sortable style="width: 33%"></Column>
+                <Column field="type" header="Type" sortable style="width: 33%"></Column>
             </TreeTable>
         </div>
     </DeferredDemo>
@@ -23,19 +23,19 @@ export default {
             nodes: null,
             code: {
                 basic: `
-<TreeTable :value="nodes" sortMode="multiple" removableSort>
-    <Column field="name" header="Name" sortable expander></Column>
-    <Column field="size" header="Size" sortable></Column>
-    <Column field="type" header="Type" sortable></Column>
+<TreeTable :value="nodes" sortMode="multiple" removableSort tableStyle="min-width: 50rem">
+    <Column field="name" header="Name" sortable expander style="width: 34%"></Column>
+    <Column field="size" header="Size" sortable style="width: 33%"></Column>
+    <Column field="type" header="Type" sortable style="width: 33%"></Column>
 </TreeTable>
 `,
                 options: `
 <template>
     <div class="card">
-        <TreeTable :value="nodes" sortMode="multiple" removableSort>
-            <Column field="name" header="Name" sortable expander></Column>
-            <Column field="size" header="Size" sortable></Column>
-            <Column field="type" header="Type" sortable></Column>
+        <TreeTable :value="nodes" sortMode="multiple" removableSort tableStyle="min-width: 50rem">
+            <Column field="name" header="Name" sortable expander style="width: 34%"></Column>
+            <Column field="size" header="Size" sortable style="width: 33%"></Column>
+            <Column field="type" header="Type" sortable style="width: 33%"></Column>
         </TreeTable>
     </div>
 </template>
@@ -58,10 +58,10 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <TreeTable :value="nodes" sortMode="multiple" removableSort>
-            <Column field="name" header="Name" sortable expander></Column>
-            <Column field="size" header="Size" sortable></Column>
-            <Column field="type" header="Type" sortable></Column>
+        <TreeTable :value="nodes" sortMode="multiple" removableSort tableStyle="min-width: 50rem">
+            <Column field="name" header="Name" sortable expander style="width: 34%"></Column>
+            <Column field="size" header="Size" sortable style="width: 33%"></Column>
+            <Column field="type" header="Type" sortable style="width: 33%"></Column>
         </TreeTable>
     </div>
 </template>
diff --git a/doc/treetable/sort/SingleColumnDoc.vue b/doc/treetable/sort/SingleColumnDoc.vue
index 3278b0075..df6f9353e 100644
--- a/doc/treetable/sort/SingleColumnDoc.vue
+++ b/doc/treetable/sort/SingleColumnDoc.vue
@@ -4,10 +4,10 @@
     </DocSectionText>
     <DeferredDemo @load="loadDemoData">
         <div class="card">
-            <TreeTable :value="nodes">
-                <Column field="name" header="Name" sortable expander></Column>
-                <Column field="size" header="Size" sortable></Column>
-                <Column field="type" header="Type" sortable></Column>
+            <TreeTable :value="nodes" tableStyle="min-width: 50rem">
+                <Column field="name" header="Name" sortable expander style="width: 34%"></Column>
+                <Column field="size" header="Size" sortable style="width: 33%"></Column>
+                <Column field="type" header="Type" sortable style="width: 33%"></Column>
             </TreeTable>
         </div>
     </DeferredDemo>
@@ -23,19 +23,19 @@ export default {
             nodes: null,
             code: {
                 basic: `
-<TreeTable :value="nodes">
-    <Column field="name" header="Name" sortable expander></Column>
-    <Column field="size" header="Size" sortable></Column>
-    <Column field="type" header="Type" sortable></Column>
+<TreeTable :value="nodes" tableStyle="min-width: 50rem">
+    <Column field="name" header="Name" sortable expander style="width: 34%"></Column>
+    <Column field="size" header="Size" sortable style="width: 33%"></Column>
+    <Column field="type" header="Type" sortable style="width: 33%"></Column>
 </TreeTable>
 `,
                 options: `
 <template>
     <div class="card">
-        <TreeTable :value="nodes">
-            <Column field="name" header="Name" sortable expander></Column>
-            <Column field="size" header="Size" sortable></Column>
-            <Column field="type" header="Type" sortable></Column>
+        <TreeTable :value="nodes" tableStyle="min-width: 50rem">
+            <Column field="name" header="Name" sortable expander style="width: 34%"></Column>
+            <Column field="size" header="Size" sortable style="width: 33%"></Column>
+            <Column field="type" header="Type" sortable style="width: 33%"></Column>
         </TreeTable>
     </div>
 </template>
@@ -58,10 +58,10 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <TreeTable :value="nodes">
-            <Column field="name" header="Name" sortable expander></Column>
-            <Column field="size" header="Size" sortable></Column>
-            <Column field="type" header="Type" sortable></Column>
+        <TreeTable :value="nodes" tableStyle="min-width: 50rem">
+            <Column field="name" header="Name" sortable expander style="width: 34%"></Column>
+            <Column field="size" header="Size" sortable style="width: 33%"></Column>
+            <Column field="type" header="Type" sortable style="width: 33%"></Column>
         </TreeTable>
     </div>
 </template>
diff --git a/pages/treetable/index.vue b/pages/treetable/index.vue
index e63bf2db9..6ea6f5070 100755
--- a/pages/treetable/index.vue
+++ b/pages/treetable/index.vue
@@ -19,7 +19,6 @@ import DynamicColumnsDoc from '@/doc/treetable/DynamicColumnsDoc.vue';
 import FilterDoc from '@/doc/treetable/FilterDoc.vue';
 import ImportDoc from '@/doc/treetable/ImportDoc.vue';
 import LazyLoadDoc from '@/doc/treetable/LazyLoadDoc.vue';
-import ResponsiveDoc from '@/doc/treetable/ResponsiveDoc.vue';
 import SizeDoc from '@/doc/treetable/SizeDoc.vue';
 import TemplateDoc from '@/doc/treetable/TemplateDoc.vue';
 import PaginatorBasicDoc from '@/doc/treetable/paginator/PaginatorBasicDoc.vue';
@@ -194,11 +193,6 @@ export default {
                     label: 'Column Toggle',
                     component: ColumnToggleDoc
                 },
-                {
-                    id: 'responsive',
-                    label: 'Responsive',
-                    component: ResponsiveDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',