Fixed #2115 - New v2 TreeTable showGridlines property

primefaces · Feb 4, 2022 · f9c0121 · f9c0121
1 parent 3926e2f
commit f9c0121
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 3 deletions.
diff --git a/api-generator/components/treetable.js b/api-generator/components/treetable.js
@@ -190,6 +190,12 @@ const TreeTableProps = [
         type: "number",
         default: "1",
         description: "Indentation factor as rem value for children nodes. Defaults to 1rem."
+    },
+    {
+        name: "showGridlines",
+        type: "boolean",
+        default: "false",
+        description: "Whether to show grid lines between cells."
     }
 ];
 

diff --git a/src/components/treetable/TreeTable.d.ts b/src/components/treetable/TreeTable.d.ts
@@ -35,6 +35,7 @@ declare class TreeTable extends Vue {
     resizableColumns?: boolean;
     columnResizeMode?: string;
     indentation?: number;
+    showGridlines?: boolean;
     $emit(eventName: 'page', event: Event): this;
     $emit(eventName: 'sort', event: Event): this;
     $emit(eventName: 'filter', event: Event): this;

diff --git a/src/components/treetable/TreeTable.vue b/src/components/treetable/TreeTable.vue
@@ -213,6 +213,10 @@ export default {
         indentation: {
             type: Number,
             default: 1
+        },
+        showGridlines: {
+            type: Boolean,
+            default: false
         }
     },
     documentColumnResizeListener: null,
@@ -753,7 +757,8 @@ export default {
                 'p-treetable-hoverable-rows': (this.rowHover || this.rowSelectionMode),
                 'p-treetable-auto-layout': this.autoLayout,
                 'p-treetable-resizable': this.resizableColumns,
-                'p-treetable-resizable-fit': this.resizableColumns && this.columnResizeMode === 'fit'
+                'p-treetable-resizable-fit': this.resizableColumns && this.columnResizeMode === 'fit',
+                'p-treetable-gridlines': this.showGridlines
             }];
         },
         columns() {

diff --git a/src/views/treetable/TreeTableColResizeDemo.vue b/src/views/treetable/TreeTableColResizeDemo.vue
@@ -11,7 +11,7 @@
         <div class="content-section implementation">
             <div class="card">
                 <h5>Fit Mode</h5>
-                <TreeTable :value="nodes" :resizableColumns="true" columnResizeMode="fit" class="p-treetable-gridlines">
+                <TreeTable :value="nodes" :resizableColumns="true" columnResizeMode="fit" showGridlines>
                     <Column field="name" header="Name" :expander="true"></Column>
                     <Column field="size" header="Size"></Column>
                     <Column field="type" header="Type"></Column>
@@ -20,7 +20,7 @@
 
             <div class="card">
                 <h5>Expand Mode</h5>
-                <TreeTable :value="nodes" :resizableColumns="true" columnResizeMode="expand" class="p-treetable-gridlines">
+                <TreeTable :value="nodes" :resizableColumns="true" columnResizeMode="expand" showGridlines>
                     <Column field="name" header="Name" :expander="true"></Column>
                     <Column field="size" header="Size"></Column>
                     <Column field="type" header="Type"></Column>

diff --git a/src/views/treetable/TreeTableDoc.vue b/src/views/treetable/TreeTableDoc.vue
@@ -1455,6 +1455,12 @@ export default {
                                 <td>number</td>
                                 <td>1</td>
                                 <td>Indentation factor as rem value for children nodes. Defaults to 1rem.</td>
+                            </tr>
+                            <tr>
+                                <td>showGridlines</td>
+                                <td>boolean</td>
+                                <td>false</td>
+                                <td>Whether to show grid lines between cells.</td>
                             </tr>
 						</tbody>
 					</table>