Table.

Author: Templarian

src/pg/table/README.md

@@ -3,7 +3,9 @@
 The `pg-table` component allows a standard way to create static tables. While it has features like the datatable it is much more lightweight lacking features like column resize and edit.
 
 - `TableHeaderText`
-- `TableHeader`
+- `TableCellText`
+- `TableCellButton`
+- `TableCellButtonIcon`
 
 ```typescript
 import '@pictogrammers/components/pg/table';
@@ -65,3 +67,24 @@ this.$table.data = [
   })
 ];
 ```
+
+## Events
+
+All events dispatched will be the same `action` name. This allows the insert of `index` as it bubbles to the parent `this.$table` element.
+
+```typescript
+this.$table.addEventListener('action', (e: any) => {
+  const { getColumn, value } = e.detail;
+  getColumn('field1').value = value;
+});
+```
+
+From a custom cell component...
+
+```typescript
+this.dispatchEvent(new CustomEvent('action', {
+  detail {
+    other: 'new value',
+  },
+}))
+```

src/pg/table/__examples__/basic/basic.html

@@ -2,5 +2,9 @@
   <pg-table part="table"></pg-table>
   <div>
     <button part="pushData">Push Data</button>
+    <button part="deleteLast">Delete Last</button>
+  </div>
+  <div>
+    <code>.getCSV()</code>: <pre part="output"></pre>
   </div>
 </div>

src/pg/table/__examples__/basic/basic.ts

@@ -1,8 +1,13 @@
 import { Component, Part, Prop } from '@pictogrammers/element';
+
 import PgTable, { createTableItem } from '../../table';
+import PgTableCellButtonIcon from '../../../tableCellButtonIcon/tableCellButtonIcon';
 
 import template from './basic.html';
 
+const IconStar = 'M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z';
+    const IconStarOutline = 'M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z';
+
 @Component({
   selector: 'x-pg-table-basic',
   template
@@ -11,6 +16,8 @@ export default class XPgTableBasic extends HTMLElement {
 
   @Part() $table: PgTable;
   @Part() $pushData: HTMLButtonElement;
+  @Part() $deleteLast: HTMLButtonElement;
+  @Part() $output: HTMLPreElement;
 
   connectedCallback() {
     // this.$table.addEventListener('click', this.handleClick.bind(this));
@@ -25,35 +32,57 @@ export default class XPgTableBasic extends HTMLElement {
       key: 'favorite',
       hideLabel: true,
     }];
-    const IconStar = 'M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z';
-    const IconStarOutline = 'M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z';
     this.$table.data = [
       createTableItem({
         name: 'Dipper Pines',
         age: 12,
-        // favorite: {
-        //   type: TableCellButtonIcon,
-        //   icon: IconStar,
-        // }
+        favorite: {
+          type: PgTableCellButtonIcon,
+          icon: IconStarOutline,
+        }
       }),
       createTableItem({
         name: 'Mabel Pines',
         age: 12,
-        // favorite: {
-        //   type: TableCellButtonIcon,
-        //   icon: IconStar,
-        // }
+        favorite: {
+          type: PgTableCellButtonIcon,
+          icon: IconStarOutline,
+        }
       })
     ];
     this.$pushData.addEventListener('click', this.handlePushData.bind(this));
+    this.$deleteLast.addEventListener('click', this.handleDeleteLast.bind(this));
+    this.$table.addEventListener('action', (e: any) => {
+      const { getColumn } = e.detail;
+      getColumn('favorite').value = !getColumn('favorite').value;
+      if (getColumn('favorite').value) {
+        getColumn('favorite').icon = IconStar;
+      } else {
+        getColumn('favorite').icon = IconStarOutline;
+      }
+      // CSV
+      this.$output.textContent = this.$table.getCSV();
+    });
   }
 
   newCount = 0;
   handlePushData() {
-    this.$table.data.push({
+    this.$table.data.push(createTableItem({
       name: `new ${this.newCount++}`,
-      age: this.newCount
-    })
+      age: this.newCount,
+      favorite: {
+        type: PgTableCellButtonIcon,
+        icon: IconStarOutline,
+      },
+    }));
+    // CSV
+    this.$output.textContent = this.$table.getCSV();
+  }
+
+  handleDeleteLast() {
+    this.$table.data.pop();
+    // CSV
+    this.$output.textContent = this.$table.getCSV();
   }
 
 }

src/pg/table/table.ts

@@ -19,7 +19,7 @@ export function createTableItem(obj: object) {
   const items: any[] = [];
   keys.forEach((key) => {
     if (typeof obj[key] === 'object' && obj[key] !== null) {
-      if (obj[key].hasOwnProperty('type')) {
+      if (!obj[key].hasOwnProperty('type')) {
         obj[key].type = PgTableCellText;
       }
       items.push({
@@ -60,7 +60,28 @@ export default class PgTable extends HTMLElement {
     forEach({
       container: this.$rows,
       items: this.data,
-      type: () => PgTableRow
+      type: () => PgTableRow,
+      create: ($item, item) => {
+        $item.addEventListener('action', (e: any) => {
+          e.stopPropagation();
+          this.dispatchEvent(new CustomEvent('action', {
+            detail: e.detail,
+          }));
+        })
+      }
     });
   }
+
+  getCSV() {
+    let text = this.columns.map((column) => {
+      return column.label;
+    }).join(',');
+    text += '\n';
+    text += this.data.map(({ items }) => {
+      return items.map((item) => {
+        return item.value;
+      }).join(',')
+    }).join('\n');
+    return text;
+  }
 }

src/pg/tableCellButtonIcon/README.md

@@ -0,0 +1,3 @@
+# `PgTableCellButtonIcon`
+
+See `PgTable`.

src/pg/tableCellButtonIcon/tableCellButtonIcon.css

@@ -0,0 +1,7 @@
+:host {
+  display: contents;
+}
+
+[part=label] {
+  display: table-cell;
+}

src/pg/tableCellButtonIcon/tableCellButtonIcon.html

@@ -0,0 +1,3 @@
+<pg-button part="button">
+  <pg-icon part="icon"></pg-icon>
+</pg-button>

src/pg/tableCellButtonIcon/tableCellButtonIcon.ts

@@ -0,0 +1,34 @@
+import { Component, Prop, Part } from '@pictogrammers/element';
+
+import PgButton from '../button/button';
+import PgIcon from '../icon/icon';
+
+import template from './tableCellButtonIcon.html';
+import style from './tableCellButtonIcon.css';
+
+@Component({
+  selector: 'pg-table-cell-button-icon',
+  style,
+  template
+})
+export default class PgTableCellButtonIcon extends HTMLElement {
+  @Prop() value: boolean = false;
+  @Prop() icon: string = '';
+
+  @Part() $button: PgButton;
+  @Part() $icon: PgIcon;
+
+  connectedCallback() {
+    this.$button.addEventListener('click', () => {
+      this.dispatchEvent(new CustomEvent('action', {
+        detail: {},
+      }));
+    });
+  }
+
+  render(changes) {
+    if (changes.icon) {
+      this.$icon.path = this.icon;
+    }
+  }
+}

src/pg/tableCellText/tableCellText.css

@@ -2,6 +2,6 @@
   display: contents;
 }
 
-[part=cells] {
-  display: table-row;
+[part=label] {
+  display: table-cell;
 }

src/pg/tableRow/tableRow.ts

@@ -11,6 +11,7 @@ import style from './tableRow.css';
   template
 })
 export default class PgTableRow extends HTMLElement {
+  @Prop() index: number;
   @Prop() items: any = [];
   @Prop() key: string = '';
 
@@ -21,7 +22,23 @@ export default class PgTableRow extends HTMLElement {
       container: this.$cells,
       items: this.items,
       type: (item) => item.type ? item.type : PgTableCellText,
+      create: ($item) => {
+        $item.addEventListener('action', (e: any) => {
+          e.stopPropagation();
+          this.dispatchEvent(new CustomEvent('action', {
+            detail: {
+              ...e.detail,
+              index: this.index,
+              getRow() {
+                return this.items;
+              },
+              getColumn: (key: string) => {
+                return this.items.find(x => x.key === key);
+              }
+            },
+          }));
+        });
+      },
     });
-    console.log(this.items);
   }
 }