Merge pull request #1587 from Infineon/1568-table-column-divider-is-n…

…ot-visible Advanced table: restores column divider, and enables customization on nested button (href / event handler)
Infineon · Dec 18, 2024 · 26f05f0 · 26f05f0
2 parents 397eb92 + 542a8d7
commit 26f05f0
Show file tree

Hide file tree

Showing 24 changed files with 717 additions and 391 deletions.
diff --git a/examples/stencil-components/vanilla-cdn/index.html b/examples/stencil-components/vanilla-cdn/index.html
@@ -125,9 +125,9 @@ <h2>Accordion</h2>
         nisl cursus ipsum, nec egestas odio sapien eget neque.
 
       </ifx-accordion-item></ifx-accordion>
-      <br />
+    <br />
+
 
-
     <h2>Alert</h2>
     <ifx-alert color="primary" icon="c-info-24">Attention! This is an alert message — check it out!</ifx-alert>
     <br />
@@ -336,11 +336,14 @@ <h2>Multi-Select</h2>
     <br />
 
     <h2>Notification</h2>
-    <ifx-notification icon="c-check-16" variant="success" link-text="Link" link-href="https://www.example.com">Success notification</ifx-notification>
+    <ifx-notification icon="c-check-16" variant="success" link-text="Link" link-href="https://www.example.com">Success
+      notification</ifx-notification>
     <br />
-    <ifx-notification icon="lock-16" variant="warning" link-text="Link" link-href="https://www.example.com">Warning notification</ifx-notification>
+    <ifx-notification icon="lock-16" variant="warning" link-text="Link" link-href="https://www.example.com">Warning
+      notification</ifx-notification>
     <br />
-    <ifx-notification icon="c-check-16" variant="error" link-text="Link" link-href="https://www.example.com">Error notification</ifx-notification>
+    <ifx-notification icon="c-check-16" variant="error" link-text="Link" link-href="https://www.example.com">Error
+      notification</ifx-notification>
 
     <br />
     <br />
@@ -367,7 +370,8 @@ <h2>Progress bar</h2>
 
     <h2>Radio Button</h2>
     <form id="radio-form">
-      <ifx-radio-button id="radio-btn" error="false" disabled="false" size="s" name="fruit" value="apple">Apple</ifx-radio-button>
+      <ifx-radio-button id="radio-btn" error="false" disabled="false" size="s" name="fruit"
+        value="apple">Apple</ifx-radio-button>
       <ifx-radio-button error="false" disabled="false" size="s" name="fruit" value="pear">Pear</ifx-radio-button>
       <ifx-radio-button error="false" disabled="false" size="s" name="fruit" value="orange">Orange</ifx-radio-button>
       <ifx-button type="submit">Submit</ifx-button>
@@ -407,13 +411,12 @@ <h2>Sidebar</h2>
 
 
     <h2>Single-Select</h2>
-    <ifx-select id="single-select" size='m' placeholder='true' show-search='true'
-      search-placeholder-value='Search...' disabled='false' error='false' error-message='Some error'
-      label='' placeholder-value='Placeholder' options=''>
-    </ifx-select> 
+    <ifx-select id="single-select" size='m' placeholder='true' show-search='true' search-placeholder-value='Search...'
+      disabled='false' error='false' error-message='Some error' label='' placeholder-value='Placeholder' options=''>
+    </ifx-select>
     <br />
     <ifx-button id="single-select-disabled-btn">Toggle Disabled</ifx-button>
-    <ifx-button  id="single-select-error-btn">Toggle Error</ifx-button>
+    <ifx-button id="single-select-error-btn">Toggle Error</ifx-button>
     <br />
     <br />
 
@@ -423,9 +426,10 @@ <h2>Slider</h2>
     <span id="single-slider-value">Value: 50</span>
 
     <br />
-    
+
     <h2>Slider (Double)</h2>
-    <ifx-slider id="double-slider" type="double" min="0" max="100" step="1" min-value-handle="20" max-value-handle="80"></ifx-slider>
+    <ifx-slider id="double-slider" type="double" min="0" max="100" step="1" min-value-handle="20"
+      max-value-handle="80"></ifx-slider>
     <br />
     <span id="double-slider-value-min">Min Value: 20</span>
     <br />
@@ -504,6 +508,8 @@ <h2>
     <h2>
       Table (Advanced)
     </h2>
+    <h3>Table with sidebar filter</h3>
+
     <div>
       <ifx-table id="adv-table" row-height="default" cols="" rows="" table-height="auto" pagination="false"
         pagination-page-size="10" enable-filtering="true" filter-orientation="sidebar">
@@ -554,6 +560,13 @@ <h2>
 
         </ifx-filter-type-group>
       </ifx-table>
+
+      <h3>Table with button</h3>
+      <ifx-table id="table-with-btn" row-height="default"
+        cols='[{"headerName":"Make","field":"make","sortable":true,"sort":"desc","unSortIcon":true},{"headerName":"Model","field":"model","sortable":true,"unSortIcon":true},{"headerName":"Price","field":"price"},{"headerName":"Age","field":"age"},{"headerName":"","field":"button"}]'
+        rows='[{"make":"Toyota","model":"Celica","price":35000,"age":10,"button":{"disabled":false,"variant":"secondary","size":"s","target":"_blank","href":"https://www.w3schools.com/","theme":"default","type":"button","fullWidth":true,"text":"Toyota Button"}},{"make":"Ford","model":"Mondeo","price":32000,"age":12,"button":{"disabled":false,"variant":"secondary","size":"s","target":"_blank","href":"https://www.w3schools.com/","theme":"default","type":"button","fullWidth":true,"text":"Ford Button"}},{"make":"Porsche","model":"Boxster","price":72000,"button":{"disabled":false,"variant":"secondary","size":"s","target":"_blank","href":"https://www.w3schools.com/","theme":"default","type":"button","fullWidth":true,"text":"Porsche Button"}}]'
+        table-height="auto" pagination="false" pagination-page-size="10" filter-orientation="none">
+      </ifx-table>
     </div>
     <br />
     <br />
@@ -698,6 +711,7 @@ <h5 slot="title">Title</h5>
 
   const basicTable = document.querySelector('#basic-table');
   const advancedTable = document.querySelector('#adv-table');
+  const tableWithBtn = document.querySelector('#table-with-btn');
 
 
   function updateValues() {
@@ -776,11 +790,11 @@ <h5 slot="title">Title</h5>
     });
 
     document.getElementById('radio-form').addEventListener('submit', event => {
-        event.preventDefault();
-        const formData = new FormData(event.target);
-        formData.forEach((value, key) => {
-          console.log(`${key}: ${value}`);
-        });
+      event.preventDefault();
+      const formData = new FormData(event.target);
+      formData.forEach((value, key) => {
+        console.log(`${key}: ${value}`);
+      });
     });
 
     openModalBtn.addEventListener('click', (event) => {
@@ -811,8 +825,30 @@ <h5 slot="title">Title</h5>
   { "make": "Landrover", "model": "x", "price": 72000 }
 ]`;
 
+    const tableRowsWithBtn = `[
+    {
+      "make": "Toyota",
+      "model": "Celica",
+      "price": 35000,
+      "age": 10,
+      "button": {
+        "disabled": false,
+        "variant": "secondary",
+        "size": "s",
+        "target": "_blank",
+        "href": "https://www.example.com",
+        "theme": "default",
+        "type": "button",
+        "fullWidth": false,
+        "text": "Click Me"
+      }
+    }
+  ]`;
+
     basicTable.setAttribute('rows', tableRows);
     advancedTable.setAttribute('rows', tableRows);
+    tableWithBtn.setAttribute('rows', tableRowsWithBtn);
+
 
     //set advanced table row values using a json array
     const tableColumns = `[
@@ -821,10 +857,23 @@ <h5 slot="title">Title</h5>
   { "headerName": "Price", "field": "price" },
   { "headerName": "Age", "field": "age" }
 ]`;
+
+    const tableColumnsWithBtn = `[
+  { "headerName": "Make", "field": "make", "sortable": true, "sort": "desc", "unSortIcon": true },
+  { "headerName": "Model", "field": "model", "sortable": true, "unSortIcon": true },
+  { "headerName": "Price", "field": "price" },
+  { "headerName": "Age", "field": "age" },
+  { "": "Age", "field": "button" }
+]`;
     basicTable.setAttribute('cols', tableColumns);
     advancedTable.setAttribute('cols', tableColumns);
+    tableWithBtn.setAttribute('cols', tableColumnsWithBtn);
 
-
+    tableWithBtn.buttonRendererOptions = {
+      onButtonClick: (params, event) => {
+        console.log("button clicked", params.data);
+      }
+    };
 
     cardBtn.addEventListener('click', () => {
       console.log("card button click event");
@@ -842,7 +891,7 @@ <h5 slot="title">Title</h5>
       console.log('Sidebar item clicked', event.detail);
     });
 
-    
+
     advancedTable.addEventListener('ifxFilterTypeGroupChange', (event) => {
       console.log("table filter value", event.detail);
     });

diff --git a/examples/wrapper-components/react-vite-js/package-lock.json b/examples/wrapper-components/react-vite-js/package-lock.json
diff --git a/examples/wrapper-components/react-vite-js/package.json b/examples/wrapper-components/react-vite-js/package.json
@@ -18,7 +18,7 @@
     "test:local": "run-p preview:link watch:library"
   },
   "dependencies": {
-    "@infineon/infineon-design-system-react": "30.8.0--canary.1658.0b51dae92afc81a0703a9603d6672557cc1387af.0",
+    "@infineon/infineon-design-system-react": "30.8.1--canary.1587.ff537897bd122fea275421fcf2bf3c45f289dbbf.0",
     "path": "^0.12.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"

diff --git a/examples/wrapper-components/react-vite-js/src/components/Table/Table.jsx b/examples/wrapper-components/react-vite-js/src/components/Table/Table.jsx
@@ -1,49 +1,110 @@
 import { IfxTable, IfxFilterTypeGroup, IfxFilterAccordion, IfxFilterSearch, IfxList, IfxListEntry } from '@infineon/infineon-design-system-react';
+import React, { useRef, useEffect } from 'react';
 
 function Table() {
+    const tableRef = useRef(null);
+
+    const tableRowsWithBtn = `[
+    {
+      "make": "Toyota",
+      "model": "Celica",
+      "price": 35000,
+      "age": 10,
+      "button": {
+        "disabled": false,
+        "variant": "secondary",
+        "size": "s",
+        "target": "_blank",
+        "href": "https://www.example.com",
+        "theme": "default",
+        "type": "button",
+        "fullWidth": false,
+        "text": "Click Me"
+      }
+    }
+  ]`;
+
+    const tableColumnsWithBtn = `[
+    { "headerName": "Make", "field": "make", "sortable": true, "sort": "desc", "unSortIcon": true },
+    { "headerName": "Model", "field": "model", "sortable": true, "unSortIcon": true },
+    { "headerName": "Price", "field": "price" },
+    { "headerName": "Age", "field": "age" },
+    { "headerName": "", "field": "button" }
+  ]`;
+
+    // Define your button click handler
+    const handleButtonClick = (params, event) => {
+        console.log('Button clicked for:', params.data.make);
+    };
+
+    useEffect(() => {
+        if (tableRef.current) {
+            // Assign the property directly to the element
+            tableRef.current.buttonRendererOptions = {
+                onButtonClick: handleButtonClick
+            };
+        }
+    }, []);
 
     return (
-        <IfxTable
-            row-height="default"
-            cols='[{"headerName":"Make","field":"make","sortable":true,"sort":"desc","unSortIcon":true},{"headerName":"Model","field":"model","sortable":true,"unSortIcon":true},{"headerName":"Price","field":"price"},{"headerName":"Age","field":"age"}]'
-            rows='[{"make":"Toyota","model":"Celica","price":35000,"age":10},{"make":"Ford","model":"Mondeo","price":32000,"age":12},{"make":"Porsche","model":"Boxster","price":72000},{"make":"Bmw","model":"x","price":72000},{"make":"Mercedes","model":"y","price":72000},{"make":"Ferrari","model":"z","price":72000},{"make":"Chrysler","model":"a","price":72000},{"make":"Range rover","model":"b","price":72000},{"make":"Tesla","model":"x","price":72000},{"make":"Audi","model":"3","price":72000},{"make":"Landrover","model":"x","price":72000}]'
-            table-height="auto"
-            pagination="false"
-            pagination-page-size="10"
-            filter-orientation="sidebar">
-            <IfxFilterTypeGroup slot="sidebar-filter">
-                <div slot="filter-search">
-                    <IfxFilterSearch filter-orientation="sidebar" filter-name="search"></IfxFilterSearch>
-                </div>
-
-                <IfxFilterAccordion slot="filter-accordion" filter-group-name="make">
-                    <IfxList slot="list" type="checkbox" name="make" max-visible-items="6">
-                        <IfxListEntry slot="slot0" label="Toyota" value="false"></IfxListEntry><IfxListEntry slot="slot1" label="Ford" value="false"></IfxListEntry><IfxListEntry slot="slot2" label="Porsche" value="false"></IfxListEntry><IfxListEntry slot="slot3" label="Bmw" value="false"></IfxListEntry><IfxListEntry slot="slot4" label="Mercedes" value="false"></IfxListEntry><IfxListEntry slot="slot5" label="Ferrari" value="false"></IfxListEntry><IfxListEntry slot="slot6" label="Chrysler" value="false"></IfxListEntry><IfxListEntry slot="slot7" label="Range rover" value="false"></IfxListEntry><IfxListEntry slot="slot8" label="Tesla" value="false"></IfxListEntry><IfxListEntry slot="slot9" label="Audi" value="false"></IfxListEntry><IfxListEntry slot="slot10" label="Landrover" value="false"></IfxListEntry>
-                    </IfxList>
-                </IfxFilterAccordion>
-
-                <IfxFilterAccordion slot="filter-accordion" filter-group-name="model">
-                    <IfxList slot="list" type="checkbox" name="model" max-visible-items="6">
-                        <IfxListEntry slot="slot0" label="Celica" value="false"></IfxListEntry><IfxListEntry slot="slot1" label="Mondeo" value="false"></IfxListEntry><IfxListEntry slot="slot2" label="Boxster" value="false"></IfxListEntry><IfxListEntry slot="slot3" label="x" value="false"></IfxListEntry><IfxListEntry slot="slot4" label="y" value="false"></IfxListEntry><IfxListEntry slot="slot5" label="z" value="false"></IfxListEntry><IfxListEntry slot="slot6" label="a" value="false"></IfxListEntry><IfxListEntry slot="slot7" label="b" value="false"></IfxListEntry><IfxListEntry slot="slot8" label="3" value="false"></IfxListEntry>
-                    </IfxList>
-                </IfxFilterAccordion>
-
-                <IfxFilterAccordion slot="filter-accordion" filter-group-name="price">
-                    <IfxList slot="list" type="checkbox" name="price" max-visible-items="6">
-                        <IfxListEntry slot="slot0" label="35000" value="false"></IfxListEntry><IfxListEntry slot="slot1" label="32000" value="false"></IfxListEntry><IfxListEntry slot="slot2" label="72000" value="false"></IfxListEntry>
-                    </IfxList>
-                </IfxFilterAccordion>
-
-                <IfxFilterAccordion slot="filter-accordion" filter-group-name="age">
-                    <IfxList slot="list" type="checkbox" name="age" max-visible-items="6">
-                        <IfxListEntry slot="slot0" label="10" value="false"></IfxListEntry><IfxListEntry slot="slot1" label="12" value="false"></IfxListEntry><IfxListEntry slot="slot2" label="undefined" value="false"></IfxListEntry>
-                    </IfxList>
-                </IfxFilterAccordion>
-
-            </IfxFilterTypeGroup>
-        </IfxTable>
+        <div style={{ padding: '20px' }}>
+            <h3>Table with button</h3>
+
+            <ifx-table
+                ref={tableRef}
+                row-height="default"
+                cols={tableColumnsWithBtn}
+                rows={tableRowsWithBtn}
+                table-height="auto"
+                pagination="false"
+                pagination-page-size="10"
+                filter-orientation="none"
+            ></ifx-table>
+
+            <br />
+            <h3>Table with sidebar filter</h3>
+            <IfxTable
+                row-height="default"
+                cols='[{"headerName":"Make","field":"make","sortable":true,"sort":"desc","unSortIcon":true},{"headerName":"Model","field":"model","sortable":true,"unSortIcon":true},{"headerName":"Price","field":"price"},{"headerName":"Age","field":"age"}]'
+                rows='[{"make":"Toyota","model":"Celica","price":35000,"age":10},{"make":"Ford","model":"Mondeo","price":32000,"age":12},{"make":"Porsche","model":"Boxster","price":72000},{"make":"Bmw","model":"x","price":72000},{"make":"Mercedes","model":"y","price":72000},{"make":"Ferrari","model":"z","price":72000},{"make":"Chrysler","model":"a","price":72000},{"make":"Range rover","model":"b","price":72000},{"make":"Tesla","model":"x","price":72000},{"make":"Audi","model":"3","price":72000},{"make":"Landrover","model":"x","price":72000}]'
+                table-height="auto"
+                pagination="false"
+                pagination-page-size="10"
+                filter-orientation="sidebar">
+                <IfxFilterTypeGroup slot="sidebar-filter">
+                    <div slot="filter-search">
+                        <IfxFilterSearch filter-orientation="sidebar" filter-name="search"></IfxFilterSearch>
+                    </div>
 
+                    <IfxFilterAccordion slot="filter-accordion" filter-group-name="make">
+                        <IfxList slot="list" type="checkbox" name="make" max-visible-items="6">
+                            <IfxListEntry slot="slot0" label="Toyota" value="false"></IfxListEntry><IfxListEntry slot="slot1" label="Ford" value="false"></IfxListEntry><IfxListEntry slot="slot2" label="Porsche" value="false"></IfxListEntry><IfxListEntry slot="slot3" label="Bmw" value="false"></IfxListEntry><IfxListEntry slot="slot4" label="Mercedes" value="false"></IfxListEntry><IfxListEntry slot="slot5" label="Ferrari" value="false"></IfxListEntry><IfxListEntry slot="slot6" label="Chrysler" value="false"></IfxListEntry><IfxListEntry slot="slot7" label="Range rover" value="false"></IfxListEntry><IfxListEntry slot="slot8" label="Tesla" value="false"></IfxListEntry><IfxListEntry slot="slot9" label="Audi" value="false"></IfxListEntry><IfxListEntry slot="slot10" label="Landrover" value="false"></IfxListEntry>
+                        </IfxList>
+                    </IfxFilterAccordion>
+
+                    <IfxFilterAccordion slot="filter-accordion" filter-group-name="model">
+                        <IfxList slot="list" type="checkbox" name="model" max-visible-items="6">
+                            <IfxListEntry slot="slot0" label="Celica" value="false"></IfxListEntry><IfxListEntry slot="slot1" label="Mondeo" value="false"></IfxListEntry><IfxListEntry slot="slot2" label="Boxster" value="false"></IfxListEntry><IfxListEntry slot="slot3" label="x" value="false"></IfxListEntry><IfxListEntry slot="slot4" label="y" value="false"></IfxListEntry><IfxListEntry slot="slot5" label="z" value="false"></IfxListEntry><IfxListEntry slot="slot6" label="a" value="false"></IfxListEntry><IfxListEntry slot="slot7" label="b" value="false"></IfxListEntry><IfxListEntry slot="slot8" label="3" value="false"></IfxListEntry>
+                        </IfxList>
+                    </IfxFilterAccordion>
+
+                    <IfxFilterAccordion slot="filter-accordion" filter-group-name="price">
+                        <IfxList slot="list" type="checkbox" name="price" max-visible-items="6">
+                            <IfxListEntry slot="slot0" label="35000" value="false"></IfxListEntry><IfxListEntry slot="slot1" label="32000" value="false"></IfxListEntry><IfxListEntry slot="slot2" label="72000" value="false"></IfxListEntry>
+                        </IfxList>
+                    </IfxFilterAccordion>
+
+                    <IfxFilterAccordion slot="filter-accordion" filter-group-name="age">
+                        <IfxList slot="list" type="checkbox" name="age" max-visible-items="6">
+                            <IfxListEntry slot="slot0" label="10" value="false"></IfxListEntry><IfxListEntry slot="slot1" label="12" value="false"></IfxListEntry><IfxListEntry slot="slot2" label="undefined" value="false"></IfxListEntry>
+                        </IfxList>
+                    </IfxFilterAccordion>
+
+                </IfxFilterTypeGroup>
+            </IfxTable>
+        </div>
     );
 }
 
 export default Table;
+
diff --git a/examples/wrapper-components/vue-javascript/package.json b/examples/wrapper-components/vue-javascript/package.json
@@ -15,7 +15,7 @@
     "test:local": "run-p preview:link watch:library"
   },
   "dependencies": {
-    "@infineon/infineon-design-system-vue": "30.8.0--canary.1658.0b51dae92afc81a0703a9603d6672557cc1387af.0",
+    "@infineon/infineon-design-system-vue": "30.8.1--canary.1587.ff537897bd122fea275421fcf2bf3c45f289dbbf.0",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vitejs/plugin-vue-jsx": "^4.0.0",
     "vite": "^5.0.12",