Editable for check.

Author: Templarian

src/pg/table/README.md

@@ -37,6 +37,7 @@ this.$table.columns = [{
   key: 'check',
   hideLabel: true,
   type: TableHeaderCheck,
+  editable: true
 }, {
   label: 'Name',
   key: 'name'
@@ -50,6 +51,8 @@ this.$table.columns = [{
 }];
 ```
 
+Adding `editable: true` to any data types will enable editing and trigger the `action` event (see Events below).
+
 ## Data
 
 The `createTableItem` unrolls the `{ key: value }` shorthand to `items: [{ key, value}]` object to support the mutable data.
@@ -84,8 +87,13 @@ All events dispatched will be the same `action` name. This allows the insert of
 ```typescript
 this.$table.addEventListener('action', (e: any) => {
   const { getColumn, value, key } = e.detail;
-  // do custom logic based on key
-  getColumn(key).value = value;
+  switch(key) {
+    case 'selected':
+      getColumn(key).value = value;
+      break;
+    default:
+      throw `unhandled action event for key ${key}`;
+  }
 });
 ```
 

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

@@ -27,6 +27,7 @@ export default class XPgTableBasic extends HTMLElement {
       label: 'Select',
       key: 'selected',
       hideLabel: true,
+      editable: true,
     }, {
       label: 'Name',
       key: 'name'

src/pg/table/table.ts

@@ -56,7 +56,11 @@ export default class PgTable extends HTMLElement {
       container: this.$rows,
       items: this.data,
       type: () => PgTableRow,
-      create: ($item, item) => {
+      create: ($item: PgTableRow, item) => {
+        if (this.columns.length === 0) {
+          throw 'columns must be set before data';
+        }
+        $item.columns = this.columns;
         $item.addEventListener('action', (e: any) => {
           e.stopPropagation();
           this.dispatchEvent(new CustomEvent('action', {

src/pg/tableRow/tableRow.ts

@@ -20,8 +20,9 @@ const types = new Map<string, any>([
 })
 export default class PgTableRow extends HTMLElement {
   @Prop() index: number;
-  @Prop() items: any = [];
+  @Prop() items: any[] = [];
   @Prop() key: string = '';
+  @Prop() columns: any[] = [];
 
   @Part() $cells: HTMLDivElement;
 
@@ -34,7 +35,12 @@ export default class PgTableRow extends HTMLElement {
           ? item.type
           : types.get(typeof item.value);
       },
-      create: ($item, item) => {
+      create: ($item: any, item) => {
+        console.log(this.columns.find(i => i.key === item.key));
+        const { editable } = this.columns.find(i => i.key === item.key) ?? {};
+        if (editable) {
+          $item.editable = editable;
+        }
         $item.addEventListener('action', (e: any) => {
           e.stopPropagation();
           this.dispatchEvent(new CustomEvent('action', {