Added DataTable customizer

.yo-rc.json

@@ -1,6 +1,6 @@
 {
   "@microsoft/generator-sharepoint": {
-    "isCreatingSolution": true,
+    "isCreatingSolution": false,
     "environment": "spo",
     "version": "1.6.0",
     "libraryName": "plumsail-signature",

config/config.json

@@ -9,10 +9,19 @@
           "manifest": "./src/extensions/signature/SignatureFieldCustomizer.manifest.json"
         }
       ]
+    },
+    "datatable-field-customizer": {
+      "components": [
+        {
+          "entrypoint": "./lib/extensions/datatable/DatatableFieldCustomizer.js",
+          "manifest": "./src/extensions/datatable/DatatableFieldCustomizer.manifest.json"
+        }
+      ]
     }
   },
   "externals": {},
   "localizedResources": {
-    "SignatureFieldCustomizerStrings": "lib/extensions/signature/loc/{locale}.js"
+    "SignatureFieldCustomizerStrings": "lib/extensions/signature/loc/{locale}.js",
+    "DatatableFieldCustomizerStrings": "lib/extensions/datatable/loc/{locale}.js"
   }
 }

config/serve.json

@@ -4,21 +4,21 @@
   "https": true,
   "serveConfigurations": {
     "default": {
-      "pageUrl": "https://plumsailonline.sharepoint.com/sites/jusper1/Lists/CustomFields/AllItems.aspx",
+      "pageUrl": "https://sharikov.sharepoint.com/sites/dev/Lists/DataTableCustomizer/AllItems.aspx",
       "fieldCustomizers": {
-        "Signature": {
-          "id": "1073e0de-7ffb-4450-af88-9b30da9fd35a",
+        "DataTable": {
+          "id": "9d86b44c-fc29-424b-8da4-b831b9058e08",
           "properties": {
             "sampleText": "Value"
           }
         }
       }
     },
-    "signature": {
-      "pageUrl": "https://plumsailonline.sharepoint.com/sites/jusper1/Lists/CustomFields/AllItems.aspx",
+    "datatable": {
+      "pageUrl": "https://sharikov.sharepoint.com/sites/dev/Lists/DataTableCustomizer/AllItems.aspx",
       "fieldCustomizers": {
-        "Signature": {
-          "id": "1073e0de-7ffb-4450-af88-9b30da9fd35a",
+        "DataTable": {
+          "id": "9d86b44c-fc29-424b-8da4-b831b9058e08",
           "properties": {
             "sampleText": "Value"
           }

sharepoint/assets/elements.xml

@@ -9,4 +9,14 @@
             Group="SPFx Columns"
             ClientSideComponentId="1073e0de-7ffb-4450-af88-9b30da9fd35a">
     </Field>
+
+    <Field ID="{213de6b6-0d0d-4287-bea5-1a42c0978fd2}"
+            Name="PlumsailDataTable"
+            DisplayName="DataTable"
+            Type="Note"
+            Min="0"
+            Required="FALSE"
+            Group="SPFx Columns"
+            ClientSideComponentId="9d86b44c-fc29-424b-8da4-b831b9058e08">
+    </Field>
 </Elements>

src/extensions/datatable/DatatableFieldCustomizer.manifest.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-extension-manifest.schema.json",
+
+  "id": "9d86b44c-fc29-424b-8da4-b831b9058e08",
+  "alias": "DatatableFieldCustomizer",
+  "componentType": "Extension",
+  "extensionType": "FieldCustomizer",
+
+  // The "*" signifies that the version should be taken from the package.json
+  "version": "*",
+  "manifestVersion": 2,
+
+  // If true, the component can only be installed on sites where Custom Script is allowed.
+  // Components that allow authors to embed arbitrary script code should set this to true.
+  // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
+  "requiresCustomScript": false
+}

src/extensions/datatable/DatatableFieldCustomizer.module.scss

@@ -0,0 +1,15 @@
+.Datatable {
+  .cell {
+    background-color: "[theme:themePrimary, default:#e5e5e5]";
+    display: 'inline-block';
+  }
+  table {
+    border-collapse: collapse;
+    width: 100%;
+    max-width: 100%;
+  }
+  td {
+    padding: .5rem;
+    border-top: 1px solid #dee2e6;
+  }
+}

src/extensions/datatable/DatatableFieldCustomizer.ts

@@ -0,0 +1,64 @@
+import { Log } from '@microsoft/sp-core-library';
+import { override } from '@microsoft/decorators';
+import {
+  BaseFieldCustomizer,
+  IFieldCustomizerCellEventParameters
+} from '@microsoft/sp-listview-extensibility';
+
+import * as strings from 'DatatableFieldCustomizerStrings';
+import styles from './DatatableFieldCustomizer.module.scss';
+
+/**
+ * If your field customizer uses the ClientSideComponentProperties JSON input,
+ * it will be deserialized into the BaseExtension.properties object.
+ * You can define an interface to describe it.
+ */
+export interface IDatatableFieldCustomizerProperties {
+  // This is an example; replace with your own property
+  sampleText?: string;
+}
+
+const LOG_SOURCE: string = 'DatatableFieldCustomizer';
+
+export default class DatatableFieldCustomizer
+  extends BaseFieldCustomizer<IDatatableFieldCustomizerProperties> {
+
+  @override
+  public onInit(): Promise<void> {
+    // Add your custom initialization to this method.  The framework will wait
+    // for the returned promise to resolve before firing any BaseFieldCustomizer events.
+    Log.info(LOG_SOURCE, 'Activated DatatableFieldCustomizer with properties:');
+    Log.info(LOG_SOURCE, JSON.stringify(this.properties, undefined, 2));
+    Log.info(LOG_SOURCE, `The following string should be equal: "DatatableFieldCustomizer" and "${strings.Title}"`);
+    return Promise.resolve();
+  }
+
+  @override
+  public onRenderCell(event: IFieldCustomizerCellEventParameters): void {
+    event.domElement.classList.add(styles.Datatable);
+    if (event.fieldValue) {
+        var rows = JSON.parse(event.fieldValue);
+        var html = '<table class="table"><tbody>';
+        for(var i = 0; i < rows.length; i++){
+          html += '<tr>';
+          var row = rows[i];
+          for(var column in row) {
+            html += '<td>';
+            html += row[column];
+            html += '</td>';
+          }
+          html += '</tr>';
+        }
+        html += '</tbody></table>';
+        event.domElement.innerHTML = html;
+    }
+  }
+
+  @override
+  public onDisposeCell(event: IFieldCustomizerCellEventParameters): void {
+    // This method should be used to free any resources that were allocated during rendering.
+    // For example, if your onRenderCell() called ReactDOM.render(), then you should
+    // call ReactDOM.unmountComponentAtNode() here.
+    super.onDisposeCell(event);
+  }
+}

src/extensions/datatable/loc/en-us.js

@@ -0,0 +1,5 @@
+define([], function() {
+  return {
+    "Title": "DatatableFieldCustomizer"
+  }
+});

src/extensions/datatable/loc/myStrings.d.ts

@@ -0,0 +1,8 @@
+declare interface IDatatableFieldCustomizerStrings {
+  Title: string;
+}
+
+declare module 'DatatableFieldCustomizerStrings' {
+  const strings: IDatatableFieldCustomizerStrings;
+  export = strings;
+}