feat(components): add totalLength option on Pagination component

tsedio · Sep 19, 2023 · 09d0a1d · 09d0a1d
1 parent 535f6da
commit 09d0a1d
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 14 deletions.
diff --git a/packages/react-formio/src/components/pagination/pagination.component.spec.tsx b/packages/react-formio/src/components/pagination/pagination.component.spec.tsx
@@ -111,4 +111,12 @@ describe("Pagination", () => {
     expect(selectComp).toBeInTheDocument();
     expect(selectChilds.length === pageSizes.length).toBeTruthy();
   });
+
+  it("should display total length", () => {
+    const pageSizes = [10, 25, 50, 100, 200, 500];
+
+    render(<Sandbox {...Sandbox.args} pageSizes={pageSizes} totalLength={1000} />);
+
+    expect(screen.getByTestId("pagination-total-items")).toHaveTextContent("1,000 items");
+  });
 });
diff --git a/packages/react-formio/src/components/pagination/pagination.component.tsx b/packages/react-formio/src/components/pagination/pagination.component.tsx
@@ -38,7 +38,7 @@ export interface PaginationProps {
   canNextPage: boolean;
   pageCount: number;
   pageIndex: number;
-  pageOptions?: any;
+  pageOptions?: number[];
   pageSize: number;
   setPageSize: any;
   totalLength?: number;
@@ -117,7 +117,7 @@ export function Pagination(props: PaginationProps) {
         <span className={"ml-3"}>{i18n("items per page")}</span>
       </li>
       {pageOptions && (
-        <li className={"mb-3 flex items-center"}>
+        <li className={"mb-3 mr-3 flex items-center"}>
           <span>{i18n("Page")}&nbsp;</span>
           <strong>
             {pageIndex + 1} of {pageOptions.length}
@@ -129,6 +129,11 @@ export function Pagination(props: PaginationProps) {
           )}
         </li>
       )}
+      {totalLength !== undefined && (
+        <li className={"mb-3 flex items-center"} data-testid='pagination-total-items'>
+          {i18n("Totals")}: <strong>{new Intl.NumberFormat(undefined).format(totalLength)}</strong> {i18n("items")}
+        </li>
+      )}
     </nav>
   );
 }
diff --git a/packages/react-formio/src/components/table/hooks/useCustomTable.hook.tsx b/packages/react-formio/src/components/table/hooks/useCustomTable.hook.tsx
@@ -1,17 +1,6 @@
 import noop from "lodash/noop";
 import React, { PropsWithChildren, useEffect, useState } from "react";
-import {
-  CellProps,
-  FilterProps,
-  Renderer,
-  TableInstance,
-  TableOptions,
-  useFilters,
-  useGroupBy,
-  usePagination,
-  useSortBy,
-  useTable
-} from "react-table";
+import { CellProps, FilterProps, Renderer, TableOptions, useFilters, useGroupBy, usePagination, useSortBy, useTable } from "react-table";
 
 import { OnClickOperation, Operation, QueryOptions } from "../../../interfaces";
 import { Pagination as DefaultPagination } from "../../pagination/pagination.component";