sync multiple Pagination components

Author: milahu

src/components/Pagination.jsx

@@ -15,6 +15,7 @@ export const Pagination = component$((props) => {
 
   const changePosts = $((e) => {
     props.postPerPage.value = e.target.value ;
+    props.postPerPageSelectedIndex.value = props.postPerPageValues.indexOf(props.postPerPage.value);
   })
 
   const changePageNo = $((e) => {
@@ -42,17 +43,10 @@ export const Pagination = component$((props) => {
 
       <div class='post-select'>
         <div>Rows per page </div>
-        <select onInput$={changePosts}>
-          <option>10</option>
-          <option>20</option>
-          <option>50</option>
-          <option selected>100</option>
-          <option>200</option>
-          <option>500</option>
-          <option>1000</option>
-          <option>2000</option>
-          <option>5000</option>
-          <option>10000</option>
+        <select bind:value={props.postPerPage}>
+          {props.postPerPageValues.map(postPerPage => (
+            <option selected={postPerPage == props.postPerPage.value}>{postPerPage}</option>
+          ))}
         </select>
       </div>
 

src/components/table/QwikTable.jsx

@@ -34,11 +34,29 @@ export const QwikTable = component$((props) => {
   );
   useStylesScoped$(AppCSS);
 
+  const postPerPageValues = [
+    10,
+    20,
+    30,
+    50,
+    100,
+    200,
+    300,
+    500,
+    1000,
+    2000,
+    3000,
+    5000,
+    10000,
+  ];
+
+  const postPerPageDefaultValue = 100;
+
   const sortOrder = useSignal('asc');
   //const sortKey = useSignal(props.header[0].key);
   const sortKey = useSignal(undefined); // perf: dont sort by default
   const pageNo = useSignal(1);
-  const postPerPage = useSignal(100);
+  const postPerPage = useSignal(postPerPageDefaultValue);
   const totalPosts = useSignal(props.data.length);
   const searchBy = useSignal(props.header[0].key);
   const searchInp = useSignal('');
@@ -99,6 +117,7 @@ export const QwikTable = component$((props) => {
 
       <Pagination
         pageNo={pageNo}
+        postPerPageValues={postPerPageValues}
         postPerPage={postPerPage}
         totalPosts={totalPosts}
       />
@@ -117,6 +136,7 @@ export const QwikTable = component$((props) => {
 
       <Pagination
         pageNo={pageNo}
+        postPerPageValues={postPerPageValues}
         postPerPage={postPerPage}
         totalPosts={totalPosts}
       />