Merge pull request #282 from teamsnap/fix-table-pageingation-buttons

fix having decimal for number of pagination buttons

CHANGELOG.md

@@ -12,6 +12,11 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - `Fixed` for any bug fixes.
 - `Security`
 
+## [3.6.2] - 2020-09-18
+- https://github.com/teamsnap/teamsnap-ui/pull/282
+- `Fixed` bug where paginated table would get error if number of items not divisible by row count
+- `Fixed` bug where paginated table row selection did not contain the default page size as an option
+
 ## [3.6.1] - 2020-04-09
 - https://github.com/teamsnap/teamsnap-ui/pull/271
 - `Fixed` bug where table would still try to sort even if external sort was provided

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamsnap/teamsnap-ui",
-  "version": "3.6.1",
+  "version": "3.6.2",
   "description": "a CSS component library for TeamSnap",
   "main": "dist/js/index.js",
   "types": "dist/js/index.d.ts",

src/js/components/Table/Paginated/PaginatedTable.stories.tsx

@@ -10,7 +10,7 @@ const columns = [
   { name: "name", label: "Member Name", isSortable: true },
   { name: "gender", label: "Gender", isSortable: true },
   { name: "age", label: "Age", isSortable: true },
-  { name: "programs", label: "Active Programs", isSortable: true }
+  { name: "programs", label: "Active Programs", isSortable: true },
 ];
 
 /**
@@ -26,8 +26,8 @@ const data = Promise.resolve<any[]>([
       { name: "2019 ACC Academy", subtitle: "(Junior Academy Tryout)" },
       { name: "2019 ACC Academy", subtitle: "(Junior Academy Tryout)" },
       { name: "2019 ACC Academy", subtitle: "(Junior Academy Tryout)" },
-      { name: "2019 ACC Academy", subtitle: "(Junior Academy Tryout)" }
-    ]
+      { name: "2019 ACC Academy", subtitle: "(Junior Academy Tryout)" },
+    ],
   },
   {
     name: "Dustin",
@@ -36,8 +36,8 @@ const data = Promise.resolve<any[]>([
     position: "Coach",
     activePrograms: [
       { name: "2019 ACC Academy", subtitle: "(Junior Academy Tryout)" },
-      { name: "2019 ACC Academy", subtitle: "(Junior Academy Tryout)" }
-    ]
+      { name: "2019 ACC Academy", subtitle: "(Junior Academy Tryout)" },
+    ],
   },
   {
     name: "Fred",
@@ -46,8 +46,8 @@ const data = Promise.resolve<any[]>([
     position: "Coach",
     activePrograms: [
       { name: "2019 ACC Academy", subtitle: "(Junior Academy Tryout)" },
-      { name: "2019 ACC Academy", subtitle: "(Junior Academy Tryout)" }
-    ]
+      { name: "2019 ACC Academy", subtitle: "(Junior Academy Tryout)" },
+    ],
   },
   {
     name: "Bobby",
@@ -56,8 +56,8 @@ const data = Promise.resolve<any[]>([
     position: "Coach",
     activePrograms: [
       { name: "2019 ACC Academy", subtitle: "(Junior Academy Tryout)" },
-      { name: "2019 ACC Academy", subtitle: "(Junior Academy Tryout)" }
-    ]
+      { name: "2019 ACC Academy", subtitle: "(Junior Academy Tryout)" },
+    ],
   },
   {
     name: "Christie",
@@ -66,8 +66,8 @@ const data = Promise.resolve<any[]>([
     position: "Coach",
     activePrograms: [
       { name: "2019 ACC Academy", subtitle: "(Junior Academy Tryout)" },
-      { name: "2019 ACC Academy", subtitle: "(Junior Academy Tryout)" }
-    ]
+      { name: "2019 ACC Academy", subtitle: "(Junior Academy Tryout)" },
+    ],
   },
   {
     name: "Jenna",
@@ -76,8 +76,8 @@ const data = Promise.resolve<any[]>([
     position: "Coach",
     activePrograms: [
       { name: "2019 ACC Academy", subtitle: "(Junior Academy Tryout)" },
-      { name: "2019 ACC Academy", subtitle: "(Junior Academy Tryout)" }
-    ]
+      { name: "2019 ACC Academy", subtitle: "(Junior Academy Tryout)" },
+    ],
   },
   {
     name: "Stacy",
@@ -86,9 +86,9 @@ const data = Promise.resolve<any[]>([
     position: "Coach",
     activePrograms: [
       { name: "2019 ACC Academy", subtitle: "(Junior Academy Tryout)" },
-      { name: "2019 ACC Academy", subtitle: "(Junior Academy Tryout)" }
-    ]
-  }
+      { name: "2019 ACC Academy", subtitle: "(Junior Academy Tryout)" },
+    ],
+  },
 ]);
 
 /**
@@ -101,7 +101,12 @@ const data = Promise.resolve<any[]>([
  * @param isAscending boolean - true if ascending, false if not.
  */
 function loadData(page, itemsPerPage, sortBy, isAscending) {
-  return data.then(items => [items[page - 1]]);
+  const startIndex = itemsPerPage * page - itemsPerPage;
+
+  return data.then((items) => {
+    const endIndex = Math.min(items.length, startIndex + itemsPerPage);
+    return items.slice(startIndex, endIndex);
+  });
 }
 
 /**
@@ -120,7 +125,9 @@ function mapData(item) {
     ),
     gender: item.gender,
     age: `${item.age}`,
-    programs: item.activePrograms.map((p, idx) => <div key={idx}>{p.name}</div>)
+    programs: item.activePrograms.map((p, idx) => (
+      <div key={idx}>{p.name}</div>
+    )),
   };
 }
 
@@ -129,7 +136,7 @@ stories.add("Default", () => (
     columns={columns}
     mapDataToRow={mapData}
     loadData={loadData}
-    defaultItemsPerPage={1}
+    defaultItemsPerPage={2}
     totalItems={7} // you'll likely need to calculate this in your component by inspecting the http response.
   />
 ));

src/js/components/Table/Paginated/PaginatedTable.tsx

@@ -31,16 +31,27 @@ const PaginatedTable: React.FunctionComponent<Props> = ({
   mapDataToRow,
   defaultPage,
   defaultItemsPerPage,
-  totalItems
+  totalItems,
 }) => {
   const [
     [itemsPerPage, setItemsPerPage],
-    [currentPage, setCurrentPage]
+    [currentPage, setCurrentPage],
   ] = usePagination(defaultItemsPerPage || 10, defaultPage || 1);
   const [dataSet, setDataSet] = React.useState([]);
   const [sortName, setSortName] = React.useState("");
   const [sortAscending, setSortAscending] = React.useState(false);
 
+  const defaultPageSizeOptions = [10, 25, 50];
+  const customOptions =
+    defaultPageSizeOptions.indexOf(defaultItemsPerPage) < 0
+      ? [defaultItemsPerPage]
+      : [];
+  const pageSizeOptions = defaultPageSizeOptions
+    .concat(customOptions)
+    .sort((a, b) => {
+      return a - b;
+    });
+
   React.useEffect(() => {
     const fetchData = async () => {
       const data = await loadData(
@@ -76,7 +87,7 @@ const PaginatedTable: React.FunctionComponent<Props> = ({
           />
           <div className="u-spaceLeftSm">
             <PaginationSelect
-              options={[10, 25, 50]}
+              options={pageSizeOptions}
               setItemsPerPage={setItemsPerPage}
             />
           </div>

src/js/components/Table/Paginated/helpers.tsx

@@ -4,7 +4,7 @@ export const getLastPageIndex = (
   totalItems: number,
   itemsPerPage: number
 ): number => {
-  const index = totalItems / itemsPerPage;
+  const index = Math.ceil(totalItems / itemsPerPage);
   return Math.max(1, index);
 };