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

package/src/Plugins/InfiniteScrollPlugin.tsx

@@ -1,73 +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;
-  };
-}
+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

@@ -1,5 +1,5 @@
 /* Using CSS variables for a more maintainable and themeable design */
-:root {
+.responsiveTable {
   --table-border-color: #e0e0e0;
   --table-header-bg: #f8f9fa;
   --table-row-hover-bg: #e9ecef;

package/src/UI/ResponsiveTable.tsx

@@ -10,30 +10,30 @@ 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;
-  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 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<TData> {
@@ -426,7 +426,7 @@ class ResponsiveTable<TData> extends Component<IProps<TData>, IState<TData>> {
 
     return (
       <div style={fixedHeadersStyle} ref={this.tableContainerRef}>
-        <table className={styles['responsiveTable']} style={{ zIndex: -1 }}>
+        <table className={styles['responsiveTable']}>
           <thead>
             <tr>
               {this.props.columnDefinitions.map((columnDefinition, colIndex) => {
@@ -439,7 +439,6 @@ class ResponsiveTable<TData> extends Component<IProps<TData>, IState<TData>> {
                   <th
                     key={colIndex}
                     className={`${clickableHeaderClassName}`}
-                    style={{ zIndex: 0 }}
                     onClick={
                       onHeaderClickCallback
                         ? () => onHeaderClickCallback(this.getColumnDefinition(columnDefinition, 0).interactivity!.id)

package/src/index.tsx

@@ -1,10 +1,10 @@
-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;
+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;