@trackunit/react-table 0.0.207-alpha-11d90c6ca6.0 → 0.0.209

package/index.cjs.js

@@ -345,8 +345,8 @@ const Table = (_a) => {
         rowHeight,
     });
     const hasResults = props.getRowModel().rows.length > 0;
-    return (jsxRuntime.jsxs(reactComponents.Card, { className: `flex flex-col overflow-hidden ${props.className || ""}`, dataTestId: props.dataTestId, children: [(props.headerLeftActions || props.headerRightActions) && (jsxRuntime.jsxs("div", { className: "z-default flex justify-between gap-2 p-2", children: [jsxRuntime.jsx("div", { className: "flex", children: props.headerLeftActions }), jsxRuntime.jsx("div", { className: "flex", children: props.headerRightActions })] })), jsxRuntime.jsx("div", { className: "min-h[500px] h-full overflow-x-auto overflow-y-scroll border-b border-t border-gray-300", ref: tableContainerRef, onScroll: e => fetchMoreOnBottomReached(e.target), children: jsxRuntime.jsxs(reactTableBaseComponents.TableRoot, { style: {
-                        height: getTotalSize() > 0 ? getTotalSize() : "100%",
+    return (jsxRuntime.jsxs(reactComponents.Card, { className: `flex flex-col overflow-hidden ${props.className || ""}`, dataTestId: props.dataTestId, children: [(props.headerLeftActions || props.headerRightActions) && (jsxRuntime.jsxs("div", { className: "z-default flex justify-between gap-2 p-2", children: [jsxRuntime.jsx("div", { className: "flex", children: props.headerLeftActions }), jsxRuntime.jsx("div", { className: "flex", children: props.headerRightActions })] })), jsxRuntime.jsx("div", { className: "h-full overflow-x-auto overflow-y-scroll border-b border-t border-gray-300", ref: tableContainerRef, onScroll: e => fetchMoreOnBottomReached(e.target), children: jsxRuntime.jsxs(reactTableBaseComponents.TableRoot, { style: {
+                        height: hasResults ? "auto" : "100%",
                         width: "100%",
                         position: "relative",
                     }, children: [jsxRuntime.jsx(reactTableBaseComponents.Thead, { className: "z-default", children: props.getHeaderGroups().map(headerGroup => (jsxRuntime.jsx(reactTableBaseComponents.Tr, { className: "flex", children: headerGroup.headers.map(header => {
@@ -358,7 +358,9 @@ const Table = (_a) => {
                                             textAlign: ((_a = header.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.alignment) || "left",
                                         }, className: "relative", children: [header.isPlaceholder ? null : (jsxRuntime.jsxs("div", { className: `${header.column.getCanSort() ? "cursor-pointer select-none flex" : ""} items-center gap-2 py-2 overflow-hidden pr-3`,
                                                 onClick: header.column.getToggleSortingHandler(), children: [jsxRuntime.jsxs("span", { className: "overflow-hidden text-ellipsis whitespace-nowrap", children: [reactTable.flexRender(header.column.columnDef.header, header.getContext()), ((_c = (_b = header.column.columnDef) === null || _b === void 0 ? void 0 : _b.meta) === null || _c === void 0 ? void 0 : _c.subHeader) ? (jsxRuntime.jsx(reactComponents.Text, { size: "small", subtle: true, children: (_e = (_d = header.column.columnDef) === null || _d === void 0 ? void 0 : _d.meta) === null || _e === void 0 ? void 0 : _e.subHeader })) : null] }), header.column.getCanSort() ? (jsxRuntime.jsx(reactTableBaseComponents.SortIndicator, { sortingState: header.column.getIsSorted() })) : null] })), header.column.getCanResize() ? (jsxRuntime.jsx(reactTableBaseComponents.ResizeHandle, { isResizing: header.column.getIsResizing(), onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler() })) : null] }, header.id));
-                                }) }, headerGroup.id))) }), hasResults ? (jsxRuntime.jsx(reactTableBaseComponents.Tbody, { className: "text-sm font-normal", children: getVirtualItems().map((virtualRow, index) => {
+                                }) }, headerGroup.id))) }), hasResults ? (jsxRuntime.jsx(reactTableBaseComponents.Tbody, { className: "text-sm font-normal", style: {
+                                height: `${getTotalSize()}px`,
+                            }, children: getVirtualItems().map((virtualRow, index) => {
                                 const row = props.getRowModel().rows[virtualRow.index];
                                 if (!row) {
                                     return null;
@@ -385,7 +387,7 @@ const Table = (_a) => {
                                                 }, children: jsxRuntime.jsx("div", { className: "grid h-full items-center", children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }) }));
                                         }) }, row.id));
                                 }
-                            }) })) : (jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { className: "b-0", children: (props === null || props === void 0 ? void 0 : props.loading) ? (jsxRuntime.jsx(reactComponents.Spinner, { centering: "centered", containerClassName: "absolute inset-0" })) : (props === null || props === void 0 ? void 0 : props.noDataMessage) ? (props.noDataMessage) : (jsxRuntime.jsx(reactComponents.EmptyState, { image: "SEARCH_DOCUMENT", description: t("table.noResults"), className: "absolute inset-0" })) }) }) }))] }) }), props.hideFooter ? null : (jsxRuntime.jsxs("div", { className: "flex items-center p-2", children: [jsxRuntime.jsx("div", { className: "whitespace-nowrap text-xs font-medium text-neutral-600", children: t("table.pagination.full", {
+                            }) })) : (jsxRuntime.jsx("tbody", { className: "min-h-[400px]", children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { className: "b-0", children: (props === null || props === void 0 ? void 0 : props.loading) ? (jsxRuntime.jsx(reactComponents.Spinner, { centering: "centered", containerClassName: "absolute inset-0" })) : (props === null || props === void 0 ? void 0 : props.noDataMessage) ? (props.noDataMessage) : (jsxRuntime.jsx(reactComponents.EmptyState, { image: "SEARCH_DOCUMENT", description: t("table.noResults"), className: "absolute inset-0" })) }) }) }))] }) }), props.hideFooter ? null : (jsxRuntime.jsxs("div", { className: "flex items-center p-2", children: [jsxRuntime.jsx("div", { className: "whitespace-nowrap text-xs font-medium text-neutral-600", children: t("table.pagination.full", {
                             count: props.getRowModel().rows.length,
                             total: ((_c = (_b = props.pagination) === null || _b === void 0 ? void 0 : _b.pageInfo) === null || _c === void 0 ? void 0 : _c.count) || 0,
                         }) }), props.pagination.isLoading ? (jsxRuntime.jsx("span", { className: "ml-2", children: jsxRuntime.jsx(reactComponents.Spinner, { size: "small" }) })) : null, props.footerRightActions && jsxRuntime.jsx("div", { className: "flex flex-1 justify-end", children: props.footerRightActions })] }))] }));
@@ -403,9 +405,9 @@ const cvaColumnFilterGrabbable = cssClassVarianceUtilities.cvaMerge(["flex", "it
 /**
  * ColumnFilter component for managing visibility and order of table columns.
  *
- * @template TColumnFilter - The type representing the data model associated with the columns.
- * @template TColumnFilterValue - The type representing the value of columns.
- * @param {ColumnFilterProps<TColumnFilter, TColumnFilterValue>} props - The props object containing necessary properties.
+ * @template T - The type representing the data model associated with the columns.
+ * @template V - The type representing the value of columns.
+ * @param {IColumnFilterProps<T, V>} props - The props object containing necessary properties.
  * @returns {JSX.Element | null} A React JSX element representing the ColumnFilter component or null if columns are not provided.
  */
 const ColumnFilter = ({ columns, setColumnOrder, defaultColumnOrder, columnOrder, onUserEvent, }) => {
@@ -556,12 +558,12 @@ const CompactIcon = () => {
 /**
  * Sorting component for managing table column sorting.
  *
- * @template TSorting - The type representing the data model associated with the columns.
- * @template TSortingValue - The type representing the value of columns.
- * @param {SortingProps<TSorting, TSortingValue>} props - The props object containing sorting properties.
+ * @template T - The type representing the data model associated with the columns.
+ * @template V - The type representing the value of columns.
+ * @param {SortingProps<T, V>} props - The props object containing sorting properties.
  * @returns {JSX.Element | null} A React JSX element representing the Sorting component or null if there are no sortable columns.
  */
-const Sorting = ({ columns, }) => {
+const Sorting = ({ columns }) => {
     var _a, _b;
     const [t] = useTranslation();
     const sortableColumns = columns.filter(column => column.getCanSort());
@@ -586,6 +588,60 @@ const Sorting = ({ columns, }) => {
                                 }) }), jsxRuntime.jsxs(reactFormComponents.RadioGroup, { id: "sortOrder", onChange: onSelectOrder, value: currentSortDirection, children: [jsxRuntime.jsx(reactFormComponents.RadioItem, { className: "w-full", label: t("table.sorting.ascending"), value: "asc" }), jsxRuntime.jsx(reactFormComponents.RadioItem, { className: "w-full", label: t("table.sorting.descending"), value: "desc" })] })] }) })] }) }));
 };
 
+/**
+ * Custom hook for handling Relay pagination in tables.
+ *
+ * @param {RelayPaginationProps} props - The props object containing pagination configuration.
+ * @returns {RelayPaginationSupport} An object containing functions and state for managing Relay pagination.
+ */
+const useRelayPagination = (props = { pageSize: 50 }) => {
+    const [variables, setVariables] = React.useState({ first: props.pageSize });
+    const [pageInfo, setPageInfo] = React.useState();
+    const [isLoading, setIsLoading] = React.useState(false);
+    const nextPage = React.useCallback(() => {
+        if (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.hasNextPage) {
+            setVariables({
+                after: (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.endCursor) === null ? undefined : pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.endCursor,
+                first: props.pageSize,
+            });
+        }
+    }, [pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.endCursor, pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.hasNextPage, props.pageSize]);
+    const previousPage = React.useCallback(() => {
+        if (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.hasPreviousPage) {
+            setVariables({
+                before: (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.startCursor) === null ? undefined : pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.startCursor,
+                last: props.pageSize,
+            });
+        }
+    }, [pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.hasPreviousPage, pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.startCursor, props.pageSize]);
+    const reset = React.useCallback(() => {
+        setVariables({
+            last: undefined,
+            before: undefined,
+            after: undefined,
+            first: props.pageSize,
+        });
+        if (props.onReset) {
+            props.onReset();
+        }
+    }, [props.onReset, props.pageSize]);
+    const pagination = React.useMemo(() => {
+        return {
+            variables,
+            table: {
+                nextPage,
+                previousPage,
+                isLoading,
+                setIsLoading,
+                reset,
+                pageInfo: pageInfo === null ? undefined : pageInfo,
+                setPageInfo,
+            },
+        };
+    }, [variables, nextPage, previousPage, isLoading, reset, pageInfo]);
+    return pagination;
+};
+
 /**
  * Hook for managing and controlling a table's state and behavior.
  *
@@ -806,5 +862,6 @@ exports.fromTUSortToTanStack = fromTUSortToTanStack;
 exports.fromTUSortToTanStackSite = fromTUSortToTanStackSite;
 exports.fromTanStackToTUSort = fromTanStackToTUSort;
 exports.fromTanStackToTUSortSite = fromTanStackToTUSortSite;
+exports.useRelayPagination = useRelayPagination;
 exports.useTable = useTable;
 exports.useTableSelection = useTableSelection;

package/index.esm.js

@@ -320,8 +320,8 @@ const Table = (_a) => {
         rowHeight,
     });
     const hasResults = props.getRowModel().rows.length > 0;
-    return (jsxs(Card, { className: `flex flex-col overflow-hidden ${props.className || ""}`, dataTestId: props.dataTestId, children: [(props.headerLeftActions || props.headerRightActions) && (jsxs("div", { className: "z-default flex justify-between gap-2 p-2", children: [jsx("div", { className: "flex", children: props.headerLeftActions }), jsx("div", { className: "flex", children: props.headerRightActions })] })), jsx("div", { className: "min-h[500px] h-full overflow-x-auto overflow-y-scroll border-b border-t border-gray-300", ref: tableContainerRef, onScroll: e => fetchMoreOnBottomReached(e.target), children: jsxs(TableRoot, { style: {
-                        height: getTotalSize() > 0 ? getTotalSize() : "100%",
+    return (jsxs(Card, { className: `flex flex-col overflow-hidden ${props.className || ""}`, dataTestId: props.dataTestId, children: [(props.headerLeftActions || props.headerRightActions) && (jsxs("div", { className: "z-default flex justify-between gap-2 p-2", children: [jsx("div", { className: "flex", children: props.headerLeftActions }), jsx("div", { className: "flex", children: props.headerRightActions })] })), jsx("div", { className: "h-full overflow-x-auto overflow-y-scroll border-b border-t border-gray-300", ref: tableContainerRef, onScroll: e => fetchMoreOnBottomReached(e.target), children: jsxs(TableRoot, { style: {
+                        height: hasResults ? "auto" : "100%",
                         width: "100%",
                         position: "relative",
                     }, children: [jsx(Thead, { className: "z-default", children: props.getHeaderGroups().map(headerGroup => (jsx(Tr, { className: "flex", children: headerGroup.headers.map(header => {
@@ -333,7 +333,9 @@ const Table = (_a) => {
                                             textAlign: ((_a = header.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.alignment) || "left",
                                         }, className: "relative", children: [header.isPlaceholder ? null : (jsxs("div", { className: `${header.column.getCanSort() ? "cursor-pointer select-none flex" : ""} items-center gap-2 py-2 overflow-hidden pr-3`,
                                                 onClick: header.column.getToggleSortingHandler(), children: [jsxs("span", { className: "overflow-hidden text-ellipsis whitespace-nowrap", children: [flexRender(header.column.columnDef.header, header.getContext()), ((_c = (_b = header.column.columnDef) === null || _b === void 0 ? void 0 : _b.meta) === null || _c === void 0 ? void 0 : _c.subHeader) ? (jsx(Text, { size: "small", subtle: true, children: (_e = (_d = header.column.columnDef) === null || _d === void 0 ? void 0 : _d.meta) === null || _e === void 0 ? void 0 : _e.subHeader })) : null] }), header.column.getCanSort() ? (jsx(SortIndicator, { sortingState: header.column.getIsSorted() })) : null] })), header.column.getCanResize() ? (jsx(ResizeHandle, { isResizing: header.column.getIsResizing(), onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler() })) : null] }, header.id));
-                                }) }, headerGroup.id))) }), hasResults ? (jsx(Tbody, { className: "text-sm font-normal", children: getVirtualItems().map((virtualRow, index) => {
+                                }) }, headerGroup.id))) }), hasResults ? (jsx(Tbody, { className: "text-sm font-normal", style: {
+                                height: `${getTotalSize()}px`,
+                            }, children: getVirtualItems().map((virtualRow, index) => {
                                 const row = props.getRowModel().rows[virtualRow.index];
                                 if (!row) {
                                     return null;
@@ -360,7 +362,7 @@ const Table = (_a) => {
                                                 }, children: jsx("div", { className: "grid h-full items-center", children: flexRender(cell.column.columnDef.cell, cell.getContext()) }) }));
                                         }) }, row.id));
                                 }
-                            }) })) : (jsx("tbody", { children: jsx("tr", { children: jsx("td", { className: "b-0", children: (props === null || props === void 0 ? void 0 : props.loading) ? (jsx(Spinner, { centering: "centered", containerClassName: "absolute inset-0" })) : (props === null || props === void 0 ? void 0 : props.noDataMessage) ? (props.noDataMessage) : (jsx(EmptyState, { image: "SEARCH_DOCUMENT", description: t("table.noResults"), className: "absolute inset-0" })) }) }) }))] }) }), props.hideFooter ? null : (jsxs("div", { className: "flex items-center p-2", children: [jsx("div", { className: "whitespace-nowrap text-xs font-medium text-neutral-600", children: t("table.pagination.full", {
+                            }) })) : (jsx("tbody", { className: "min-h-[400px]", children: jsx("tr", { children: jsx("td", { className: "b-0", children: (props === null || props === void 0 ? void 0 : props.loading) ? (jsx(Spinner, { centering: "centered", containerClassName: "absolute inset-0" })) : (props === null || props === void 0 ? void 0 : props.noDataMessage) ? (props.noDataMessage) : (jsx(EmptyState, { image: "SEARCH_DOCUMENT", description: t("table.noResults"), className: "absolute inset-0" })) }) }) }))] }) }), props.hideFooter ? null : (jsxs("div", { className: "flex items-center p-2", children: [jsx("div", { className: "whitespace-nowrap text-xs font-medium text-neutral-600", children: t("table.pagination.full", {
                             count: props.getRowModel().rows.length,
                             total: ((_c = (_b = props.pagination) === null || _b === void 0 ? void 0 : _b.pageInfo) === null || _c === void 0 ? void 0 : _c.count) || 0,
                         }) }), props.pagination.isLoading ? (jsx("span", { className: "ml-2", children: jsx(Spinner, { size: "small" }) })) : null, props.footerRightActions && jsx("div", { className: "flex flex-1 justify-end", children: props.footerRightActions })] }))] }));
@@ -378,9 +380,9 @@ const cvaColumnFilterGrabbable = cvaMerge(["flex", "items-center", "justify-cent
 /**
  * ColumnFilter component for managing visibility and order of table columns.
  *
- * @template TColumnFilter - The type representing the data model associated with the columns.
- * @template TColumnFilterValue - The type representing the value of columns.
- * @param {ColumnFilterProps<TColumnFilter, TColumnFilterValue>} props - The props object containing necessary properties.
+ * @template T - The type representing the data model associated with the columns.
+ * @template V - The type representing the value of columns.
+ * @param {IColumnFilterProps<T, V>} props - The props object containing necessary properties.
  * @returns {JSX.Element | null} A React JSX element representing the ColumnFilter component or null if columns are not provided.
  */
 const ColumnFilter = ({ columns, setColumnOrder, defaultColumnOrder, columnOrder, onUserEvent, }) => {
@@ -531,12 +533,12 @@ const CompactIcon = () => {
 /**
  * Sorting component for managing table column sorting.
  *
- * @template TSorting - The type representing the data model associated with the columns.
- * @template TSortingValue - The type representing the value of columns.
- * @param {SortingProps<TSorting, TSortingValue>} props - The props object containing sorting properties.
+ * @template T - The type representing the data model associated with the columns.
+ * @template V - The type representing the value of columns.
+ * @param {SortingProps<T, V>} props - The props object containing sorting properties.
  * @returns {JSX.Element | null} A React JSX element representing the Sorting component or null if there are no sortable columns.
  */
-const Sorting = ({ columns, }) => {
+const Sorting = ({ columns }) => {
     var _a, _b;
     const [t] = useTranslation();
     const sortableColumns = columns.filter(column => column.getCanSort());
@@ -561,6 +563,60 @@ const Sorting = ({ columns, }) => {
                                 }) }), jsxs(RadioGroup, { id: "sortOrder", onChange: onSelectOrder, value: currentSortDirection, children: [jsx(RadioItem, { className: "w-full", label: t("table.sorting.ascending"), value: "asc" }), jsx(RadioItem, { className: "w-full", label: t("table.sorting.descending"), value: "desc" })] })] }) })] }) }));
 };
 
+/**
+ * Custom hook for handling Relay pagination in tables.
+ *
+ * @param {RelayPaginationProps} props - The props object containing pagination configuration.
+ * @returns {RelayPaginationSupport} An object containing functions and state for managing Relay pagination.
+ */
+const useRelayPagination = (props = { pageSize: 50 }) => {
+    const [variables, setVariables] = useState({ first: props.pageSize });
+    const [pageInfo, setPageInfo] = useState();
+    const [isLoading, setIsLoading] = useState(false);
+    const nextPage = useCallback(() => {
+        if (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.hasNextPage) {
+            setVariables({
+                after: (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.endCursor) === null ? undefined : pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.endCursor,
+                first: props.pageSize,
+            });
+        }
+    }, [pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.endCursor, pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.hasNextPage, props.pageSize]);
+    const previousPage = useCallback(() => {
+        if (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.hasPreviousPage) {
+            setVariables({
+                before: (pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.startCursor) === null ? undefined : pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.startCursor,
+                last: props.pageSize,
+            });
+        }
+    }, [pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.hasPreviousPage, pageInfo === null || pageInfo === void 0 ? void 0 : pageInfo.startCursor, props.pageSize]);
+    const reset = useCallback(() => {
+        setVariables({
+            last: undefined,
+            before: undefined,
+            after: undefined,
+            first: props.pageSize,
+        });
+        if (props.onReset) {
+            props.onReset();
+        }
+    }, [props.onReset, props.pageSize]);
+    const pagination = useMemo(() => {
+        return {
+            variables,
+            table: {
+                nextPage,
+                previousPage,
+                isLoading,
+                setIsLoading,
+                reset,
+                pageInfo: pageInfo === null ? undefined : pageInfo,
+                setPageInfo,
+            },
+        };
+    }, [variables, nextPage, previousPage, isLoading, reset, pageInfo]);
+    return pagination;
+};
+
 /**
  * Hook for managing and controlling a table's state and behavior.
  *
@@ -768,4 +824,4 @@ const fromTanStackToTUSortSite = (input) => {
  */
 setupLibraryTranslations();
 
-export { ActionSheet, ColumnFilter, RowSpacing, Sorting, Table, fromTUSortToTanStack, fromTUSortToTanStackSite, fromTanStackToTUSort, fromTanStackToTUSortSite, useTable, useTableSelection };
+export { ActionSheet, ColumnFilter, RowSpacing, Sorting, Table, fromTUSortToTanStack, fromTUSortToTanStackSite, fromTanStackToTUSort, fromTanStackToTUSortSite, useRelayPagination, useTable, useTableSelection };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-table",
-  "version": "0.0.207-alpha-11d90c6ca6.0",
+  "version": "0.0.209",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -21,8 +21,7 @@
     "@trackunit/react-core-contexts-api": "*",
     "@trackunit/css-class-variance-utilities": "*",
     "@trackunit/ui-icons": "*",
-    "@trackunit/i18n-library-translation": "*",
-    "@trackunit/react-graphql-hooks": "*"
+    "@trackunit/i18n-library-translation": "*"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js"

package/src/Table.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { Table as ReactTable, Row } from "@tanstack/react-table";
 import { CommonProps } from "@trackunit/react-components";
-import { RelayPagination } from "@trackunit/react-graphql-hooks";
+import { RelayPagination } from "./types";
 export interface TableProps<TData extends object> extends ReactTable<TData>, CommonProps {
     pagination: RelayPagination;
     headerLeftActions?: React.ReactNode;

package/src/index.d.ts

@@ -5,6 +5,7 @@ export * from "./menus/ColumnFilter";
 export * from "./menus/RowSpacing";
 export * from "./menus/Sorting";
 export * from "./types";
+export * from "./useRelayPagination";
 export * from "./useTable";
 export * from "./useTableSelection";
 export * from "./utils";

package/src/menus/ColumnFilter.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { Column, ColumnOrderState, Updater } from "@tanstack/react-table";
-export interface ColumnFilterProps<TColumnFilter extends object, TColumnFilterValue> {
-    columns: Column<TColumnFilter, TColumnFilterValue>[];
+export interface IColumnFilterProps<T extends object, V> {
+    columns: Column<T, V>[];
     defaultColumnOrder: ColumnOrderState;
     columnOrder?: ColumnOrderState;
     className?: string;
@@ -11,14 +11,14 @@ export interface ColumnFilterProps<TColumnFilter extends object, TColumnFilterVa
 /**
  * ColumnFilter component for managing visibility and order of table columns.
  *
- * @template TColumnFilter - The type representing the data model associated with the columns.
- * @template TColumnFilterValue - The type representing the value of columns.
- * @param {ColumnFilterProps<TColumnFilter, TColumnFilterValue>} props - The props object containing necessary properties.
+ * @template T - The type representing the data model associated with the columns.
+ * @template V - The type representing the value of columns.
+ * @param {IColumnFilterProps<T, V>} props - The props object containing necessary properties.
  * @returns {JSX.Element | null} A React JSX element representing the ColumnFilter component or null if columns are not provided.
  */
-export declare const ColumnFilter: <TColumnFilter extends Object, TColumnFilterValue>({ columns, setColumnOrder, defaultColumnOrder, columnOrder, onUserEvent, }: ColumnFilterProps<TColumnFilter, TColumnFilterValue>) => JSX.Element | null;
-export interface ColumnFiltersDragAndDropProps<TColumnFiltersDragAndDrop extends object, TColumnFiltersDragAndDropValue> {
-    columns: Column<TColumnFiltersDragAndDrop, TColumnFiltersDragAndDropValue>[];
+export declare const ColumnFilter: <T extends Object, V>({ columns, setColumnOrder, defaultColumnOrder, columnOrder, onUserEvent, }: IColumnFilterProps<T, V>) => JSX.Element | null;
+export interface ColumnFiltersDragAndDropProps<T extends object, V> {
+    columns: Column<T, V>[];
     setColumnOrder: (updater: Updater<ColumnOrderState>) => void;
     onUserEvent?: (event: "Column Reordering" | "Column Filter", payload: Record<string, unknown>) => void;
 }

package/src/menus/Sorting.d.ts

@@ -1,15 +1,15 @@
 /// <reference types="react" />
 import { Column } from "@tanstack/react-table";
-interface SortingProps<TSorting extends object, TSortingValue> {
-    columns: Column<TSorting, TSortingValue>[];
+interface SortingProps<T extends object, V> {
+    columns: Column<T, V>[];
 }
 /**
  * Sorting component for managing table column sorting.
  *
- * @template TSorting - The type representing the data model associated with the columns.
- * @template TSortingValue - The type representing the value of columns.
- * @param {SortingProps<TSorting, TSortingValue>} props - The props object containing sorting properties.
+ * @template T - The type representing the data model associated with the columns.
+ * @template V - The type representing the value of columns.
+ * @param {SortingProps<T, V>} props - The props object containing sorting properties.
  * @returns {JSX.Element | null} A React JSX element representing the Sorting component or null if there are no sortable columns.
  */
-export declare const Sorting: <TSorting extends Object, TSortingValue>({ columns, }: SortingProps<TSorting, TSortingValue>) => JSX.Element | null;
+export declare const Sorting: <T extends Object, V>({ columns }: SortingProps<T, V>) => JSX.Element | null;
 export {};

package/src/types.d.ts

@@ -9,4 +9,17 @@ declare module "@tanstack/react-table" {
         isCustomField?: boolean;
     }
 }
+export interface RelayPageInfo {
+    count?: number | null;
+    endCursor?: string | null;
+    hasNextPage?: boolean;
+    hasPreviousPage?: boolean;
+    startCursor?: string | null;
+}
+export interface RelayPagination {
+    nextPage: () => void;
+    previousPage: () => void;
+    pageInfo?: RelayPageInfo;
+    isLoading: boolean;
+}
 export type Alignment = "left" | "center" | "right";

package/src/useInfiniteScroll.d.ts

@@ -1,6 +1,6 @@
 import { VirtualItem } from "@tanstack/react-virtual";
-import { RelayPagination } from "@trackunit/react-graphql-hooks";
 import { RefObject } from "react";
+import { RelayPagination } from "./types";
 interface InfiniteScrollProps {
     pagination: RelayPagination;
     containerRef: RefObject<HTMLDivElement>;

package/src/useRelayPagination.d.ts

@@ -0,0 +1,29 @@
+import { Dispatch, SetStateAction } from "react";
+import { RelayPageInfo, RelayPagination } from "./types";
+export interface RelayPaginationProps {
+    pageSize?: number;
+    onReset?: () => void;
+}
+export interface RelayPaginationQueryVariables {
+    first?: number | null;
+    last?: number | null;
+    before?: string | null;
+    after?: string | null;
+}
+export interface RelayTableSupport extends RelayPagination {
+    isLoading: boolean;
+    setIsLoading: Dispatch<SetStateAction<boolean>>;
+    reset: () => void;
+    setPageInfo: Dispatch<SetStateAction<RelayPageInfo | null | undefined>>;
+}
+export interface RelayPaginationSupport {
+    variables: RelayPaginationQueryVariables;
+    table: RelayTableSupport;
+}
+/**
+ * Custom hook for handling Relay pagination in tables.
+ *
+ * @param {RelayPaginationProps} props - The props object containing pagination configuration.
+ * @returns {RelayPaginationSupport} An object containing functions and state for managing Relay pagination.
+ */
+export declare const useRelayPagination: (props?: RelayPaginationProps) => RelayPaginationSupport;