jattac.libs.web.responsive-table 0.8.0 → 0.8.2

package/README.md

@@ -16,6 +16,52 @@ ResponsiveTable is a high-performance, type-safe React component designed for co
 npm install jattac.libs.web.responsive-table
 ```
 
+## Styling
+
+For the table to look its best, you must import the provided CSS in your application entry point (e.g., `_app.tsx` or `index.tsx`):
+
+```tsx
+import 'jattac.libs.web.responsive-table/dist/index.css';
+```
+
+---
+
+## 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.
+
+### Basic Usage
+```tsx
+<ResponsiveTable
+  dataSource={async ({ page, pageSize }) => {
+    const users = await api.getUsers({ page, pageSize });
+    return users; // Table automatically handles appending and hasMore detection!
+  }}
+  columnDefinitions={columns}
+/>
+```
+
+### With Sorting & Filtering
+The table tells you exactly what it needs based on user interaction:
+```tsx
+<ResponsiveTable
+  dataSource={async ({ page, pageSize, sort, filter }) => {
+    return await api.getUsers({
+      page,
+      limit: pageSize,
+      sortBy: sort?.columnId,
+      order: sort?.direction,
+      search: filter
+    });
+  }}
+  columnDefinitions={columns}
+  sortProps={{ initialSortColumn: 'name' }}
+  filterProps={{ showFilter: true }}
+/>
+```
+
+---
+
 ## Basic Implementation
 
 The following example demonstrates a standard implementation of the ResponsiveTable component:

package/dist/Context/TableContext.d.ts

@@ -0,0 +1,91 @@
+import React, { ReactNode } from 'react';
+import { IResponsiveTableColumnDefinition } from '../Data/IResponsiveTableColumnDefinition';
+import { IResponsiveTablePlugin } from '../Plugins/IResponsiveTablePlugin';
+export type ColumnDefinition<TData> = IResponsiveTableColumnDefinition<TData> | ((data: TData, rowIndex?: number) => IResponsiveTableColumnDefinition<TData>);
+/**
+ * Parameters passed to the dataSource function.
+ */
+export interface IDataSourceParams {
+    /** The 1-based page number to fetch. */
+    page: number;
+    /** The number of items to fetch per page. */
+    pageSize: number;
+    /** The active sort configuration, if any. */
+    sort?: {
+        columnId: string;
+        direction: 'asc' | 'desc';
+    };
+    /** The active filter string, if any. */
+    filter?: string;
+}
+/**
+ * The result of a dataSource fetch.
+ * Can be a simple array of items (hasMore will be auto-detected)
+ * or an object containing items and an optional totalCount.
+ */
+export type DataSourceResult<TData> = TData[] | {
+    items: TData[];
+    totalCount?: number;
+};
+/**
+ * A function that fetches data from an external source (e.g., an API).
+ */
+export type DataSource<TData> = (params: IDataSourceParams) => Promise<DataSourceResult<TData>>;
+interface TableContextValue<TData> {
+    /** The raw data provided to the table (or the combined data from dataSource). */
+    data: TData[];
+    /** The data after being processed by plugins (sort, filter, etc.). */
+    processedData: TData[];
+    /** Alias for processedData, used for backward compatibility. */
+    currentData: TData[];
+    /** The list of columns that are currently visible. */
+    visibleColumns: ColumnDefinition<TData>[];
+    /** The full list of column definitions provided to the table. */
+    originalColumnDefinitions: ColumnDefinition<TData>[];
+    /** The list of plugins currently active on the table. */
+    activePlugins: IResponsiveTablePlugin<TData>[];
+    /** Callback for when a row is clicked. */
+    onRowClick?: (item: TData) => void;
+    /** Configuration for row selection. */
+    selectionProps?: {
+        onSelectionChange: (selectedItems: TData[]) => void;
+        rowIdKey: keyof TData;
+        mode?: 'single' | 'multiple';
+        selectedItems?: TData[];
+        selectedRowClassName?: string;
+    };
+    /** Configuration for table animations and loading states. */
+    animationProps?: {
+        isLoading?: boolean;
+        animateOnLoad?: boolean;
+    };
+    /** The smart data source used for server-side operations and infinite scroll. */
+    dataSource?: DataSource<TData>;
+    /** The current state of pagination and async loading. */
+    pagination?: {
+        currentPage: number;
+        pageSize: number;
+        hasMore: boolean;
+        totalCount?: number;
+        isLoading: boolean;
+        isFetchingMore: boolean;
+        loadNextPage: () => void;
+    };
+    getRawColumnDefinition: (colDef: ColumnDefinition<TData>) => IResponsiveTableColumnDefinition<TData>;
+    getColumnDefinition: (colDef: ColumnDefinition<TData>, rowIndex: number) => IResponsiveTableColumnDefinition<TData>;
+    onHeaderClickCallback: (colDef: ColumnDefinition<TData>) => ((id: string) => void) | undefined;
+    getClickableHeaderClassName: (onHeaderClick: ((id: string) => void) | undefined, colDef: ColumnDefinition<TData>) => string;
+    getHeaderProps: (colDef: ColumnDefinition<TData>) => React.HTMLAttributes<HTMLElement> & {
+        className?: string;
+    };
+    getRowProps: (row: TData) => React.HTMLAttributes<HTMLElement>;
+    getRowId: (row: TData, index: number) => string | number;
+    renderCell: (content: React.ReactNode, row: TData, colDef: IResponsiveTableColumnDefinition<TData>) => React.ReactNode;
+}
+export declare const useTableContext: <TData>() => TableContextValue<TData>;
+interface TableProviderProps<TData> {
+    children: ReactNode;
+    value: Omit<TableContextValue<TData>, 'currentData' | 'getRawColumnDefinition' | 'getColumnDefinition' | 'onHeaderClickCallback' | 'getClickableHeaderClassName' | 'getHeaderProps' | 'getRowProps' | 'getRowId' | 'renderCell'>;
+}
+export declare function TableProvider<TData>({ children, value }: TableProviderProps<TData>): React.JSX.Element;
+export {};

package/dist/Hooks/useTableDataSource.d.ts

@@ -0,0 +1,23 @@
+import { DataSource } from '../Context/TableContext';
+interface UseTableDataSourceProps<TData> {
+    dataSource?: DataSource<TData>;
+    pageSize?: number;
+    initialData?: TData[];
+    sort?: {
+        columnId: string;
+        direction: 'asc' | 'desc';
+    };
+    filter?: string;
+}
+interface UseTableDataSourceReturn<TData> {
+    data: TData[];
+    currentPage: number;
+    hasMore: boolean;
+    totalCount?: number;
+    isLoading: boolean;
+    isFetchingMore: boolean;
+    loadNextPage: () => Promise<void>;
+    resetAndFetch: () => Promise<void>;
+}
+export declare const useTableDataSource: <TData>(props: UseTableDataSourceProps<TData>) => UseTableDataSourceReturn<TData>;
+export {};

package/dist/UI/DesktopView.d.ts

@@ -1,42 +1,15 @@
 import React from 'react';
-import { IResponsiveTableColumnDefinition } from '../Data/IResponsiveTableColumnDefinition';
 import IFooterColumnDefinition from '../Data/IFooterColumnDefinition';
-import { ColumnDefinition } from './ResponsiveTable';
-interface DesktopViewProps<TData> {
-    columnDefinitions: ColumnDefinition<TData>[];
-    originalColumnDefinitions: ColumnDefinition<TData>[];
-    currentData: TData[];
+interface DesktopViewProps {
     maxHeight?: string;
     isHeaderSticky: boolean;
     tableContainerRef: React.RefObject<HTMLDivElement>;
     headerRef: React.RefObject<HTMLTableSectionElement>;
-    getRowProps: (row: TData) => React.HTMLAttributes<HTMLElement>;
-    getHeaderProps: (colDef: ColumnDefinition<TData>) => React.HTMLAttributes<HTMLElement> & {
-        className?: string;
-    };
-    onHeaderClickCallback: (colDef: ColumnDefinition<TData>) => ((id: string) => void) | undefined;
-    getClickableHeaderClassName: (onHeaderClick: ((id: string) => void) | undefined, colDef: ColumnDefinition<TData>) => string;
-    getRawColumnDefinition: (colDef: ColumnDefinition<TData>) => IResponsiveTableColumnDefinition<TData>;
-    getColumnDefinition: (colDef: ColumnDefinition<TData>, rowIndex: number) => IResponsiveTableColumnDefinition<TData>;
-    renderCell: (content: React.ReactNode, row: TData, colDef: IResponsiveTableColumnDefinition<TData>) => React.ReactNode;
-    rowClickFunction: (item: TData) => void;
     footerRows?: {
         columns: IFooterColumnDefinition[];
     }[];
     renderPluginFooters: () => React.ReactNode;
     onScroll?: (e: React.UIEvent<HTMLDivElement>) => void;
-    animationProps?: {
-        isLoading?: boolean;
-        animateOnLoad?: boolean;
-    };
-    selectionProps?: {
-        onSelectionChange: (selectedItems: TData[]) => void;
-        rowIdKey: keyof TData;
-        mode?: 'single' | 'multiple';
-        selectedItems?: TData[];
-        selectedRowClassName?: string;
-    };
-    onRowClick?: (item: TData) => void;
 }
-declare function DesktopView<TData>(props: DesktopViewProps<TData>): React.JSX.Element;
+declare function DesktopView<TData>(props: DesktopViewProps): React.JSX.Element;
 export default DesktopView;

package/dist/UI/InfiniteTable.d.ts

@@ -1,8 +1,8 @@
 import React, { ReactNode } from 'react';
-import { IResponsiveTableColumnDefinition, SortDirection } from '../Data/IResponsiveTableColumnDefinition';
+import { SortDirection } from '../Data/IResponsiveTableColumnDefinition';
 import IFooterRowDefinition from '../Data/IFooterRowDefinition';
 import { IResponsiveTablePlugin } from '../Plugins/IResponsiveTablePlugin';
-export type ColumnDefinition<TData> = IResponsiveTableColumnDefinition<TData> | ((data: TData, rowIndex?: number) => IResponsiveTableColumnDefinition<TData>);
+import { ColumnDefinition } from '../Context/TableContext';
 interface IInfiniteScrollProps<TData> {
     onLoadMore: (currentData: TData[]) => Promise<TData[] | null>;
     hasMore?: boolean;

package/dist/UI/MobileView.d.ts

@@ -1,29 +1,6 @@
 import React from 'react';
-import { IResponsiveTableColumnDefinition } from '../Data/IResponsiveTableColumnDefinition';
-import { ColumnDefinition } from './ResponsiveTable';
-interface MobileViewProps<TData> {
-    currentData: TData[];
-    columnDefinitions: ColumnDefinition<TData>[];
-    onRowClick?: (item: TData) => void;
-    selectionProps?: {
-        onSelectionChange: (selectedItems: TData[]) => void;
-        rowIdKey: keyof TData;
-        mode?: 'single' | 'multiple';
-        selectedItems?: TData[];
-        selectedRowClassName?: string;
-    };
-    animationProps?: {
-        isLoading?: boolean;
-        animateOnLoad?: boolean;
-    };
-    getRowProps: (row: TData) => React.HTMLAttributes<HTMLElement>;
-    getRowId: (row: TData, index: number) => string | number;
-    getColumnDefinition: (colDef: ColumnDefinition<TData>, rowIndex: number) => IResponsiveTableColumnDefinition<TData>;
-    onHeaderClickCallback: (colDef: ColumnDefinition<TData>) => ((id: string) => void) | undefined;
-    getClickableHeaderClassName: (onHeaderClick: ((id: string) => void) | undefined, colDef: ColumnDefinition<TData>) => string;
-    renderCell: (content: React.ReactNode, row: TData, colDef: IResponsiveTableColumnDefinition<TData>) => React.ReactNode;
-    rowClickFunction: (item: TData) => void;
+interface MobileViewProps {
     mobileFooter: React.ReactNode;
 }
-declare function MobileView<TData>(props: MobileViewProps<TData>): React.JSX.Element;
+declare function MobileView<TData>(props: MobileViewProps): React.JSX.Element;
 export default MobileView;

package/dist/UI/ResponsiveTable.d.ts

@@ -1,8 +1,9 @@
 import React, { ReactNode } from 'react';
-import { IResponsiveTableColumnDefinition, SortDirection } from '../Data/IResponsiveTableColumnDefinition';
+import { SortDirection } from '../Data/IResponsiveTableColumnDefinition';
 import IFooterRowDefinition from '../Data/IFooterRowDefinition';
 import { IResponsiveTablePlugin } from '../Plugins/IResponsiveTablePlugin';
-export type ColumnDefinition<TData> = IResponsiveTableColumnDefinition<TData> | ((data: TData, rowIndex?: number) => IResponsiveTableColumnDefinition<TData>);
+import { ColumnDefinition, DataSource } from '../Context/TableContext';
+export { ColumnDefinition };
 interface IInfiniteScrollProps<TData> {
     onLoadMore: (currentData: TData[]) => Promise<TData[] | null>;
     hasMore?: boolean;
@@ -14,21 +15,43 @@ interface ISortProps {
     initialSortDirection?: SortDirection;
 }
 interface IProps<TData> {
+    /** The definitions for each column in the table. */
     columnDefinitions: ColumnDefinition<TData>[];
+    /** The initial data to display. If using dataSource, this acts as the starting set. */
     data: TData[];
+    /**
+     * A smart data source function for server-side pagination, sorting, and filtering.
+     * If provided, the table automatically handles infinite scroll and re-fetching on sort/filter.
+     */
+    dataSource?: DataSource<TData>;
+    /** The number of items to fetch per page when using dataSource. Defaults to 20. */
+    pageSize?: number;
+    /** A component to display when there is no data. */
     noDataComponent?: ReactNode;
+    /** The maximum height of the table container (enables internal scrolling). */
     maxHeight?: string;
+    /** Callback for when a row is clicked. */
     onRowClick?: (item: TData) => void;
+    /** Custom definitions for footer rows. */
     footerRows?: IFooterRowDefinition[];
+    /** The pixel width at which the table switches to mobile card view. Defaults to 600. */
     mobileBreakpoint?: number;
+    /** An array of plugins to extend table functionality. */
     plugins?: IResponsiveTablePlugin<TData>[];
+    /** If true, the header will stick to the top of the page when scrolling. */
     enablePageLevelStickyHeader?: boolean;
+    /**
+     * Props for manual infinite scroll handling.
+     * NOTE: Prefer using `dataSource` for a more seamless experience.
+     */
     infiniteScrollProps?: IInfiniteScrollProps<TData>;
+    /** Configuration for the built-in filter plugin. */
     filterProps?: {
         showFilter?: boolean;
         filterPlaceholder?: string;
         className?: string;
     };
+    /** Configuration for row selection. */
     selectionProps?: {
         onSelectionChange: (selectedItems: TData[]) => void;
         rowIdKey: keyof TData;
@@ -36,11 +59,17 @@ interface IProps<TData> {
         selectedItems?: TData[];
         selectedRowClassName?: string;
     };
+    /** Configuration for loading states and entrance animations. */
     animationProps?: {
         isLoading?: boolean;
         animateOnLoad?: boolean;
     };
+    /** Initial sort state for the table. */
     sortProps?: ISortProps;
 }
+/**
+ * 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;
 export default ResponsiveTable;

package/dist/UI/TableBodyCell.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ColumnDefinition } from '../Context/TableContext';
+interface TableBodyCellProps<TData> {
+    row: TData;
+    rowIndex: number;
+    columnDefinition: ColumnDefinition<TData>;
+}
+export declare function TableBodyCell<TData>(props: TableBodyCellProps<TData>): React.JSX.Element;
+export {};

package/dist/UI/TableBodyRow.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ColumnDefinition } from '../Context/TableContext';
+interface TableBodyRowProps<TData> {
+    row: TData;
+    rowIndex: number;
+    columnDefinitions: ColumnDefinition<TData>[];
+    onRowClick?: (item: TData) => void;
+    selectionProps?: {
+        onSelectionChange: (selectedItems: TData[]) => void;
+        rowIdKey: keyof TData;
+        mode?: 'single' | 'multiple';
+        selectedItems?: TData[];
+        selectedRowClassName?: string;
+    };
+    animationProps?: {
+        isLoading?: boolean;
+        animateOnLoad?: boolean;
+    };
+}
+export declare function TableBodyRow<TData>(props: TableBodyRowProps<TData>): React.JSX.Element;
+export {};

package/dist/UI/TableHeaderCell.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ColumnDefinition } from '../Context/TableContext';
+interface TableHeaderCellProps<TData> {
+    columnDefinition: ColumnDefinition<TData>;
+    colIndex: number;
+}
+export declare function TableHeaderCell<TData>(props: TableHeaderCellProps<TData>): React.JSX.Element;
+export {};

package/dist/UI/TableSentinel.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface TableSentinelProps {
+    onIntersect: () => void;
+    isLoading?: boolean;
+}
+export declare const TableSentinel: React.FC<TableSentinelProps>;
+export {};

package/dist/index.css

@@ -0,0 +1 @@
+.ResponsiveTable-module_responsiveTable__4y-Od{--table-border-color:#e0e0e0;--table-header-bg:#f8f9fa;--table-row-hover-bg:#f1f3f5;--table-row-stripe-bg:#fafbfc;--card-bg:#fff;--card-border-color:#e0e0e0;--card-shadow:0 2px 8px rgba(0,0,0,.06);--text-color:#212529;--text-color-muted:#6c757d;--interactive-color:#0056b3;--primary-color:#007bff}.ResponsiveTable-module_tableContainer__VjWjH{border:1px solid var(--table-border-color);border-radius:8px;overflow-x:auto;width:100%}.ResponsiveTable-module_responsiveTable__4y-Od{background-color:var(--card-bg);border-collapse:collapse;color:var(--text-color);width:100%}.ResponsiveTable-module_responsiveTable__4y-Od thead th{background-color:var(--table-header-bg);border-bottom:2px solid var(--table-border-color);color:var(--text-color-muted);font-size:.75rem;font-weight:600;letter-spacing:.05em;padding:1rem;text-align:left;text-transform:uppercase;z-index:1}.ResponsiveTable-module_responsiveTable__4y-Od td{border-bottom:1px solid var(--table-border-color);font-size:.9rem;padding:1rem;text-align:left}.ResponsiveTable-module_responsiveTable__4y-Od tr:last-child td{border-bottom:none}.ResponsiveTable-module_responsiveTable__4y-Od tr:nth-child(2n){background-color:var(--table-row-stripe-bg)}.ResponsiveTable-module_responsiveTable__4y-Od tr:hover{background-color:var(--table-row-hover-bg)}.ResponsiveTable-module_cardContainer__Het4h{display:flex;flex-direction:column;gap:1rem;padding:.5rem}.ResponsiveTable-module_card__b-U2v{background-color:var(--card-bg);border:1px solid var(--card-border-color);border-radius:12px;box-shadow:var(--card-shadow);overflow:hidden;padding:1.25rem;transition:box-shadow .2s ease-in-out,transform .2s ease-in-out}.ResponsiveTable-module_card__b-U2v:hover{box-shadow:0 4px 16px rgba(0,0,0,.08);transform:translateY(-2px)}.ResponsiveTable-module_card-header__Ttk51{border-bottom:1px solid var(--table-border-color);margin-bottom:1rem;padding-bottom:.5rem}.ResponsiveTable-module_card-row__qvIUJ{align-items:flex-start;display:flex;gap:1rem;justify-content:space-between;margin:0 0 .75rem}.ResponsiveTable-module_card-row__qvIUJ:last-child{margin-bottom:0}.ResponsiveTable-module_card-label__v9L71{color:var(--text-color-muted);font-size:.75rem;font-weight:600;text-transform:uppercase;white-space:nowrap}.ResponsiveTable-module_card-value__BO-c-{color:var(--text-color);font-size:.9rem;text-align:right}.ResponsiveTable-module_clickableRow__0kjWm{cursor:pointer}.ResponsiveTable-module_clickableHeader__xHQhF{cursor:pointer;transition:color .2s}.ResponsiveTable-module_clickableHeader__xHQhF:hover{color:var(--interactive-color)}.ResponsiveTable-module_sortable__yvA60{cursor:pointer}.ResponsiveTable-module_sorted-asc__jzOIa,.ResponsiveTable-module_sorted-desc__7WCFK{background-color:#f0f7ff!important;color:var(--interactive-color)!important}.ResponsiveTable-module_headerInnerWrapper__3VAhD{align-items:center;display:flex;justify-content:space-between;width:100%}.ResponsiveTable-module_headerContent__ODMzS{flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ResponsiveTable-module_sortIcon__A9WtD{background-position:50%;background-repeat:no-repeat;background-size:contain;flex-shrink:0;height:1rem;margin-left:.5rem;opacity:.3;width:1rem}.ResponsiveTable-module_sortable__yvA60:hover .ResponsiveTable-module_sortIcon__A9WtD{opacity:.8}.ResponsiveTable-module_sortable__yvA60 .ResponsiveTable-module_sortIcon__A9WtD{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236c757d'%3E%3Cpath d='M10 18h4v-2h-4v2zm-6-8v2h16V8H4zm3-6h10v2H7V2z'/%3E%3C/svg%3E")}.ResponsiveTable-module_sorted-asc__jzOIa .ResponsiveTable-module_sortIcon__A9WtD{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230056b3'%3E%3Cpath d='m7 14 5-5 5 5z'/%3E%3C/svg%3E");opacity:1}.ResponsiveTable-module_sorted-desc__7WCFK .ResponsiveTable-module_sortIcon__A9WtD{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230056b3'%3E%3Cpath d='m7 10 5 5 5-5z'/%3E%3C/svg%3E");opacity:1}.ResponsiveTable-module_responsiveTable__4y-Od tfoot{background-color:var(--table-header-bg);border-top:2px solid var(--table-border-color)}.ResponsiveTable-module_footerCell__8H-uG{font-size:.9rem;font-weight:600;padding:1rem;text-align:right}.ResponsiveTable-module_clickableFooterCell__WB9Ss{color:var(--interactive-color);cursor:pointer}.ResponsiveTable-module_clickableFooterCell__WB9Ss:hover{text-decoration:underline}.ResponsiveTable-module_footerCard__-NE2M{background-color:var(--table-header-bg);border:1px solid var(--card-border-color);border-radius:12px;margin-top:1rem;overflow:hidden;padding:1.25rem}.ResponsiveTable-module_footer-card-row__Vv6Ur{display:flex;font-size:.9rem;font-weight:600;justify-content:space-between;margin:0 0 .75rem}.ResponsiveTable-module_selectedRow__-JyNW{background-color:#e7f1ff!important}.ResponsiveTable-module_card__b-U2v.ResponsiveTable-module_selectedRow__-JyNW{border-left:4px solid var(--primary-color)}.ResponsiveTable-module_animatedRow__SFjrJ{animation:ResponsiveTable-module_fadeInUp__jMCS7 .4s ease-out forwards;opacity:0}@keyframes ResponsiveTable-module_fadeInUp__jMCS7{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.ResponsiveTable-module_skeleton__XxsXW{background-color:#f0f0f0;border-radius:4px;overflow:hidden;position:relative}.ResponsiveTable-module_skeleton__XxsXW:after{animation:ResponsiveTable-module_shimmer__H8PhC 1.5s infinite;background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.6),transparent);content:"";height:100%;left:-150%;position:absolute;top:0;width:150%}@keyframes ResponsiveTable-module_shimmer__H8PhC{0%{transform:translateX(0)}to{transform:translateX(100%)}}.ResponsiveTable-module_noDataWrapper__Rj-k3{align-items:center;background-color:var(--table-header-bg);border:2px dashed var(--table-border-color);border-radius:12px;color:var(--text-color-muted);display:flex;flex-direction:column;gap:1rem;justify-content:center;padding:4rem 2rem}.ResponsiveTable-module_noData__IpwNq{font-size:1.1rem;font-weight:500}.ResponsiveTable-module_spinner__Pn-3D{animation:ResponsiveTable-module_spin__i3NHn .8s linear infinite;border:3px solid rgba(0,0,0,.1);border-left:3px solid var(--primary-color);border-radius:50%;height:24px;width:24px}@keyframes ResponsiveTable-module_spin__i3NHn{to{transform:rotate(1turn)}}.ResponsiveTable-module_infoContainer__b9IF5{align-items:center;color:var(--text-color-muted);display:flex;font-size:.85rem;gap:.5rem;justify-content:center;padding:1.5rem}.ResponsiveTable-module_stickyHeader__-jjN- th{box-shadow:0 2px 4px rgba(0,0,0,.05);position:sticky;top:0}.ResponsiveTable-module_internalStickyHeader__idiJY th{position:sticky;top:0}.LoadingSpinner-module_spinner__F9V3x{animation:LoadingSpinner-module_spin__VkBDO .8s cubic-bezier(.4,0,.2,1) infinite;border:3px solid rgba(0,0,0,.05);border-left:3px solid var(--primary-color,#007bff);border-radius:50%;display:inline-block;height:28px;vertical-align:middle;width:28px}@keyframes LoadingSpinner-module_spin__VkBDO{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.NoMoreDataMessage-module_infoContainer__dk1r5{align-items:center;background-color:var(--table-header-bg,#f8f9fa);border-top:1px solid var(--table-border-color,#e0e0e0);color:var(--text-color-muted,#6c757d);display:flex;font-size:.85rem;gap:.75rem;justify-content:center;padding:2rem;width:100%}.NoMoreDataMessage-module_infoContainer__dk1r5.NoMoreDataMessage-module_noMoreData__ATuIg{font-weight:600;letter-spacing:.02em}

package/dist/index.d.ts

@@ -1,11 +1,12 @@
 import IFooterColumnDefinition from './Data/IFooterColumnDefinition';
 import IFooterRowDefinition from './Data/IFooterRowDefinition';
 import { IResponsiveTableColumnDefinition, SortDirection } from './Data/IResponsiveTableColumnDefinition';
-import ResponsiveTable, { ColumnDefinition } from './UI/ResponsiveTable';
+import ResponsiveTable from './UI/ResponsiveTable';
+import { ColumnDefinition, DataSource, IDataSourceParams, DataSourceResult } from './Context/TableContext';
 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, IFooterColumnDefinition, IFooterRowDefinition, FilterPlugin, InfiniteScrollPlugin, IResponsiveTablePlugin, SortPlugin, SelectionPlugin, };
+export { SortDirection, IResponsiveTableColumnDefinition, ColumnDefinition, DataSource, IDataSourceParams, DataSourceResult, IFooterColumnDefinition, IFooterRowDefinition, FilterPlugin, InfiniteScrollPlugin, IResponsiveTablePlugin, SortPlugin, SelectionPlugin, };
 export default ResponsiveTable;