kempo 2.6.1 → 2.6.2

package/docs/components/table.html

@@ -177,7 +177,22 @@
     <p>An array of objects that represents the fields of the table, each object must contain a <code>name</code> and a <code>label</code>. If this parameter is omitted, the fields will be automatically generated from the first 100 records.</p>
 
     <h5><code><i>object</i> controls</code></h5>
-    <p>An object containing arrays of controls to be displayed before and/or after each row. Each control is defined by an icon name and a callback function. The <code>controls</code> object can only contain the <code>before</code> and <code>after</code> properties, which are arrays of objects containing the <code>icon</code> (string) and <code>action</code> (function).</p>
+    <p>An object containing optional arrays of controls to be displayed before and/or after each row. Each control is defined by an icon name and a callback function. The <code>controls</code> object can contain the optional <code>before</code> and <code>after</code> properties, which are arrays of objects containing the <code>icon</code> (string) and <code>action</code> (function).</p>
+    <p>Example:</p>
+    <pre><code class="hljs javascript">{
+      before: [
+        {
+          icon: 'edit',
+          action: (record, table) => console.log('Edit', record, table)
+        }
+      ],
+      after: [
+        {
+          icon: 'delete',
+          action: (record, table) => console.log('Delete', record, table)
+        }
+      ]
+    }</code></pre>
 
     <h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
     <ul>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kempo",
-  "version": "2.6.1",
+  "version": "2.6.2",
   "type": "module",
   "description": "A web component library",
   "main": "dist/index.js",

package/src/components/Table.js

@@ -26,8 +26,8 @@ export default class Table extends Component {
     return false;
   }
   renderFields(){
-    const beforeControls = this.controls.before.length ? '<th></th>' : '';
-    const afterControls = this.controls.after.length ? '<th></th>' : '';
+    const beforeControls = this.controls.before?.length ? '<th></th>' : '';
+    const afterControls = this.controls.after?.length ? '<th></th>' : '';
     this.shadowRoot.getElementById('fields').innerHTML = `${beforeControls}${this.fields.map(({label})=>`<th>${label}</th>`).join('')}${afterControls}`;
   }
   renderRecords(){
@@ -42,7 +42,7 @@ export default class Table extends Component {
     }).join('');
   }
   
-  renderControls(controls, record) {
+  renderControls(controls = [], record) {
     if (controls.length === 0) return '';
     return `<td>${controls.map(({ icon, action }) => {
       const button = document.createElement('button');