@eml-payments/ui-kit 1.3.3 → 1.4.4

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

@@ -0,0 +1,16 @@
+import type { Table } from '@tanstack/react-table';
+interface UsePaginationControllerOptions<T> {
+    table: Table<T>;
+    paginationMode: 'client' | 'server' | 'none';
+    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;
+    setPageSize: (size: number) => void;
+};
+export {};

package/dist/src/components/Table/Pagination/usePaginationController.js

@@ -0,0 +1,33 @@
+import { useCallback, useEffect } from 'react';
+export function usePaginationController({ table, paginationMode, onRefetch }) {
+    const { pageIndex, pageSize } = table.getState().pagination;
+    const canNextPage = table.getCanNextPage();
+    const canPrevPage = table.getCanPreviousPage();
+    const setPageSize = useCallback((size) => {
+        table.setPageSize(size);
+    }, [table]);
+    const onNextPage = useCallback(() => {
+        if (canNextPage) {
+            table.nextPage();
+        }
+    }, [canNextPage, table]);
+    const onPrevPage = useCallback(() => {
+        if (canPrevPage) {
+            table.previousPage();
+        }
+    }, [canPrevPage, table]);
+    useEffect(() => {
+        if (paginationMode === 'server' && onRefetch) {
+            onRefetch(pageIndex, pageSize);
+        }
+    }, [paginationMode, pageIndex, pageSize, onRefetch]);
+    return {
+        pageIndex,
+        pageSize,
+        canNextPage,
+        canPrevPage,
+        onNextPage,
+        onPrevPage,
+        setPageSize,
+    };
+}

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

@@ -0,0 +1,4 @@
+import type { StandardTableProps } from '../Table.types';
+export declare function StandardTable<T extends {
+    id: string;
+}>(props: Readonly<StandardTableProps<T>>): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PaginationFooter } from '../Pagination';
+import { BaseTable } from '../BaseTable/BaseTable';
+import { renderTableBody } from '../body/renderTableBody';
+import { useStandardTableController } from './useStandardTableController';
+import { getTableBodyState, getColSpan } from '../body/utils';
+import { useMemo } from 'react';
+export function StandardTable(props) {
+    var _a;
+    const { table, height, showHeader, parentScrollRef, pagination, searchBelowMinLength, hasCachedData } = useStandardTableController(props);
+    const rows = table.getRowModel().rows;
+    const minLen = (_a = props.minSearchLength) !== null && _a !== void 0 ? _a : 3;
+    const getNoResultsMessage = () => {
+        var _a, _b;
+        if (searchBelowMinLength) {
+            return `Please enter at least ${minLen} characters to search`;
+        }
+        if (props.isSearchActive) {
+            return (_a = props.noSearchResultsMessage) !== null && _a !== void 0 ? _a : 'No results meet your search criteria';
+        }
+        return (_b = props.noRowsMessage) !== null && _b !== void 0 ? _b : 'No rows to display';
+    };
+    const noResultsMessage = getNoResultsMessage();
+    const colSpan = getColSpan(table);
+    const bodyState = searchBelowMinLength
+        ? { type: 'empty', message: noResultsMessage }
+        : getTableBodyState({
+            isLoading: props.isLoading && !hasCachedData,
+            rows,
+            noResultsMessage,
+        });
+    const totalRows = useMemo(() => {
+        var _a;
+        return props.paginationMode === 'server'
+            ? ((_a = props.totalServerRows) !== null && _a !== void 0 ? _a : 0)
+            : table.getFilteredRowModel().rows.length;
+    }, [props.paginationMode, props.totalServerRows, table]);
+    return (_jsx("div", { ref: parentScrollRef, children: _jsx(BaseTable, { table: table, height: height, showHeader: showHeader, className: props.className, isLoading: props.isLoading, renderBody: () => renderTableBody({
+                table,
+                state: bodyState,
+                colSpan,
+                onRowClick: props.onRowClick,
+                isRowClickable: props.isRowClickable,
+                onGroupRowClick: props.onGroupRowClick,
+                tableActionsDropdown: props.tableActionsDropdown,
+            }), footer: props.paginationMode === 'client' || props.paginationMode === 'server' ? (_jsx(PaginationFooter, { tableId: props.id, pageIndex: pagination.pageIndex, pageSize: pagination.pageSize, totalRows: totalRows, canNextPage: pagination.canNextPage, canPrevPage: pagination.canPrevPage, onNextPage: pagination.onNextPage, onPrevPage: pagination.onPrevPage, onPageSizeChange: pagination.setPageSize })) : null }) }));
+}

package/dist/src/components/Table/StandardTable/StandardTable.stories.d.ts

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { StandardTable } from './StandardTable';
+type User = {
+    id: string;
+    name: string;
+    email: string;
+    role: string;
+};
+declare const meta: Meta<typeof StandardTable<User>>;
+export default meta;
+type Story = StoryObj<typeof StandardTable<User>>;
+export declare const Basic: Story;
+export declare const EmptyState: Story;
+export declare const Loading: Story;
+export declare const ClientPagination: Story;
+export declare const ServerPagination: Story;
+export declare const RowClick: Story;
+export declare const ControlledSorting: Story;
+export declare const GroupedWithClicks: Story;
+export declare const BasicWithActions: Story;
+export declare const WithSearch: Story;
+export declare const ServerSideSearch: Story;
+export declare const WithQueryParamsSync: Story;
+export declare const ServerPaginationWithQueryParams: Story;
+export declare const TwoTablesWithQueryParams: Story;

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

@@ -0,0 +1,268 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from 'react';
+import { StandardTable } from './StandardTable';
+import { SearchInput } from '../../SearchInput';
+import { useLocation } from 'react-router-dom';
+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 columns = [
+    {
+        accessorKey: 'id',
+        header: 'ID',
+        flex: 1,
+    },
+    {
+        accessorKey: 'name',
+        header: 'Name',
+        flex: 1,
+    },
+    {
+        accessorKey: 'email',
+        header: 'Email',
+        flex: 2,
+        cell: ({ row }) => (_jsx("a", { href: `mailto:${row.original.email}`, className: "text-blue-600 underline", children: row.original.email })),
+    },
+    {
+        accessorKey: 'role',
+        header: 'Role',
+        flex: 1,
+        cell: ({ row }) => (_jsx("span", { className: row.original.role === 'Admin' ? 'font-bold text-red-500' : undefined, children: row.original.role })),
+    },
+];
+const meta = {
+    title: 'UIKit/Table/StandardTable',
+    component: StandardTable,
+    tags: ['autodocs'],
+};
+export default meta;
+export const Basic = {
+    render: () => _jsx(StandardTable, { id: "basic-table", data: data, columns: columns, paginationMode: "client" }),
+};
+export const EmptyState = {
+    render: () => (_jsx(StandardTable, { id: "empty-table", data: [], columns: columns, noRowsMessage: "No users found", paginationMode: "client" })),
+};
+export const Loading = {
+    render: () => _jsx(StandardTable, { id: "loading-table", data: [], columns: columns, isLoading: true, paginationMode: "client" }),
+};
+export const ClientPagination = {
+    render: () => (_jsx(StandardTable, { id: "client-pagination", data: data, columns: columns, paginationMode: "client", rowsPerPage: 5 })),
+};
+function ServerPaginationExample() {
+    const [rows, setRows] = useState([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const fetchData = useCallback(async (pageIndex, pageSize) => {
+        setIsLoading(true);
+        await new Promise((r) => setTimeout(r, 500));
+        const start = pageIndex * pageSize;
+        const result = 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',
+            };
+        });
+        setRows(result);
+        setIsLoading(false);
+    }, []);
+    return (_jsx(StandardTable, { id: "server-pagination", data: rows, columns: columns, paginationMode: "server", totalServerRows: 100, onRefetch: fetchData, isLoading: isLoading }));
+}
+export const ServerPagination = {
+    render: () => _jsx(ServerPaginationExample, {}),
+};
+export const RowClick = {
+    render: () => (_jsx(StandardTable, { id: "row-click", data: data, columns: columns, isRowClickable: (row) => row.role !== 'Admin', onRowClick: (row) => {
+            alert(`Clicked ${row.name}`);
+        }, paginationMode: "client" })),
+};
+function ControlledSortingExample() {
+    const [sorting, setSorting] = useState([{ id: 'name', desc: true }]);
+    return (_jsx(StandardTable, { id: "controlled-sorting", data: data, columns: columns, sorting: sorting, onSortingChange: setSorting, paginationMode: "client" }));
+}
+export const ControlledSorting = {
+    render: () => _jsx(ControlledSortingExample, {}),
+};
+const dates = [
+    new Date().toISOString(),
+    new Date(Date.now() + 24 * 60 * 60 * 1000).toISOString(),
+    new Date(Date.now() + 2 * 24 * 60 * 60 * 1000).toISOString(),
+];
+function getRandomInt(max) {
+    if (max <= 0) {
+        throw new Error('max must be positive');
+    }
+    const maxUint32 = 0xffffffff;
+    const acceptableRange = Math.floor(maxUint32 / max) * max;
+    while (true) {
+        const value = crypto.getRandomValues(new Uint32Array(1))[0];
+        if (value < acceptableRange) {
+            return value % max;
+        }
+    }
+}
+const groupingData = Array.from({ length: 5 }).map((_, i) => ({
+    id: `row-${i + 1}`,
+    date: dates[i % dates.length],
+    name: `User ${i + 1}`,
+    amount: getRandomInt(1000) + 100,
+}));
+const groupingColumns = [
+    {
+        accessorKey: 'name',
+        header: 'Name',
+        flex: 1,
+    },
+    {
+        accessorKey: 'amount',
+        header: 'Amount',
+        flex: 1,
+        cell: ({ row }) => (_jsxs("span", { style: { textAlign: 'right', display: 'block' }, children: ["$", row.original.amount.toFixed(2)] })),
+    },
+    {
+        accessorKey: 'date',
+        header: 'Last Updated',
+        flex: 1,
+        enableGrouping: true,
+        getGroupingValue: (row) => new Date(row.date).toLocaleDateString('en-GB'),
+        meta: {
+            bgColor: '#f5f5f5',
+        },
+    },
+];
+export const GroupedWithClicks = {
+    render: () => (_jsx(StandardTable, { id: "grouped-click-handlers", data: groupingData, columns: groupingColumns, showHeader: false, grouping: ['date'], paginationMode: "client", onRowClick: (row) => {
+            alert(`Row clicked: ${row.name} ($${row.amount})`);
+        }, onGroupRowClick: ({ value, rows }) => {
+            const total = rows.reduce((sum, r) => sum + r.amount, 0);
+            alert(`Group ${value}\n` + `Rows: ${rows.length}\n` + `Total amount: $${total}`);
+        } })),
+};
+export const BasicWithActions = {
+    render: () => (_jsx(StandardTable, { id: "table-with-actions", data: data, columns: columns, paginationMode: "client", tableActionsDropdown: {
+            getOptions: (row) => [
+                { label: `Edit ${row.name}`, onClick: () => alert(`Edit ${row.name}`) },
+                { label: `Delete ${row.name}`, onClick: () => alert(`Delete ${row.name}`) },
+            ],
+            isDisabled: (row) => row.role === 'Admin',
+        } })),
+};
+/**
+ * Reusable hook for client-side search with minimum character gating.
+ * The table only needs `isSearchActive` — filtering is done externally.
+ */
+function useSearch(sourceData, selector, minChars = 3) {
+    const [query, setQuery] = useState('');
+    const isSearchActive = query.trim().length >= minChars;
+    const filteredData = useMemo(() => {
+        if (!isSearchActive)
+            return sourceData;
+        const lowerQuery = query.toLowerCase();
+        return sourceData.filter((item) => selector(item).toLowerCase().includes(lowerQuery));
+    }, [query, isSearchActive, sourceData, selector]);
+    return { query, setQuery, filteredData, isSearchActive };
+}
+/**
+ * Client-side search using SearchInput + useSearch.
+ * The table receives pre-filtered data and `isSearchActive` for the empty message.
+ * No `searchQuery` / `minSearchLength` needed — filtering happens outside the table.
+ */
+function WithSearchExample() {
+    const { setQuery, filteredData, isSearchActive } = useSearch(data, (user) => [user.name, user.email, user.role].join(' '));
+    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(StandardTable, { id: "search-table", paginationMode: "client", data: filteredData, columns: columns, isSearchActive: isSearchActive, rowsPerPage: 5 })] }));
+}
+export const WithSearch = {
+    render: () => _jsx(WithSearchExample, {}),
+};
+function ServerSideSearchExample() {
+    const [rows, setRows] = useState([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [query, setQuery] = useState('');
+    const [total, setTotal] = useState(0);
+    const fetchData = useCallback(async (pageIndex, pageSize) => {
+        setIsLoading(true);
+        await new Promise((r) => setTimeout(r, 500));
+        const filtered = data.filter((user) => [user.name, user.email, user.role].join(' ').toLowerCase().includes(query.toLowerCase()));
+        const start = pageIndex * pageSize;
+        const paginated = filtered.slice(start, start + pageSize);
+        setRows(paginated);
+        setTotal(filtered.length);
+        setIsLoading(false);
+    }, [query]);
+    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(StandardTable, { id: "server-search-table", data: rows, columns: columns, paginationMode: "server", rowsPerPage: 5, totalServerRows: total, onRefetch: fetchData, isLoading: isLoading, isSearchActive: query.trim().length >= 3, noSearchResultsMessage: "No users match your search" })] }));
+}
+export const ServerSideSearch = {
+    render: () => _jsx(ServerSideSearchExample, {}),
+};
+const CurrentUrl = () => {
+    const location = useLocation();
+    return (_jsxs("div", { style: { fontSize: 12, marginBottom: 8 }, children: ["Current URL: ", _jsx("code", { children: location.search })] }));
+};
+export const WithQueryParamsSync = {
+    decorators: [
+        (Story) => {
+            const query = `?clients_pageNo=2&clients_pageSize=5`;
+            globalThis.history.replaceState({}, '', query);
+            return _jsx(Story, {});
+        },
+    ],
+    render: () => (_jsxs(_Fragment, { children: [_jsx(CurrentUrl, {}), _jsx(StandardTable, { id: "clients", data: data, columns: columns, paginationMode: "client" })] })),
+};
+/** Simulates a server fetch with latency. Used by server-side query-param stories. */
+async function fetchServerData(pageIndex, pageSize) {
+    await new Promise((r) => setTimeout(r, 500));
+    const start = pageIndex * pageSize;
+    return 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',
+        };
+    });
+}
+function ServerPaginationWithQueryParamsExample() {
+    const [rows, setRows] = useState([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const fetchData = useCallback(async (pageIndex, pageSize) => {
+        setIsLoading(true);
+        const results = await fetchServerData(pageIndex, pageSize);
+        setRows(results);
+        setIsLoading(false);
+    }, []);
+    return (_jsxs(_Fragment, { children: [_jsx(CurrentUrl, {}), _jsx(StandardTable, { id: "clients", data: rows, columns: columns, paginationMode: "server", totalServerRows: 100, onRefetch: fetchData, isLoading: isLoading })] }));
+}
+export const ServerPaginationWithQueryParams = {
+    decorators: [
+        (Story) => {
+            globalThis.history.replaceState({}, '', '?clients_pageNo=2&clients_pageSize=5');
+            return _jsx(Story, {});
+        },
+    ],
+    render: () => _jsx(ServerPaginationWithQueryParamsExample, {}),
+};
+function TwoTablesWithQueryParamsExample() {
+    const [usersRows, setUsersRows] = useState([]);
+    const [isLoadingUsers, setIsLoadingUsers] = useState(false);
+    const fetchUsersData = useCallback(async (pageIndex, pageSize) => {
+        setIsLoadingUsers(true);
+        const results = await fetchServerData(pageIndex, pageSize);
+        setUsersRows(results);
+        setIsLoadingUsers(false);
+    }, []);
+    return (_jsxs(_Fragment, { children: [_jsx(CurrentUrl, {}), _jsxs("div", { style: { display: 'flex', gap: '2rem' }, children: [_jsx(StandardTable, { id: "clients", data: data, columns: columns, paginationMode: "client" }), _jsx(StandardTable, { id: "users", data: usersRows, columns: columns, paginationMode: "server", totalServerRows: 100, onRefetch: fetchUsersData, isLoading: isLoadingUsers })] })] }));
+}
+export const TwoTablesWithQueryParams = {
+    decorators: [
+        (Story) => {
+            globalThis.history.replaceState({}, '', '?clients_pageNo=2&clients_pageSize=5&users_pageNo=3&users_pageSize=10');
+            return _jsx(Story, {});
+        },
+    ],
+    render: () => _jsx(TwoTablesWithQueryParamsExample, {}),
+};

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

@@ -0,0 +1,4 @@
+import type { TableInputProps, StandardPaginationProps } from '../Table.types';
+export type StandardTableProps<T extends {
+    id: string;
+}> = TableInputProps<T> & StandardPaginationProps;

package/dist/src/components/Table/StandardTable/StandardTable.types.js

@@ -0,0 +1 @@
+export {};

package/dist/src/components/Table/StandardTable/index.d.ts

@@ -0,0 +1,2 @@
+export { StandardTable } from './StandardTable';
+export type { StandardTableProps } from './StandardTable.types';

package/dist/src/components/Table/StandardTable/index.js

@@ -0,0 +1 @@
+export { StandardTable } from './StandardTable';

package/dist/src/components/Table/StandardTable/useStandardTableController.d.ts

@@ -0,0 +1,22 @@
+import type { StandardTableProps } from '../Table.types';
+export declare function useStandardTableController<T extends {
+    id: string;
+}>(props: StandardTableProps<T>): {
+    table: import("@tanstack/table-core").Table<T>;
+    height: string | number | undefined;
+    showHeader: boolean;
+    parentScrollRef: import("react").MutableRefObject<HTMLDivElement | null>;
+    setPageIndex: import("react").Dispatch<import("react").SetStateAction<number>>;
+    setPageSize: import("react").Dispatch<import("react").SetStateAction<number>>;
+    pagination: {
+        pageIndex: number;
+        pageSize: number;
+        canNextPage: boolean;
+        canPrevPage: boolean;
+        onNextPage: () => void;
+        onPrevPage: () => void;
+        setPageSize: (size: number) => void;
+    };
+    searchBelowMinLength: boolean;
+    hasCachedData: boolean;
+};

package/dist/src/components/Table/StandardTable/useStandardTableController.js

@@ -0,0 +1,100 @@
+import { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { useReactTable, getCoreRowModel, getSortedRowModel, getPaginationRowModel, getGroupedRowModel, getExpandedRowModel, } from '@tanstack/react-table';
+import { applyFlexSizes } from '../table.helpers';
+import { useUrlPaginationSync } from '../hooks/useUrlPaginationSync';
+import { usePaginationController } from '../Pagination/usePaginationController';
+export function useStandardTableController(props) {
+    const { id, data, columns, rowIdKey = 'id', height, showHeader = true, 
+    // pagination
+    paginationMode = 'client', rowsPerPage = 10, totalServerRows, onRefetch, 
+    // sorting / grouping
+    sorting, onSortingChange, grouping, 
+    // search
+    searchQuery, minSearchLength = 3, tableActionsDropdown, } = props;
+    // Keep previous data while loading to prevent UI jumps on page change
+    const prevDataRef = useRef([]);
+    // Always cache the latest non-empty data
+    if (data.length > 0) {
+        prevDataRef.current = data;
+    }
+    // While loading, show cached data; otherwise show current data
+    const hasCachedData = Boolean(props.isLoading && prevDataRef.current.length > 0);
+    const displayData = hasCachedData ? prevDataRef.current : data;
+    // When a searchQuery is provided but below the minimum length, suppress refetch calls
+    const searchBelowMinLength = searchQuery !== undefined && searchQuery.length > 0 && searchQuery.length < minSearchLength;
+    const gatedOnRefetch = useCallback((pageIndex, pageSize) => {
+        if (searchBelowMinLength) {
+            return;
+        }
+        onRefetch === null || onRefetch === void 0 ? void 0 : onRefetch(pageIndex, pageSize);
+    }, [onRefetch, searchBelowMinLength]);
+    const parentScrollRef = useRef(null);
+    const [containerWidth, setContainerWidth] = useState(0);
+    useLayoutEffect(() => {
+        if (!parentScrollRef.current) {
+            return;
+        }
+        const ro = new ResizeObserver(([entry]) => {
+            setContainerWidth(entry.contentRect.width);
+        });
+        ro.observe(parentScrollRef.current);
+        return () => ro.disconnect();
+    }, []);
+    const { initialPageIndex, initialPageSize, syncToUrl } = useUrlPaginationSync(id, rowsPerPage);
+    const [pageIndex, setPageIndex] = useState(initialPageIndex);
+    const [pageSize, setPageSize] = useState(initialPageSize);
+    const [internalSorting, setInternalSorting] = useState(sorting !== null && sorting !== void 0 ? sorting : []);
+    const stableGrouping = useMemo(() => grouping !== null && grouping !== void 0 ? grouping : [], [grouping]);
+    const columnVisibility = useMemo(() => Object.fromEntries(stableGrouping.map((colId) => [colId, false])), [stableGrouping]);
+    const baseColumns = useMemo(() => applyFlexSizes(columns, containerWidth, false // no virtualization in standard table
+    ), [columns, containerWidth]);
+    const table = useReactTable({
+        data: displayData,
+        columns: baseColumns,
+        getRowId: (row) => String(row[rowIdKey]),
+        state: {
+            pagination: { pageIndex, pageSize },
+            sorting: sorting !== null && sorting !== void 0 ? sorting : internalSorting,
+            grouping: stableGrouping,
+            columnVisibility,
+        },
+        getCoreRowModel: getCoreRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+        getGroupedRowModel: getGroupedRowModel(),
+        getExpandedRowModel: getExpandedRowModel(),
+        getPaginationRowModel: paginationMode === 'client' ? getPaginationRowModel() : undefined,
+        manualPagination: paginationMode === 'server',
+        pageCount: paginationMode === 'server' ? Math.ceil((totalServerRows !== null && totalServerRows !== void 0 ? totalServerRows : 0) / pageSize) : undefined,
+        autoResetPageIndex: false,
+        onPaginationChange: (updater) => {
+            const next = typeof updater === 'function' ? updater({ pageIndex, pageSize }) : updater;
+            setPageIndex(next.pageIndex);
+            setPageSize(next.pageSize);
+            syncToUrl(next.pageIndex, next.pageSize);
+        },
+        onSortingChange: (updater) => {
+            const next = typeof updater === 'function' ? updater(sorting !== null && sorting !== void 0 ? sorting : internalSorting) : updater;
+            setInternalSorting(next);
+            onSortingChange === null || onSortingChange === void 0 ? void 0 : onSortingChange(next);
+        },
+        meta: {
+            hasActions: Boolean(tableActionsDropdown),
+        },
+    });
+    const pagination = usePaginationController({
+        table,
+        paginationMode,
+        onRefetch: gatedOnRefetch,
+    });
+    return {
+        table,
+        height,
+        showHeader,
+        parentScrollRef,
+        setPageIndex,
+        setPageSize,
+        pagination,
+        searchBelowMinLength,
+        hasCachedData,
+    };
+}

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

@@ -59,7 +59,7 @@ export function Table(props) {
     const paddingBottom = Math.max(totalSize - end, 0);
     const tableRows = table.getRowModel().rows;
     const isTrulyEmpty = tableRows.length === 0 && !props.isLoading && !hasNextPage;
-    return (_jsxs("div", { ref: parentScrollRef, style: { height }, className: "relative w-full overflow-auto", children: [props.isLoading && (_jsx("div", { className: classNames('mui-loader', showHeader ? 'mt-4' : 'mt-0') })), _jsx("div", { className: "rounded-t-(--uikit-radius) overflow-y-hidden overflow-x-auto", children: _jsxs("table", { className: classNames('min-w-full text-sm table-fixed bg-[#ffffff]', props.className), role: "table", id: props.id, children: [showHeader && (_jsx("thead", { className: "bg-(--uikit-tertiary)", children: table.getHeaderGroups().map((headerGroup) => (_jsxs("tr", { className: "p-4", children: [headerGroup.headers.map((header) => {
+    return (_jsxs("div", { ref: parentScrollRef, style: { height }, className: "relative w-full overflow-auto", children: [props.isLoading && _jsx("div", { className: "mui-loader mt-4" }), _jsx("div", { className: "rounded-t-(--uikit-radius) overflow-y-hidden overflow-x-auto", children: _jsxs("table", { className: classNames('min-w-full text-sm table-fixed bg-[#ffffff]', props.className), role: "table", id: props.id, children: [showHeader && (_jsx("thead", { className: "bg-(--uikit-tertiary)", children: table.getHeaderGroups().map((headerGroup) => (_jsxs("tr", { className: "p-4", children: [headerGroup.headers.map((header) => {
                                         return (_jsx("th", { scope: "col", style: { width: header.getSize() }, className: classNames('select-none text-[14px] font-bold ', header.id === 'select' ? 'p-0' : ' p-4 text-left cursor-pointer'), onClick: !(infiniteScroll === null || infiniteScroll === void 0 ? void 0 : infiniteScroll.enabled) && header.column.getCanSort()
                                                 ? header.column.getToggleSortingHandler()
                                                 : undefined, children: _jsxs("div", { className: classNames('w-full h-full', header.id === 'select'