@eml-payments/ui-kit 1.3.2 → 1.4.3

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.types.d.ts

@@ -1,5 +1,11 @@
-import type { ColumnDef, Row, SortingState } from '@tanstack/react-table';
+import type { SortingState, ColumnDef, Table } from '@tanstack/react-table';
 import type { DropdownOption, DropdownStructure } from '../DropdownWrapper/DropdownWrapper.types';
+import type { ReactNode } from 'react';
+declare module '@tanstack/react-table' {
+    interface TableMeta<TData> {
+        hasActions?: boolean;
+    }
+}
 export type FlexColumnDef<T> = ColumnDef<T> & {
     flex?: number;
 };
@@ -12,47 +18,84 @@ export type InfiniteScrollOptions = {
     loadingMoreMessage?: string;
     noMoreDataMessage?: string;
 };
-export type PaginationMode = 'client' | 'server' | 'none';
-export interface VirtualizationOptions {
+export type VirtualizationOptions = {
     enabled: boolean;
     rowEstimate?: number;
     overscan?: number;
+};
+export type ClientPaginationProps = {
+    paginationMode?: 'client' | 'none';
+    rowsPerPage?: number;
+    onRefetch?: never;
+    totalServerRows?: never;
+};
+export type ServerPaginationProps = {
+    paginationMode: 'server';
+    rowsPerPage?: number;
+    onRefetch: (pageIndex: number, pageSize: number) => void;
+    totalServerRows: number;
+};
+export type StandardPaginationProps = ClientPaginationProps | ServerPaginationProps;
+export interface ITableActionsDropdownProps<T> {
+    getOptions: (row: T) => DropdownOption[];
+    structure?: DropdownStructure;
+    renderCustomTrigger?: (row: T) => ReactNode;
+    menuAlignment?: 'start' | 'end' | 'center';
+    isDisabled?: boolean | ((row: T) => boolean);
 }
-export interface TableProps<T> {
+export type GroupRowClickHandler<T> = (args: {
+    columnId: string;
+    value: unknown;
+    rows: T[];
+}) => void;
+export interface TableInputProps<T> {
     id: string;
-    height?: number | string;
     data: T[];
     columns: FlexColumnDef<T>[];
     rowIdKey?: keyof T | 'id';
+    height?: number | string;
+    showHeader?: boolean;
     className?: string;
-    isLoading?: boolean;
-    showSkeletonRows?: boolean;
-    checkboxSelection?: boolean;
-    checkboxPosition?: 'start' | 'end';
+    /** Sorting */
     sorting?: SortingState;
     onSortingChange?: (s: SortingState) => void;
-    onSelectionChange?: (selectedIds: string[]) => void;
-    enableRowSelection?: (row: Row<T>) => boolean;
-    onRefetch?: (pageIndex: number, pageSize: number) => void;
-    isMultiRowSelection?: boolean;
-    totalServerRows?: number;
-    paginationMode?: PaginationMode;
-    noRowsMessage?: string;
-    rowsPerPage?: number;
-    selectedRowIds?: string[];
-    tableActionsDropdown?: {
-        getOptions: (row: T) => DropdownOption[];
-        structure?: DropdownStructure;
-        renderCustomTrigger?: (row: T) => React.ReactNode;
-        menuAlignment?: 'start' | 'end' | 'center' | undefined;
-        isDisabled?: boolean | ((row: T) => boolean);
-    };
+    /** Grouping */
+    grouping?: string[];
+    isLoading?: boolean;
+    /** Row interactions */
     onRowClick?: (row: T) => void;
     isRowClickable?: (row: T) => boolean;
-    showHeader?: boolean;
-    grouping?: string[];
+    onGroupRowClick?: GroupRowClickHandler<T>;
+    /** Search */
     isSearchActive?: boolean;
+    searchQuery?: string;
+    minSearchLength?: number;
     noSearchResultsMessage?: string;
-    infiniteScroll?: InfiniteScrollOptions;
-    virtualization?: VirtualizationOptions;
+    noRowsMessage?: string;
+    /** Actions */
+    tableActionsDropdown?: ITableActionsDropdownProps<T>;
 }
+export interface BaseTableProps<T> {
+    table: Table<T>;
+    height?: number | string;
+    showHeader?: boolean;
+    className?: string;
+    isLoading?: boolean;
+    renderBody: () => ReactNode;
+    footer?: ReactNode;
+    containerRef?: React.Ref<HTMLDivElement>;
+}
+export type StandardTableProps<T extends {
+    id: string;
+}> = TableInputProps<T> & StandardPaginationProps;
+export type InfiniteScrollTableProps<T extends {
+    id: string;
+}> = TableInputProps<T> & {
+    infiniteScroll: InfiniteScrollOptions;
+    virtualization?: VirtualizationOptions;
+    /** explicitly not supported */
+    paginationMode?: never;
+    rowsPerPage?: never;
+    onRefetch?: never;
+    totalServerRows?: never;
+};

package/dist/src/components/Table/body/Body.types.js

@@ -0,0 +1 @@
+"use strict";

package/dist/src/components/Table/body/renderGroupRow.d.ts

@@ -0,0 +1,13 @@
+import type { Row } from '@tanstack/react-table';
+interface RenderGroupRowProps<T> {
+    row: Row<T> & {
+        groupingColumnId: string;
+    };
+    onGroupRowClick?: (args: {
+        columnId: string;
+        value: unknown;
+        rows: T[];
+    }) => void;
+}
+export declare function renderGroupRow<T>({ row, onGroupRowClick }: RenderGroupRowProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from '../../../utils';
+export function renderGroupRow({ row, onGroupRowClick }) {
+    const columnId = row.groupingColumnId;
+    const groupValue = row.getGroupingValue(columnId);
+    const clickable = Boolean(onGroupRowClick);
+    return (_jsx("tr", { className: classNames('border-none', clickable && 'cursor-pointer hover:bg-muted/40'), onClick: clickable
+            ? () => onGroupRowClick === null || onGroupRowClick === void 0 ? void 0 : onGroupRowClick({
+                columnId,
+                value: groupValue,
+                rows: row.subRows.map((r) => r.original),
+            })
+            : undefined, children: _jsx("td", { colSpan: row.getVisibleCells().length, className: "p-0", children: _jsx("div", { className: "px-4 py-4 text-sm text-muted-foreground", children: String(groupValue) }) }) }));
+}

package/dist/src/components/Table/body/renderLeafRow.d.ts

@@ -0,0 +1,11 @@
+import { type Row } from '@tanstack/react-table';
+import type { ITableActionsDropdownProps } from '../Table.types';
+export declare function renderLeafRow<T extends {
+    id: string;
+}>({ row, onRowClick, isRowClickable, hasActions, tableActionsDropdown, }: {
+    row: Row<T>;
+    onRowClick?: (row: T) => void;
+    isRowClickable?: (row: T) => boolean;
+    hasActions?: boolean;
+    tableActionsDropdown?: ITableActionsDropdownProps<T>;
+}): import("react/jsx-runtime").JSX.Element;