jattac.libs.web.responsive-table 0.1.5 → 0.2.0

package/src/Data/IFooterColumnDefinition.ts

@@ -1,21 +1,21 @@
-import { ReactNode } from 'react';
-
-export default interface IFooterColumnDefinition {
-  colSpan: number;
-  cellRenderer: () => ReactNode;
-  /**
-   * An optional, explicit label for the footer cell, especially for mobile view.
-   * If not provided, the table could try to infer it from the corresponding column.
-   */
-  displayLabel?: ReactNode;
-
-  /**
-   * An optional click handler for the footer cell.
-   */
-  onCellClick?: () => void;
-
-  /**
-   * Optional class name for custom styling of the footer cell.
-   */
-  className?: string;
-}
+import { ReactNode } from 'react';
+
+export default interface IFooterColumnDefinition {
+  colSpan: number;
+  cellRenderer: () => ReactNode;
+  /**
+   * An optional, explicit label for the footer cell, especially for mobile view.
+   * If not provided, the table could try to infer it from the corresponding column.
+   */
+  displayLabel?: ReactNode;
+
+  /**
+   * An optional click handler for the footer cell.
+   */
+  onCellClick?: () => void;
+
+  /**
+   * Optional class name for custom styling of the footer cell.
+   */
+  className?: string;
+}

package/src/Data/IResponsiveTableColumnDefinition.tsx

@@ -1,11 +1,12 @@
-import { ReactNode } from 'react';
-
-export default interface IResponsiveTableColumnDefinition<TData> {
-  displayLabel: ReactNode;
-  cellRenderer: (data: TData) => ReactNode;
-  interactivity?: {
-    id: string;
-    onHeaderClick?: (id: string) => void;
-    className?: string;
-  };
-}
+import { ReactNode } from 'react';
+
+export default interface IResponsiveTableColumnDefinition<TData> {
+  displayLabel: ReactNode;
+  cellRenderer: (data: TData) => ReactNode;
+  interactivity?: {
+    id: string;
+    onHeaderClick?: (id: string) => void;
+    className?: string;
+  };
+  getFilterableValue?: (data: TData) => string | number;
+}

package/src/Plugins/FilterPlugin.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { IResponsiveTablePlugin, IPluginAPI } from './IResponsiveTablePlugin';
+import IResponsiveTableColumnDefinition from '../Data/IResponsiveTableColumnDefinition';
+
+export class FilterPlugin<TData> implements IResponsiveTablePlugin<TData> {
+  public id = 'filter';
+  private filterText = '';
+  private api!: IPluginAPI<TData>;
+
+  constructor() {
+  }
+
+  public onPluginInit = (api: IPluginAPI<TData>) => {
+    this.api = api;
+  };
+
+  public renderHeader = () => {
+    if (!this.api.filterProps?.showFilter) {
+      return null;
+    }
+    return (
+      <div style={{ float: 'right', marginBottom: '1rem' }}>
+        <input
+          type="text"
+          placeholder={this.api.filterProps.filterPlaceholder || "Search..."}
+          onChange={this.handleFilterChange}
+          style={{
+            padding: '0.5rem',
+            border: '1px solid #ccc',
+            borderRadius: '4px',
+          }}
+        />
+      </div>
+    );
+  };
+
+  public processData = (data: TData[]): TData[] => {
+    if (!this.filterText || !this.api.columnDefinitions) {
+      return data;
+    }
+
+    const lowercasedFilter = this.filterText.toLowerCase();
+
+    return data.filter((row) => {
+      return this.api.columnDefinitions!.some((colDef) => {
+        // If colDef is a function, it won't have getFilterableValue, so skip it.
+        if (typeof colDef === 'function') {
+          return false;
+        }
+
+        // Now we know colDef is an object (IResponsiveTableColumnDefinition<TData>)
+        const typedColDef = colDef as IResponsiveTableColumnDefinition<TData>;
+
+        // Check if getFilterableValue exists and is a function
+        if (typedColDef.getFilterableValue && typeof typedColDef.getFilterableValue === 'function') {
+          const value = typedColDef.getFilterableValue(row);
+          return value?.toString().toLowerCase().includes(lowercasedFilter);
+        }
+        return false; // If getFilterableValue is not present or not a function
+      });
+    });
+  };
+
+  private handleFilterChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    // Debounce the filter change
+    setTimeout(() => {
+      this.filterText = e.target.value;
+      this.api.forceUpdate();
+    }, 300);
+  };
+}

package/src/Plugins/IResponsiveTablePlugin.ts

@@ -0,0 +1,48 @@
+import { ReactNode } from 'react';
+import { ColumnDefinition } from '../UI/ResponsiveTable';
+
+export interface IResponsiveTablePlugin<TData> {
+  // A unique identifier for the plugin
+  id: string;
+
+  // Optional: Renders a UI component above the table
+  renderHeader?: () => ReactNode;
+
+  // Optional: Renders a UI component below the table
+  renderFooter?: () => ReactNode;
+
+  // Optional: Processes the data before it's rendered
+  processData?: (data: TData[]) => TData[];
+
+  // Optional: A callback that the table can use to provide the plugin with its own API
+  onPluginInit?: (api: IPluginAPI<TData>) => void;
+}
+
+export interface IPluginAPI<TData> {
+  // Function to get the current data from the table
+  getData: () => TData[];
+
+  // Function to force the table to re-render
+  forceUpdate: () => void;
+
+  // Function to get the column definitions from the table
+  columnDefinitions: ColumnDefinition<TData>[];
+
+  // Function to get the scrollable element of the table
+  getScrollableElement?: () => HTMLElement | null;
+
+  // Optional: Infinite scroll props from the ResponsiveTable component
+  infiniteScrollProps?: {
+    enableInfiniteScroll?: boolean;
+    onLoadMore?: (currentData: TData[]) => Promise<TData[] | null>;
+    hasMore?: boolean;
+    loadingMoreComponent?: ReactNode;
+    noMoreDataComponent?: ReactNode;
+  };
+
+  // Optional: Filter props from the ResponsiveTable component
+  filterProps?: {
+    showFilter?: boolean;
+    filterPlaceholder?: string;
+  };
+}

package/src/Plugins/InfiniteScrollPlugin.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { IResponsiveTablePlugin, IPluginAPI } from './IResponsiveTablePlugin';
+
+export class InfiniteScrollPlugin<TData> implements IResponsiveTablePlugin<TData> {
+  public id = 'infinite-scroll';
+  private api!: IPluginAPI<TData>;
+  private isLoadingMore = false;
+
+  constructor() {
+  }
+
+  public onPluginInit = (api: IPluginAPI<TData>) => {
+    this.api = api;
+    this.attachScrollListener();
+  };
+
+  private attachScrollListener = () => {
+    const scrollableElement = this.api.getScrollableElement?.();
+    if (scrollableElement) {
+      scrollableElement.addEventListener('scroll', this.handleScroll);
+    }
+  };
+
+  private handleScroll = async () => {
+    const scrollableElement = this.api.getScrollableElement?.();
+    if (!scrollableElement || !this.api.infiniteScrollProps?.enableInfiniteScroll) {
+      return;
+    }
+
+    const { scrollTop, scrollHeight, clientHeight } = scrollableElement;
+
+    const scrollThreshold = 200; // Load more data when 200px from the bottom
+
+    if (
+      scrollHeight - scrollTop - clientHeight < scrollThreshold &&
+      this.api.infiniteScrollProps.hasMore &&
+      !this.isLoadingMore
+    ) {
+      this.isLoadingMore = true;
+      this.api.forceUpdate(); // Trigger re-render to show loading component
+
+      const newData = await this.api.infiniteScrollProps.onLoadMore?.(this.api.getData());
+
+      if (newData) {
+        // The main component will handle appending data via processData
+      } else {
+        // No more data, update hasMore in parent if necessary
+      }
+
+      this.isLoadingMore = false;
+      this.api.forceUpdate(); // Trigger re-render to hide loading component
+    }
+  };
+
+  public processData = (data: TData[]): TData[] => {
+    // This plugin doesn't modify the data directly, but rather triggers loading more.
+    // The main component's data prop should be updated by the consumer of the table.
+    return data;
+  };
+
+  public renderFooter = () => {
+    if (!this.api.infiniteScrollProps) {
+      return null;
+    }
+
+    if (this.isLoadingMore) {
+      return this.api.infiniteScrollProps.loadingMoreComponent || <div>Loading more...</div>;
+    } else if (!this.api.infiniteScrollProps.hasMore) {
+      return this.api.infiniteScrollProps.noMoreDataComponent || <div>No more data.</div>;
+    }
+    return null;
+  };
+}

package/src/Styles/ResponsiveTable.module.css

@@ -2,8 +2,8 @@
 :root {
   --table-border-color: #e0e0e0;
   --table-header-bg: #f8f9fa;
-  --table-row-hover-bg: #f1f3f5;
-  --table-row-stripe-bg: #fdfdfd;
+  --table-row-hover-bg: #e9ecef;
+  --table-row-stripe-bg: #f2f2f2;
   --card-bg: #ffffff;
   --card-border-color: #e0e0e0;
   --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
@@ -226,3 +226,28 @@
   font-weight: 500; /* Less aggressive than bold */
   font-size: 1rem;
 }
+
+.row-exit {
+  opacity: 0;
+  transform: scaleY(0);
+  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
+}
+
+.row-enter {
+  opacity: 0;
+  transform: translateY(20px);
+  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
+}
+
+.row-flash {
+  animation: flash 0.5s ease-out;
+}
+
+@keyframes flash {
+  0% {
+    background-color: var(--table-row-hover-bg);
+  }
+  100% {
+    background-color: transparent;
+  }
+}

package/src/UI/ResponsiveTable.tsx

@@ -1,35 +1,58 @@
-import React, { CSSProperties, Component, ReactNode } from 'react';
+import React, { CSSProperties, Component, ReactNode, createRef } from 'react';
 import styles from '../Styles/ResponsiveTable.module.css';
 import IResponsiveTableColumnDefinition from '../Data/IResponsiveTableColumnDefinition';
 import IFooterRowDefinition from '../Data/IFooterRowDefinition';
+import { IResponsiveTablePlugin } from '../Plugins/IResponsiveTablePlugin';
+import { FilterPlugin } from '../Plugins/FilterPlugin';
+import { InfiniteScrollPlugin } from '../Plugins/InfiniteScrollPlugin';
+import { FixedSizeList as List } from 'react-window';
 
 export type ColumnDefinition<TData> =
   | IResponsiveTableColumnDefinition<TData>
   | ((data: TData, rowIndex?: number) => IResponsiveTableColumnDefinition<TData>);
-interface IProps<TData> {
-  columnDefinitions: ColumnDefinition<TData>[];
-  data: TData[];
-  noDataComponent?: ReactNode;
-  maxHeight?: string;
-  onRowClick?: (item: TData) => void;
-  footerRows?: IFooterRowDefinition[];
-  mobileBreakpoint?: number;
-  isLoading?: boolean;
-  animateOnLoad?: boolean;
+interface IProps<TData> {
+  columnDefinitions: ColumnDefinition<TData>[];
+  data: TData[];
+  noDataComponent?: ReactNode;
+  maxHeight?: string;
+  onRowClick?: (item: TData) => void;
+  footerRows?: IFooterRowDefinition[];
+  mobileBreakpoint?: number;
+  plugins?: IResponsiveTablePlugin<TData>[];
+  infiniteScrollProps?: {
+    enableInfiniteScroll?: boolean;
+    onLoadMore?: (currentData: TData[]) => Promise<TData[] | null>;
+    hasMore?: boolean;
+    loadingMoreComponent?: ReactNode;
+    noMoreDataComponent?: ReactNode;
+  };
+  filterProps?: {
+    showFilter?: boolean;
+    filterPlaceholder?: string;
+  };
+  animationProps?: {
+    isLoading?: boolean;
+    animateOnLoad?: boolean;
+  };
 }
 
-interface IState {
+interface IState<TData> {
   isMobile: boolean;
+  processedData: TData[];
+  isLoadingMore: boolean;
 }
 
 // Class component
-class ResponsiveTable<TData> extends Component<IProps<TData>, IState> {
+class ResponsiveTable<TData> extends Component<IProps<TData>, IState<TData>> {
   private debouncedResize: () => void;
+  private tableContainerRef = createRef<HTMLDivElement>();
 
   constructor(props: IProps<TData>) {
     super(props);
     this.state = {
       isMobile: false,
+      processedData: props.data,
+      isLoadingMore: false,
     };
 
     this.debouncedResize = this.debounce(this.handleResize, 200);
@@ -48,8 +71,8 @@ class ResponsiveTable<TData> extends Component<IProps<TData>, IState> {
   }
 
   private get data(): TData[] {
-    if (Array.isArray(this.props.data) && this.props.data.length > 0) {
-      return this.props.data;
+    if (Array.isArray(this.state.processedData) && this.state.processedData.length > 0) {
+      return this.state.processedData;
     } else {
       return [];
     }
@@ -81,12 +104,81 @@ class ResponsiveTable<TData> extends Component<IProps<TData>, IState> {
   componentDidMount(): void {
     this.handleResize(); // Initial check
     window.addEventListener('resize', this.debouncedResize);
+    this.initializePlugins();
   }
 
   componentWillUnmount(): void {
     window.removeEventListener('resize', this.debouncedResize);
   }
 
+  componentDidUpdate(prevProps: IProps<TData>) {
+    if (prevProps.data !== this.props.data) {
+      this.processData();
+    }
+
+    // Handle infinite scroll loading
+    if (this.props.infiniteScrollProps?.enableInfiniteScroll && this.props.infiniteScrollProps?.hasMore && !this.state.isLoadingMore && this.props.infiniteScrollProps?.onLoadMore) {
+      // This condition will be met when the parent component updates `data` and `hasMore`
+      // after a successful load, or when `hasMore` becomes true.
+      // The actual load trigger is within the InfiniteScrollPlugin via `onItemsRendered`
+      // or `handleScroll`.
+
+    }
+  }
+
+  private initializePlugins() {
+    const activePlugins: IResponsiveTablePlugin<TData>[] = [];
+
+    // Add explicitly provided plugins first
+    if (this.props.plugins) {
+      activePlugins.push(...this.props.plugins);
+    }
+
+    // Automatically add FilterPlugin if filterProps are provided and not already present
+    if (this.props.filterProps?.showFilter && !activePlugins.some(p => p.id === 'filter')) {
+      activePlugins.push(new FilterPlugin());
+    }
+
+    // Automatically add InfiniteScrollPlugin if infiniteScrollProps are provided and not already present
+    if (this.props.infiniteScrollProps?.enableInfiniteScroll && !activePlugins.some(p => p.id === 'infinite-scroll')) {
+      activePlugins.push(new InfiniteScrollPlugin());
+    }
+
+    activePlugins.forEach((plugin) => {
+      if (plugin.onPluginInit) {
+        plugin.onPluginInit({
+          getData: () => this.props.data,
+          forceUpdate: () => this.processData(),
+          getScrollableElement: () => this.tableContainerRef.current,
+          infiniteScrollProps: this.props.infiniteScrollProps,
+          filterProps: this.props.filterProps,
+          columnDefinitions: this.props.columnDefinitions,
+        });
+      }
+    });
+
+    // Process data with all active plugins
+    let processedData = [...this.props.data];
+    activePlugins.forEach((plugin) => {
+      if (plugin.processData) {
+        processedData = plugin.processData(processedData);
+      }
+    });
+    this.setState({ processedData });
+  }
+
+  private processData() {
+    let processedData = [...this.props.data];
+    if (this.props.plugins) {
+      this.props.plugins.forEach((plugin) => {
+        if (plugin.processData) {
+          processedData = plugin.processData(processedData);
+        }
+      });
+    }
+    this.setState({ processedData });
+  }
+
   handleResize = (): void => {
     this.setState({
       isMobile: window.innerWidth <= this.mobileBreakpoint,
@@ -266,7 +358,7 @@ class ResponsiveTable<TData> extends Component<IProps<TData>, IState> {
         {this.data.map((row, rowIndex) => (
           <div
             key={rowIndex}
-            className={`${styles['card']} ${this.props.animateOnLoad ? styles.animatedRow : ''}`}
+                        className={`${styles['card']} ${this.props.animationProps?.animateOnLoad ? styles.animatedRow : ''}`}
             style={{ animationDelay: `${rowIndex * 0.05}s` }}
             onClick={(e) => {
               this.rowClickFunction(row);
@@ -311,8 +403,29 @@ class ResponsiveTable<TData> extends Component<IProps<TData>, IState> {
       ? ({ maxHeight: this.props.maxHeight, overflowY: 'auto' } as CSSProperties)
       : {};
 
+    const Row = ({ index, style }: { index: number; style: CSSProperties }) => {
+      const row = this.data[index];
+      if (!row) return null; // Should not happen with correct item count
+
+      return (
+        <tr
+          key={index}
+          className={this.props.animationProps?.animateOnLoad ? styles.animatedRow : ''}
+          style={{ ...style, animationDelay: `${index * 0.05}s` }}
+        >
+          {this.props.columnDefinitions.map((columnDefinition, colIndex) => (
+            <td onClick={() => this.rowClickFunction(row)} key={colIndex}>
+              <span style={{ ...this.rowClickStyle }}>
+                {this.getColumnDefinition(columnDefinition, index).cellRenderer(row)}
+              </span>
+            </td>
+          ))}
+        </tr>
+      );
+    };
+
     return (
-      <div style={fixedHeadersStyle}>
+      <div style={fixedHeadersStyle} ref={this.tableContainerRef}>
         <table className={styles['responsiveTable']} style={{ zIndex: -1 }}>
           <thead>
             <tr>
@@ -340,42 +453,81 @@ class ResponsiveTable<TData> extends Component<IProps<TData>, IState> {
             </tr>
           </thead>
           <tbody>
-            {this.data.map((row, rowIndex) => (
-              <tr
-                key={rowIndex}
-                className={this.props.animateOnLoad ? styles.animatedRow : ''}
-                style={{ animationDelay: `${rowIndex * 0.05}s` }}
+            {this.props.infiniteScrollProps?.enableInfiniteScroll ? (
+              <List
+                height={fixedHeadersStyle.maxHeight ? (typeof fixedHeadersStyle.maxHeight === 'string' ? parseFloat(fixedHeadersStyle.maxHeight) : fixedHeadersStyle.maxHeight) : 500} // Default height if not provided
+                itemCount={this.data.length}
+                itemSize={50} // Average row height, can be made configurable
+                width={'100%'}
+                outerRef={this.tableContainerRef} // Pass ref to outer element for scroll events
               >
-                {this.props.columnDefinitions.map((columnDefinition, colIndex) => (
-                  <td onClick={() => this.rowClickFunction(row)} key={colIndex}>
-                    <span style={{ ...this.rowClickStyle }}>
-                      {this.getColumnDefinition(columnDefinition, rowIndex).cellRenderer(row)}
-                    </span>
-                  </td>
-                ))}
-              </tr>
-            ))}
+                {Row}
+              </List>
+            ) : (
+              this.data.map((row, rowIndex) => (
+                <tr
+                  key={rowIndex}
+                  className={this.props.animationProps?.animateOnLoad ? styles.animatedRow : ''}
+                  style={{ animationDelay: `${rowIndex * 0.05}s` }}
+                >
+                  {this.props.columnDefinitions.map((columnDefinition, colIndex) => (
+                    <td onClick={() => this.rowClickFunction(row)} key={colIndex}>
+                      <span style={{ ...this.rowClickStyle }}>
+                        {this.getColumnDefinition(columnDefinition, rowIndex).cellRenderer(row)}
+                      </span>
+                    </td>
+                  ))}
+                </tr>
+              ))
+            )}
           </tbody>
           {this.tableFooter}
         </table>
+        {this.renderPluginFooters()}
       </div>
     );
   }
 
-  render() {
-    if (this.props.isLoading) {
-      return this.skeletonView;
+  private renderPluginHeaders() {
+    if (!this.props.plugins) {
+      return null;
     }
 
-    if (!this.hasData) {
-      return this.noDataComponent;
+    return this.props.plugins.map((plugin) => {
+      if (plugin.renderHeader) {
+        return <div key={plugin.id}>{plugin.renderHeader()}</div>;
+      }
+      return null;
+    });
+  }
+
+  private renderPluginFooters() {
+    if (!this.props.plugins) {
+      return null;
     }
-    if (this.state.isMobile) {
-      return this.mobileView;
+
+    return this.props.plugins.map((plugin) => {
+      if (plugin.renderFooter) {
+        return <div key={plugin.id + '-footer'}>{plugin.renderFooter()}</div>;
+      }
+      return null;
+    });
+  }
+
+  render() {
+    if (this.props.animationProps?.isLoading) {
+      return this.skeletonView;
     }
 
-    return this.largeScreenView;
+    return (
+      <div>
+        {this.renderPluginHeaders()}
+        {!this.hasData && this.noDataComponent}
+        {this.hasData && this.state.isMobile && this.mobileView}
+        {this.hasData && !this.state.isMobile && this.largeScreenView}
+      </div>
+    );
   }
 }
 
-export default ResponsiveTable;
+export default ResponsiveTable;

package/src/index.tsx

@@ -1,7 +1,10 @@
-import IFooterColumnDefinition from './Data/IFooterColumnDefinition';
-import IFooterRowDefinition from './Data/IFooterRowDefinition';
-import IResponsiveTableColumnDefinition from './Data/IResponsiveTableColumnDefinition';
-import ResponsiveTable, { ColumnDefinition } from './UI/ResponsiveTable';
-
-export { IResponsiveTableColumnDefinition, ColumnDefinition, IFooterColumnDefinition, IFooterRowDefinition };
-export default ResponsiveTable;
+import IFooterColumnDefinition from './Data/IFooterColumnDefinition';
+import IFooterRowDefinition from './Data/IFooterRowDefinition';
+import IResponsiveTableColumnDefinition from './Data/IResponsiveTableColumnDefinition';
+import ResponsiveTable, { ColumnDefinition } from './UI/ResponsiveTable';
+import { FilterPlugin } from './Plugins/FilterPlugin';
+import { InfiniteScrollPlugin } from './Plugins/InfiniteScrollPlugin';
+import { IResponsiveTablePlugin } from './Plugins/IResponsiveTablePlugin';
+
+export { IResponsiveTableColumnDefinition, ColumnDefinition, IFooterColumnDefinition, IFooterRowDefinition, FilterPlugin, InfiniteScrollPlugin, IResponsiveTablePlugin };
+export default ResponsiveTable;