jattac.libs.web.responsive-table 0.9.2 → 0.10.0

package/dist/Context/TableContext.d.ts

@@ -70,6 +70,7 @@ interface TableContextValue<TData> {
         isLoading: boolean;
         isFetchingMore: boolean;
         loadNextPage: () => void;
+        error?: Error;
     };
     /** Custom CSS class to apply to each card in mobile view. */
     mobileCardClassName?: string;

package/dist/Hooks/useTableDataSource.d.ts

@@ -9,6 +9,15 @@ interface UseTableDataSourceProps<TData> {
     };
     filter?: string;
 }
+export interface DataSourceState<TData> {
+    data: TData[];
+    currentPage: number;
+    hasMore: boolean;
+    totalCount?: number;
+    isLoading: boolean;
+    isFetchingMore: boolean;
+    error?: Error;
+}
 interface UseTableDataSourceReturn<TData> {
     data: TData[];
     currentPage: number;
@@ -18,6 +27,7 @@ interface UseTableDataSourceReturn<TData> {
     isFetchingMore: boolean;
     loadNextPage: () => Promise<void>;
     resetAndFetch: () => Promise<void>;
+    error?: Error;
 }
 export declare const useTableDataSource: <TData>(props: UseTableDataSourceProps<TData>) => UseTableDataSourceReturn<TData>;
 export {};

package/dist/Hooks/useTablePlugins.d.ts

@@ -14,6 +14,7 @@ interface UseTablePluginsProps<TData> {
         showFilter?: boolean;
         filterPlaceholder?: string;
         className?: string;
+        mode?: 'client' | 'server';
     };
     selectionProps?: {
         onSelectionChange: (selectedItems: TData[]) => void;
@@ -28,6 +29,7 @@ interface UseTablePluginsProps<TData> {
     columnDefinitions: (IResponsiveTableColumnDefinition<TData> | ((data: TData, rowIndex?: number) => IResponsiveTableColumnDefinition<TData>))[];
     getScrollableElement: () => HTMLElement | null;
     infiniteScrollProps?: IInfiniteScrollProps<TData>;
+    onFilterChange?: (filterText: string) => void;
 }
 interface UseTablePluginsReturn<TData> {
     processedData: TData[];

package/dist/Plugins/IResponsiveTablePlugin.d.ts

@@ -28,6 +28,7 @@ export interface IPluginAPI<TData> {
         showFilter?: boolean;
         filterPlaceholder?: string;
         className?: string;
+        mode?: 'client' | 'server';
     };
     selectionProps?: {
         onSelectionChange: (selectedItems: TData[]) => void;
@@ -36,4 +37,5 @@ export interface IPluginAPI<TData> {
         selectedItems?: TData[];
         selectedRowClassName?: string;
     };
+    onFilterChange?: (filterText: string) => void;
 }

package/dist/UI/ResponsiveTable.d.ts

@@ -3,7 +3,13 @@ import { SortDirection } from '../Data/IResponsiveTableColumnDefinition';
 import IFooterRowDefinition from '../Data/IFooterRowDefinition';
 import { IResponsiveTablePlugin } from '../Plugins/IResponsiveTablePlugin';
 import { ColumnDefinition, DataSource } from '../Context/TableContext';
+import { DataSourceState } from '../Hooks/useTableDataSource';
 export { ColumnDefinition };
+export interface ResponsiveTableHandle<TData> {
+    loadNextPage: () => Promise<void>;
+    resetAndFetch: () => Promise<void>;
+    getState: () => DataSourceState<TData>;
+}
 interface IInfiniteScrollProps<TData> {
     onLoadMore: (currentData: TData[]) => Promise<TData[] | null>;
     hasMore?: boolean;
@@ -66,6 +72,8 @@ interface IProps<TData> {
         showFilter?: boolean;
         filterPlaceholder?: string;
         className?: string;
+        /** When 'server', filter changes trigger a dataSource re-fetch with the filter param instead of client-side filtering. Default: 'client'. */
+        mode?: 'client' | 'server';
     };
     /** Configuration for row selection. */
     selectionProps?: {
@@ -84,10 +92,14 @@ interface IProps<TData> {
     sortProps?: ISortProps;
     /** Custom CSS class to apply to each card in mobile view. */
     mobileCardClassName?: string;
+    /** Callback fired whenever the dataSource state changes (data, page, loading, error). */
+    onDataSourceStateChange?: (state: DataSourceState<TData>) => void;
+    /** Callback fired when the current page changes. */
+    onPageChange?: (page: number) => void;
+    /** Callback fired when a dataSource fetch fails. */
+    onDataSourceError?: (error: Error) => void;
 }
-/**
- * A highly customizable, mobile-first responsive React table.
- * Supports static data or async data sources with built-in infinite scroll.
- */
-declare function ResponsiveTable<TData>(props: IProps<TData>): React.JSX.Element;
+declare const ResponsiveTable: <TData>(props: IProps<TData> & {
+    ref?: React.Ref<ResponsiveTableHandle<TData>>;
+}) => React.ReactElement;
 export default ResponsiveTable;

package/dist/index.d.ts

@@ -1,12 +1,13 @@
 import IFooterColumnDefinition from './Data/IFooterColumnDefinition';
 import IFooterRowDefinition from './Data/IFooterRowDefinition';
 import { IResponsiveTableColumnDefinition, SortDirection } from './Data/IResponsiveTableColumnDefinition';
-import ResponsiveTable from './UI/ResponsiveTable';
-import { ColumnDefinition, DataSource, IDataSourceParams, DataSourceResult } from './Context/TableContext';
+import ResponsiveTable, { ResponsiveTableHandle } from './UI/ResponsiveTable';
+import { ColumnDefinition, DataSource, IDataSourceParams, DataSourceResult, useTableContext } from './Context/TableContext';
+import { DataSourceState } from './Hooks/useTableDataSource';
 import { FilterPlugin } from './Plugins/FilterPlugin';
 import { InfiniteScrollPlugin } from './Plugins/InfiniteScrollPlugin';
 import { IResponsiveTablePlugin } from './Plugins/IResponsiveTablePlugin';
 import { SortPlugin } from './Plugins/SortPlugin';
 import { SelectionPlugin } from './Plugins/SelectionPlugin';
-export { SortDirection, IResponsiveTableColumnDefinition, ColumnDefinition, DataSource, IDataSourceParams, DataSourceResult, IFooterColumnDefinition, IFooterRowDefinition, FilterPlugin, InfiniteScrollPlugin, IResponsiveTablePlugin, SortPlugin, SelectionPlugin, };
+export { SortDirection, IResponsiveTableColumnDefinition, ColumnDefinition, DataSource, IDataSourceParams, DataSourceResult, IFooterColumnDefinition, IFooterRowDefinition, FilterPlugin, InfiniteScrollPlugin, IResponsiveTablePlugin, SortPlugin, SelectionPlugin, ResponsiveTableHandle, DataSourceState, useTableContext, };
 export default ResponsiveTable;

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import React, { createContext, useCallback, useMemo, useContext, useRef, useEffect, useState } from 'react';
+import React, { createContext, useCallback, useMemo, useContext, useRef, useEffect, useState, forwardRef, useImperativeHandle } from 'react';
 
 function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
@@ -496,6 +496,10 @@ class FilterPlugin {
                     } })));
         };
         this.processData = (data) => {
+            var _a;
+            if (((_a = this.api.filterProps) === null || _a === void 0 ? void 0 : _a.mode) === 'server') {
+                return data;
+            }
             if (!this.filterText || !this.api.columnDefinitions) {
                 return data;
             }
@@ -522,6 +526,10 @@ class FilterPlugin {
         _row, 
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         _column) => {
+            var _a;
+            if (((_a = this.api.filterProps) === null || _a === void 0 ? void 0 : _a.mode) === 'server') {
+                return content;
+            }
             if (!this.filterText || typeof content !== 'string') {
                 return content;
             }
@@ -534,8 +542,10 @@ class FilterPlugin {
                 clearTimeout(this.debounceTimeout);
             }
             this.debounceTimeout = setTimeout(() => {
+                var _a, _b;
                 this.filterText = currentFilterText;
                 this.api.forceUpdate();
+                (_b = (_a = this.api).onFilterChange) === null || _b === void 0 ? void 0 : _b.call(_a, currentFilterText);
             }, 300);
         };
     }
@@ -757,7 +767,7 @@ class SortPlugin {
 }
 
 const useTablePlugins = (props) => {
-    const { data, plugins, filterProps, selectionProps, sortProps, columnDefinitions, getScrollableElement, infiniteScrollProps, } = props;
+    const { data, plugins, filterProps, selectionProps, sortProps, columnDefinitions, getScrollableElement, infiniteScrollProps, onFilterChange, } = props;
     const [processedData, setProcessedData] = useState(data);
     const [activePlugins, setActivePlugins] = useState([]);
     // Persist internal plugins using refs to prevent state loss
@@ -831,6 +841,7 @@ const useTablePlugins = (props) => {
             filterProps: filterProps,
             selectionProps: selectionProps,
             columnDefinitions: columnDefinitions,
+            onFilterChange: onFilterChange,
         };
         // Initialize/Refresh all active plugins with the current API
         newActivePlugins.forEach((plugin) => {
@@ -856,6 +867,7 @@ const useTablePlugins = (props) => {
         getScrollableElement,
         infiniteScrollProps,
         getRawColumnDefinition,
+        onFilterChange,
     ]);
     const forceUpdatePlugins = useCallback(() => {
         setProcessedData(initializePlugins());
@@ -1026,6 +1038,7 @@ const useTableDataSource = (props) => {
     const [totalCount, setTotalCount] = useState(undefined);
     const [isLoading, setIsLoading] = useState(false);
     const [isFetchingMore, setIsFetchingMore] = useState(false);
+    const [error, setError] = useState(undefined);
     const isInitialMount = useRef(true);
     const fetchData = useCallback((page, isAppend) => __awaiter(void 0, void 0, void 0, function* () {
         if (!dataSource)
@@ -1037,6 +1050,7 @@ const useTableDataSource = (props) => {
             setIsLoading(true);
         }
         try {
+            setError(undefined);
             const params = {
                 page,
                 pageSize,
@@ -1066,9 +1080,10 @@ const useTableDataSource = (props) => {
                 setHasMore(newItems.length === pageSize);
             }
         }
-        catch (error) {
-            console.error('Error fetching data from dataSource:', error);
+        catch (err) {
+            setError(err);
             setHasMore(false);
+            console.error('Error fetching data from dataSource:', err);
         }
         finally {
             setIsLoading(false);
@@ -1105,6 +1120,7 @@ const useTableDataSource = (props) => {
         isFetchingMore,
         loadNextPage,
         resetAndFetch,
+        error,
     };
 };
 
@@ -1112,8 +1128,8 @@ const useTableDataSource = (props) => {
  * A highly customizable, mobile-first responsive React table.
  * Supports static data or async data sources with built-in infinite scroll.
  */
-function ResponsiveTable(props) {
-    const { columnDefinitions, data: initialData, dataSource, pageSize, noDataComponent, maxHeight, onRowClick, footerRows, mobileBreakpoint, plugins, enablePageLevelStickyHeader, infiniteScrollProps, filterProps, selectionProps, animationProps, sortProps, mobileCardClassName, } = props;
+function ResponsiveTableInner(props, ref) {
+    const { columnDefinitions, data: initialData, dataSource, pageSize, noDataComponent, maxHeight, onRowClick, footerRows, mobileBreakpoint, plugins, enablePageLevelStickyHeader, infiniteScrollProps, filterProps, selectionProps, animationProps, sortProps, mobileCardClassName, onDataSourceStateChange, onPageChange, onDataSourceError, } = props;
     const tableContainerRef = useRef(null);
     const headerRef = useRef(null);
     const { isMobile, isHeaderSticky } = useResponsiveTable({
@@ -1126,17 +1142,36 @@ function ResponsiveTable(props) {
     const getScrollableElement = useCallback(() => tableContainerRef.current, []);
     // Track active sort state for dataSource
     const [activeSort /*, setActiveSort*/] = useState((sortProps === null || sortProps === void 0 ? void 0 : sortProps.initialSortColumn) ? { columnId: sortProps.initialSortColumn, direction: sortProps.initialSortDirection || 'asc' } : undefined);
-    const { data: sourceData, isLoading: isSourceLoading, isFetchingMore, hasMore, totalCount, currentPage, loadNextPage, } = useTableDataSource({
+    // Track active filter state for dataSource
+    const [activeFilter, setActiveFilter] = useState('');
+    const handleFilterChange = useCallback((text) => {
+        setActiveFilter(text);
+    }, []);
+    const { data: sourceData, isLoading: isSourceLoading, isFetchingMore, hasMore, totalCount, currentPage, loadNextPage, error, resetAndFetch, } = useTableDataSource({
         dataSource,
         pageSize,
         initialData,
         sort: activeSort,
-        // We'll need to extract filter state if we want to support dataSource filtering
+        filter: (filterProps === null || filterProps === void 0 ? void 0 : filterProps.mode) === 'server' ? activeFilter : undefined,
     });
+    useImperativeHandle(ref, () => ({
+        loadNextPage: () => loadNextPage(),
+        resetAndFetch: () => resetAndFetch(),
+        getState: () => ({
+            data: sourceData,
+            currentPage,
+            hasMore,
+            totalCount,
+            isLoading: isSourceLoading,
+            isFetchingMore,
+            error,
+        }),
+    }), [loadNextPage, resetAndFetch, sourceData, currentPage, hasMore, totalCount, isSourceLoading, isFetchingMore, error]);
     const currentDataToProcess = dataSource ? sourceData : initialData;
     const { processedData, activePlugins, visibleColumns } = useTablePlugins({
         data: currentDataToProcess,
         plugins,
+        onFilterChange: (filterProps === null || filterProps === void 0 ? void 0 : filterProps.mode) === 'server' ? handleFilterChange : undefined,
         filterProps,
         selectionProps,
         sortProps,
@@ -1144,11 +1179,32 @@ function ResponsiveTable(props) {
         getScrollableElement,
         infiniteScrollProps,
     });
-    // Sync sort state from SortPlugin back to our local state to trigger dataSource re-fetch
+    // Fire onDataSourceStateChange when dataSource state changes
+    useEffect(() => {
+        if (dataSource && onDataSourceStateChange) {
+            onDataSourceStateChange({
+                data: sourceData,
+                currentPage,
+                hasMore,
+                totalCount,
+                isLoading: isSourceLoading,
+                isFetchingMore,
+                error,
+            });
+        }
+    }, [dataSource, sourceData, currentPage, hasMore, totalCount, isSourceLoading, isFetchingMore, error, onDataSourceStateChange]);
+    // Fire onPageChange when page changes
+    useEffect(() => {
+        if (dataSource && onPageChange) {
+            onPageChange(currentPage);
+        }
+    }, [dataSource, currentPage, onPageChange]);
+    // Fire onDataSourceError when error occurs
     useEffect(() => {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        activePlugins.find(p => p.id === 'sort');
-    }, [activePlugins, dataSource]);
+        if (dataSource && error && onDataSourceError) {
+            onDataSourceError(error);
+        }
+    }, [dataSource, error, onDataSourceError]);
     const hasData = useMemo(() => processedData.length > 0, [processedData]);
     const noDataSvg = (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "#ccc", height: "40", width: "40", viewBox: "0 0 24 24" },
         React.createElement("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-14h2v6h-2zm0 8h2v2h-2z" })));
@@ -1216,6 +1272,31 @@ function ResponsiveTable(props) {
     if (isLoading && !hasData) {
         return React.createElement(SkeletonView, { isMobile: isMobile, columnDefinitions: visibleColumns });
     }
+    if (error && !isLoading && !hasData) {
+        return (React.createElement("div", { style: {
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                justifyContent: 'center',
+                padding: '4rem 2rem',
+                gap: '1rem',
+                color: '#6c757d',
+                border: '2px dashed #e0e0e0',
+                borderRadius: '12px',
+                backgroundColor: '#f8f9fa',
+            } },
+            React.createElement("div", { style: { fontWeight: 500, fontSize: '1.1rem' } }, "Failed to load data"),
+            React.createElement("div", { style: { fontSize: '0.85rem', textAlign: 'center' } }, error.message),
+            React.createElement("button", { onClick: resetAndFetch, style: {
+                    padding: '0.5rem 1.5rem',
+                    backgroundColor: '#007bff',
+                    color: '#fff',
+                    border: 'none',
+                    borderRadius: '6px',
+                    cursor: 'pointer',
+                    fontWeight: 500,
+                } }, "Retry")));
+    }
     return (React.createElement(TableProvider, { value: {
             data: currentDataToProcess,
             processedData,
@@ -1234,6 +1315,7 @@ function ResponsiveTable(props) {
                 isLoading: isSourceLoading,
                 isFetchingMore,
                 loadNextPage,
+                error,
             } : undefined,
             mobileCardClassName,
         } },
@@ -1243,6 +1325,7 @@ function ResponsiveTable(props) {
             (hasData || isLoading) && isMobile && (React.createElement(MobileView, { mobileFooter: mobileFooter })),
             (hasData || isLoading) && !isMobile && (React.createElement(DesktopView, { maxHeight: maxHeight, isHeaderSticky: isHeaderSticky, tableContainerRef: tableContainerRef, headerRef: headerRef, footerRows: footerRows, renderPluginFooters: renderPluginFooters })))));
 }
+const ResponsiveTable = forwardRef(ResponsiveTableInner);
 
 class InfiniteScrollPlugin {
     constructor() {
@@ -1297,5 +1380,5 @@ class InfiniteScrollPlugin {
     }
 }
 
-export { FilterPlugin, InfiniteScrollPlugin, SelectionPlugin, SortPlugin, ResponsiveTable as default };
+export { FilterPlugin, InfiniteScrollPlugin, SelectionPlugin, SortPlugin, ResponsiveTable as default, useTableContext };
 //# sourceMappingURL=index.es.js.map