Merge pull request #396 from Infineon/117-table-v1-basic-version

Table using agGrid library

.github/workflows/test.yml

@@ -31,6 +31,5 @@ jobs:
         env:
           NODE_AUTH_TOKEN: ${{ secrets.GH_TOKEN }}
         run: | 
-          cd packages/components
           npm install
           npm run test

examples/stencil-components/angular/src/app/app.component.html

@@ -266,4 +266,12 @@ <h2>Dropdown</h2>
   </ifx-dropdown>
   <br />
 
+
+  <h2>Table</h2>
+  <ifx-basic-table 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}]'
+    table-height='auto'>
+  </ifx-basic-table> <br />
+
 </div>

examples/stencil-components/vanilla-cdn/index.html

@@ -240,6 +240,22 @@ <h2>Dropdown</h2>
     </ifx-dropdown>
     <br />
 
+
+    <h2>
+      Table
+    </h2>
+    <ifx-basic-table 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}]'
+      table-height='auto'>
+    </ifx-basic-table>
+    <br />
+    <ifx-table 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":"something about Toyota"},{"make":"Ford","model":"Mondeo","price":32000,"age":12,"button":"something about Ford"},{"make":"Porsche","model":"Boxster","price":72000,"button":{"disabled":false,"variant":"outline","size":"s","target":"_blank","color":"secondary","text":"Button"}}]'
+      table-height='auto' pagination='false' pagination-page-size='10'>
+    </ifx-table>
+
   </div>
 
 </body>

examples/wrapper-components/react-javascript/package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@infineon/infineon-design-system-react": "18.5.6--canary.307.81448fc876e8addfb1256e7aa26160f7afaf1848.1",
+    "@infineon/infineon-design-system-react": "20.14.0--canary.396.2c24daddcc929ccf08c527ef4683ba8836d2364a.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",

examples/wrapper-components/react-javascript/src/App.js

@@ -21,6 +21,7 @@ import Card from './components/Card/Card';
 import Dropdown from './components/Dropdown/Dropdown';
 import SingleSelect from './components/SingleSelect/SingleSelect';
 import MultiSelect from './components/MultiSelect/MultiSelect';
+import BasicTable from './components/BasicTable/BasicTable';
 
 
 function App() {
@@ -116,6 +117,10 @@ function App() {
       <Dropdown />
       <br />
 
+      <h2>Basic Table</h2>
+      <BasicTable />
+      <br />
+
     </div>
 
   )

examples/wrapper-components/react-javascript/src/components/BasicTable/BasicTable.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { IfxBasicTable } from '@infineon/infineon-design-system-react';
+
+function BasicTable() {
+  const 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' }
+  ];
+  const rows = [
+    { make: 'Toyota', model: 'Celica', price: 35000, age: 10 },
+    { make: 'Ford', model: 'Mondeo', price: 32000, age: 12 },
+    { make: 'Porsche', model: 'Boxster', price: 72000 }
+  ];
+
+
+  return (
+    <IfxBasicTable row-height='default'
+      cols={JSON.stringify(cols)}
+      rows={JSON.stringify(rows)}
+      table-height='auto'>
+    </IfxBasicTable>
+
+  );
+}
+
+export default BasicTable;

examples/wrapper-components/vue-javascript/package.json

@@ -12,7 +12,7 @@
     "test:local": "run-s build:wrapper preview:link"
   },
   "dependencies": {
-    "@infineon/infineon-design-system-vue": "*",
+    "@infineon/infineon-design-system-vue": "^20.14.0--canary.396.2c24daddcc929ccf08c527ef4683ba8836d2364a.0",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vitejs/plugin-vue-jsx": "^3.0.1",
     "vite": "^4.3.9",

examples/wrapper-components/vue-javascript/src/App.vue

@@ -3,6 +3,7 @@
   <Navbar />
   <h1>Stencil Framework integration - Vue + JS </h1>
   <Alert />
+  <BasicTable />
   <Button />
   <Card />
   <SingleSelect />
@@ -49,6 +50,7 @@ import Dropdown from './components/Dropdown.vue'
 import Footer from './components/Footer.vue'
 import SingleSelect from './components/SingleSelect.vue'
 import MultiSelect from './components/MultiSelect.vue'
+import BasicTable from './components/BasicTable.vue'
 
 </script>
 

examples/wrapper-components/vue-javascript/src/components/BasicTable.vue

@@ -0,0 +1,22 @@
+
+
+<template>
+  <div>
+    <h2>Table</h2>
+    <ifx-basic-table 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}]'
+      table-height='auto'>
+    </ifx-basic-table>
+    <br />
+  </div>
+</template>
+
+<script setup>
+
+
+
+</script>
+
+
+

lerna.json

@@ -1,9 +1,9 @@
 {
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
-  "version": "0.0.0",
+  "version": "20.13.0",
   "command": {
     "publish": {
       "verifyAccess": false
     }
   }
-}
+}