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

package/README.md

@@ -13,45 +13,81 @@ ResponsiveTable is a high-performance, type-safe React component designed for co
 ## Installation
 
 ```bash
-npm install jattac.libs.web.responsive-table
+npm install jattac.libs.web.responsive-table jattac.libs.web.zest-textbox react-icons
 ```
 
 ---
 
+## Built-in Filter
+
+Enable the search box with one prop. A clear (×) button appears automatically when the field has text.
+
+**Client-side** — filters the in-memory `data` array and highlights matches:
+```tsx
+<ResponsiveTable
+  data={rows}
+  columnDefinitions={columns}
+  filterProps={{ showFilter: true }}
+/>
+```
+
+**Server-side** — when `dataSource` is present, server mode is automatic. The table resets to page 1 and calls your fetch function with the current `filter` string on every change:
+```tsx
+<ResponsiveTable
+  dataSource={async ({ page, pageSize, filter }) =>
+    api.getUsers({ page, pageSize, search: filter })
+  }
+  columnDefinitions={columns}
+  filterProps={{ showFilter: true }}
+/>
+```
+
+> To force client-side filtering even with a `dataSource`, pass `mode: 'client'`.
+
+---
+
 ## Delightful Data Fetching: Smart Data Source
 
-The new `dataSource` pattern makes handling large datasets, server-side sorting, and infinite scroll completely painless. You provide the fetch logic; we handle the bookkeeping.
+The `dataSource` pattern makes handling large datasets, server-side sorting, filtering, and infinite scroll completely painless. You provide the fetch logic; the table handles bookkeeping.
 
-### Basic Usage
+### Pagination only
 ```tsx
 <ResponsiveTable
   dataSource={async ({ page, pageSize }) => {
     const users = await api.getUsers({ page, pageSize });
-    return users; // Table automatically handles appending and hasMore detection!
+    return users; // hasMore is auto-detected from page size
   }}
   columnDefinitions={columns}
 />
 ```
 
-### With Sorting & Filtering
-The table tells you exactly what it needs based on user interaction:
+### Pagination + sorting + filtering
 ```tsx
 <ResponsiveTable
-  dataSource={async ({ page, pageSize, sort, filter }) => {
-    return await api.getUsers({
+  dataSource={async ({ page, pageSize, sort, filter }) =>
+    api.getUsers({
       page,
       limit: pageSize,
       sortBy: sort?.columnId,
       order: sort?.direction,
-      search: filter
-    });
-  }}
+      search: filter,
+    })
+  }
   columnDefinitions={columns}
   sortProps={{ initialSortColumn: 'name' }}
   filterProps={{ showFilter: true }}
 />
 ```
 
+### With total count (accurate hasMore)
+Return `{ items, totalCount }` instead of a plain array and the table derives `hasMore` precisely:
+```tsx
+dataSource={async ({ page, pageSize }) => {
+  const { data, total } = await api.getUsers({ page, pageSize });
+  return { items: data, totalCount: total };
+}}
+```
+
 ---
 
 ## Basic Implementation

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/FilterPlugin.d.ts

@@ -12,4 +12,5 @@ export declare class FilterPlugin<TData> implements IResponsiveTablePlugin<TData
     processData: (data: TData[]) => TData[];
     renderCell: (content: React.ReactNode, _row: TData, _column: IResponsiveTableColumnDefinition<TData>) => React.ReactNode;
     private handleFilterChange;
+    private handleClear;
 }

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;
+        /** Default: 'server' when dataSource is present, 'client' otherwise. Pass 'client' to force in-memory filtering even with a dataSource. */
+        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,6 @@
-import React, { createContext, useCallback, useMemo, useContext, useRef, useEffect, useState } from 'react';
+import React, { createContext, useCallback, useMemo, useContext, useRef, useEffect, useState, forwardRef, useImperativeHandle } from 'react';
+import ZestTextbox from 'jattac.libs.web.zest-textbox';
+import { MdClose } from 'react-icons/md';
 
 function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
@@ -484,18 +486,36 @@ class FilterPlugin {
             this.api = api;
         };
         this.renderHeader = () => {
-            var _a;
+            var _a, _b;
             if (!((_a = this.api.filterProps) === null || _a === void 0 ? void 0 : _a.showFilter)) {
                 return null;
             }
-            return (React.createElement("div", { style: { marginBottom: '1rem' } },
-                React.createElement("input", { type: "text", placeholder: this.api.filterProps.filterPlaceholder || "Search...", onChange: this.handleFilterChange, className: this.api.filterProps.className, style: {
-                        padding: '0.5rem',
-                        border: '1px solid #ccc',
-                        borderRadius: '4px',
-                    } })));
+            return (React.createElement("div", { style: { marginBottom: '1rem', display: 'flex', alignItems: 'center', gap: '0.5rem' } },
+                React.createElement(ZestTextbox, { value: this.filterText, placeholder: (_b = this.api.filterProps.filterPlaceholder) !== null && _b !== void 0 ? _b : 'Search...', onChange: this.handleFilterChange, className: this.api.filterProps.className, zest: { stretch: true } }),
+                React.createElement("button", { onClick: this.handleClear, "aria-label": "Clear filter", style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        minWidth: '2.75rem',
+                        minHeight: '2.75rem',
+                        padding: 0,
+                        border: 'none',
+                        borderRadius: '50%',
+                        background: 'transparent',
+                        cursor: 'pointer',
+                        color: '#666',
+                        opacity: this.filterText ? 1 : 0,
+                        pointerEvents: this.filterText ? 'auto' : 'none',
+                        transition: 'opacity 0.15s ease',
+                        flexShrink: 0,
+                    } },
+                    React.createElement(MdClose, { size: 20 }))));
         };
         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 +542,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,10 +558,21 @@ 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);
         };
+        this.handleClear = () => {
+            var _a, _b;
+            if (this.debounceTimeout) {
+                clearTimeout(this.debounceTimeout);
+            }
+            this.filterText = '';
+            this.api.forceUpdate();
+            (_b = (_a = this.api).onFilterChange) === null || _b === void 0 ? void 0 : _b.call(_a, '');
+        };
     }
 }
 
@@ -757,7 +792,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 +866,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 +892,7 @@ const useTablePlugins = (props) => {
         getScrollableElement,
         infiniteScrollProps,
         getRawColumnDefinition,
+        onFilterChange,
     ]);
     const forceUpdatePlugins = useCallback(() => {
         setProcessedData(initializePlugins());
@@ -1026,7 +1063,10 @@ 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 dataLengthRef = useRef(0);
+    dataLengthRef.current = data.length;
     const fetchData = useCallback((page, isAppend) => __awaiter(void 0, void 0, void 0, function* () {
         if (!dataSource)
             return;
@@ -1037,6 +1077,7 @@ const useTableDataSource = (props) => {
             setIsLoading(true);
         }
         try {
+            setError(undefined);
             const params = {
                 page,
                 pageSize,
@@ -1058,7 +1099,7 @@ const useTableDataSource = (props) => {
             setCurrentPage(page);
             // Intelligent hasMore detection
             if (newTotalCount !== undefined) {
-                const currentTotalLoaded = (isAppend ? data.length : 0) + newItems.length;
+                const currentTotalLoaded = (isAppend ? dataLengthRef.current : 0) + newItems.length;
                 setHasMore(currentTotalLoaded < newTotalCount);
             }
             else {
@@ -1066,15 +1107,16 @@ 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);
             setIsFetchingMore(false);
         }
-    }), [dataSource, pageSize, sort, filter, data.length]);
+    }), [dataSource, pageSize, sort, filter]);
     const loadNextPage = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
         if (isLoading || isFetchingMore || !hasMore || !dataSource)
             return;
@@ -1105,6 +1147,7 @@ const useTableDataSource = (props) => {
         isFetchingMore,
         loadNextPage,
         resetAndFetch,
+        error,
     };
 };
 
@@ -1112,8 +1155,9 @@ 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) {
+    var _a;
+    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,29 +1170,72 @@ 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 isServerFilter = !!dataSource && !!(filterProps === null || filterProps === void 0 ? void 0 : filterProps.showFilter) && (filterProps === null || filterProps === void 0 ? void 0 : filterProps.mode) !== 'client';
+    const resolvedFilterProps = filterProps
+        ? Object.assign(Object.assign({}, filterProps), { mode: isServerFilter ? 'server' : ((_a = filterProps.mode) !== null && _a !== void 0 ? _a : 'client') }) : undefined;
+    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: isServerFilter ? 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,
-        filterProps,
+        onFilterChange: isServerFilter ? handleFilterChange : undefined,
+        filterProps: resolvedFilterProps,
         selectionProps,
         sortProps,
         columnDefinitions,
         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(() => {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        activePlugins.find(p => p.id === 'sort');
-    }, [activePlugins, dataSource]);
+        if (dataSource && onPageChange) {
+            onPageChange(currentPage);
+        }
+    }, [dataSource, currentPage, onPageChange]);
+    // Fire onDataSourceError when error occurs
+    useEffect(() => {
+        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 +1303,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 +1346,7 @@ function ResponsiveTable(props) {
                 isLoading: isSourceLoading,
                 isFetchingMore,
                 loadNextPage,
+                error,
             } : undefined,
             mobileCardClassName,
         } },
@@ -1243,6 +1356,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 +1411,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