[KEEP OPEN] ag-grid with angular-17: Update of AG Grid tables design support

buildspec.yml

@@ -0,0 +1,17 @@
+# This file ensures that AWS Amplify uses node version 20 when building,
+# it fails with some dependencies when using version 22.
+# Building with version 22 works locally though.
+
+version: 1.0
+frontend:
+  phases:
+    preBuild:
+      commands:
+        - echo "Using Node.js 20 LTS"
+        - nvm install 20
+        - nvm use 20
+        - node -v
+        - npm ci --force --cache .npm --prefer-offline
+    build:
+      commands:
+        - npm run build

package.json

@@ -21,10 +21,10 @@
     "@angular/router": "^18.1.0",
     "@faker-js/faker": "^8.4.1",
     "@scania/tegel-angular-17": "^1.31.2",
-    "@scania/tegel-styles": "1.0.0",
+    "@scania/tegel-styles": "^1.0.0-ag-grid-v33-beta.2",
     "@tanstack/angular-table": "^8.19.2",
-    "ag-grid-angular": "^31.3.2",
-    "ag-grid-community": "^31.3.2",
+    "ag-grid-angular": "^33.3.1",
+    "ag-grid-community": "^33.3.1",
     "prettier": "^2.8.8",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",

src/app/pages/ag-grid/ag-grid-column-search.component.html

@@ -1,7 +1,8 @@
 <ag-grid-angular
-  style="width: 100%; height: 100%;"
+  style="width: 100%; height: 100%"
   [rowData]="rowData"
   [columnDefs]="columnDefs"
   [defaultColDef]="defaultColDef"
-  (gridReady)="onGridReady($event)">
-</ag-grid-angular>
+  (gridReady)="onGridReady($event)"
+>
+</ag-grid-angular>

src/app/pages/ag-grid/ag-grid-column-search.component.ts

@@ -2,15 +2,22 @@ import { Component, ViewEncapsulation } from "@angular/core";
 import { TegelModule } from "@scania/tegel-angular-17";
 import { HttpClient } from "@angular/common/http";
 import { AgGridAngular } from "ag-grid-angular"; // Angular Data Grid Component
-import { ColDef, GridApi, GridReadyEvent } from "ag-grid-community";
+import {
+  ColDef,
+  GridApi,
+  GridReadyEvent,
+  AllCommunityModule,
+  ModuleRegistry,
+} from "ag-grid-community";
 import { AgGridModule } from "ag-grid-angular";
 
+ModuleRegistry.registerModules([AllCommunityModule]);
+
 @Component({
   selector: "app-ag-grid-column-search",
   standalone: true,
   encapsulation: ViewEncapsulation.None, // Disable Angular's style encapsulation
   templateUrl: "./ag-grid-column-search.component.html",
-  styleUrls: ["ag-styles-loader.css"],
   imports: [TegelModule, AgGridModule, AgGridAngular],
 })
 export default class AgGridColumnSearchComponent {

src/app/pages/ag-grid/ag-grid-editable-cells.component.html

@@ -1,7 +1,8 @@
 <ag-grid-angular
-  style="width: 100%; height: 100%;"
+  style="width: 100%; height: 100%"
   [rowData]="rowData"
   [columnDefs]="columnDefs"
   [defaultColDef]="defaultColDef"
-  (gridReady)="onGridReady($event)">
-</ag-grid-angular>
+  (gridReady)="onGridReady($event)"
+>
+</ag-grid-angular>

src/app/pages/ag-grid/ag-grid-editable-cells.component.ts

@@ -10,7 +10,6 @@ import { AgGridModule } from "ag-grid-angular";
   standalone: true,
   encapsulation: ViewEncapsulation.None, // Disable Angular's style encapsulation
   templateUrl: "./ag-grid-editable-cells.component.html",
-  styleUrls: ["ag-styles-loader.css"],
   imports: [TegelModule, AgGridModule, AgGridAngular],
 })
 export default class AgGridEditableCellsComponent {

src/app/pages/ag-grid/ag-grid-page.component.ts

@@ -7,55 +7,23 @@ import { TegelModule } from "@scania/tegel-angular-17";
 @Component({
   selector: "app-table-page",
   template: `
-    <div class="tds-u-pb3">
-      <tds-toggle
-        (tdsToggle)="toggleMode()"
-        headline="Toggle compact mode"
-        size="sm"
-      >
-        <div slot="label">{{ labelText }}</div>
-      </tds-toggle>
-    </div>
-    <div class="tds-headline-02 tds-u-pb1">AG-Grid Column Search</div>
-    <p>This is an implementation of AG-Grid with column search.</p>
     <div
-      class="ag-theme-quartz"
-      [class.compact]="classCompact"
-      style="height: 500px; width: 100%;"
+      class="tds-mode-variant-primary"
+      style="height: 500px; width: 100%; padding: 20px; padding-bottom: 100px"
     >
+      <h4>Primary mode variant</h4>
       <app-ag-grid-column-search></app-ag-grid-column-search>
     </div>
-    <div class="tds-headline-02 tds-u-pb1 tds-u-pt3">
-      AG-Grid Editable Cells
-    </div>
-    <p>This is an implementation of AG-Grid with editable cells.</p>
+
     <div
-      class="ag-theme-quartz"
-      [class.compact]="classCompact"
-      style="height: 500px; width: 100%;"
+      class="tds-mode-variant-secondary"
+      style="height: 500px; width: 100%; padding: 20px; padding-bottom: 100px; margin-top: 10px; margin-bottom: 10px"
     >
+      <h4 style="margin-top: 10px">Secondary mode variant</h4>
       <app-ag-grid-editable-cells></app-ag-grid-editable-cells>
     </div>
   `,
-  styles: [``],
   standalone: true,
-  imports: [
-    AgGridColumnSearch,
-    AgGridEditableCells,
-    AsyncPipe,
-    TegelModule,
-  ],
+  imports: [AgGridColumnSearch, AgGridEditableCells, AsyncPipe, TegelModule],
 })
-export default class AgGridPageComponent {
-  classCompact = false;
-  labelText: "Compact" | "Default" = "Default";
-
-  public toggleMode() {
-    this.classCompact = !this.classCompact;
-    if (this.labelText === "Compact") {
-      this.labelText = "Default";
-    } else {
-      this.labelText = "Compact";
-    }
-  }
-}
+export default class AgGridPageComponent {}

src/styles.css

@@ -1,10 +1,8 @@
 @import "reset.css";
 @import url("@scania/tegel/dist/tegel/tegel.css");
 
-/* Core Data Grid CSS */
-@import url("ag-grid-community/styles/ag-grid.css");
-/* Quartz Theme Specific CSS */
-@import url("ag-grid-community/styles/ag-theme-quartz.css");
+/* AG Grid Tegel styling */
+@import url("@scania/tegel-styles/dist/customization/ag-grid/v33-theme.css");
 
 .tds-mode-dark {
   color: var(--tds-grey-100);