jattac.libs.web.responsive-table 0.2.15 → 0.2.17

package/README.md

@@ -9,7 +9,7 @@ ResponsiveTable is a powerful, lightweight, and fully responsive React component
 - **Dynamic Data Handling**: Define columns and footers based on your data or application state.
 - **Delightful Animations**: Includes an optional skeleton loader and staggered row entrance animations.
 - **Interactive Elements**: Easily add click handlers for rows, headers, and footer cells.
-- **Performant**: Built with performance in mind, including debounced resize handling.
+- **Efficient & Responsive**: Built with efficiency in mind, including debounced resize handling for smooth transitions.
 - **Easy to Use**: A simple and intuitive API for quick integration.
 - **Extensible Plugin System**: Easily add new functionalities like filtering, sorting, or infinite scrolling.
 
@@ -230,15 +230,9 @@ const TableWithFooter = () => {
 };
 ```
 
-### Example 6: Disabling the Page-Level Sticky Header (ELI5)
+### Example 6: Disabling Page-Level Sticky Header
 
-**Explain Like I'm 5:** Imagine you have a super long grocery list on a piece of paper (the webpage). The titles of the columns are "Item", "Quantity", and "Price" (the table header).
-
-Normally, as you slide the paper up to see items at the bottom, the titles disappear off the top.
-
-This table has a special power: by default, the header "sticks" to the top of your view so you never forget which column is which.
-
-But what if you don't want it to stick? The `enablePageLevelStickyHeader={false}` prop is like a magic switch. Flipping it to `false` tells the header to scroll away normally with the rest of the page.
+By default, the table header remains fixed to the top of the viewport as the user scrolls down the page. This ensures the column titles are always visible. To disable this behavior and have the header scroll away with the rest of the page, set the `enablePageLevelStickyHeader` prop to `false`.
 
 ```jsx
 import React from 'react';
@@ -501,9 +495,11 @@ const FilterableTable = () => {
 
 #### `InfiniteScrollPlugin`
 
-Enables high-performance virtualization for displaying large datasets. When enabled, the table will only render the rows currently visible on the screen, loading more data as the user scrolls. This is essential for maintaining a smooth user experience with thousands or millions of rows.
+Enables a simple infinite scroll for loading more data as the user scrolls to the bottom of the table. This is useful for progressively loading data from an API without needing traditional pagination buttons.
+
+> **Important:** To enable infinite scroll, you **must** give the table a bounded height. This is done by passing the `maxHeight` prop to the `<ResponsiveTable>`. This prop creates a scrollable container for the table body, which is required for the scroll detection to work.
 
-> **Important:** To enable infinite scrolling, you **must** give the table a bounded height. This is done by passing the `maxHeight` prop to the `<ResponsiveTable>`. This prop creates a scrollable container for the table body, which is required for virtualization to work.
+> **Performance Note:** This implementation renders all loaded rows into the DOM to guarantee correct column alignment and simplicity. It is **not a virtualized list**. For extremely large datasets (many thousands of rows), performance may degrade as more rows are loaded. It is best suited for scenarios where loading a few hundred up to a couple thousand rows is expected.
 
 **Configuration (via `infiniteScrollProps` on `ResponsiveTable`):**
 
@@ -517,10 +513,10 @@ Enables high-performance virtualization for displaying large datasets. When enab
 
 **Comprehensive Example:**
 
-Here is a complete example of a component that fetches data from a simulated API and uses the infinite scroll feature.
+Here is a complete example showing how to use the infinite scroll feature. The parent component only needs to provide a function that fetches the next page of data.
 
 ```jsx
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useCallback } from 'react';
 import ResponsiveTable from 'jattac.libs.web.responsive-table';
 
 // Define the shape of our data items
@@ -551,35 +547,18 @@ const fetchData = async (page: number): Promise<DataItem[]> => {
 };
 
 const InfiniteScrollExample = () => {
-  // State for the data items displayed in the table
-  const [data, setData] = useState<DataItem[]>([]);
-  // State to track if there is more data to be loaded
-  const [hasMore, setHasMore] = useState(true);
-  // State to track the current page number for the API call
+  // Keep track of the next page to fetch.
   const [nextPage, setNextPage] = useState(0);
 
-  // The function that the table will call to load more items.
-  // It's wrapped in useCallback to prevent unnecessary re-renders.
+  // The onLoadMore function is now much simpler.
+  // It just needs to fetch the data and return it.
+  // The table will handle appending the data and managing the `hasMore` state internally.
   const loadMoreItems = useCallback(async () => {
-    // Fetch the next page of data
     const newItems = await fetchData(nextPage);
-
-    if (newItems.length === 0) {
-      // If the API returns no more items, update hasMore to false
-      setHasMore(false);
-    } else {
-      // Add the new items to the existing data
-      setData((prevData) => [...prevData, ...newItems]);
-      // Increment the page number for the next fetch
-      setNextPage((prevPage) => prevPage + 1);
-    }
+    setNextPage((prevPage) => prevPage + 1);
+    return newItems; // <-- Simply return the new items
   }, [nextPage]);
 
-  // Load the initial data when the component mounts
-  useEffect(() => {
-    loadMoreItems();
-  }, []); // The empty dependency array ensures this runs only once on mount
-
   const columns = [
     { displayLabel: 'ID', dataKey: 'id', cellRenderer: (row) => row.id },
     { displayLabel: 'Value', dataKey: 'value', cellRenderer: (row) => row.value },
@@ -590,14 +569,12 @@ const InfiniteScrollExample = () => {
     <div style={{ height: '400px' }}>
       <ResponsiveTable
         columnDefinitions={columns}
-        data={data}
-        // The maxHeight prop makes the table body scrollable within the container.
+        data={[]} // Start with an empty array of initial data
         maxHeight="100%"
-        // Pass the infinite scroll configuration
         infiniteScrollProps={{
           enableInfiniteScroll: true,
           onLoadMore: loadMoreItems,
-          hasMore: hasMore,
+          // Note: `hasMore` is not needed! The component infers it.
           loadingMoreComponent: <h4>Loading more items...</h4>,
           noMoreDataComponent: <p>You've reached the end!</p>,
         }}

package/dist/UI/InfiniteTable.d.ts

@@ -3,6 +3,20 @@ import { IResponsiveTableColumnDefinition } from '../Data/IResponsiveTableColumn
 import IFooterRowDefinition from '../Data/IFooterRowDefinition';
 import { IResponsiveTablePlugin } from '../Plugins/IResponsiveTablePlugin';
 export type ColumnDefinition<TData> = IResponsiveTableColumnDefinition<TData> | ((data: TData, rowIndex?: number) => IResponsiveTableColumnDefinition<TData>);
+type InfiniteScrollDisabled = {
+    enableInfiniteScroll?: false;
+    onLoadMore?: never;
+    hasMore?: never;
+    loadingMoreComponent?: never;
+    noMoreDataComponent?: never;
+};
+type InfiniteScrollEnabled<TData> = {
+    enableInfiniteScroll: true;
+    onLoadMore: (currentData: TData[]) => Promise<TData[] | null>;
+    hasMore?: boolean;
+    loadingMoreComponent?: ReactNode;
+    noMoreDataComponent?: ReactNode;
+};
 interface IProps<TData> {
     columnDefinitions: ColumnDefinition<TData>[];
     data: TData[];
@@ -13,13 +27,7 @@ interface IProps<TData> {
     mobileBreakpoint?: number;
     plugins?: IResponsiveTablePlugin<TData>[];
     enablePageLevelStickyHeader?: boolean;
-    infiniteScrollProps?: {
-        enableInfiniteScroll?: boolean;
-        onLoadMore?: (currentData: TData[]) => Promise<TData[] | null>;
-        hasMore?: boolean;
-        loadingMoreComponent?: ReactNode;
-        noMoreDataComponent?: ReactNode;
-    };
+    infiniteScrollProps?: InfiniteScrollDisabled | InfiniteScrollEnabled<TData>;
     filterProps?: {
         showFilter?: boolean;
         filterPlaceholder?: string;
@@ -31,31 +39,31 @@ interface IProps<TData> {
 }
 interface IState<TData> {
     isMobile: boolean;
+    internalData: TData[];
     processedData: TData[];
     isLoadingMore: boolean;
+    internalHasMore: boolean;
     isHeaderSticky: boolean;
-    columnWidths: number[];
+    activePlugins: IResponsiveTablePlugin<TData>[];
 }
 declare class InfiniteTable<TData> extends Component<IProps<TData>, IState<TData>> {
     private debouncedResize;
     private tableContainerRef;
     private headerRef;
-    private resizeObserver;
+    private throttledScrollHandler;
     constructor(props: IProps<TData>);
-    private get mobileBreakpoint();
-    private debounce;
-    private get data();
-    private get noDataSvg();
-    private get hasData();
-    private get noDataComponent();
     componentDidMount(): void;
     componentWillUnmount(): void;
-    componentDidUpdate(prevProps: IProps<TData>): void;
-    private measureHeader;
+    private debounce;
+    private throttle;
+    handleResize: () => void;
     private handleScroll;
+    private loadMoreData;
     private initializePlugins;
     private processData;
-    handleResize: () => void;
+    private get data();
+    private get hasData();
+    private get noDataComponent();
     private getColumnDefinition;
     private getRawColumnDefinition;
     private onHeaderClickCallback;
@@ -63,13 +71,8 @@ declare class InfiniteTable<TData> extends Component<IProps<TData>, IState<TData
     private getHeaderProps;
     private get rowClickFunction();
     private get rowClickStyle();
-    private get tableFooter();
-    private get mobileFooter();
-    private get skeletonView();
     private get mobileView();
     private get largeScreenView();
-    private renderPluginHeaders;
-    private renderPluginFooters;
-    render(): string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
+    render(): React.JSX.Element;
 }
 export default InfiniteTable;

package/dist/UI/ResponsiveTable.d.ts

@@ -3,6 +3,20 @@ import { IResponsiveTableColumnDefinition } from '../Data/IResponsiveTableColumn
 import IFooterRowDefinition from '../Data/IFooterRowDefinition';
 import { IResponsiveTablePlugin } from '../Plugins/IResponsiveTablePlugin';
 export type ColumnDefinition<TData> = IResponsiveTableColumnDefinition<TData> | ((data: TData, rowIndex?: number) => IResponsiveTableColumnDefinition<TData>);
+type InfiniteScrollDisabled = {
+    enableInfiniteScroll?: false;
+    onLoadMore?: never;
+    hasMore?: never;
+    loadingMoreComponent?: never;
+    noMoreDataComponent?: never;
+};
+type InfiniteScrollEnabled<TData> = {
+    enableInfiniteScroll: true;
+    onLoadMore: (currentData: TData[]) => Promise<TData[] | null>;
+    hasMore?: boolean;
+    loadingMoreComponent?: ReactNode;
+    noMoreDataComponent?: ReactNode;
+};
 interface IProps<TData> {
     columnDefinitions: ColumnDefinition<TData>[];
     data: TData[];
@@ -13,13 +27,7 @@ interface IProps<TData> {
     mobileBreakpoint?: number;
     plugins?: IResponsiveTablePlugin<TData>[];
     enablePageLevelStickyHeader?: boolean;
-    infiniteScrollProps?: {
-        enableInfiniteScroll?: boolean;
-        onLoadMore?: (currentData: TData[]) => Promise<TData[] | null>;
-        hasMore?: boolean;
-        loadingMoreComponent?: ReactNode;
-        noMoreDataComponent?: ReactNode;
-    };
+    infiniteScrollProps?: InfiniteScrollDisabled | InfiniteScrollEnabled<TData>;
     filterProps?: {
         showFilter?: boolean;
         filterPlaceholder?: string;