@tsed/react-formio 1.9.9 → 1.10.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsed/react-formio",
-  "version": "1.9.9",
+  "version": "1.10.3",
   "main": "dist/index.js",
   "module": "dist/index.modern.js",
   "source": "src/index.ts",
@@ -13,7 +13,7 @@
     "prettier": "prettier '{src,test}/**/*.{ts,tsx}' --write"
   },
   "dependencies": {
-    "@tsed/redux-utils": "1.9.9",
+    "@tsed/redux-utils": "1.10.3",
     "eventemitter2": "^6.4.3",
     "prop-types": "^15.7.2"
   },
@@ -28,8 +28,8 @@
     "tooltip.js": "^1.3.3"
   },
   "devDependencies": {
-    "@tsed/tailwind": "1.9.9",
-    "@tsed/tailwind-formio": "1.9.9"
+    "@tsed/tailwind": "1.10.3",
+    "@tsed/tailwind-formio": "1.10.3"
   },
   "repository": "https://github.com/TypedProject/tsed-formio",
   "bugs": {

package/src/components/index.ts

@@ -19,6 +19,6 @@ export * from "./pagination/pagination.component";
 export * from "./react-component/reactComponent.component";
 export * from "./select/select.component";
 export * from "./submissions-table/submissionsTable.component";
-export * from "./table/table.component";
+export * from "./table";
 export * from "./tabs/tabs.component";
 export * from "./loader/loader.component";

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

@@ -1,9 +1,8 @@
 import React from "react";
 import { HeaderGroup } from "react-table";
 
-export interface DefaultCellHeaderProps<
-  Data extends Record<string, unknown> = {}
-> extends Record<string, unknown> {
+export interface DefaultCellHeaderProps<Data extends object = any>
+  extends Record<string, unknown> {
   column: HeaderGroup<Data>;
 }
 

package/src/components/table/index.ts

@@ -0,0 +1,11 @@
+export * from "./utils/useOperations.hook";
+export * from "./components/cell.component";
+export * from "./components/defaultArrowSort.component";
+export * from "./components/defaultCellHeader.component";
+export * from "./components/defaultCellHeader.component";
+export * from "./components/defaultCellOperations.component";
+export * from "./components/defaultOperationButton.component";
+export * from "./filters/defaultColumnFilter.component";
+export * from "./filters/selectColumnFilter.component";
+export * from "./filters/sliderColumnFilter.component";
+export * from "./table.component";

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

@@ -22,7 +22,7 @@ import {
 import { DefaultColumnFilter } from "./filters/defaultColumnFilter.component";
 import { useOperations } from "./utils/useOperations.hook";
 
-export interface TableProps<Data extends Record<string, unknown> = {}>
+export interface TableProps<Data extends object = any>
   extends TableOptions<Data>,
     Partial<QueryOptions> {
   className?: string;
@@ -82,6 +82,9 @@ export interface TableProps<Data extends Record<string, unknown> = {}>
    * Disable pagination
    */
   disablePagination?: boolean;
+  manualPagination?: boolean;
+  manualSortBy?: boolean;
+  manualFilters?: boolean;
   /**
    * Configuration operation for each line.
    */
@@ -116,7 +119,7 @@ function DefaultEmptyData() {
 
 const hooks = [useFilters, useGroupBy, useSortBy, usePagination];
 
-export function Table<Data extends Record<string, unknown>>(
+export function Table<Data extends object = any>(
   props: PropsWithChildren<TableProps<Data>>
 ) {
   const {
@@ -174,9 +177,12 @@ export function Table<Data extends Record<string, unknown>>(
         pageSize: controlledPageSize || 10,
         sortBy: controlledSortBy || []
       } as any,
-      manualPagination: true,
-      manualSortBy: true,
-      manualFilters: true,
+      manualPagination:
+        props.manualPagination === undefined ? true : props.manualPagination,
+      manualSortBy:
+        props.manualSortBy === undefined ? true : props.manualPagination,
+      manualFilters:
+        props.manualFilters === undefined ? true : props.manualFilters,
       disableFilters,
       filterId,
       setFilterId
@@ -251,15 +257,17 @@ export function Table<Data extends Record<string, unknown>>(
       {isLoading ? <Loader /> : null}
       {!data.length ? <EmptyData /> : null}
       {!isLoading && data.length && !disablePagination ? (
-        <Pagination
-          {...tableInstance}
-          className={"text-sm"}
-          pageIndex={pageIndex}
-          pageSize={pageSize}
-          pageSizes={pageSizes}
-          setPageSize={setPageSize}
-          i18n={i18n}
-        />
+        <div className={"overflow-hidden"}>
+          <Pagination
+            {...tableInstance}
+            className={"text-sm"}
+            pageIndex={pageIndex}
+            pageSize={pageSize}
+            pageSizes={pageSizes}
+            setPageSize={setPageSize}
+            i18n={i18n}
+          />
+        </div>
       ) : null}
       {children}
     </div>

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

@@ -1,52 +0,0 @@
-// // This is a custom UI for our 'between' or number range
-// // filter. It uses two number boxes and filters rows to
-// // ones that have values between the two
-// import React from 'react'
-//
-// export function NumberRangeColumnFilter ({ column: { filterValue = [], preFilteredRows, setFilter, id } }) {
-//   const [min, max] = React.useMemo(() => {
-//     let min = preFilteredRows.length ? preFilteredRows[0].values[id] : 0
-//     let max = preFilteredRows.length ? preFilteredRows[0].values[id] : 0
-//     preFilteredRows.forEach(row => {
-//       min = Math.min(row.values[id], min)
-//       max = Math.max(row.values[id], max)
-//     })
-//     return [min, max]
-//   }, [id, preFilteredRows])
-//
-//   return (
-//     <div
-//       style={{
-//         display: 'flex'
-//       }}
-//     >
-//       <input
-//         value={filterValue[0] || ''}
-//         type="number"
-//         onChange={e => {
-//           const val = e.target.value
-//           setFilter((old = []) => [val ? parseInt(val, 10) : undefined, old[1]])
-//         }}
-//         placeholder={`Min (${min})`}
-//         style={{
-//           width: '70px',
-//           marginRight: '0.5rem'
-//         }}
-//       />
-//       to
-//       <input
-//         value={filterValue[1] || ''}
-//         type="number"
-//         onChange={e => {
-//           const val = e.target.value
-//           setFilter((old = []) => [old[0], val ? parseInt(val, 10) : undefined])
-//         }}
-//         placeholder={`Max (${max})`}
-//         style={{
-//           width: '70px',
-//           marginLeft: '0.5rem'
-//         }}
-//       />
-//     </div>
-//   )
-// }