Merge pull request #1972 from Infineon/1945-ifxtable-paginationpagesize-not-working

Advanced Table: implements paginationItemsPerPage prop to the advanced table

Author: tishoyanchev

examples/wrapper-components/react-vite-js/package-lock.json

@@ -18,7 +18,7 @@
     "test:local": "run-p preview:link watch:library"
   },
   "dependencies": {
-    "@infineon/infineon-design-system-react": "37.6.1--canary.1966.e96d71b6f98f75b52431f1400b252ee3aa720e04.0",
+    "@infineon/infineon-design-system-react": "37.8.0--canary.1972.48f8ab6f949c52ae531b360a79534ba48d82824f.0",
     "path": "^0.12.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"

examples/wrapper-components/react-vite-js/package.json

@@ -6,6 +6,12 @@ export default function App() {
   const [currentPage, setCurrentPage] = useState(1)
   const [postsPerPage, setPostsPerPage] = useState(10)
 
+  const itemsPerPage = JSON.stringify([
+    { value: 10, label: '10', selected: true },
+    { value: 20, label: '20', selected: false },
+    { value: 30, label: '30', selected: false }
+  ]);
+
   const rows = data.map((item) => ({ firstName: item.first_name, lastName: item.last_name, email: item.email, phone: item.phone }));
   const indexOfLastPost = currentPage * postsPerPage;
   const indexOfFirstPost = indexOfLastPost - postsPerPage;
@@ -43,7 +49,7 @@ export default function App() {
         currentPage={1}
         total={36}
         onIfxPageChange={handlePageChange}
-        items-per-page='[{"value":"ten","label":"10","selected":true}, {"value":"Twenty","label":"20","selected":false}, {"value":"Thirty","label":"30","selected":false}]'
+        items-per-page={itemsPerPage}
       />
     </div>
   );

examples/wrapper-components/react-vite-js/src/components/Pagination/Pagination.jsx

@@ -57,7 +57,6 @@ function Table() {
                 rows={tableRowsWithBtn}
                 table-height="auto"
                 pagination="false"
-                pagination-page-size="10"
                 filter-orientation="none"
             ></ifx-table>
 
@@ -66,10 +65,10 @@ function Table() {
             <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}]'
+                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}, {"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"
+                pagination="true"
+                paginationItemsPerPage='[{"value":"10","selected":true}, {"value":"20","selected":false}, {"value":"30","selected":false}]'
                 filter-orientation="sidebar">
                 <IfxFilterTypeGroup slot="sidebar-filter">
                     <div slot="filter-search">

examples/wrapper-components/react-vite-js/src/components/Table/Table.jsx

@@ -15,7 +15,7 @@
     "test:local": "run-p preview:link watch:library"
   },
   "dependencies": {
-    "@infineon/infineon-design-system-vue": "37.6.1--canary.1966.e96d71b6f98f75b52431f1400b252ee3aa720e04.0",
+    "@infineon/infineon-design-system-vue": "37.8.0--canary.1972.48f8ab6f949c52ae531b360a79534ba48d82824f.0",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vitejs/plugin-vue-jsx": "^4.0.0",
     "vite": "^5.0.12",

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

@@ -5,7 +5,7 @@
     <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"}]'
       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">
+      table-height="auto" pagination="false" filter-orientation="sidebar">
       <ifx-filter-type-group slot="sidebar-filter">
         <div slot="filter-search">
           <ifx-filter-search filter-orientation="sidebar" filter-name="search"></ifx-filter-search>
@@ -71,7 +71,6 @@
       row-height="default"
       table-height="auto"
       pagination="false"
-      pagination-page-size="10"
       filter-orientation="none">
     </ifx-table>
 

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

@@ -1,6 +1,6 @@
 {
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
-  "version": "37.6.1--canary.1966.e96d71b6f98f75b52431f1400b252ee3aa720e04.0",
+  "version": "37.8.0--canary.1972.48f8ab6f949c52ae531b360a79534ba48d82824f.0",
   "command": {
     "publish": {
       "verifyAccess": false