@tsed/react-formio 2.1.4 → 2.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsed/react-formio",
-  "version": "2.1.4",
+  "version": "2.2.1",
   "description": "Provide a react formio wrapper. Written in TypeScript.",
   "main": "dist/index.js",
   "module": "dist/index.modern.js",
@@ -31,8 +31,8 @@
     "tooltip.js": ">=1.3.3"
   },
   "devDependencies": {
-    "@tsed/tailwind": "2.1.4",
-    "@tsed/tailwind-formio": "2.1.4"
+    "@tsed/tailwind": "2.2.1",
+    "@tsed/tailwind-formio": "2.2.1"
   },
   "repository": "https://github.com/TypedProject/tsed-formio",
   "bugs": {

package/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");
+  });
 });

package/src/components/pagination/pagination.component.tsx

@@ -38,9 +38,10 @@ export interface PaginationProps {
   canNextPage: boolean;
   pageCount: number;
   pageIndex: number;
-  pageOptions?: any;
+  pageOptions?: number[];
   pageSize: number;
   setPageSize: any;
+  totalLength?: number;
   i18n?: (f: string) => string;
 }
 
@@ -58,6 +59,7 @@ export function Pagination(props: PaginationProps) {
     pageOptions,
     pageSize,
     setPageSize,
+    totalLength,
     i18n = (f: string) => f
   } = props;
 
@@ -115,11 +117,21 @@ 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}
           </strong>
+          {totalLength !== undefined && (
+            <span className='ml-3'>
+              {i18n("Totals")}: <strong>{new Intl.NumberFormat(undefined).format(totalLength)}</strong> {i18n("items")}
+            </span>
+          )}
+        </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>

package/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";
@@ -36,6 +25,10 @@ export interface TableProps<Data extends object = any> extends TableOptions<Data
    * Pagination steps list
    */
   pageSizes?: number[];
+  /**
+   * Total length of the data
+   */
+  totalLength?: number;
   /**
    *
    */
@@ -137,6 +130,7 @@ export function useCustomTable<Data extends object = {}>(props: PropsWithChildre
     filterId: controlledFilterId,
     pageSize: controlledPageSize,
     pageIndex: controlledPageIndex,
+    totalLength,
     sortBy: controlledSortBy,
     isLoading,
     disableFilters,
@@ -236,6 +230,7 @@ export function useCustomTable<Data extends object = {}>(props: PropsWithChildre
     pageIndex,
     pageSize,
     pageSizes,
+    totalLength,
     setPageSize,
     i18n,
     children,

package/src/components/table/index.ts

@@ -10,3 +10,6 @@ export * from "./filters/sliderColumnFilter.component";
 export * from "./hooks/useCustomTable.hook";
 export * from "./hooks/useOperations.hook";
 export * from "./table.component";
+export * from "./utils/getPageNumbers";
+export * from "./utils/mapFormToColumns";
+export * from "./utils/swapElements";

package/src/components/table/table.component.tsx

@@ -20,6 +20,7 @@ export function Table<Data extends object = any>(props: PropsWithChildren<TableP
     pageSize,
     pageSizes,
     setPageSize,
+    totalLength,
     i18n,
     enableDragNDrop,
     children,
@@ -81,6 +82,7 @@ export function Table<Data extends object = any>(props: PropsWithChildren<TableP
           <div className={"overflow-hidden"}>
             <Pagination
               {...tableInstance}
+              totalLength={totalLength}
               className={"text-sm"}
               pageIndex={pageIndex}
               pageSize={pageSize}