Boolean data type support.

Author: Templarian

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

@@ -24,6 +24,10 @@ export default class XPgTableBasic extends HTMLElement {
   connectedCallback() {
     // this.$table.addEventListener('click', this.handleClick.bind(this));
     this.$table.columns = [{
+      label: 'Select',
+      key: 'selected',
+      hideLabel: true,
+    }, {
       label: 'Name',
       key: 'name'
     }, {
@@ -36,6 +40,7 @@ export default class XPgTableBasic extends HTMLElement {
     }];
     this.$table.data = [
       createTableItem({
+        selected: false,
         name: 'Dipper Pines',
         age: 12,
         favorite: {
@@ -44,6 +49,7 @@ export default class XPgTableBasic extends HTMLElement {
         }
       }),
       createTableItem({
+        selected: false,
         name: 'Mabel Pines',
         age: 12,
         favorite: {
@@ -55,12 +61,19 @@ export default class XPgTableBasic extends HTMLElement {
     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;
+      const { getColumn, key } = e.detail;
+      switch(key) {
+        case 'favorite':
+          getColumn('favorite').value = !getColumn('favorite').value;
+          if (getColumn('favorite').value) {
+            getColumn('favorite').icon = IconStar;
+          } else {
+            getColumn('favorite').icon = IconStarOutline;
+          }
+          break;
+        case 'selected':
+          getColumn('selected').value = e.detail.value;
+          break;
       }
       // CSV
       this.$output.textContent = this.$table.getCSV();

src/pg/table/table.ts

@@ -2,7 +2,6 @@ import { Component, Prop, Part, forEach } from '@pictogrammers/element';
 
 import PgTableColumn from '../tableColumn/tableColumn';
 import PgTableRow from '../tableRow/tableRow';
-import PgTableCellText from '../tableCellText/tableCellText';
 
 import template from './table.html';
 import style from './table.css';
@@ -19,18 +18,14 @@ export function createTableItem(obj: object) {
   const items: any[] = [];
   keys.forEach((key) => {
     if (typeof obj[key] === 'object' && obj[key] !== null) {
-      if (!obj[key].hasOwnProperty('type')) {
-        obj[key].type = PgTableCellText;
-      }
       items.push({
         key,
-        ...obj[key]
+        ...obj[key],
       });
     } else {
       items.push({
         key,
-        value: `${obj[key] || ''}`,
-        type: PgTableCellText,
+        value: obj[key],
       });
     }
   });

src/pg/tableCellCheck/tableCellCheck.css

@@ -2,11 +2,14 @@
   display: contents;
 }
 
-[part=label] {
+[part=cell] {
   display: table-cell;
   padding: 0.125rem 0.5rem;
   background-color: var(--pg-table-row-background-color);
   border-top: 0;
   border-radius: 0.125rem;
+}
+
+[part=input] {
   vertical-align: middle;
 }

src/pg/tableCellCheck/tableCellCheck.html

@@ -1,2 +1,3 @@
-<input type="checkbox" part="input" />
-<pg-icon part="icon" path="M19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M19,5V19H5V5H19M10,17L6,13L7.41,11.58L10,14.17L16.59,7.58L18,9" />
+<div part="cell">
+  <pg-input-check part="input" />
+</div>

src/pg/tableCellCheck/tableCellCheck.ts

@@ -1,30 +1,40 @@
 import { Component, Prop, Part } from '@pictogrammers/element';
 
-import PgIcon from '../icon/icon';
+import PgInputCheck from '../inputCheck/inputCheck';
 
-import template from './tableCellText.html';
-import style from './tableCellText.css';
+import template from './tableCellCheck.html';
+import style from './tableCellCheck.css';
 
 @Component({
-  selector: 'pg-table-cell-text',
+  selector: 'pg-table-cell-check',
   style,
-  template
+  template,
 })
 export default class PgTableCellCheck extends HTMLElement {
   @Prop() value: boolean = false;
   @Prop() editable: boolean = false;
   @Prop() key: string = '';
 
-  @Part() $input: HTMLInputElement;
-  @Part() $icon: PgIcon;
+  @Part() $input: PgInputCheck;
 
   connectedCallback() {
-
+    this.$input.addEventListener('change', this.handleChange.bind(this));
   }
 
   render(changes) {
     if (changes.value) {
-      this.$input.checked = this.value;
+      this.$input.value = this.value;
     }
   }
+
+  handleChange(e: any) {
+    const { value } = e.target;
+    this.dispatchEvent(
+      new CustomEvent('action', {
+        detail: {
+          value,
+        }
+      })
+    );
+  }
 }

src/pg/tableCellNumber/README.md

@@ -0,0 +1,3 @@
+# `PgTableCellNumber`
+
+See `PgTable`. Default cell render for `number` type.

src/pg/tableCellNumber/tableCellNumber.css

@@ -0,0 +1,12 @@
+:host {
+  display: contents;
+}
+
+[part=label] {
+  display: table-cell;
+  padding: 0.125rem 0.5rem;
+  background-color: var(--pg-table-row-background-color);
+  border-top: 0;
+  border-radius: 0.125rem;
+  vertical-align: middle;
+}

src/pg/tableCellNumber/tableCellNumber.html

@@ -0,0 +1 @@
+<div part="label"></div>

src/pg/tableCellNumber/tableCellNumber.ts

@@ -0,0 +1,22 @@
+import { Component, Prop, Part } from '@pictogrammers/element';
+
+import template from './tableCellNumber.html';
+import style from './tableCellNumber.css';
+
+@Component({
+  selector: 'pg-table-cell-number',
+  style,
+  template
+})
+export default class PgTableCellNumber extends HTMLElement {
+  @Prop() value: number = 0;
+  @Prop() key: string = '';
+
+  @Part() $label: HTMLDivElement;
+
+  render(changes) {
+    if (changes.value) {
+      this.$label.textContent = `${this.value}`;
+    }
+  }
+}

src/pg/tableColumn/tableColumn.ts

@@ -17,7 +17,6 @@ export default class PgTableColumn extends HTMLElement {
 
   render(changes: { [key: string ]: boolean}) {
     if (changes.label || changes.hideLabel) {
-      console.log(this.label, this.hideLabel);
       if (this.hideLabel) {
         this.$label.ariaLabel = this.label;
         this.$label.textContent = '';