angular-slickgrid 8.14.1 → 9.0.0

package/src/demos/examples/example17.component.html

@@ -0,0 +1,50 @@
+<div id="demo-container" class="container-fluid">
+  <h2>
+    Example 17: Dynamically Create Grid from CSV / Excel import
+    <span class="float-end">
+      <a
+        style="font-size: 18px"
+        target="_blank"
+        href="https://github.com/ghiscoding/slickgrid-universal/blob/master/frameworks/angular-slickgrid/src/demos/examples/grid18.component.ts"
+      >
+        <span class="mdi mdi-link mdi-v-align-sub"></span> code
+      </a>
+    </span>
+    <button class="ms-2 btn btn-outline-secondary btn-sm btn-icon" type="button" data-test="toggle-subtitle" (click)="toggleSubTitle()">
+      <span class="mdi mdi-information-outline" title="Toggle example sub-title details"></span>
+    </button>
+  </h2>
+
+  <div *ngIf="showSubTitle" class="subtitle">
+    Allow creating a grid dynamically by importing an external CSV or Excel file. This script demo will read the CSV file and will consider
+    the first row as the column header and create the column definitions accordingly, while the next few rows will be considered the
+    dataset. Note that this example is demoing a CSV file import but in your application you could easily implemnt an Excel file uploading.
+  </div>
+
+  <div>A default CSV file can be download <a id="template-dl" [href]="templateUrl">here</a>.</div>
+
+  <div class="d-flex mt-5 align-items-end">
+    <div class="file-upload">
+      <label for="formFile" class="form-label">Choose a CSV file…</label>
+      <input
+        class="form-control"
+        type="file"
+        data-test="file-upload-input"
+        [(ngModel)]="uploadFileRef"
+        (input)="handleFileImport($event)"
+      />
+    </div>
+    <span class="mx-3">or</span>
+    <div>
+      <button id="uploadBtn" data-test="static-data-btn" class="btn btn-outline-secondary" (click)="handleDefaultCsv()">
+        Use default CSV data
+      </button>
+      <button class="btn btn-outline-secondary" (click)="destroyGrid()">Destroy Grid</button>
+    </div>
+  </div>
+
+  <hr />
+
+  <angular-slickgrid *ngIf="gridCreated" gridId="grid17" [columns]="columnDefinitions" [options]="gridOptions" [dataset]="dataset">
+  </angular-slickgrid>
+</div>

package/src/demos/examples/example17.component.ts

@@ -0,0 +1,109 @@
+import { ChangeDetectorRef, Component, ViewEncapsulation } from '@angular/core';
+import { ExcelExportService } from '@slickgrid-universal/excel-export';
+import { type Column, type GridOption, toCamelCase } from '../../library';
+
+const sampleDataRoot = 'assets/data';
+
+@Component({
+  styles: ['.file-upload { max-width: 300px; }'],
+  encapsulation: ViewEncapsulation.None,
+  templateUrl: './example17.component.html',
+  standalone: false,
+})
+export class Example17Component {
+  columnDefinitions: Column[] = [];
+  gridOptions!: GridOption;
+  dataset: any[] = [];
+  gridCreated = false;
+  showSubTitle = true;
+  uploadFileRef = '';
+  templateUrl = `${sampleDataRoot}/users.csv`;
+
+  constructor(private readonly cd: ChangeDetectorRef) {}
+
+  handleFileImport(event: any) {
+    const file = event.target.files[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.onload = (e: any) => {
+        const content = e.target.result;
+        this.dynamicallyCreateGrid(content);
+      };
+      reader.readAsText(file);
+    }
+  }
+
+  handleDefaultCsv() {
+    const staticDataCsv = `First Name,Last Name,Age,Type\nBob,Smith,33,Teacher\nJohn,Doe,20,Student\nJane,Doe,21,Student`;
+    this.dynamicallyCreateGrid(staticDataCsv);
+    this.uploadFileRef = '';
+  }
+
+  destroyGrid() {
+    this.gridCreated = false;
+  }
+
+  dynamicallyCreateGrid(csvContent: string) {
+    // dispose of any previous grid before creating a new one
+    this.gridCreated = false;
+    this.cd.detectChanges();
+
+    const dataRows = csvContent?.split('\n');
+    const colDefs: Column[] = [];
+    const outputData: any[] = [];
+
+    // create column definitions
+    dataRows.forEach((dataRow, rowIndex) => {
+      const cellValues = dataRow.split(',');
+      const dataEntryObj: any = {};
+
+      if (rowIndex === 0) {
+        // the 1st row is considered to be the header titles, we can create the column definitions from it
+        for (const cellVal of cellValues) {
+          const camelFieldName = toCamelCase(cellVal);
+          colDefs.push({
+            id: camelFieldName,
+            name: cellVal,
+            field: camelFieldName,
+            filterable: true,
+            sortable: true,
+          });
+        }
+      } else {
+        // at this point all column defs were created and we can loop through them and
+        // we can now start adding data as an object and then simply push it to the dataset array
+        cellValues.forEach((cellVal, colIndex) => {
+          dataEntryObj[colDefs[colIndex].id] = cellVal;
+        });
+
+        // a unique "id" must be provided, if not found then use the row index and push it to the dataset
+        if ('id' in dataEntryObj) {
+          outputData.push(dataEntryObj);
+        } else {
+          outputData.push({ ...dataEntryObj, id: rowIndex });
+        }
+      }
+    });
+
+    this.gridOptions = {
+      gridHeight: 300,
+      gridWidth: 800,
+      enableFiltering: true,
+      enableExcelExport: true,
+      externalResources: [new ExcelExportService()],
+      headerRowHeight: 35,
+      rowHeight: 33,
+    };
+
+    this.dataset = outputData;
+    this.columnDefinitions = colDefs;
+    this.gridCreated = true;
+    this.cd.detectChanges();
+  }
+
+  toggleSubTitle() {
+    this.showSubTitle = !this.showSubTitle;
+    const action = this.showSubTitle ? 'remove' : 'add';
+    document.querySelector('.subtitle')?.classList[action]('hidden');
+  }
+}

package/src/demos/examples/example18.component.html

@@ -0,0 +1,132 @@
+<div id="demo-container" class="container-fluid">
+  <h2>
+    Example 18: Draggable Grouping & Aggregators
+    <button class="btn btn-outline-secondary btn-sm ms-3" (click)="toggleDarkMode()" data-test="toggle-dark-mode">
+      <span class="mdi mdi-theme-light-dark"></span>
+      <span>Toggle Dark Mode</span>
+    </button>
+    <span class="float-end">
+      <a
+        style="font-size: 18px"
+        target="_blank"
+        href="https://github.com/ghiscoding/slickgrid-universal/blob/master/frameworks/angular-slickgrid/src/demos/examples/grid-draggrouping.component.ts"
+      >
+        <span class="mdi mdi-link-variant"></span> code
+      </a>
+    </span>
+  </h2>
+  <div class="subtitle">
+    <ul>
+      <li>
+        <a href="https://ghiscoding.gitbook.io/angular-slickgrid/grid-functionalities/grouping-and-aggregators" target="_blank"
+          >Wiki docs</a
+        >
+      </li>
+      <li>This example shows 3 ways of grouping</li>
+      <ol>
+        <li>
+          Drag any Column Header on the top placeholder to group by that column (support moti-columns grouping by adding more columns to the
+          drop area).
+        </li>
+        <li>Use buttons and defined functions to group by wichever field you want</li>
+        <li>Use the Select dropdown to group, the position of the Selects represent the grouping level</li>
+      </ol>
+      <li>Fully dynamic and interactive multi-level grouping with filtering and aggregates ovor 50'000 items</li>
+      <li>Each grouping level can have its own aggregates (over child rows, child groups, or all descendant rows)..</li>
+      <li>Use "Aggregators" and "GroupTotalFormatters" directly from Angular-Slickgrid</li>
+    </ul>
+  </div>
+
+  <form class="form-inline">
+    <div class="row">
+      <div class="col-sm-12">
+        <button class="btn btn-outline-secondary btn-xs btn-icon" data-test="add-500-rows-btn" (click)="loadData(500)">500 rows</button>
+        <button class="btn btn-outline-secondary btn-xs btn-icon" data-test="add-50k-rows-btn" (click)="loadData(50000)">50k rows</button>
+        <button class="btn btn-outline-secondary btn-xs btn-icon" data-test="clear-grouping-btn" (click)="clearGroupsAndSelects()">
+          <i class="mdi mdi-close"></i> Clear grouping
+        </button>
+        <button class="btn btn-outline-secondary btn-xs btn-icon" data-test="collapse-all-btn" (click)="collapseAllGroups()">
+          <i class="mdi mdi-arrow-collapse"></i> Collapse all groups
+        </button>
+        <button class="btn btn-outline-secondary btn-xs btn-icon" data-test="expand-all-btn" (click)="expandAllGroups()">
+          <i class="mdi mdi-arrow-expand"></i> Expand all groups
+        </button>
+        <button class="btn btn-outline-secondary btn-xs btn-icon" (click)="toggleDraggableGroupingRow()">
+          Toggle Draggable Grouping Row
+        </button>
+        <button class="btn btn-outline-secondary btn-xs btn-icon" (click)="exportToExcel()">
+          <i class="mdi mdi-file-excel-outline text-success"></i> Export to Excel
+        </button>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-sm-12">
+        <button
+          class="btn btn-outline-secondary btn-xs btn-icon"
+          data-test="group-duration-sort-value-btn"
+          (click)="groupByDurationOrderByCount(false)"
+        >
+          Group by duration &amp; sort groups by value
+        </button>
+        <button
+          class="btn btn-outline-secondary btn-xs btn-icon"
+          data-test="group-duration-sort-count-btn"
+          (click)="groupByDurationOrderByCount(true)"
+        >
+          Group by duration &amp; sort groups by count
+        </button>
+        <button
+          class="btn btn-outline-secondary btn-xs btn-icon"
+          data-test="group-duration-effort-btn"
+          (click)="groupByDurationEffortDriven()"
+        >
+          Group by Duration &amp; then Effort-Driven
+        </button>
+        <button class="btn btn-outline-secondary btn-xs btn-icon" data-test="set-dynamic-filter" (click)="setFiltersDynamically()">
+          <span class="mdi mdi-filter-outline"></span>
+          <span> Set Filters Dynamically </span>
+        </button>
+        <button class="btn btn-outline-secondary btn-xs btn-icon" data-test="set-dynamic-sorting" (click)="setSortingDynamically()">
+          <span class="mdi mdi-sort-ascending"></span>
+          <span> Set Sorting Dynamically </span>
+        </button>
+      </div>
+    </div>
+    <div class="row mt-2">
+      <div class="col-sm-12">
+        <div class="form-row">
+          <div class="row form-group">
+            <label for="field1" class="col-sm-3 mb-2">Group by field(s)</label>
+            <div
+              class="form-group col-md-3 grouping-selects"
+              *ngFor="let groupField of selectedGroupingFields; let i = index; trackBy: selectTrackByFn"
+            >
+              <select
+                class="form-select"
+                name="group-field-{{ i }}"
+                [(ngModel)]="selectedGroupingFields[i]"
+                (ngModelChange)="groupByFieldName($event, i)"
+              >
+                <option value=""></option>
+                <option [ngValue]="field.id" *ngFor="let field of columnDefinitions">{{ field.name }}</option>
+              </select>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </form>
+  <div class="row mt-1 mb-1">
+    <hr />
+  </div>
+
+  <angular-slickgrid
+    gridId="grid18"
+    [dataset]="dataset"
+    [columns]="columnDefinitions"
+    [options]="gridOptions"
+    (onCellChange)="onCellChanged()"
+    (onAngularGridCreated)="angularGridReady($event.detail)"
+  >
+  </angular-slickgrid>
+</div>