Support usage of CpsTable

.eslintrc.json

@@ -13,7 +13,7 @@
         "prettier"
       ],
       "rules": {
-        "license-header/header": ["error", "./license-header.js"]
+        "license-header/header": ["error", "./file-header.js"]
       }
     },
     {

angular.json

@@ -34,8 +34,8 @@
             ],
             "styles": [
               "node_modules/bootstrap/dist/css/bootstrap.min.css",
-              "node_modules/cps-ui-kit/styles/styles.scss",
               "dist/cps-mdoc-viewer/styles/styles.scss",
+              "node_modules/cps-ui-kit/styles/styles.scss",
               "projects/example-app/src/styles.scss"
             ],
             "scripts": []
@@ -46,7 +46,7 @@
                 {
                   "type": "initial",
                   "maximumWarning": "500kb",
-                  "maximumError": "1mb"
+                  "maximumError": "1.5mb"
                 },
                 {
                   "type": "anyComponentStyle",

package.json

@@ -27,7 +27,7 @@
     "@angular/platform-browser-dynamic": "^17.3.0",
     "@angular/router": "^17.3.0",
     "bootstrap": "^5.3.3",
-    "cps-ui-kit": "^17.26.0",
+    "cps-ui-kit": "^17.29.0",
     "gray-matter": "^4.0.3",
     "js-yaml": "^4.1.0",
     "marked": "^12.0.2",

projects/cps-mdoc-viewer/package.json

@@ -4,7 +4,7 @@
   "peerDependencies": {
     "@angular/common": "^17.3.0",
     "@angular/core": "^17.3.0",
-    "cps-ui-kit": "^17.26.0",
+    "cps-ui-kit": "^17.29.0",
     "gray-matter": "^4.0.3",
     "js-yaml": "^4.1.0",
     "marked": "^12.0.2",

projects/cps-mdoc-viewer/src/lib/components/markdown-viewer/markdown-viewer.component.html

@@ -26,7 +26,7 @@ <h1 class="display-4 fw-bold">{{ files[0]['description_title'] }}</h1>
     </div>
   </section>
 
-  <section class="my-5">
+  <section class="my-5" [class.hide-tables]="!tablesReplaced">
     <div class="row g-lg-5">
       <!--TABLE CONTENTS SECTIONS STARTS HERE-->
       <app-table-contents class="col-lg-3"></app-table-contents>

projects/cps-mdoc-viewer/src/lib/components/markdown-viewer/markdown-viewer.component.scss

@@ -1,6 +1,12 @@
 $primary-color: var(--cps-mdoc-viewer-primary);
 $color-text-dark: var(--cps-color-text-dark);
 
+.hide-tables ::ng-deep {
+  table {
+    visibility: hidden;
+  }
+}
+
 :host {
   .header {
     .header-image {
@@ -74,7 +80,7 @@ $color-text-dark: var(--cps-color-text-dark);
         border-radius: 0.5rem;
       }
 
-      table {
+      table:not(.p-datatable-table) {
         display: block;
         border-collapse: collapse;
         width: 100%;
@@ -90,7 +96,6 @@ $color-text-dark: var(--cps-color-text-dark);
 
         th {
           background-color: color-mix(in srgb, $primary-color 50%, white);
-          // background-color: pink;
         }
 
         tr:nth-child(even) {

projects/cps-mdoc-viewer/src/lib/components/markdown-viewer/markdown-viewer.component.ts

@@ -15,18 +15,27 @@
  */
 
 import { CommonModule } from '@angular/common';
-import { Component, Inject, OnInit } from '@angular/core';
+import {
+  ApplicationRef,
+  ChangeDetectorRef,
+  Component,
+  EnvironmentInjector,
+  Inject,
+  OnInit,
+  createComponent
+} from '@angular/core';
 import { MarkdownComponent } from 'ngx-markdown';
 import { map, Observable, tap } from 'rxjs';
 import { TableContentsComponent } from '../table-contents/table-contents.component';
 import { MarkdownFile } from '../../models/categories.interface';
 import { ActivatedRoute } from '@angular/router';
 import { Title } from '@angular/platform-browser';
-import { CpsDividerComponent } from 'cps-ui-kit';
+import { CpsDividerComponent, CpsTableComponent } from 'cps-ui-kit';
 import {
   CONFIG_INJECTION_TOKEN,
   CPSMDocViewerConfig
 } from '../../config/config';
+import { parseTableData } from '../../utils/parse-table-data.util';
 
 @Component({
   selector: 'app-markdown-viewer',
@@ -35,19 +44,24 @@ import {
     MarkdownComponent,
     TableContentsComponent,
     CommonModule,
-    CpsDividerComponent
+    CpsDividerComponent,
+    CpsTableComponent
   ],
   templateUrl: './markdown-viewer.component.html',
   styleUrl: './markdown-viewer.component.scss'
 })
 export class MarkdownViewerComponent implements OnInit {
   markdownFiles$: Observable<MarkdownFile[]> | undefined;
   markdownFilesToRender = 0;
+  tablesReplaced = false;
 
   constructor(
     private route: ActivatedRoute,
     private title: Title,
-    @Inject(CONFIG_INJECTION_TOKEN) protected libConfig: CPSMDocViewerConfig
+    @Inject(CONFIG_INJECTION_TOKEN) protected libConfig: CPSMDocViewerConfig,
+    private appRef: ApplicationRef,
+    private environmentInjector: EnvironmentInjector,
+    private changeDetectorRef: ChangeDetectorRef
   ) {}
 
   ngOnInit(): void {
@@ -72,6 +86,7 @@ export class MarkdownViewerComponent implements OnInit {
   markdownRendered(): void {
     this.markdownFilesToRender--;
     if (this.markdownFilesToRender === 0) {
+      this._replaceTablesWithComponents();
       const fragment = this.route.snapshot.fragment;
       if (fragment) {
         const targetSection = document.querySelector(
@@ -91,4 +106,60 @@ export class MarkdownViewerComponent implements OnInit {
       }
     }
   }
+
+  /**
+   * Replaces tables that are inside .cps-table divs with CpsTableComponents
+   */
+  private _replaceTablesWithComponents(): void {
+    const tables: NodeListOf<HTMLTableElement> =
+      document.querySelectorAll('.cps-table > table');
+
+    tables.forEach((table) => {
+      const parentDiv = table.parentElement;
+      const tableData = parseTableData(table);
+      const cpsTableRef = createComponent(CpsTableComponent, {
+        environmentInjector: this.environmentInjector
+      });
+
+      cpsTableRef.setInput('renderDataAsHTML', true);
+      cpsTableRef.setInput('data', [...tableData.data]);
+      cpsTableRef.setInput(
+        'columns',
+        [...tableData.columns].map((col) => ({ ...col }))
+      );
+      cpsTableRef.setInput(
+        'hasToolbar',
+        parentDiv?.classList.contains('searchable')
+      );
+      cpsTableRef.setInput(
+        'showGlobalFilter',
+        parentDiv?.classList.contains('searchable')
+      );
+      cpsTableRef.setInput(
+        'sortable',
+        parentDiv?.classList.contains('sortable')
+      );
+      cpsTableRef.setInput(
+        'filterableByColumns',
+        parentDiv?.classList.contains('filterableByColumns')
+      );
+      cpsTableRef.setInput(
+        'paginator',
+        parentDiv?.classList.contains('paginator')
+      );
+      cpsTableRef.setInput(
+        'bordered',
+        parentDiv?.classList.contains('bordered')
+      );
+
+      table.parentElement?.insertBefore(
+        cpsTableRef.location.nativeElement,
+        table
+      );
+      table.remove();
+      this.appRef.attachView(cpsTableRef.hostView);
+    });
+    this.changeDetectorRef.detectChanges();
+    this.tablesReplaced = true;
+  }
 }

projects/cps-mdoc-viewer/src/lib/utils/parse-table-data.util.ts

@@ -0,0 +1,41 @@
+/*
+ * Copyright 2024 ABSA Group Limited
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export interface TableData {
+  columns: { field: string; header: string }[];
+  data: { [key: string]: string }[];
+}
+
+export function parseTableData(table: HTMLTableElement): TableData {
+  const columns: { field: string; header: string }[] = Array.from(
+    table.tHead?.rows[0].cells ?? []
+  ).map((cell) => ({
+    field: cell.textContent ?? '',
+    header: cell.textContent ?? ''
+  }));
+  const data: { [key: string]: string }[] = Array.from(
+    table.tBodies[0].rows ?? []
+  ).map((row) => ({
+    ...columns.reduce(
+      (acc, column, index) => ({
+        ...acc,
+        [column.field]: row.cells[index].innerHTML ?? ''
+      }),
+      {}
+    )
+  }));
+  return { columns, data };
+}

projects/example-app/src/404.html

@@ -2,7 +2,9 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <title>Single Page Apps for GitHub Pages</title>
+    <title>ExampleApp</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/svg" href="assets/images/rocket.svg" />
     <script type="text/javascript">
       // Single Page Apps for GitHub Pages
       // MIT License

projects/example-app/src/app/app.config.ts

@@ -16,9 +16,11 @@
 
 import { ApplicationConfig } from '@angular/core';
 import { provideCPSMDocViewer } from 'cps-mdoc-viewer';
+import { provideAnimations } from '@angular/platform-browser/animations';
 
 export const appConfig: ApplicationConfig = {
   providers: [
+    provideAnimations(),
     provideCPSMDocViewer({
       headerTitle: 'CPS MDoc Viewer',
       pageTitle: 'Example App of the CPS MDoc Viewer library',

projects/example-app/src/assets/categories/docs/_index.md

@@ -9,3 +9,24 @@ image: assets/images/image_1.svg
 ---
 
 Welcome to the heart of our knowledge base. Whether you're just getting started or looking to explore advanced features, our documentation is designed to provide you with the insights and information you need. Structured intuitively and crafted with clarity, journey through each section to harness the full potential of our platform. Let's get started and make the most of your experience.
+
+### Table of programming languages
+
+This table is rendered using [the Table from cps-ui-kit library](https://absaoss.github.io/cps-shared-ui/table/api).
+
+<div class="cps-table sortable searchable filterableByColumns paginator">
+
+| Language     | Founder(s)                                                 | Year Released |
+| ------------ | ---------------------------------------------------------- | ------------- |
+| `Python`     | Guido van Rossum                                           | 1991          |
+| `JavaScript` | [Brendan Eich](https://en.wikipedia.org/wiki/Brendan_Eich) | 1995          |
+| `Java`       | James Gosling                                              | 1995          |
+| `C`          | Dennis Ritchie                                             | 1972          |
+| `C++`        | Bjarne Stroustrup                                          | 1985          |
+| `Ruby`       | Yukihiro Matsumoto                                         | 1995          |
+| `Swift`      | Apple Inc.                                                 | 2014          |
+| `Go`         | Robert Griesemer, Rob Pike, Ken Thompson                   | 2007          |
+| `Rust`       | Graydon Hoare                                              | 2010          |
+| `PHP`        | Rasmus Lerdorf                                             | 1994          |
+
+</div>

projects/example-app/src/index.html

@@ -5,7 +5,7 @@
     <title>ExampleApp</title>
     <base href="/" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <link rel="icon" type="image/svg" href="assets/images/rocket.svg" />
   </head>
   <body>
     <app-root></app-root>

projects/example-app/src/styles.scss

@@ -1,4 +1,4 @@
 :root {
-  --cps-mdoc-viewer-primary: #124076;
-  --cps-mdoc-viewer-secondary: #7f9f80;
+  --cps-mdoc-viewer-primary: var(--cps-color-calm);
+  --cps-mdoc-viewer-secondary: var(--cps-color-prepared);
 }