@tsed/react-formio 2.1.2 → 2.2.0

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/components/defaultCellHeader.component.tsx

@@ -9,11 +9,11 @@ export function DefaultCellHeader<Data extends Record<string, unknown> = {}>({ c
   return (
     <div className={"table-cell-header"}>
       <div className='table-cell-header__label' {...column.getSortByToggleProps()}>
-        <span>{column.render("Header")}</span>
+        <span>{column.render("Header") as any}</span>
 
-        {column.render("ArrowSort")}
+        {column.render("ArrowSort") as any}
       </div>
-      {column.canFilter ? <div className='table-cell-header__filter'>{column.render("Filter")}</div> : null}
+      {column.canFilter ? <div className='table-cell-header__filter'>{column.render("Filter") as any}</div> : null}
     </div>
   );
 }

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

@@ -13,7 +13,7 @@ export function DefaultCells<Data extends object = {}>({ row }: { row: Row<Data>
 
         return (
           <td colSpan={colspan} {...cell.getCellProps()} key={`tableInstance.page.cells.${cell.value || "value"}.${i}`}>
-            {cell.render("Cell")}
+            {cell.render("Cell") as any}
           </td>
         );
       })}

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

@@ -15,7 +15,7 @@ export function DefaultColumnFilter<D extends Record<string, unknown> = {}>(
   const [value, setValue] = useState(filterValue || "");
 
   const onChange = useCallback(
-    (name, value) => {
+    (name: string, value: any) => {
       setValue(value);
       setFilterId(id);
       setFilter(value || undefined);

package/src/components/table/hooks/useCustomTable.hook.tsx

@@ -156,7 +156,7 @@ export function useCustomTable<Data extends object = {}>(props: PropsWithChildre
   const [filterId, setFilterId] = React.useState(controlledFilterId);
 
   // DND
-  const [records, setRecords] = useState<Data[]>(data);
+  const [records, setRecords] = useState<readonly Data[]>(data);
 
   useEffect(() => {
     setRecords(data);
@@ -212,12 +212,10 @@ export function useCustomTable<Data extends object = {}>(props: PropsWithChildre
   }, [onChange, pageIndex, pageSize, sortBy, filters, filterId]);
 
   return {
-    ...props,
     className,
     tableInstance,
     CellHeader,
     isLoading,
-    onClick: _onClick,
     Loader,
     EmptyData,
     Row,
@@ -230,7 +228,9 @@ export function useCustomTable<Data extends object = {}>(props: PropsWithChildre
     setPageSize,
     i18n,
     children,
+    onClick: _onClick as any,
     onDrag: _onDrag,
-    onDrop: onDrop
+    onDrop: onDrop,
+    enableDragNDrop: props.enableDragNDrop
   };
 }

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/tsconfig.json

@@ -1,7 +1,8 @@
 {
   "extends": "@tsed/config/tsconfig.web.json",
   "compilerOptions": {
-    "rootDir": "src"
+    "rootDir": "src",
+    "moduleResolution": "node"
   },
   "include": ["src"],
   "references": [