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

package/gemini/index.md

@@ -0,0 +1 @@
+Please inspect this directory recursively to understand the project in depth. Analyze its purpose, technology stack, core features, and overall structure. Provide a comprehensive explanation based on your findings. Start by listing all relevant files and then read the contents of key files like `package.json`, `README.md`, and any other configuration or source files that seem important.

package/gemini/release_git_steps.md

@@ -1,64 +1,80 @@
-## Release Git Steps
-
-This document outlines the sequence of Git commands to perform at the end of every release cycle to ensure the `master` branch is up-to-date, tagged, and all changes are pushed to the remote repository.
-
-**Prerequisites:**
-- Ensure all development work for the release is complete and committed to the `develop` branch.
-- Ensure you are on the `develop` branch (`git checkout develop`).
-
-**Steps:**
-
-1.  **Stage all changes (if any uncommitted changes exist on `develop`):**
-    ```bash
-    git add .
-    ```
-
-2.  **Commit changes on `develop` (if not already done):**
-    ```bash
-    git commit -m "feat(release): Prepare for new release"
-    # Or, if you have a multi-line message, use a temporary file:
-    # echo "Your detailed commit message" > commit_message.txt
-    # git commit -F commit_message.txt
-    ```
-    *(Note: We assume the main feature/bugfix commits are already on `develop`.)*
-
-3.  **Switch to the `master` branch:**
-    ```bash
-    git checkout master
-    ```
-
-4.  **Merge `develop` into `master`:**
-    ```bash
-    git merge develop
-    ```
-    *This will bring all the latest changes from `develop` into `master`.*
-
-5.  **Get the current version from `package.json`:**
-    ```bash
-    # Manually read the "version" field from package.json
-    # Example: "version": "1.0.0"
-    # Let's assume the version is X.Y.Z
-    ```
-
-6.  **Create a new Git tag for the release:**
-    ```bash
-    git tag vX.Y.Z
-    ```
-    *Replace `X.Y.Z` with the actual version number obtained from `package.json`.*
-
-7.  **Push the `master` branch and all tags to the remote repository:**
-    ```bash
-    git push origin master --tags
-    ```
-
-8.  **Switch back to the `develop` branch:**
-    ```bash
-    git checkout develop
-    ```
-
-9.  **Push the `develop` branch to the remote repository (to ensure it's up-to-date after the merge):**
-    ```bash
-    git push origin develop
-    ```
-
-This sequence ensures a clean release process, updating `master`, creating a version tag, and synchronizing both branches with the remote.
+## Release Git Steps
+
+This document outlines the sequence of Git commands to perform at the end of every release cycle to ensure the `master` branch is up-to-date, tagged, and all changes are pushed to the remote repository.
+
+**Prerequisites:**
+- Ensure all development work for the release is complete and committed to the `develop` branch.
+- Ensure you are on the `develop` branch (`git checkout develop`).
+
+**Steps:**
+
+1.  **Stage all changes (if any uncommitted changes exist on `develop`):**
+    ```bash
+    git add .
+    ```
+
+2.  **Commit changes on `develop` (if not already done):**
+    ```bash
+    git commit -m "feat(release): Release vX.Y.Z
+
+Summarize the key changes, new features, bug fixes, and any breaking changes
+introduced in this release. This message should provide a high-level overview
+of what's new since the last release.
+
+Example:
+- Introduced extensible plugin system with Filter and Infinite Scroll plugins.
+- Refactored animation props into a dedicated object.
+- Added virtualized scrolling for large datasets.
+- Updated dependencies."
+    # Or, if you have a multi-line message, use a temporary file:
+    # echo "Your detailed commit message" > commit_message.txt
+    # git commit -F commit_message.txt
+    ```
+    *(Note: We assume the main feature/bugfix commits are already on `develop`.)*
+
+3.  **Switch to the `master` branch:**
+    ```bash
+    git checkout master
+    ```
+
+4.  **Merge `develop` into `master`:**
+    ```bash
+    git merge develop
+    ```
+    *This will bring all the latest changes from `develop` into `master`.*
+
+5.  **Get the current version from `package.json`:**
+    ```bash
+    # Manually read the "version" field from package.json
+    # Example: "version": "1.0.0"
+    # Let's assume the version is X.Y.Z
+    ```
+
+6.  **Create a new Git tag for the release:**
+    ```bash
+    git tag vX.Y.Z
+    ```
+    *Replace `X.Y.Z` with the actual version number obtained from `package.json`.*
+
+7.  **Push the `master` branch and all tags to the remote repository:**
+    ```bash
+    git push origin master --tags
+    ```
+
+8.  **Switch back to the `develop` branch:**
+    ```bash
+    git checkout develop
+    ```
+
+9.  **Push the `develop` branch to the remote repository (to ensure it's up-to-date after the merge):**
+    ```bash
+    git push origin develop
+    ```
+
+This sequence ensures a clean release process, updating `master`, creating a version tag, and synchronizing both branches with the remote.
+
+10. **Delete temporary files:**
+    ```bash
+    del commit_message.txt
+    ```
+    *Ensure to delete any temporary files created during the release process.*

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jattac.libs.web.responsive-table",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.es.js",

package/src/Data/IResponsiveTableColumnDefinition.tsx

@@ -1,12 +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;
-  };
-  getFilterableValue?: (data: TData) => string | number;
-}
+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

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

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

@@ -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)