@eml-payments/ui-kit 1.7.5 → 1.7.7

package/dist/src/components/Table/Table.stories.js

@@ -0,0 +1,479 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Table } from './Table';
+import { SearchInput } from '../SearchInput';
+import { useLocation } from 'react-router-dom';
+const CurrentUrl = () => {
+    const location = useLocation();
+    return _jsxs("div", { children: ["Current URL: ", location.search] });
+};
+const data = Array.from({ length: 10 }).map((_, i) => ({
+    id: `user-${i + 1}`,
+    name: `User ${i + 1}`,
+    email: `user${i + 1}@example.com`,
+    role: i % 2 === 0 ? 'Admin' : 'User',
+}));
+const disabledIds = new Set(['user-1', 'user-2', 'user-3']);
+const columns = [
+    {
+        accessorKey: 'id',
+        header: 'ID',
+        flex: 1,
+    },
+    {
+        accessorKey: 'name',
+        header: 'Name',
+        flex: 1,
+    },
+    {
+        accessorKey: 'email',
+        header: 'Email',
+        cell: ({ row }) => (_jsx("a", { href: `mailto:${row.original.email}`, className: "text-blue-600 underline", children: row.original.email })),
+        flex: 1,
+    },
+    {
+        accessorKey: 'role',
+        header: 'Role',
+        cell: ({ row }) => {
+            const role = row.original.role;
+            return _jsx("span", { className: role === 'Admin' ? 'text-red-500 font-bold' : '', children: role });
+        },
+        flex: 1,
+    },
+];
+const meta = {
+    title: 'UIKit/Table',
+    component: Table,
+    tags: ['autodocs'],
+    render: () => _jsx(Table, { id: "example-table", data: data, columns: columns }),
+};
+export default meta;
+export const Basic = {
+    render: () => _jsx(Table, { id: "example-table", data: data, columns: columns }),
+};
+export const NoRows = {
+    render: () => _jsx(Table, { id: "example-table", data: [], columns: columns }),
+};
+export const LoadingWithSkeleton = {
+    render: () => _jsx(Table, { id: "example-table", data: [], columns: columns, isLoading: true, showSkeletonRows: true, rowsPerPage: 5 }),
+};
+export const ClientPagination = {
+    render: () => _jsx(Table, { id: "example-table", data: data, columns: columns, paginationMode: "client", rowsPerPage: 5 }),
+};
+const fetchServerData = (pageIndex, pageSize, query) => {
+    return new Promise((resolve) => {
+        setTimeout(() => {
+            const start = pageIndex * pageSize;
+            const data = Array.from({ length: pageSize }).map((_, i) => {
+                const id = start + i + 1;
+                return {
+                    id: `user-${id}`,
+                    name: `User ${id}`,
+                    email: `user${id}@example.com`,
+                    role: id % 2 === 0 ? 'Admin' : 'User',
+                };
+            });
+            const filteredData = query
+                ? data.filter((row) => row.name.toLowerCase().includes(query.toLowerCase()))
+                : data;
+            resolve(filteredData);
+        }, 500);
+    });
+};
+export const ServerSidePagination = {
+    render: () => {
+        const [data, setData] = useState([]);
+        const [isLoading, setIsLoading] = useState(false);
+        const fetchData = useCallback(async (pageIndex, pageSize) => {
+            setIsLoading(true);
+            const results = await fetchServerData(pageIndex, pageSize);
+            setData(results);
+            setIsLoading(false);
+        }, []);
+        return (_jsx(Table, { id: "server-table", data: data, columns: columns, paginationMode: "server", totalServerRows: 100, onRefetch: fetchData, isLoading: isLoading }));
+    },
+};
+const handleSelectionChange = (selectedRowIds) => {
+    console.log('Selected Row IDs:', selectedRowIds);
+    // Update your state or perform actions based on selected rows
+};
+export const WithCheckboxSelection = {
+    render: () => (_jsx(Table, { id: "example-table", data: data, columns: columns, checkboxSelection: true, checkboxPosition: "start", paginationMode: "client", onSelectionChange: handleSelectionChange })),
+};
+export const WithDisabledSelection = {
+    render: () => (_jsx(Table, { id: "example-table", data: data, columns: columns, checkboxSelection: true, checkboxPosition: "start", enableRowSelection: (row) => row.original.role !== 'Admin' })),
+};
+export const WithSingleRowSelection = {
+    render: () => (_jsx(Table, { id: "example-table", data: data, columns: columns, checkboxSelection: true, isMultiRowSelection: false })),
+};
+export const WithDefaultRowsSelected = {
+    render: () => (_jsx(Table, { id: "example-table", data: data, columns: columns, checkboxSelection: true, selectedRowIds: ['user-1', 'user-3'] })),
+};
+export const FlexColumnWidths = {
+    render: () => {
+        const testColumns = [
+            { accessorKey: 'id', header: 'ID', flex: 1 },
+            { accessorKey: 'name', header: 'Name', flex: 2 },
+            { accessorKey: 'email', header: 'Email', flex: 3 },
+            { accessorKey: 'role', header: 'Role', flex: 1 },
+        ];
+        return (_jsx(Table, { id: "example-table", data: data, columns: testColumns, paginationMode: "client", checkboxSelection: false, rowsPerPage: 5 }));
+    },
+};
+export const WithControlledSorting = {
+    render: () => {
+        const [sorting, setSorting] = useState([{ id: 'name', desc: true }]);
+        return (_jsx(Table, { id: "example-table", data: data, columns: columns, checkboxSelection: true, paginationMode: "client", sorting: sorting, onSortingChange: setSorting, rowsPerPage: 5 }));
+    },
+};
+export const WithRowActionsDropdown = {
+    render: () => {
+        const getOptions = (user) => [
+            {
+                label: 'Edit',
+                onClick: () => alert(`Edit ${user.name}`),
+            },
+            {
+                label: 'Delete',
+                onClick: () => alert(`Delete ${user.name}`),
+            },
+        ];
+        return (_jsx(Table, { id: "example-table", data: data, columns: columns, tableActionsDropdown: {
+                getOptions,
+                structure: 'default',
+                menuAlignment: 'end',
+            } }));
+    },
+};
+export const WithPartiallyDisabledRowActionsDropdown = {
+    render: () => {
+        const getOptions = (user) => [
+            {
+                label: 'Edit',
+                onClick: () => alert(`Edit ${user.name}`),
+            },
+            {
+                label: 'Delete',
+                onClick: () => alert(`Delete ${user.name}`),
+            },
+        ];
+        return (_jsx(Table, { id: "example-table", data: data, columns: columns, tableActionsDropdown: {
+                getOptions,
+                structure: 'default',
+                menuAlignment: 'end',
+                isDisabled: (row) => disabledIds.has(row.id),
+            } }));
+    },
+};
+export const WithDisabledRowActionsDropdownItem = {
+    render: () => {
+        const getOptions = (user) => [
+            {
+                label: 'Edit',
+                onClick: () => alert(`Edit ${user.name}`),
+            },
+            {
+                label: 'Delete',
+                onClick: () => alert(`Delete ${user.name}`),
+                disabled: user.role === 'Admin',
+            },
+        ];
+        return (_jsx(Table, { id: "example-table", data: data, columns: columns, tableActionsDropdown: {
+                getOptions,
+                structure: 'default',
+                menuAlignment: 'end',
+            } }));
+    },
+};
+export const WithRowClickHandler = {
+    render: () => {
+        return (_jsx(Table, { id: "clickable-rows-table", data: data, columns: columns, isRowClickable: (row) => row.role !== 'Admin', onRowClick: (row) => {
+                console.log('Row clicked:', row);
+                alert(`Clicked on ${row.name}`);
+            } }));
+    },
+};
+export const WithHiddenHeader = {
+    render: () => _jsx(Table, { id: "header-hidden-table", data: data, columns: columns, showHeader: false }),
+};
+const dates = [
+    new Date().toISOString(),
+    new Date(Date.now() + 86400000).toISOString(),
+    new Date(Date.now() + 2 * 86400000).toISOString(),
+];
+const groupingData = Array.from({ length: 5 }).map((_, i) => ({
+    id: `user-${i + 1}`,
+    date: dates[i % dates.length],
+    name: `User ${i + 1}`,
+    amount: Math.floor(Math.random() * 1000) + 100,
+}));
+const groupingColumns = [
+    {
+        accessorKey: 'name',
+        header: 'Name',
+        flex: 1,
+    },
+    {
+        accessorKey: 'amount',
+        header: 'Amount',
+        cell: ({ row }) => (_jsxs("span", { style: { textAlign: 'right', display: 'block' }, children: ["$", row.original.amount.toFixed(2)] })),
+        flex: 1,
+    },
+    {
+        accessorKey: 'date',
+        header: 'Last Updated',
+        flex: 1,
+        enableGrouping: true,
+        getGroupingValue: (row) => new Date(row.date).toLocaleDateString('en-GB'),
+        meta: {
+            bgColor: '#f5f5f5',
+        },
+    },
+];
+export const GroupedByDate = {
+    render: () => (_jsx(Table, { id: "header-hidden-table", data: groupingData, columns: groupingColumns, showHeader: false, grouping: ['date'] })),
+};
+function useSearch(data, selector, minChars = 3) {
+    const [query, setQuery] = useState('');
+    const isSearchActive = query.trim().length >= minChars;
+    const filteredData = useMemo(() => {
+        if (!isSearchActive)
+            return data;
+        const lowerQuery = query.toLowerCase();
+        return data.filter((item) => selector(item).toLowerCase().includes(lowerQuery));
+    }, [query, isSearchActive, data, selector]);
+    return { query, setQuery, filteredData, isSearchActive };
+}
+export const WithSearch = {
+    render: () => {
+        const { setQuery, filteredData, isSearchActive } = useSearch(data, (user) => user.name);
+        return (_jsxs("div", { className: "space-y-4", children: [_jsx("div", { style: { width: '300px' }, children: _jsx(SearchInput, { onSearch: (q) => setQuery(q), onClear: () => setQuery(''), placeholder: "Search by name..." }) }), _jsx(Table, { id: "search-table", data: filteredData, columns: columns, isSearchActive: isSearchActive })] }));
+    },
+};
+export const ServerSideSearch = {
+    render: () => {
+        const [data, setData] = useState([]);
+        const [isLoading, setIsLoading] = useState(false);
+        const [query, setQuery] = useState('');
+        const fetchData = useCallback(async (pageIndex, pageSize) => {
+            setIsLoading(true);
+            const results = await fetchServerData(pageIndex, pageSize, query);
+            setData(results);
+            setIsLoading(false);
+        }, [query]);
+        useEffect(() => {
+            fetchData(0, 10);
+        }, [fetchData]);
+        return (_jsxs("div", { className: "space-y-4", children: [_jsx("div", { style: { width: '300px' }, children: _jsx(SearchInput, { onSearch: (q) => setQuery(q), onClear: () => setQuery(''), placeholder: "Search users..." }) }), _jsx(Table, { id: "server-search-table", data: data, columns: columns, paginationMode: "server", totalServerRows: 100, onRefetch: fetchData, isLoading: isLoading, isSearchActive: query.trim().length >= 3 })] }));
+    },
+};
+// Note: Does not update state search params
+export const ClientPaginationWithQueryParams = {
+    args: {
+        initialPageNo: 2,
+        initialPageSize: 5,
+    },
+    decorators: [
+        (Story, context) => {
+            const { initialPageNo, initialPageSize } = context.args;
+            const query = `?clients_pageNo=${initialPageNo}&clients_pageSize=${initialPageSize}`;
+            window.history.replaceState({}, '', query);
+            return _jsx(Story, {});
+        },
+    ],
+    render: () => (_jsxs(_Fragment, { children: [_jsx(CurrentUrl, {}), _jsx(Table, { id: "clients", data: data, columns: columns, paginationMode: "client", showHeader: true })] })),
+};
+// Note: Does not update state search params
+export const ServerPaginationWithQueryParams = {
+    args: {
+        initialPageNo: 2,
+        initialPageSize: 5,
+    },
+    decorators: [
+        (Story, context) => {
+            const { initialPageNo, initialPageSize } = context.args;
+            const query = `?clients_pageNo=${initialPageNo}&clients_pageSize=${initialPageSize}`;
+            window.history.replaceState({}, '', query);
+            return _jsx(Story, {});
+        },
+    ],
+    render: () => {
+        const [data, setData] = useState([]);
+        const [isLoading, setIsLoading] = useState(false);
+        const fetchData = useCallback(async (pageIndex, pageSize) => {
+            setIsLoading(true);
+            const results = await fetchServerData(pageIndex, pageSize);
+            setData(results);
+            setIsLoading(false);
+        }, []);
+        return (_jsxs(_Fragment, { children: [_jsx(CurrentUrl, {}), _jsx(Table, { id: "clients", data: data, columns: columns, paginationMode: "server", totalServerRows: 100, onRefetch: fetchData, isLoading: isLoading, showHeader: true })] }));
+    },
+};
+// Note: Does not update state search params
+export const TwoTablesWithQueryParams = {
+    args: {
+        clientsInitialPageNo: 2,
+        clientsInitialPageSize: 5,
+        usersInitialPageNo: 3,
+        usersInitialPageSize: 10,
+    },
+    decorators: [
+        (Story, context) => {
+            const { clientsInitialPageNo, clientsInitialPageSize, usersInitialPageNo, usersInitialPageSize } = context.args;
+            const query = `?clients_pageNo=${clientsInitialPageNo}&clients_pageSize=${clientsInitialPageSize}&users_pageNo=${usersInitialPageNo}&users_pageSize=${usersInitialPageSize}`;
+            window.history.replaceState({}, '', query);
+            return _jsx(Story, {});
+        },
+    ],
+    render: () => {
+        const [usersData, setUsersData] = useState([]);
+        const [isLoadingUsers, setIsLoadingUsers] = useState(false);
+        const fetchUsersData = useCallback(async (pageIndex, pageSize) => {
+            setIsLoadingUsers(true);
+            const results = await fetchServerData(pageIndex, pageSize);
+            setUsersData(results);
+            setIsLoadingUsers(false);
+        }, []);
+        return (_jsxs(_Fragment, { children: [_jsx(CurrentUrl, {}), _jsxs("div", { style: { display: 'flex', gap: '2rem' }, children: [_jsx(Table, { id: "clients", data: data, columns: columns, paginationMode: "client", showHeader: true }), _jsx(Table, { id: "users", data: usersData, columns: columns, paginationMode: "server", totalServerRows: 100, onRefetch: fetchUsersData, isLoading: isLoadingUsers, showHeader: true })] })] }));
+    },
+};
+function fetchInfiniteUsers(limit, offset = 0) {
+    const start = offset * limit;
+    const rows = Array.from({ length: limit }).map((_, i) => {
+        const idx = start + i + 1;
+        return {
+            id: `user-${idx}`,
+            name: `User ${idx}`,
+            email: `user${idx}@example.com`,
+            role: idx % 2 === 0 ? 'Admin' : 'User',
+        };
+    });
+    return new Promise((resolve) => {
+        setTimeout(() => {
+            const nextOffset = offset + 1;
+            const maxPages = Math.ceil(100 / limit);
+            const hasMore = nextOffset < maxPages;
+            resolve({ rows, nextOffset, hasMore });
+        }, 300);
+    });
+}
+export const InfiniteScrollVirtualized = {
+    name: 'Infinite Scroll — Virtualized',
+    render: () => {
+        const [rows, setRows] = useState([]);
+        const [nextOffset, setNextOffset] = useState(0);
+        const [hasNextPage, setHasNextPage] = useState(true);
+        const [isFetchingNextPage, setIsFetchingNextPage] = useState(false);
+        useEffect(() => {
+            (async () => {
+                setIsFetchingNextPage(true);
+                const res = await fetchInfiniteUsers(20, 0);
+                setRows(res.rows);
+                setNextOffset(res.nextOffset);
+                setHasNextPage(res.hasMore);
+                setIsFetchingNextPage(false);
+            })();
+        }, []);
+        const fetchNextPage = useCallback(async () => {
+            if (isFetchingNextPage || !hasNextPage)
+                return;
+            setIsFetchingNextPage(true);
+            const res = await fetchInfiniteUsers(20, nextOffset);
+            setRows((prev) => [...prev, ...res.rows]);
+            setNextOffset(res.nextOffset);
+            setHasNextPage(res.hasMore);
+            setIsFetchingNextPage(false);
+        }, [isFetchingNextPage, hasNextPage, nextOffset]);
+        return (_jsx("div", { children: _jsx(Table, { id: "infinite-virtualized", height: 500, data: rows, columns: columns, showHeader: true, infiniteScroll: {
+                    enabled: true,
+                    hasNextPage,
+                    isFetchingNextPage,
+                    fetchNextPage,
+                }, virtualization: {
+                    enabled: true,
+                    rowEstimate: 48,
+                    overscan: 6,
+                } }) }));
+    },
+};
+export const InfiniteScrollNonVirtual = {
+    name: 'Infinite Scroll — Non-virtual',
+    render: () => {
+        const [rows, setRows] = useState([]);
+        const [nextOffset, setNextOffset] = useState(0);
+        const [hasNextPage, setHasNextPage] = useState(true);
+        const [isFetchingNextPage, setIsFetchingNextPage] = useState(false);
+        useEffect(() => {
+            (async () => {
+                setIsFetchingNextPage(true);
+                const res = await fetchInfiniteUsers(20, 0);
+                setRows(res.rows);
+                setNextOffset(res.nextOffset);
+                setHasNextPage(res.hasMore);
+                setIsFetchingNextPage(false);
+            })();
+        }, []);
+        const fetchNextPage = useCallback(async () => {
+            if (isFetchingNextPage || !hasNextPage)
+                return;
+            setIsFetchingNextPage(true);
+            const res = await fetchInfiniteUsers(20, nextOffset);
+            setRows((prev) => [...prev, ...res.rows]);
+            setNextOffset(res.nextOffset);
+            setHasNextPage(res.hasMore);
+            setIsFetchingNextPage(false);
+        }, [isFetchingNextPage, hasNextPage, nextOffset]);
+        return (_jsx("div", { children: _jsx(Table, { id: "infinite-nonvirtual", height: "80vh", data: rows, columns: columns, showHeader: true, infiniteScroll: {
+                    enabled: true,
+                    hasNextPage,
+                    isFetchingNextPage,
+                    fetchNextPage,
+                    rootMarginPx: 300,
+                }, virtualization: {
+                    enabled: false,
+                } }) }));
+    },
+};
+export const NoRowsInfiniteScrollNonVirtual = {
+    name: 'Empty State — Infinite Scroll (Non-virtual)',
+    render: () => {
+        const [rows] = useState([]);
+        const [hasNextPage] = useState(false);
+        const [isFetchingNextPage] = useState(false);
+        const fetchNextPage = useCallback(async () => {
+            // no-op: truly empty scenario
+            return;
+        }, []);
+        return (_jsx("div", { children: _jsx(Table, { id: "no-rows-infinite-nonvirtual", height: 500, data: rows, columns: columns, showHeader: true, isSearchActive: false, isLoading: false, noRowsMessage: "No rows to display", infiniteScroll: {
+                    enabled: true,
+                    hasNextPage,
+                    isFetchingNextPage,
+                    fetchNextPage,
+                    rootMarginPx: 300,
+                }, virtualization: {
+                    enabled: false,
+                } }) }));
+    },
+};
+export const NoRowsInfiniteScrollVirtualized = {
+    name: 'Empty State — Infinite Scroll (Virtualized)',
+    render: () => {
+        const [rows] = useState([]);
+        const [hasNextPage] = useState(false);
+        const [isFetchingNextPage] = useState(false);
+        const fetchNextPage = useCallback(async () => {
+            // no-op: truly empty scenario
+            return;
+        }, []);
+        return (_jsx("div", { children: _jsx(Table, { id: "no-rows-infinite-virtualized", height: 500, data: rows, columns: columns, showHeader: true, isSearchActive: false, isLoading: false, noRowsMessage: "No rows to display", infiniteScroll: {
+                    enabled: true,
+                    hasNextPage,
+                    isFetchingNextPage,
+                    fetchNextPage,
+                }, virtualization: {
+                    enabled: true,
+                    rowEstimate: 48,
+                    overscan: 6,
+                } }) }));
+    },
+};

package/dist/src/components/Table/Table.types.d.ts

@@ -1,6 +1,7 @@
 import type { SortingState, ColumnDef, Table } from '@tanstack/react-table';
 import type { DropdownOption, DropdownStructure } from '../DropdownWrapper/DropdownWrapper.types';
 import type { ReactNode } from 'react';
+import type { ScopedTableId } from './types/scopedTableId.types';
 declare module '@tanstack/react-table' {
     interface TableMeta<TData> {
         hasActions?: boolean;
@@ -71,8 +72,18 @@ type WithoutGrouping = {
     showGroupedTotal?: never;
 };
 export type GroupingProps<T> = WithGrouping<T> | WithoutGrouping;
-export interface TableInputPropsBase<T> {
-    id: string;
+type UnscopedUrlParams = {
+    scoped?: false | undefined;
+};
+type ScopedUrlParams = {
+    scoped: true;
+};
+export interface TableInputPropsBase<T, TId extends string = string> {
+    /**
+     * Unique identifier for the table. When `scoped=true`, must be lowercase alphanumeric,
+     * start with a letter, and is used to generate URL params like `{id}Page` and `{id}Size`.
+     */
+    id: TId;
     data: T[];
     columns: FlexColumnDef<T>[];
     rowIdKey?: keyof T | 'id';
@@ -100,7 +111,7 @@ export interface TableInputPropsBase<T> {
     /** Actions */
     tableActionsDropdown?: ITableActionsDropdownProps<T>;
 }
-export type TableInputProps<T> = TableInputPropsBase<T> & GroupingProps<T>;
+export type TableInputProps<T, TId extends string = string> = TableInputPropsBase<T, TId> & GroupingProps<T>;
 export interface BaseTableProps<T> {
     table: Table<T>;
     height?: number | string;
@@ -114,7 +125,7 @@ export interface BaseTableProps<T> {
 }
 export type StandardTableProps<T extends {
     id: string;
-}> = TableInputProps<T> & StandardPaginationProps;
+}, TId extends string = string> = (TableInputProps<T, string> & StandardPaginationProps & UnscopedUrlParams) | (TableInputProps<T, ScopedTableId<TId>> & StandardPaginationProps & ScopedUrlParams);
 export type InfiniteScrollTableProps<T extends {
     id: string;
 }> = TableInputProps<T> & {

package/dist/src/components/Table/hooks/useInfiniteScrolling.d.ts

@@ -0,0 +1,29 @@
+import type { RefObject } from 'react';
+import type { Virtualizer } from '@tanstack/react-virtual';
+import type { InfiniteScrollOptions, VirtualizationOptions } from '../Table.types';
+type PageEnvelope<T> = {
+    rows: T[];
+};
+export interface UseInfiniteScrollingParams<T extends {
+    id: string;
+}> {
+    dataPages?: PageEnvelope<T>[] | undefined;
+    flatData?: T[] | undefined;
+    infiniteScroll?: InfiniteScrollOptions;
+    virtualization?: VirtualizationOptions;
+    parentScrollRef: RefObject<HTMLDivElement | null>;
+    loaderRef?: RefObject<HTMLElement | null>;
+}
+export interface UseInfiniteScrollingReturn<T extends {
+    id: string;
+}> {
+    allRows: T[];
+    virtualizationEnabled: boolean;
+    rowVirtualizer?: Virtualizer<HTMLDivElement, Element>;
+    hasNextPage: boolean;
+    isFetchingNextPage: boolean;
+}
+export declare function useInfiniteScrolling<T extends {
+    id: string;
+}>(params: UseInfiniteScrollingParams<T>): UseInfiniteScrollingReturn<T>;
+export {};

package/dist/src/components/Table/hooks/useInfiniteScrolling.js

@@ -0,0 +1,96 @@
+import { useEffect, useMemo, useRef } from 'react';
+import { useVirtualizer } from '@tanstack/react-virtual';
+export function useInfiniteScrolling(params) {
+    var _a;
+    const { dataPages, flatData, infiniteScroll, virtualization, parentScrollRef, loaderRef } = params;
+    const isInfinite = !!(infiniteScroll === null || infiniteScroll === void 0 ? void 0 : infiniteScroll.enabled);
+    const hasNextPage = !!(infiniteScroll === null || infiniteScroll === void 0 ? void 0 : infiniteScroll.hasNextPage);
+    const isFetchingNextPage = !!(infiniteScroll === null || infiniteScroll === void 0 ? void 0 : infiniteScroll.isFetchingNextPage);
+    const fetchNextPage = infiniteScroll === null || infiniteScroll === void 0 ? void 0 : infiniteScroll.fetchNextPage;
+    const allRows = useMemo(() => {
+        if (isInfinite && Array.isArray(dataPages)) {
+            const byId = new Map();
+            for (const p of dataPages) {
+                for (const r of p.rows) {
+                    byId.set(String(r.id), r);
+                }
+            }
+            return Array.from(byId.values());
+        }
+        return flatData !== null && flatData !== void 0 ? flatData : [];
+    }, [isInfinite, dataPages, flatData]);
+    const virtualizationEnabled = !!(virtualization === null || virtualization === void 0 ? void 0 : virtualization.enabled);
+    const rowVirtualizer = useVirtualizer({
+        count: allRows.length + (isInfinite && hasNextPage ? 1 : 0),
+        getScrollElement: () => parentScrollRef.current,
+        estimateSize: () => { var _a; return (_a = virtualization === null || virtualization === void 0 ? void 0 : virtualization.rowEstimate) !== null && _a !== void 0 ? _a : 48; },
+        overscan: (_a = virtualization === null || virtualization === void 0 ? void 0 : virtualization.overscan) !== null && _a !== void 0 ? _a : 6,
+    });
+    const loadLockRef = useRef(false);
+    const virtualItems = rowVirtualizer.getVirtualItems();
+    const lastVirtualIndex = virtualItems.length ? virtualItems[virtualItems.length - 1].index : -1;
+    const loaderIndex = allRows.length;
+    useEffect(() => {
+        if (!virtualizationEnabled || !isInfinite)
+            return;
+        if (!fetchNextPage || !hasNextPage || isFetchingNextPage)
+            return;
+        if (allRows.length === 0)
+            return;
+        if (lastVirtualIndex < loaderIndex || loadLockRef.current)
+            return;
+        loadLockRef.current = true;
+        Promise.resolve(fetchNextPage()).finally(() => {
+            loadLockRef.current = false;
+        });
+    }, [
+        virtualizationEnabled,
+        isInfinite,
+        hasNextPage,
+        isFetchingNextPage,
+        fetchNextPage,
+        lastVirtualIndex,
+        loaderIndex,
+        allRows.length,
+    ]);
+    useEffect(() => {
+        var _a, _b;
+        if (!isInfinite || virtualizationEnabled)
+            return;
+        if (!(loaderRef === null || loaderRef === void 0 ? void 0 : loaderRef.current) || !fetchNextPage)
+            return;
+        const rootMargin = `${(_a = infiniteScroll === null || infiniteScroll === void 0 ? void 0 : infiniteScroll.rootMarginPx) !== null && _a !== void 0 ? _a : 300}px`;
+        const observer = new IntersectionObserver((entries) => {
+            const entry = entries[0];
+            if (entry.isIntersecting && hasNextPage && !isFetchingNextPage) {
+                fetchNextPage();
+            }
+        }, {
+            root: (_b = parentScrollRef.current) !== null && _b !== void 0 ? _b : null,
+            rootMargin: `0px 0px ${rootMargin} 0px`,
+            threshold: 0.01,
+        });
+        const el = loaderRef.current;
+        observer.observe(el);
+        return () => {
+            observer.unobserve(el);
+            observer.disconnect();
+        };
+    }, [
+        isInfinite,
+        virtualizationEnabled,
+        hasNextPage,
+        isFetchingNextPage,
+        fetchNextPage,
+        infiniteScroll === null || infiniteScroll === void 0 ? void 0 : infiniteScroll.rootMarginPx,
+        parentScrollRef,
+        loaderRef,
+    ]);
+    return {
+        allRows,
+        virtualizationEnabled,
+        rowVirtualizer,
+        hasNextPage,
+        isFetchingNextPage,
+    };
+}

package/dist/src/components/Table/hooks/usePaginationController.d.ts

@@ -0,0 +1,16 @@
+import type { Table } from '@tanstack/react-table';
+import { PaginationMode } from '../Table.types';
+interface UsePaginationControllerOptions<T> {
+    table: Table<T>;
+    paginationMode: PaginationMode;
+    onRefetch?: (pageIndex: number, pageSize: number) => void;
+}
+export declare function usePaginationController<T>({ table, paginationMode, onRefetch }: UsePaginationControllerOptions<T>): {
+    pageIndex: number;
+    pageSize: number;
+    canNextPage: boolean;
+    canPrevPage: boolean;
+    onNextPage: () => void;
+    onPrevPage: () => void;
+};
+export {};