Fixed #495 - Add indentation property to TreeTable

src/components/treetable/TreeTable.d.ts

@@ -34,6 +34,7 @@ export declare class TreeTable extends Vue {
     filterLocale?: string;
     resizableColumns?: boolean;
     columnResizeMode?: string;
+    indentation?: number;
     $emit(eventName: 'page', event: Event): this;
     $emit(eventName: 'sort', event: Event): this;
     $emit(eventName: 'filter', event: Event): this;

src/components/treetable/TreeTable.vue

@@ -47,7 +47,7 @@
                 <tbody class="p-treetable-tbody">
                     <template v-if="!empty">
                         <TTRow v-for="node of dataToRender" :key="node.key" :columns="columns" :node="node" :level="0"
-                        :expandedKeys="d_expandedKeys" @node-toggle="onNodeToggle"
+                        :expandedKeys="d_expandedKeys" @node-toggle="onNodeToggle" :indentation="indentation"
                         :selectionMode="selectionMode" :selectionKeys="selectionKeys" @node-click="onNodeClick" @checkbox-change="onCheckboxChange"></TTRow>
                     </template>
                     <tr v-else class="p-treetable-emptymessage">
@@ -206,6 +206,10 @@ export default {
         columnResizeMode: {
             type: String,
             default: 'fit'
+        },
+        indentation: {
+            type: Number,
+            default: 1
         }
     },
     documentColumnResizeListener: null,

src/components/treetable/TreeTableRow.vue

@@ -18,7 +18,7 @@
     </tr>
     <template v-if="expanded && node.children && node.children.length">
         <sub-ttnode v-for="childNode of node.children" :key="childNode.key" :columns="columns" :node="childNode" :parentNode="node"  :level="level + 1"
-                        :expandedKeys="expandedKeys" :selectionMode="selectionMode" :selectionKeys="selectionKeys" 
+                        :expandedKeys="expandedKeys" :selectionMode="selectionMode" :selectionKeys="selectionKeys" :indentation="indentation"
                         @node-toggle="$emit('node-toggle', $event)" @node-click="$emit('node-click', $event)" @checkbox-change="onCheckboxChange"></sub-ttnode>
     </template>
 </template>
@@ -59,6 +59,10 @@ export default {
         level: {
             type: Number,
             default: 0
+        },
+        indentation: {
+            type: Number,
+            default: 1
         }
     },
     data() {
@@ -261,7 +265,7 @@ export default {
         },
         togglerStyle() {
             return {
-                marginLeft: this.level * 16 + 'px',
+                marginLeft: this.level * this.indentation + 'rem',
                 visibility: this.leaf ? 'hidden' : 'visible'
             };
         },

src/views/treetable/TreeTableDoc.vue

@@ -1485,6 +1485,12 @@ export default {
                                 <td>string</td>
                                 <td>fit</td>
                                 <td>Defines whether the overall table width should change on column resize, <br/> valid values are "fit" and "expand".</td>
+                            </tr>
+                            <tr>
+                                <td>indentation</td>
+                                <td>number</td>
+                                <td>1</td>
+                                <td>Indentation factor as rem value for children nodes. Defaults to 1rem.</td>
                             </tr>
 						</tbody>
 					</table>