Merge pull request #14025 from siddhareddy/treetable-size-gridlines-docs

Treetable: size,gridlines documentation
primefaces · Jan 4, 2024 · 0bb5a84 · 0bb5a84
2 parents 2b38859 + 57b32fc
commit 0bb5a84
Show file tree

Hide file tree

Showing 4 changed files with 278 additions and 1 deletion.
diff --git a/src/app/showcase/doc/treetable/gridlinesdoc.ts b/src/app/showcase/doc/treetable/gridlinesdoc.ts
@@ -0,0 +1,118 @@
+import { Component, Input, OnInit, ViewChild } from '@angular/core';
+import { TreeNode } from 'primeng/api';
+import { Code } from '../../domain/code';
+import { AppDocSectionTextComponent } from '../../layout/doc/docsectiontext/app.docsectiontext.component';
+import { NodeService } from '../../service/nodeservice';
+
+@Component({
+    selector: 'gridlines-doc',
+    template: ` <section class="py-4">
+        <app-docsectiontext [title]="title" [id]="id" [level]="3" #docsectiontext>
+        <p>Adding <i>p-treetable-gridlines</i> class displays grid lines.</p>
+        </app-docsectiontext>
+        <div class="card">
+            <p-treeTable [value]="files" [scrollable]="true" [tableStyle]="{ 'min-width': '50rem' }" styleClass="p-treetable-gridlines">
+                <ng-template pTemplate="header">
+                    <tr>
+                        <th>Name</th>
+                        <th>Size</th>
+                        <th>Type</th>
+                    </tr>
+                </ng-template>
+                <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
+                    <tr [ttRow]="rowNode">
+                        <td>
+                            <p-treeTableToggler [rowNode]="rowNode"></p-treeTableToggler>
+                            {{ rowData.name }}
+                        </td>
+                        <td>{{ rowData.size }}</td>
+                        <td>{{ rowData.type }}</td>
+                    </tr>
+                </ng-template>
+            </p-treeTable>
+        </div>
+        <app-code [code]="code" selector="tree-table-basic-demo"></app-code>
+    </section>`
+})
+export class GridlinesDoc implements OnInit {
+    @Input() id: string;
+
+    @Input() title: string;
+
+    @ViewChild('docsectiontext', { static: true }) docsectiontext: AppDocSectionTextComponent;
+
+    files!: TreeNode[];
+
+    constructor(private nodeService: NodeService) {}
+
+    ngOnInit() {
+        this.nodeService.getFilesystem().then((files) => (this.files = files));
+    }
+
+    code: Code = {
+        basic: `
+<p-treeTable [value]="files" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}" styleClass="p-treetable-gridlines">
+    <ng-template pTemplate="header">
+        <tr>
+            <th>Name</th>
+            <th>Size</th>
+            <th>Type</th>
+        </tr>
+    </ng-template>
+    <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
+        <tr [ttRow]="rowNode">
+            <td>
+                <p-treeTableToggler [rowNode]="rowNode"></p-treeTableToggler>
+                {{ rowData.name }}
+            </td>
+            <td>{{ rowData.size }}</td>
+            <td>{{ rowData.type }}</td>
+        </tr>
+    </ng-template>
+</p-treeTable>`,
+
+        html: `
+<div class="card">
+    <p-treeTable [value]="files" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}">
+        <ng-template pTemplate="header">
+            <tr>
+                <th>Name</th>
+                <th>Size</th>
+                <th>Type</th>
+            </tr>
+        </ng-template>
+        <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
+            <tr [ttRow]="rowNode">
+                <td>
+                    <p-treeTableToggler [rowNode]="rowNode"></p-treeTableToggler>
+                    {{ rowData.name }}
+                </td>
+                <td>{{ rowData.size }}</td>
+                <td>{{ rowData.type }}</td>
+            </tr>
+        </ng-template>
+    </p-treeTable>
+</div>`,
+
+        typescript: `
+import { Component, OnInit } from '@angular/core';
+import { TreeNode } from 'primeng/api';
+import { NodeService } from '../../service/nodeservice';
+
+@Component({
+    selector: 'tree-table-gridlines-demo',
+    templateUrl: './tree-table-gridlines-demo.html'
+})
+export class TreeTableGridlinesDemo implements OnInit {
+    files!: TreeNode[];
+
+    constructor(private nodeService: NodeService) {}
+
+    ngOnInit() {
+        this.nodeService.getFilesystem().then((files) => (this.files = files));
+    }
+}`,
+
+        service: ['NodeService']
+    };
+}
diff --git a/src/app/showcase/doc/treetable/sizedoc.ts b/src/app/showcase/doc/treetable/sizedoc.ts
@@ -0,0 +1,143 @@
+import { Component, Input, OnInit, ViewChild } from '@angular/core';
+import { TreeNode } from 'primeng/api';
+import { Code } from '../../domain/code';
+import { AppDocSectionTextComponent } from '../../layout/doc/docsectiontext/app.docsectiontext.component';
+import { NodeService } from '../../service/nodeservice';
+
+@Component({
+    selector: 'size-doc',
+    template: ` <section class="py-4">
+        <app-docsectiontext [title]="title" [id]="id" [level]="3" #docsectiontext>
+            <p>In addition to a regular treetable, alternatives with alternative sizes are available. Add <i>p-treetable-sm</i> class to reduce the size of treetable or <i>p-treetable-lg</i> to enlarge it. </p>
+        </app-docsectiontext>
+        <div class="card">
+            <div class="flex justify-content-center mb-3">
+                <p-selectButton [options]="sizes" [(ngModel)]="selectedSize" [multiple]="false" optionLabel="name" optionValue="class"></p-selectButton>
+            </div>
+            <p-treeTable [value]="files" [scrollable]="true" [tableStyle]="{ 'min-width': '50rem' }" [styleClass]="selectedSize">
+                <ng-template pTemplate="header">
+                    <tr>
+                        <th>Name</th>
+                        <th>Size</th>
+                        <th>Type</th>
+                    </tr>
+                </ng-template>
+                <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
+                    <tr [ttRow]="rowNode">
+                        <td>
+                            <p-treeTableToggler [rowNode]="rowNode"></p-treeTableToggler>
+                            {{ rowData.name }}
+                        </td>
+                        <td>{{ rowData.size }}</td>
+                        <td>{{ rowData.type }}</td>
+                    </tr>
+                </ng-template>
+            </p-treeTable>
+        </div>
+        <app-code [code]="code" selector="tree-table-basic-demo"></app-code>
+    </section>`
+})
+export class SizeDoc implements OnInit {
+    @Input() id: string;
+
+    @Input() title: string;
+
+    @ViewChild('docsectiontext', { static: true }) docsectiontext: AppDocSectionTextComponent;
+
+    files!: TreeNode[];
+
+    sizes!: any[];
+
+    selectedSize: any = '';
+
+    constructor(private nodeService: NodeService) {}
+
+    ngOnInit() {
+        this.nodeService.getFilesystem().then((files) => (this.files = files));
+
+        this.sizes = [
+            { name: 'Small', class: 'p-treetable-sm' },
+            { name: 'Normal', class: '' },
+            { name: 'Large', class: 'p-treetable-lg' }
+        ];
+    }
+
+    code: Code = {
+        basic: `
+<div class="flex justify-content-center mb-3">
+    <p-selectButton [options]="sizes" [(ngModel)]="selectedSize" [multiple]="false" optionLabel="name" optionValue="class"></p-selectButton>
+</div>
+<p-treeTable [value]="files" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}" [styleClass]="selectedSize">
+    <ng-template pTemplate="header">
+        <tr>
+            <th>Name</th>
+            <th>Size</th>
+            <th>Type</th>
+        </tr>
+    </ng-template>
+    <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
+        <tr [ttRow]="rowNode">
+            <td>
+                <p-treeTableToggler [rowNode]="rowNode"></p-treeTableToggler>
+                {{ rowData.name }}
+            </td>
+            <td>{{ rowData.size }}</td>
+            <td>{{ rowData.type }}</td>
+        </tr>
+    </ng-template>
+</p-treeTable>`,
+
+        html: `
+<div class="card">
+    <p-treeTable [value]="files" [scrollable]="true" [tableStyle]="{'min-width':'50rem'}" [styleClass]="selectedSize">
+        <ng-template pTemplate="header">
+            <tr>
+                <th>Name</th>
+                <th>Size</th>
+                <th>Type</th>
+            </tr>
+        </ng-template>
+        <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
+            <tr [ttRow]="rowNode">
+                <td>
+                    <p-treeTableToggler [rowNode]="rowNode"></p-treeTableToggler>
+                    {{ rowData.name }}
+                </td>
+                <td>{{ rowData.size }}</td>
+                <td>{{ rowData.type }}</td>
+            </tr>
+        </ng-template>
+    </p-treeTable>
+</div>`,
+
+        typescript: `
+import { Component, OnInit } from '@angular/core';
+import { TreeNode } from 'primeng/api';
+import { NodeService } from '../../service/nodeservice';
+
+@Component({
+    selector: 'tree-table-size-demo',
+    templateUrl: './tree-table-size-demo.html'
+})
+export class TreeTableSizeDemo implements OnInit {
+    files!: TreeNode[];
+
+    sizes!: any[];
+
+    selectedSize: any = '';
+
+    constructor(private nodeService: NodeService) {}
+
+    ngOnInit() {
+        this.nodeService.getFilesystem().then((files) => (this.files = files));
+        this.sizes = [
+            { name: 'Small', class: 'p-treetable-sm' },
+            { name: 'Normal', class: '' },
+            { name: 'Large', class: 'p-treetable-lg' }
+        ];
+    }
+}`,
+
+        service: ['NodeService']
+    };
+}
diff --git a/src/app/showcase/doc/treetable/treetabledoc.module.ts b/src/app/showcase/doc/treetable/treetabledoc.module.ts
@@ -41,6 +41,8 @@ import { StyleDoc } from './styledoc';
 import { ResizeScrollableDoc } from './columnresizescrollabledoc';
 import { AccessibilityDoc } from './accessibilitydoc';
 import { PaginatorLocaleDoc } from './paginatorlocaledoc';
+import { SizeDoc } from './sizedoc';
+import { GridlinesDoc } from './gridlinesdoc';
 
 @NgModule({
     imports: [CommonModule, AppCodeModule, AppDocModule, TreeTableModule, ButtonModule, RouterModule, InputTextModule, SelectButtonModule, FormsModule, InputSwitchModule, ToastModule, MultiSelectModule, ContextMenuModule],
@@ -74,7 +76,9 @@ import { PaginatorLocaleDoc } from './paginatorlocaledoc';
         StyleDoc,
         AccessibilityDoc,
         PaginatorLocaleDoc,
-        ResizeScrollableDoc
+        ResizeScrollableDoc,
+        SizeDoc,
+        GridlinesDoc
     ]
 })
 export class TreeTableDocModule {}
diff --git a/src/app/showcase/pages/treetable/treetabledemo.ts b/src/app/showcase/pages/treetable/treetabledemo.ts
@@ -28,6 +28,8 @@ import { StyleDoc } from '../../doc/treetable/styledoc';
 import { AccessibilityDoc } from '../../doc/treetable/accessibilitydoc';
 import { PaginatorLocaleDoc } from '../../doc/treetable/paginatorlocaledoc';
 import { ResizeScrollableDoc } from '../../doc/treetable/columnresizescrollabledoc';
+import { SizeDoc } from '../../doc/treetable/sizedoc';
+import { GridlinesDoc } from '../../doc/treetable/gridlinesdoc';
 
 @Component({
     templateUrl: './treetabledemo.html'
@@ -54,6 +56,16 @@ export class TreeTableDemo {
             label: 'Template',
             component: TemplateDoc
         },
+        {
+            id: 'size',
+            label: 'Size',
+            component: SizeDoc
+        },
+        {
+            id: 'gridlines',
+            label: 'Grid Lines',
+            component: GridlinesDoc
+        },
         {
             id: 'paginator',
             label: 'Paginator',