jattac.libs.web.responsive-table 0.12.0 → 0.13.0

package/README.md

@@ -18,6 +18,19 @@ npm install jattac.libs.web.responsive-table jattac.libs.web.zest-textbox react-
 
 ---
 
+## Table of Contents
+
+*   [Built-in Filter](#built-in-filter)
+*   [Delightful Data Fetching: Smart Data Source](#delightful-data-fetching-smart-data-source)
+*   [Basic Implementation](#basic-implementation)
+*   [Handling Interactive Elements](#handling-interactive-elements)
+*   [Expandable Rows](#expandable-rows)
+*   [Row Interaction & Feedback](#row-interaction--feedback)
+*   [Loading States & Animations](#loading-states--animations)
+*   [Documentation Directory](#documentation-directory)
+
+---
+
 ## Built-in Filter
 
 Enable the search box with one prop. A clear (×) button appears automatically when the field has text.
@@ -144,7 +157,7 @@ For a deep dive into more complex scenarios, see the **[Handling Interactive Ele
 
 ## Expandable Rows
 
-Pass `expandRowRenderer` to reveal arbitrary content below any row. Each expandable row gets a solid chevron toggle (▶ collapsed, ▾ expanded) on a muted blue bar. Returning `null` or `undefined` for a row suppresses its toggle entirely — that row renders flat with no visual affordance.
+Pass `expandRowRenderer` to reveal arbitrary content below any row. Each expandable row gets a chevron in a dedicated left column (▶ collapsed, ▾ expanded). Returning `null` or `undefined` for a row suppresses its toggle entirely — that row renders flat with no visual affordance.
 
 ```tsx
 <ResponsiveTable
@@ -174,7 +187,7 @@ expandRowRenderer={(row, rowIndex) => (
 
 > `rowIndex` is the **display-order** index (post-sort, post-filter) — it changes when the user re-sorts. For stable data correlation across renders, use the row's own identifier field (`row.id`, etc.).
 
-**Customising the chevron** — override color, size, or any other style via `expandChevronClassName`:
+**Customising the chevron** — override color, size, or any other style via `expandChevronClassName`. Do not override `transform` or `transition` — these drive the rotation animation.
 
 ```tsx
 // Accent color from your design system
@@ -193,12 +206,17 @@ expandRowRenderer={(row, rowIndex) => (
 }
 ```
 
-**Recommendations**
-- Provide `selectionProps` with a `rowIdKey` when your data has a stable identifier. Expand state is keyed by row ID, so open panels survive re-sorts and filter changes.
-- Detail content is **lazy-mounted** — the panel component is not created until first expand, then stays mounted so the collapse animation plays correctly. Heavy components are therefore only instantiated on demand.
-- Expand and `onRowClick` coexist safely — the chevron bar carries `data-rt-ignore-row-click` so tapping the toggle never fires the row click handler.
+**Behaviour**
+- Chevron sits in a dedicated 2rem left column — not as an overlay or pseudo-element — keeping the data columns aligned.
+- **Idle:** chevron at 25% opacity, rotates right (`-90deg`). Quiet, non-intrusive.
+- **Hover:** chevron smooths to 60% opacity, faint border accent on the row.
+- **Expanded:** chevron rotates down (`0deg`), full opacity. A toggle bar slides in (0→2rem) at the top of the detail pane.
+- **Greeting animation:** on mount, chevrons pop in with a staggered multi-pulse wave (2.2s), then settle to idle. Plays once per component lifecycle.
+- Expand and `onRowClick` coexist safely — the chevron carries `data-rt-ignore-row-click`.
 - Works identically in both desktop (table row) and mobile (card) layouts.
 
+For the full feature reference — expansion state keying, lazy mounting, keyboard accessibility, `dataSource` compatibility, common patterns, CSS customization, and pitfalls — see the **[Row Expansion and Collapse Guide](./docs/expand-collapse.md)**.
+
 ---
 
 ## Row Interaction & Feedback
@@ -267,6 +285,8 @@ The following technical documentation provides comprehensive implementation guid
 4.  **[Configuration Specification](./docs/configuration.md)** - Detailed guidance on performance tuning and UI customization.
 5.  **[Architecture and Contribution Guide](./docs/development.md)** - Internal system design and development environment setup.
 6.  **[Handling Interactive Elements](./docs/handling-interactive-elements.md)** - Guide on preventing row click bubbling for buttons and custom components.
+7.  **[Row Expansion and Collapse](./docs/expand-collapse.md)** - Comprehensive guide for expandable row detail panels.
+8.  **[Recommendations and Pitfalls](./docs/recommendations.md)** - Best practices, anti-patterns, and ESM/CJS module compatibility guide.
 
 ---
 **Next Step:** [Review the Technical Implementation Guide](./docs/examples.md)

package/dist/Hooks/useTablePlugins.d.ts

@@ -1,12 +1,5 @@
-import { ReactNode } from 'react';
 import { IResponsiveTablePlugin } from '../Plugins/IResponsiveTablePlugin';
 import { IResponsiveTableColumnDefinition, SortDirection } from '../Data/IResponsiveTableColumnDefinition';
-interface IInfiniteScrollProps<TData> {
-    onLoadMore: (currentData: TData[]) => Promise<TData[] | null>;
-    hasMore?: boolean;
-    loadingMoreComponent?: ReactNode;
-    noMoreDataComponent?: ReactNode;
-}
 interface UseTablePluginsProps<TData> {
     data: TData[];
     plugins?: IResponsiveTablePlugin<TData>[];
@@ -28,7 +21,6 @@ interface UseTablePluginsProps<TData> {
     };
     columnDefinitions: (IResponsiveTableColumnDefinition<TData> | ((data: TData, rowIndex?: number) => IResponsiveTableColumnDefinition<TData>))[];
     getScrollableElement: () => HTMLElement | null;
-    infiniteScrollProps?: IInfiniteScrollProps<TData>;
     onFilterChange?: (filterText: string) => void;
 }
 interface UseTablePluginsReturn<TData> {

package/dist/Plugins/IResponsiveTablePlugin.d.ts

@@ -18,12 +18,6 @@ export interface IPluginAPI<TData> {
     forceUpdate: () => void;
     columnDefinitions: ColumnDefinition<TData>[];
     getScrollableElement?: () => HTMLElement | null;
-    infiniteScrollProps?: {
-        onLoadMore: (currentData: TData[]) => Promise<TData[] | null>;
-        hasMore?: boolean;
-        loadingMoreComponent?: ReactNode;
-        noMoreDataComponent?: ReactNode;
-    };
     filterProps?: {
         showFilter?: boolean;
         filterPlaceholder?: string;

package/dist/UI/DetailRow.d.ts

@@ -6,7 +6,6 @@ interface DetailRowProps<TData> {
     expandRowRenderer: (row: TData, rowIndex: number) => React.ReactNode;
     isExpanded: boolean;
     onToggle: () => void;
-    expandChevronClassName?: string;
 }
-export declare function DetailRow<TData>({ row, rowIndex, colSpan, expandRowRenderer, isExpanded, onToggle, expandChevronClassName }: DetailRowProps<TData>): React.JSX.Element;
+export declare function DetailRow<TData>({ row, rowIndex, colSpan, expandRowRenderer, isExpanded, onToggle }: DetailRowProps<TData>): React.JSX.Element;
 export {};

package/dist/UI/ResponsiveTable.d.ts

@@ -10,12 +10,6 @@ export interface ResponsiveTableHandle<TData> {
     resetAndFetch: () => Promise<void>;
     getState: () => DataSourceState<TData>;
 }
-interface IInfiniteScrollProps<TData> {
-    onLoadMore: (currentData: TData[]) => Promise<TData[] | null>;
-    hasMore?: boolean;
-    loadingMoreComponent?: ReactNode;
-    noMoreDataComponent?: ReactNode;
-}
 interface ISortProps {
     initialSortColumn?: string;
     initialSortDirection?: SortDirection;
@@ -62,11 +56,6 @@ interface IProps<TData> {
     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;

package/dist/UI/TableBodyRow.d.ts

@@ -32,6 +32,12 @@ interface TableBodyRowProps<TData> {
         isLoading?: boolean;
         animateOnLoad?: boolean;
     };
+    /** Optional expand chevron cell rendered as the first column */
+    expandCell?: React.ReactNode;
+    /** Mouse enter handler for hover tracking */
+    onMouseEnter?: () => void;
+    /** Mouse leave handler for hover tracking */
+    onMouseLeave?: () => void;
 }
 export declare function TableBodyRow<TData>(props: TableBodyRowProps<TData>): React.JSX.Element;
 export {};

package/dist/index.d.ts

@@ -5,9 +5,8 @@ import ResponsiveTable, { ResponsiveTableHandle } from './UI/ResponsiveTable';
 import { ColumnDefinition, DataSource, IDataSourceParams, DataSourceResult, useTableContext } from './Context/TableContext';
 import { DataSourceState } from './Hooks/useTableDataSource';
 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, DataSource, IDataSourceParams, DataSourceResult, IFooterColumnDefinition, IFooterRowDefinition, FilterPlugin, InfiniteScrollPlugin, IResponsiveTablePlugin, SortPlugin, SelectionPlugin, ResponsiveTableHandle, DataSourceState, useTableContext, };
+export { SortDirection, IResponsiveTableColumnDefinition, ColumnDefinition, DataSource, IDataSourceParams, DataSourceResult, IFooterColumnDefinition, IFooterRowDefinition, FilterPlugin, IResponsiveTablePlugin, SortPlugin, SelectionPlugin, ResponsiveTableHandle, DataSourceState, useTableContext, };
 export default ResponsiveTable;