@eml-payments/ui-kit 1.1.2 → 1.1.3

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

@@ -30,4 +30,5 @@ export declare const WithHiddenHeader: Story;
 export declare const GroupedByDate: Story;
 export declare const WithSearch: Story;
 export declare const ServerSideSearch: Story;
-export declare const WithQueryParams: StoryObj<TableStoryArgs>;
+export declare const ClientPaginationWithQueryParams: StoryObj;
+export declare const ServerPaginationWithQueryParams: StoryObj;

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

@@ -279,12 +279,27 @@ export const ServerSideSearch = {
         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 })] }));
     },
 };
-export const WithQueryParams = {
+export const ClientPaginationWithQueryParams = {
+    args: {
+        initialPageNo: 2,
+        initialPageSize: 5,
+    },
+    render: () => (_jsxs(_Fragment, { children: [_jsx(CurrentUrl, {}), _jsx(Table, { id: "client-pagination-table", data: data, columns: columns, paginationMode: "client", showHeader: true })] })),
+};
+export const ServerPaginationWithQueryParams = {
     args: {
         initialPageNo: 2,
         initialPageSize: 5,
     },
     render: () => {
-        return (_jsxs(_Fragment, { children: [_jsx(CurrentUrl, {}), _jsx(Table, { id: "url-sync-table", data: data, columns: columns, paginationMode: "client", showHeader: true })] }));
+        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: "server-pagination-table", data: data, columns: columns, paginationMode: "server", totalServerRows: 100, onRefetch: fetchData, isLoading: isLoading, showHeader: true })] }));
     },
 };

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

@@ -4,7 +4,6 @@ import { applyFlexSizes, getCheckboxSelectionColumn } from '../table.helpers';
 import { usePaginationController } from './usePaginationController';
 import { useUrlPaginationSync } from './useUrlPaginationSync';
 export function useTableController({ data, columns, checkboxSelection, checkboxPosition = 'start', paginationMode = 'client', sorting, onSortingChange, onSelectionChange, enableRowSelection, rowsPerPage = 10, isMultiRowSelection = true, selectedRowIds, rowIdKey = 'id', totalServerRows, onRefetch, showHeader = true, grouping, queryParamKeys, }) {
-    var _a;
     const safeData = Array.isArray(data) ? data : [];
     const stableGrouping = useMemo(() => grouping !== null && grouping !== void 0 ? grouping : [], [grouping]);
     const columnVisibility = useMemo(() => {
@@ -22,16 +21,8 @@ export function useTableController({ data, columns, checkboxSelection, checkboxP
         return {};
     });
     const { pageIndex, setPageIndex, pageSize, setPageSize } = useUrlPaginationSync(rowsPerPage, queryParamKeys);
-    const paginatedData = useMemo(() => {
-        if (paginationMode === 'server') {
-            return safeData;
-        }
-        const start = pageIndex * pageSize;
-        const end = start + pageSize;
-        return safeData.slice(start, end);
-    }, [safeData, pageIndex, pageSize, paginationMode]);
     const table = useReactTable({
-        data: paginatedData,
+        data: safeData,
         columns: tableColumns,
         getRowId: (row) => String(row[rowIdKey]),
         state: {
@@ -43,12 +34,12 @@ export function useTableController({ data, columns, checkboxSelection, checkboxP
         },
         getSortedRowModel: getSortedRowModel(),
         getCoreRowModel: getCoreRowModel(),
-        getPaginationRowModel: paginationMode !== 'server' ? getPaginationRowModel() : undefined,
-        manualPagination: true,
+        getPaginationRowModel: paginationMode === 'client' ? getPaginationRowModel() : undefined,
+        manualPagination: paginationMode === 'server',
         autoResetPageIndex: false,
         pageCount: paginationMode === 'server'
             ? Math.ceil((totalServerRows !== null && totalServerRows !== void 0 ? totalServerRows : 0) / pageSize)
-            : Math.ceil(((_a = safeData === null || safeData === void 0 ? void 0 : safeData.length) !== null && _a !== void 0 ? _a : 0) / pageSize),
+            : undefined,
         onPaginationChange: (updater) => {
             const next = typeof updater === 'function' ? updater({ pageIndex, pageSize }) : updater;
             setPageIndex(next.pageIndex);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@eml-payments/ui-kit",
-	"version": "1.1.2",
+	"version": "1.1.3",
 	"private": false,
 	"description": "ARLO UIKit",
 	"homepage": "https://github.com/EML-Payments/arlo.npm.uikit#readme",