From 46cf07aa7cfd3eca8d61b1e9a4159374644b7f89 Mon Sep 17 00:00:00 2001
From: Z <zyradyl@users.noreply.github.com>
Date: Tue, 5 Oct 2021 00:41:25 -0500
Subject: [PATCH] add simple selector for #1320 (#1355)

---
 htmlui/src/Table.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/htmlui/src/Table.js b/htmlui/src/Table.js
index 20b8365a8..82fc81b40 100644
--- a/htmlui/src/Table.js
+++ b/htmlui/src/Table.js
@@ -59,7 +59,8 @@ export default function MyTable({ columns, data }) {
     gotoPage,
     nextPage,
     previousPage,
-    state: { pageIndex },
+    setPageSize,
+    state: { pageIndex, pageSize },
   } = useTable({
     columns,
     data,
@@ -80,13 +81,14 @@ export default function MyTable({ columns, data }) {
     <Pagination size="sm" variant="dark">
       <Pagination.First onClick={() => gotoPage(0)} disabled={!canPreviousPage} />
       <Pagination.Prev onClick={() => previousPage()} disabled={!canPreviousPage} />
+      {paginationItems(pageOptions.length, pageIndex+1, gotoPage)}
       <Pagination.Next onClick={() => nextPage()} disabled={!canNextPage} />
       <Pagination.Last onClick={() => gotoPage(pageCount - 1)} disabled={!canNextPage} />
     </Pagination>
-
-    &nbsp;
     <Pagination size="sm" variant="dark">
-      {paginationItems(pageOptions.length, pageIndex+1, gotoPage)}
+    <select value={pageSize} onChange={e => {setPageSize(Number(e.target.value))}}>
+      {[10, 20, 30, 40, 50, 100].map(pageSize => (<option key={pageSize} value={pageSize}>Show {pageSize}</option>))}
+    </select>
     </Pagination>
     </>;