jattac.libs.web.responsive-table 0.11.1 → 0.12.0-rc.2

package/README.md

@@ -142,6 +142,43 @@ For a deep dive into more complex scenarios, see the **[Handling Interactive Ele
 
 ---
 
+## Expandable Rows
+
+Pass `expandRowRenderer` to reveal arbitrary content below any row. Return `null` or `undefined` for rows that should not be expandable — only those rows get a toggle.
+
+```tsx
+<ResponsiveTable
+  data={orders}
+  columnDefinitions={columns}
+  expandRowRenderer={(order) => (
+    <OrderLineItems orderId={order.id} />
+  )}
+/>
+```
+
+The renderer receives both the row and its display-order index:
+
+```tsx
+expandRowRenderer={(row, rowIndex) => (
+  <div>Row {rowIndex}: <pre>{JSON.stringify(row, null, 2)}</pre></div>
+)}
+```
+
+Selectively expandable — rows where the renderer returns `null` render at zero height with no toggle:
+
+```tsx
+expandRowRenderer={(row) =>
+  row.hasDetails ? <DetailPanel row={row} /> : null
+}
+```
+
+**Recommendations**
+- Provide `selectionProps` with a `rowIdKey` when your data has a stable identifier. The expand state is keyed by row ID, so expand/collapse survives re-sorts and filter changes correctly.
+- `rowIndex` reflects the current **display order** (post-sort, post-filter). Use `row.id` or equivalent for stable cross-render correlation.
+- Detail content is lazy-mounted — the component only renders on first expand, then stays mounted so the collapse animation plays smoothly.
+
+---
+
 ## Loading States & Animations
 
 Control skeleton loaders and entrance animations with `animationProps`:

package/dist/Context/TableContext.d.ts

@@ -74,6 +74,8 @@ interface TableContextValue<TData> {
     };
     /** Custom CSS class to apply to each card in mobile view. */
     mobileCardClassName?: string;
+    /** Return a ReactNode for expandable content below a row, or null/undefined for no toggle on that row. */
+    expandRowRenderer?: (row: TData, rowIndex: number) => React.ReactNode;
     getRawColumnDefinition: (colDef: ColumnDefinition<TData>) => IResponsiveTableColumnDefinition<TData>;
     getColumnDefinition: (colDef: ColumnDefinition<TData>, rowIndex: number) => IResponsiveTableColumnDefinition<TData>;
     onHeaderClickCallback: (colDef: ColumnDefinition<TData>) => ((id: string) => void) | undefined;

package/dist/UI/DetailRow.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface DetailRowProps<TData> {
+    row: TData;
+    rowIndex: number;
+    colSpan: number;
+    expandRowRenderer: (row: TData, rowIndex: number) => React.ReactNode;
+    isExpanded: boolean;
+    onToggle: () => void;
+}
+export declare function DetailRow<TData>({ row, rowIndex, colSpan, expandRowRenderer, isExpanded, onToggle }: DetailRowProps<TData>): React.JSX.Element;
+export {};

package/dist/UI/DetailRow.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/UI/ExpandCollapse.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/UI/ResponsiveTable.d.ts

@@ -98,6 +98,8 @@ interface IProps<TData> {
     onPageChange?: (page: number) => void;
     /** Callback fired when a dataSource fetch fails. */
     onDataSourceError?: (error: Error) => void;
+    /** Return a ReactNode to render expandable content below a row, or null/undefined for no expand toggle on that row. */
+    expandRowRenderer?: (row: TData, rowIndex: number) => React.ReactNode;
 }
 declare const ResponsiveTable: <TData>(props: IProps<TData> & {
     ref?: React.Ref<ResponsiveTableHandle<TData>>;

package/dist/index.es.js

@@ -1,6 +1,6 @@
-import React, { createContext, useCallback, useMemo, useContext, useRef, useEffect, useState, forwardRef, useImperativeHandle } from 'react';
+import React, { createContext, useCallback, useMemo, useContext, useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react';
+import { MdKeyboardArrowDown, MdClose } from 'react-icons/md';
 import ZestTextbox from 'jattac.libs.web.zest-textbox';
-import { MdClose } from 'react-icons/md';
 
 function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
@@ -29,8 +29,8 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$2 = ".ResponsiveTable-module_responsiveTable__4y-Od{--table-border-color:#e0e0e0;--table-header-bg:#f8f9fa;--table-row-hover-bg:#f1f3f5;--table-row-stripe-bg:#fafbfc;--card-bg:#fff;--card-border-color:#d1d5db;--card-shadow:0 2px 8px rgba(0,0,0,.06);--text-color:#212529;--text-color-muted:#6c757d;--interactive-color:#0056b3;--primary-color:#007bff;--rt-mobile-card-shadow:0 1px 2px rgba(0,0,0,.04),0 4px 12px rgba(0,0,0,.06),0 12px 32px rgba(0,0,0,.04);--rt-mobile-card-radius:16px;--rt-mobile-bg-wash:#f1f5f9;--rt-mobile-label-color:#475569;--rt-mobile-value-color:#1e293b}.ResponsiveTable-module_tableContainer__VjWjH{border:1px solid var(--table-border-color);border-radius:8px;overflow-x:auto;width:100%}.ResponsiveTable-module_responsiveTable__4y-Od{background-color:var(--card-bg);border-collapse:collapse;color:var(--text-color);width:100%}.ResponsiveTable-module_responsiveTable__4y-Od thead th{background-color:var(--table-header-bg);border-bottom:2px solid var(--table-border-color);color:var(--text-color-muted);font-size:.75rem;font-weight:600;letter-spacing:.05em;padding:1rem;text-align:left;text-transform:uppercase;z-index:1}.ResponsiveTable-module_responsiveTable__4y-Od td{border-bottom:1px solid var(--table-border-color);font-size:.9rem;padding:1rem;text-align:left}.ResponsiveTable-module_responsiveTable__4y-Od tr:last-child td{border-bottom:none}.ResponsiveTable-module_responsiveTable__4y-Od tr:nth-child(2n){background-color:var(--table-row-stripe-bg)}.ResponsiveTable-module_responsiveTable__4y-Od tr:hover{background-color:var(--table-row-hover-bg)}.ResponsiveTable-module_cardContainer__Het4h{background-color:var(--rt-mobile-bg-wash);border-radius:var(--rt-mobile-card-radius);display:flex;flex-direction:column;gap:1.25rem;padding:1rem}.ResponsiveTable-module_card__b-U2v{background-color:var(--card-bg);border:1px solid var(--card-border-color);border-bottom:3px solid var(--primary-color);border-radius:var(--rt-mobile-card-radius);box-shadow:var(--rt-mobile-card-shadow);overflow:hidden;padding:1rem;transition:box-shadow .2s ease-in-out,transform .2s ease-in-out}.ResponsiveTable-module_card__b-U2v:hover{box-shadow:0 2px 4px rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.08),0 16px 48px rgba(0,0,0,.06);transform:translateY(-4px)}.ResponsiveTable-module_card-header__Ttk51{border-bottom:1px solid var(--table-border-color);margin-bottom:1rem;padding-bottom:.5rem}.ResponsiveTable-module_card-row__qvIUJ{align-items:flex-start;display:flex;gap:1rem;justify-content:space-between;margin:0 0 .75rem}.ResponsiveTable-module_card-row__qvIUJ.ResponsiveTable-module_stacked__FSaTB{align-items:stretch;flex-direction:column;gap:.25rem;margin-bottom:1rem}.ResponsiveTable-module_card-row__qvIUJ:last-child{margin-bottom:0}.ResponsiveTable-module_card-label__v9L71{color:var(--rt-mobile-label-color);font-size:.75rem;font-weight:600;text-transform:uppercase;white-space:nowrap}.ResponsiveTable-module_card-value__BO-c-{color:var(--rt-mobile-value-color);font-size:.95rem;text-align:right}.ResponsiveTable-module_card-row__qvIUJ.ResponsiveTable-module_stacked__FSaTB .ResponsiveTable-module_card-value__BO-c-{text-align:left}.ResponsiveTable-module_numberValue__-TLR1{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;text-align:right!important}.ResponsiveTable-module_dateValue__UMvqJ{color:var(--text-color-muted);font-size:.85rem}.ResponsiveTable-module_imageValue__wVb-p img{border-radius:8px;height:auto;max-width:100%;object-fit:cover}.ResponsiveTable-module_inputValue__CrGMx{margin-top:.5rem;width:100%}.ResponsiveTable-module_inputValue__CrGMx button,.ResponsiveTable-module_inputValue__CrGMx input[type=text],.ResponsiveTable-module_inputValue__CrGMx select,.ResponsiveTable-module_inputValue__CrGMx textarea{min-height:44px;width:100%!important}.ResponsiveTable-module_clickableRow__0kjWm{cursor:pointer}.ResponsiveTable-module_clickableHeader__xHQhF{cursor:pointer;transition:color .2s}.ResponsiveTable-module_clickableHeader__xHQhF:hover{color:var(--interactive-color)}.ResponsiveTable-module_sortable__yvA60{cursor:pointer}.ResponsiveTable-module_sorted-asc__jzOIa,.ResponsiveTable-module_sorted-desc__7WCFK{background-color:#f0f7ff!important;color:var(--interactive-color)!important}.ResponsiveTable-module_headerInnerWrapper__3VAhD{align-items:center;display:flex;justify-content:space-between;width:100%}.ResponsiveTable-module_headerContent__ODMzS{flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ResponsiveTable-module_sortIcon__A9WtD{background-position:50%;background-repeat:no-repeat;background-size:contain;flex-shrink:0;height:1rem;margin-left:.5rem;opacity:.3;width:1rem}.ResponsiveTable-module_sortable__yvA60:hover .ResponsiveTable-module_sortIcon__A9WtD{opacity:.8}.ResponsiveTable-module_sortable__yvA60 .ResponsiveTable-module_sortIcon__A9WtD{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236c757d'%3E%3Cpath d='M10 18h4v-2h-4v2zm-6-8v2h16V8H4zm3-6h10v2H7V2z'/%3E%3C/svg%3E\")}.ResponsiveTable-module_sorted-asc__jzOIa .ResponsiveTable-module_sortIcon__A9WtD{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230056b3'%3E%3Cpath d='m7 14 5-5 5 5z'/%3E%3C/svg%3E\");opacity:1}.ResponsiveTable-module_sorted-desc__7WCFK .ResponsiveTable-module_sortIcon__A9WtD{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230056b3'%3E%3Cpath d='m7 10 5 5 5-5z'/%3E%3C/svg%3E\");opacity:1}.ResponsiveTable-module_responsiveTable__4y-Od tfoot{background-color:var(--table-header-bg);border-top:2px solid var(--table-border-color)}.ResponsiveTable-module_footerCell__8H-uG{font-size:.9rem;font-weight:600;padding:1rem;text-align:right}.ResponsiveTable-module_clickableFooterCell__WB9Ss{color:var(--interactive-color);cursor:pointer}.ResponsiveTable-module_clickableFooterCell__WB9Ss:hover{text-decoration:underline}.ResponsiveTable-module_footerCard__-NE2M{background-color:var(--table-header-bg);border:1px solid var(--card-border-color);border-radius:12px;margin-top:1rem;overflow:hidden;padding:1.25rem}.ResponsiveTable-module_footer-card-row__Vv6Ur{display:flex;font-size:.9rem;font-weight:600;justify-content:space-between;margin:0 0 .75rem}.ResponsiveTable-module_selectedRow__-JyNW{background-color:#e7f1ff!important}.ResponsiveTable-module_card__b-U2v.ResponsiveTable-module_selectedRow__-JyNW{border-left:4px solid var(--primary-color)}.ResponsiveTable-module_animatedRow__SFjrJ{animation:ResponsiveTable-module_cardEntrance__6JjRV .5s cubic-bezier(.2,.8,.2,1) forwards;opacity:0}@keyframes ResponsiveTable-module_cardEntrance__6JjRV{0%{opacity:0;transform:translateY(15px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes ResponsiveTable-module_fadeInUp__jMCS7{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.ResponsiveTable-module_skeleton__XxsXW{background-color:#f0f0f0;border-radius:4px;overflow:hidden;position:relative}.ResponsiveTable-module_skeleton__XxsXW:after{animation:ResponsiveTable-module_shimmer__H8PhC 1.5s infinite;background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.6),transparent);content:\"\";height:100%;left:-150%;position:absolute;top:0;width:150%}@keyframes ResponsiveTable-module_shimmer__H8PhC{0%{transform:translateX(0)}to{transform:translateX(100%)}}.ResponsiveTable-module_noDataWrapper__Rj-k3{align-items:center;background-color:var(--table-header-bg);border:2px dashed var(--table-border-color);border-radius:12px;color:var(--text-color-muted);display:flex;flex-direction:column;gap:1rem;justify-content:center;padding:4rem 2rem}.ResponsiveTable-module_noData__IpwNq{font-size:1.1rem;font-weight:500}.ResponsiveTable-module_spinner__Pn-3D{animation:ResponsiveTable-module_spin__i3NHn .8s linear infinite;border:3px solid rgba(0,0,0,.1);border-left:3px solid var(--primary-color);border-radius:50%;height:24px;width:24px}@keyframes ResponsiveTable-module_spin__i3NHn{to{transform:rotate(1turn)}}.ResponsiveTable-module_infoContainer__b9IF5{align-items:center;color:var(--text-color-muted);display:flex;font-size:.85rem;gap:.5rem;justify-content:center;padding:1.5rem}.ResponsiveTable-module_stickyHeader__-jjN- th{box-shadow:0 2px 4px rgba(0,0,0,.05);position:sticky;top:0}.ResponsiveTable-module_internalStickyHeader__idiJY th{position:sticky;top:0}";
-var styles$2 = {"responsiveTable":"ResponsiveTable-module_responsiveTable__4y-Od","tableContainer":"ResponsiveTable-module_tableContainer__VjWjH","cardContainer":"ResponsiveTable-module_cardContainer__Het4h","card":"ResponsiveTable-module_card__b-U2v","card-header":"ResponsiveTable-module_card-header__Ttk51","card-row":"ResponsiveTable-module_card-row__qvIUJ","stacked":"ResponsiveTable-module_stacked__FSaTB","card-label":"ResponsiveTable-module_card-label__v9L71","card-value":"ResponsiveTable-module_card-value__BO-c-","numberValue":"ResponsiveTable-module_numberValue__-TLR1","dateValue":"ResponsiveTable-module_dateValue__UMvqJ","imageValue":"ResponsiveTable-module_imageValue__wVb-p","inputValue":"ResponsiveTable-module_inputValue__CrGMx","clickableRow":"ResponsiveTable-module_clickableRow__0kjWm","clickableHeader":"ResponsiveTable-module_clickableHeader__xHQhF","sortable":"ResponsiveTable-module_sortable__yvA60","sorted-asc":"ResponsiveTable-module_sorted-asc__jzOIa","sorted-desc":"ResponsiveTable-module_sorted-desc__7WCFK","headerInnerWrapper":"ResponsiveTable-module_headerInnerWrapper__3VAhD","headerContent":"ResponsiveTable-module_headerContent__ODMzS","sortIcon":"ResponsiveTable-module_sortIcon__A9WtD","footerCell":"ResponsiveTable-module_footerCell__8H-uG","clickableFooterCell":"ResponsiveTable-module_clickableFooterCell__WB9Ss","footerCard":"ResponsiveTable-module_footerCard__-NE2M","footer-card-row":"ResponsiveTable-module_footer-card-row__Vv6Ur","selectedRow":"ResponsiveTable-module_selectedRow__-JyNW","animatedRow":"ResponsiveTable-module_animatedRow__SFjrJ","cardEntrance":"ResponsiveTable-module_cardEntrance__6JjRV","skeleton":"ResponsiveTable-module_skeleton__XxsXW","shimmer":"ResponsiveTable-module_shimmer__H8PhC","noDataWrapper":"ResponsiveTable-module_noDataWrapper__Rj-k3","noData":"ResponsiveTable-module_noData__IpwNq","spinner":"ResponsiveTable-module_spinner__Pn-3D","spin":"ResponsiveTable-module_spin__i3NHn","infoContainer":"ResponsiveTable-module_infoContainer__b9IF5","stickyHeader":"ResponsiveTable-module_stickyHeader__-jjN-","internalStickyHeader":"ResponsiveTable-module_internalStickyHeader__idiJY","fadeInUp":"ResponsiveTable-module_fadeInUp__jMCS7"};
+var css_248z$2 = ".ResponsiveTable-module_responsiveTable__4y-Od{--table-border-color:#e0e0e0;--table-header-bg:#f8f9fa;--table-row-hover-bg:#f1f3f5;--table-row-stripe-bg:#fafbfc;--card-bg:#fff;--card-border-color:#d1d5db;--card-shadow:0 2px 8px rgba(0,0,0,.06);--text-color:#212529;--text-color-muted:#6c757d;--interactive-color:#0056b3;--primary-color:#007bff;--rt-mobile-card-shadow:0 1px 2px rgba(0,0,0,.04),0 4px 12px rgba(0,0,0,.06),0 12px 32px rgba(0,0,0,.04);--rt-mobile-card-radius:16px;--rt-mobile-bg-wash:#f1f5f9;--rt-mobile-label-color:#475569;--rt-mobile-value-color:#1e293b}.ResponsiveTable-module_tableContainer__VjWjH{border:1px solid var(--table-border-color);border-radius:8px;overflow-x:auto;width:100%}.ResponsiveTable-module_responsiveTable__4y-Od{background-color:var(--card-bg);border-collapse:collapse;color:var(--text-color);width:100%}.ResponsiveTable-module_responsiveTable__4y-Od thead th{background-color:var(--table-header-bg);border-bottom:2px solid var(--table-border-color);color:var(--text-color-muted);font-size:.75rem;font-weight:600;letter-spacing:.05em;padding:1rem;text-align:left;text-transform:uppercase;z-index:1}.ResponsiveTable-module_responsiveTable__4y-Od td{border-bottom:1px solid var(--table-border-color);font-size:.9rem;padding:1rem;text-align:left}.ResponsiveTable-module_responsiveTable__4y-Od tr:last-child td{border-bottom:none}.ResponsiveTable-module_responsiveTable__4y-Od tr:nth-child(2n){background-color:var(--table-row-stripe-bg)}.ResponsiveTable-module_responsiveTable__4y-Od tr:hover{background-color:var(--table-row-hover-bg)}.ResponsiveTable-module_cardContainer__Het4h{background-color:var(--rt-mobile-bg-wash);border-radius:var(--rt-mobile-card-radius);display:flex;flex-direction:column;gap:1.25rem;padding:1rem}.ResponsiveTable-module_card__b-U2v{background-color:var(--card-bg);border:1px solid var(--card-border-color);border-bottom:3px solid var(--primary-color);border-radius:var(--rt-mobile-card-radius);box-shadow:var(--rt-mobile-card-shadow);overflow:hidden;padding:1rem;transition:box-shadow .2s ease-in-out,transform .2s ease-in-out}.ResponsiveTable-module_card__b-U2v:hover{box-shadow:0 2px 4px rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.08),0 16px 48px rgba(0,0,0,.06);transform:translateY(-4px)}.ResponsiveTable-module_card-header__Ttk51{border-bottom:1px solid var(--table-border-color);margin-bottom:1rem;padding-bottom:.5rem}.ResponsiveTable-module_card-row__qvIUJ{align-items:flex-start;display:flex;gap:1rem;justify-content:space-between;margin:0 0 .75rem}.ResponsiveTable-module_card-row__qvIUJ.ResponsiveTable-module_stacked__FSaTB{align-items:stretch;flex-direction:column;gap:.25rem;margin-bottom:1rem}.ResponsiveTable-module_card-row__qvIUJ:last-child{margin-bottom:0}.ResponsiveTable-module_card-label__v9L71{color:var(--rt-mobile-label-color);font-size:.75rem;font-weight:600;text-transform:uppercase;white-space:nowrap}.ResponsiveTable-module_card-value__BO-c-{color:var(--rt-mobile-value-color);font-size:.95rem;text-align:right}.ResponsiveTable-module_card-row__qvIUJ.ResponsiveTable-module_stacked__FSaTB .ResponsiveTable-module_card-value__BO-c-{text-align:left}.ResponsiveTable-module_numberValue__-TLR1{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;text-align:right!important}.ResponsiveTable-module_dateValue__UMvqJ{color:var(--text-color-muted);font-size:.85rem}.ResponsiveTable-module_imageValue__wVb-p img{border-radius:8px;height:auto;max-width:100%;object-fit:cover}.ResponsiveTable-module_inputValue__CrGMx{margin-top:.5rem;width:100%}.ResponsiveTable-module_inputValue__CrGMx button,.ResponsiveTable-module_inputValue__CrGMx input[type=text],.ResponsiveTable-module_inputValue__CrGMx select,.ResponsiveTable-module_inputValue__CrGMx textarea{min-height:44px;width:100%!important}.ResponsiveTable-module_clickableRow__0kjWm{cursor:pointer}.ResponsiveTable-module_clickableHeader__xHQhF{cursor:pointer;transition:color .2s}.ResponsiveTable-module_clickableHeader__xHQhF:hover{color:var(--interactive-color)}.ResponsiveTable-module_sortable__yvA60{cursor:pointer}.ResponsiveTable-module_sorted-asc__jzOIa,.ResponsiveTable-module_sorted-desc__7WCFK{background-color:#f0f7ff!important;color:var(--interactive-color)!important}.ResponsiveTable-module_headerInnerWrapper__3VAhD{align-items:center;display:flex;justify-content:space-between;width:100%}.ResponsiveTable-module_headerContent__ODMzS{flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ResponsiveTable-module_sortIcon__A9WtD{background-position:50%;background-repeat:no-repeat;background-size:contain;flex-shrink:0;height:1rem;margin-left:.5rem;opacity:.3;width:1rem}.ResponsiveTable-module_sortable__yvA60:hover .ResponsiveTable-module_sortIcon__A9WtD{opacity:.8}.ResponsiveTable-module_sortable__yvA60 .ResponsiveTable-module_sortIcon__A9WtD{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236c757d'%3E%3Cpath d='M10 18h4v-2h-4v2zm-6-8v2h16V8H4zm3-6h10v2H7V2z'/%3E%3C/svg%3E\")}.ResponsiveTable-module_sorted-asc__jzOIa .ResponsiveTable-module_sortIcon__A9WtD{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230056b3'%3E%3Cpath d='m7 14 5-5 5 5z'/%3E%3C/svg%3E\");opacity:1}.ResponsiveTable-module_sorted-desc__7WCFK .ResponsiveTable-module_sortIcon__A9WtD{background-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230056b3'%3E%3Cpath d='m7 10 5 5 5-5z'/%3E%3C/svg%3E\");opacity:1}.ResponsiveTable-module_responsiveTable__4y-Od tfoot{background-color:var(--table-header-bg);border-top:2px solid var(--table-border-color)}.ResponsiveTable-module_footerCell__8H-uG{font-size:.9rem;font-weight:600;padding:1rem;text-align:right}.ResponsiveTable-module_clickableFooterCell__WB9Ss{color:var(--interactive-color);cursor:pointer}.ResponsiveTable-module_clickableFooterCell__WB9Ss:hover{text-decoration:underline}.ResponsiveTable-module_footerCard__-NE2M{background-color:var(--table-header-bg);border:1px solid var(--card-border-color);border-radius:12px;margin-top:1rem;overflow:hidden;padding:1.25rem}.ResponsiveTable-module_footer-card-row__Vv6Ur{display:flex;font-size:.9rem;font-weight:600;justify-content:space-between;margin:0 0 .75rem}.ResponsiveTable-module_selectedRow__-JyNW{background-color:#e7f1ff!important}.ResponsiveTable-module_card__b-U2v.ResponsiveTable-module_selectedRow__-JyNW{border-left:4px solid var(--primary-color)}.ResponsiveTable-module_animatedRow__SFjrJ{animation:ResponsiveTable-module_cardEntrance__6JjRV .5s cubic-bezier(.2,.8,.2,1) forwards;opacity:0}@keyframes ResponsiveTable-module_cardEntrance__6JjRV{0%{opacity:0;transform:translateY(15px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes ResponsiveTable-module_fadeInUp__jMCS7{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.ResponsiveTable-module_skeleton__XxsXW{background-color:#f0f0f0;border-radius:4px;overflow:hidden;position:relative}.ResponsiveTable-module_skeleton__XxsXW:after{animation:ResponsiveTable-module_shimmer__H8PhC 1.5s infinite;background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.6),transparent);content:\"\";height:100%;left:-150%;position:absolute;top:0;width:150%}@keyframes ResponsiveTable-module_shimmer__H8PhC{0%{transform:translateX(0)}to{transform:translateX(100%)}}.ResponsiveTable-module_noDataWrapper__Rj-k3{align-items:center;background-color:var(--table-header-bg);border:2px dashed var(--table-border-color);border-radius:12px;color:var(--text-color-muted);display:flex;flex-direction:column;gap:1rem;justify-content:center;padding:4rem 2rem}.ResponsiveTable-module_noData__IpwNq{font-size:1.1rem;font-weight:500}.ResponsiveTable-module_spinner__Pn-3D{animation:ResponsiveTable-module_spin__i3NHn .8s linear infinite;border:3px solid rgba(0,0,0,.1);border-left:3px solid var(--primary-color);border-radius:50%;height:24px;width:24px}@keyframes ResponsiveTable-module_spin__i3NHn{to{transform:rotate(1turn)}}.ResponsiveTable-module_infoContainer__b9IF5{align-items:center;color:var(--text-color-muted);display:flex;font-size:.85rem;gap:.5rem;justify-content:center;padding:1.5rem}.ResponsiveTable-module_stickyHeader__-jjN- th{box-shadow:0 2px 4px rgba(0,0,0,.05);position:sticky;top:0}.ResponsiveTable-module_internalStickyHeader__idiJY th{position:sticky;top:0}.ResponsiveTable-module_detailCell__hb9C5{background:rgba(0,0,0,.012);border-top:none;padding:0;transition:border-left .2s ease}.ResponsiveTable-module_detailCellHasContent__F-DX5{padding-bottom:8px}.ResponsiveTable-module_detailCellExpanded__Zr6UF{border-left:2px solid var(--primary-color,#3b82f6)}.ResponsiveTable-module_detailToggleBar__F5Qrk{height:0;overflow:hidden;transition:height .2s ease}.ResponsiveTable-module_detailToggleBarVisible__q9b-3{align-items:center;box-shadow:inset 0 1px 0 rgba(0,0,0,.04);cursor:pointer;display:flex;height:32px;padding:0 12px;user-select:none}.ResponsiveTable-module_detailToggleBarVisible__q9b-3:hover{background:rgba(0,0,0,.02)}.ResponsiveTable-module_detailChevron__mBs8j{align-items:center;color:var(--primary-color,#3b82f6);display:flex;font-size:20px;transition:transform .25s ease}.ResponsiveTable-module_detailChevronExpanded__zGFTQ{transform:rotate(180deg)}.ResponsiveTable-module_detailContentWrapper__VzM29{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}.ResponsiveTable-module_detailContentWrapperExpanded__bkiUb{grid-template-rows:1fr}.ResponsiveTable-module_detailContentInner__GWVaq{overflow:hidden;padding-left:24px}.ResponsiveTable-module_mobileDetailOuter__gusle{background:rgba(0,0,0,.012);overflow:hidden}";
+var styles$2 = {"responsiveTable":"ResponsiveTable-module_responsiveTable__4y-Od","tableContainer":"ResponsiveTable-module_tableContainer__VjWjH","cardContainer":"ResponsiveTable-module_cardContainer__Het4h","card":"ResponsiveTable-module_card__b-U2v","card-header":"ResponsiveTable-module_card-header__Ttk51","card-row":"ResponsiveTable-module_card-row__qvIUJ","stacked":"ResponsiveTable-module_stacked__FSaTB","card-label":"ResponsiveTable-module_card-label__v9L71","card-value":"ResponsiveTable-module_card-value__BO-c-","numberValue":"ResponsiveTable-module_numberValue__-TLR1","dateValue":"ResponsiveTable-module_dateValue__UMvqJ","imageValue":"ResponsiveTable-module_imageValue__wVb-p","inputValue":"ResponsiveTable-module_inputValue__CrGMx","clickableRow":"ResponsiveTable-module_clickableRow__0kjWm","clickableHeader":"ResponsiveTable-module_clickableHeader__xHQhF","sortable":"ResponsiveTable-module_sortable__yvA60","sorted-asc":"ResponsiveTable-module_sorted-asc__jzOIa","sorted-desc":"ResponsiveTable-module_sorted-desc__7WCFK","headerInnerWrapper":"ResponsiveTable-module_headerInnerWrapper__3VAhD","headerContent":"ResponsiveTable-module_headerContent__ODMzS","sortIcon":"ResponsiveTable-module_sortIcon__A9WtD","footerCell":"ResponsiveTable-module_footerCell__8H-uG","clickableFooterCell":"ResponsiveTable-module_clickableFooterCell__WB9Ss","footerCard":"ResponsiveTable-module_footerCard__-NE2M","footer-card-row":"ResponsiveTable-module_footer-card-row__Vv6Ur","selectedRow":"ResponsiveTable-module_selectedRow__-JyNW","animatedRow":"ResponsiveTable-module_animatedRow__SFjrJ","cardEntrance":"ResponsiveTable-module_cardEntrance__6JjRV","skeleton":"ResponsiveTable-module_skeleton__XxsXW","shimmer":"ResponsiveTable-module_shimmer__H8PhC","noDataWrapper":"ResponsiveTable-module_noDataWrapper__Rj-k3","noData":"ResponsiveTable-module_noData__IpwNq","spinner":"ResponsiveTable-module_spinner__Pn-3D","spin":"ResponsiveTable-module_spin__i3NHn","infoContainer":"ResponsiveTable-module_infoContainer__b9IF5","stickyHeader":"ResponsiveTable-module_stickyHeader__-jjN-","internalStickyHeader":"ResponsiveTable-module_internalStickyHeader__idiJY","detailCell":"ResponsiveTable-module_detailCell__hb9C5","detailCellHasContent":"ResponsiveTable-module_detailCellHasContent__F-DX5","detailCellExpanded":"ResponsiveTable-module_detailCellExpanded__Zr6UF","detailToggleBar":"ResponsiveTable-module_detailToggleBar__F5Qrk","detailToggleBarVisible":"ResponsiveTable-module_detailToggleBarVisible__q9b-3","detailChevron":"ResponsiveTable-module_detailChevron__mBs8j","detailChevronExpanded":"ResponsiveTable-module_detailChevronExpanded__zGFTQ","detailContentWrapper":"ResponsiveTable-module_detailContentWrapper__VzM29","detailContentWrapperExpanded":"ResponsiveTable-module_detailContentWrapperExpanded__bkiUb","detailContentInner":"ResponsiveTable-module_detailContentInner__GWVaq","mobileDetailOuter":"ResponsiveTable-module_mobileDetailOuter__gusle","fadeInUp":"ResponsiveTable-module_fadeInUp__jMCS7"};
 styleInject(css_248z$2);
 
 /******************************************************************************
@@ -238,6 +238,39 @@ function TableBodyRow(props) {
         React.createElement(TableBodyCell, { row: row, rowIndex: rowIndex, columnDefinition: columnDefinition }))))));
 }
 
+function DetailRow({ row, rowIndex, colSpan, expandRowRenderer, isExpanded, onToggle }) {
+    const content = expandRowRenderer(row, rowIndex);
+    const hasContent = content != null;
+    const [everExpanded, setEverExpanded] = useState(false);
+    if (isExpanded && !everExpanded)
+        setEverExpanded(true);
+    const tdClass = [
+        styles$2.detailCell,
+        hasContent ? styles$2.detailCellHasContent : '',
+        isExpanded ? styles$2.detailCellExpanded : '',
+    ].join(' ').trim();
+    const chevronClass = [
+        styles$2.detailChevron,
+        isExpanded ? styles$2.detailChevronExpanded : '',
+    ].join(' ').trim();
+    return (React.createElement("tr", null,
+        React.createElement("td", { colSpan: colSpan, className: tdClass },
+            React.createElement("div", Object.assign({ className: `${styles$2.detailToggleBar} ${hasContent ? styles$2.detailToggleBarVisible : ''}` }, (hasContent ? {
+                role: 'button',
+                tabIndex: 0,
+                'aria-expanded': isExpanded,
+                onClick: onToggle,
+                onKeyDown: (e) => { if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    onToggle();
+                } },
+                'data-rt-ignore-row-click': true,
+            } : {})), hasContent && (React.createElement("span", { className: chevronClass },
+                React.createElement(MdKeyboardArrowDown, null)))),
+            React.createElement("div", { className: `${styles$2.detailContentWrapper} ${isExpanded ? styles$2.detailContentWrapperExpanded : ''}` },
+                React.createElement("div", { className: styles$2.detailContentInner }, everExpanded && content)))));
+}
+
 const TableSentinel = ({ onIntersect, isLoading }) => {
     const sentinelRef = useRef(null);
     useEffect(() => {
@@ -267,7 +300,20 @@ const TableSentinel = ({ onIntersect, isLoading }) => {
 
 function DesktopView(props) {
     const { maxHeight, isHeaderSticky, tableContainerRef, headerRef, footerRows, renderPluginFooters, onScroll, } = props;
-    const { visibleColumns, originalColumnDefinitions, currentData, getRawColumnDefinition, onRowClick, selectionProps, animationProps, pagination, } = useTableContext();
+    const { visibleColumns, originalColumnDefinitions, currentData, getRawColumnDefinition, onRowClick, selectionProps, animationProps, pagination, expandRowRenderer, getRowId, } = useTableContext();
+    const [expandedIds, setExpandedIds] = useState(new Set());
+    const toggleExpanded = useCallback((id) => {
+        setExpandedIds(prev => {
+            const next = new Set(prev);
+            if (next.has(id)) {
+                next.delete(id);
+            }
+            else {
+                next.add(id);
+            }
+            return next;
+        });
+    }, []);
     const getEffectiveColSpan = useCallback((footerCol, startIndex) => {
         const originalSpan = footerCol.colSpan || 1;
         const endIndex = startIndex + originalSpan;
@@ -306,7 +352,12 @@ function DesktopView(props) {
         React.createElement("table", { className: styles$2['responsiveTable'] },
             React.createElement("thead", { ref: headerRef, className: headerClassName },
                 React.createElement("tr", null, visibleColumns.map((columnDefinition, colIndex) => (React.createElement(TableHeaderCell, { key: colIndex, columnDefinition: columnDefinition, colIndex: colIndex }))))),
-            React.createElement("tbody", null, currentData.map((row, rowIndex) => (React.createElement(TableBodyRow, { key: rowIndex, row: row, rowIndex: rowIndex, columnDefinitions: visibleColumns, onRowClick: onRowClick, selectionProps: selectionProps, animationProps: animationProps })))),
+            React.createElement("tbody", null, currentData.map((row, rowIndex) => {
+                const rowId = getRowId(row, rowIndex);
+                return (React.createElement(React.Fragment, { key: rowId },
+                    React.createElement(TableBodyRow, { row: row, rowIndex: rowIndex, columnDefinitions: visibleColumns, onRowClick: onRowClick, selectionProps: selectionProps, animationProps: animationProps }),
+                    expandRowRenderer && (React.createElement(DetailRow, { row: row, rowIndex: rowIndex, colSpan: visibleColumns.length, expandRowRenderer: expandRowRenderer, isExpanded: expandedIds.has(rowId), onToggle: () => toggleExpanded(rowId) }))));
+            })),
             tableFooter),
         (pagination === null || pagination === void 0 ? void 0 : pagination.hasMore) && (React.createElement(TableSentinel, { onIntersect: () => pagination.loadNextPage(), isLoading: pagination.isFetchingMore })),
         (pagination === null || pagination === void 0 ? void 0 : pagination.isFetchingMore) && (React.createElement("div", { className: styles$2.infoContainer },
@@ -315,10 +366,50 @@ function DesktopView(props) {
         renderPluginFooters()));
 }
 
+function MobileDetailSection({ row, rowIndex, expandRowRenderer, isExpanded, onToggle }) {
+    const content = expandRowRenderer(row, rowIndex);
+    const hasContent = content != null;
+    const [everExpanded, setEverExpanded] = useState(false);
+    if (isExpanded && !everExpanded)
+        setEverExpanded(true);
+    if (!hasContent)
+        return null;
+    const chevronClass = [
+        styles$2.detailChevron,
+        isExpanded ? styles$2.detailChevronExpanded : '',
+    ].join(' ').trim();
+    const outerClass = [
+        styles$2.mobileDetailOuter,
+        styles$2.detailCellHasContent,
+        isExpanded ? styles$2.detailCellExpanded : '',
+    ].join(' ').trim();
+    return (React.createElement("div", { className: outerClass },
+        React.createElement("div", { className: `${styles$2.detailToggleBar} ${styles$2.detailToggleBarVisible}`, role: "button", tabIndex: 0, "aria-expanded": isExpanded, onClick: onToggle, onKeyDown: (e) => { if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                onToggle();
+            } }, "data-rt-ignore-row-click": true },
+            React.createElement("span", { className: chevronClass },
+                React.createElement(MdKeyboardArrowDown, null))),
+        React.createElement("div", { className: `${styles$2.detailContentWrapper} ${isExpanded ? styles$2.detailContentWrapperExpanded : ''}` },
+            React.createElement("div", { className: styles$2.detailContentInner }, everExpanded && content))));
+}
 function MobileView(props) {
     const { mobileFooter } = props;
-    const { currentData, visibleColumns, onRowClick, selectionProps, animationProps, getRowProps, getRowId, getColumnDefinition, onHeaderClickCallback, getClickableHeaderClassName, pagination, mobileCardClassName, } = useTableContext();
+    const { currentData, visibleColumns, onRowClick, selectionProps, animationProps, getRowProps, getRowId, getColumnDefinition, onHeaderClickCallback, getClickableHeaderClassName, pagination, mobileCardClassName, expandRowRenderer, } = useTableContext();
     const isClickable = onRowClick || selectionProps;
+    const [expandedIds, setExpandedIds] = useState(new Set());
+    const toggleExpanded = useCallback((id) => {
+        setExpandedIds(prev => {
+            const next = new Set(prev);
+            if (next.has(id)) {
+                next.delete(id);
+            }
+            else {
+                next.add(id);
+            }
+            return next;
+        });
+    }, []);
     const inferDataType = (colDef, value) => {
         var _a;
         if (colDef.dataType)
@@ -358,39 +449,41 @@ function MobileView(props) {
         currentData.map((row, rowIndex) => {
             const rowProps = getRowProps(row);
             const pluginOnClick = rowProps.onClick;
-            return (React.createElement("div", { key: getRowId(row, rowIndex), className: `${styles$2.card} ${isClickable ? styles$2.clickableRow : ''} ${(animationProps === null || animationProps === void 0 ? void 0 : animationProps.animateOnLoad) ? styles$2.animatedRow : ''} ${rowProps.className || ''} ${mobileCardClassName || ''}`.trim(), style: { animationDelay: `${rowIndex * 0.05}s` }, "aria-selected": rowProps['aria-selected'], onClickCapture: (e) => {
-                    const target = e.target;
-                    if (target.closest('[data-rt-ignore-row-click]')) {
-                        e.nativeEvent._rtIgnoreRowClick = true;
-                    }
-                }, onClick: (e) => {
-                    if (e.nativeEvent._rtIgnoreRowClick) {
-                        return;
-                    }
-                    if (pluginOnClick)
-                        pluginOnClick(e);
-                    if (onRowClick)
-                        onRowClick(row);
-                } },
-                React.createElement("div", { className: styles$2['card-body'] }, visibleColumns.map((columnDefinition, colIndex) => {
-                    const colDef = getColumnDefinition(columnDefinition, rowIndex);
-                    const onHeaderClick = onHeaderClickCallback(columnDefinition);
-                    const clickableHeaderClassName = getClickableHeaderClassName(onHeaderClick, columnDefinition);
-                    // Use a dummy call or dataKey to get a sample value for inference if cellRenderer is too complex
-                    // For now, we'll try to infer from what cellRenderer returns if it's a simple primitive
-                    const sampleValue = colDef.dataKey ? row[colDef.dataKey] : null;
-                    const dataType = inferDataType(colDef, sampleValue);
-                    const typeClassName = getTypeClassName(dataType);
-                    return (React.createElement("div", { key: colIndex, className: `${styles$2['card-row']} ${styles$2.stacked}` },
-                        React.createElement("span", { className: `${styles$2['card-label']} ${clickableHeaderClassName} ${colDef.headerClassName || ''}`, style: colDef.headerStyle, onClick: (e) => {
-                                if (onHeaderClick) {
-                                    e.stopPropagation();
-                                    onHeaderClick(colDef.interactivity.id);
-                                }
-                            } }, colDef.displayLabel),
-                        React.createElement("span", { className: `${styles$2['card-value']} ${typeClassName} ${colDef.cellClassName || ''}`, style: colDef.cellStyle },
-                            React.createElement(TableBodyCell, { row: row, rowIndex: rowIndex, columnDefinition: columnDefinition }))));
-                }))));
+            return (React.createElement(React.Fragment, { key: getRowId(row, rowIndex) },
+                React.createElement("div", { className: `${styles$2.card} ${isClickable ? styles$2.clickableRow : ''} ${(animationProps === null || animationProps === void 0 ? void 0 : animationProps.animateOnLoad) ? styles$2.animatedRow : ''} ${rowProps.className || ''} ${mobileCardClassName || ''}`.trim(), style: { animationDelay: `${rowIndex * 0.05}s` }, "aria-selected": rowProps['aria-selected'], onClickCapture: (e) => {
+                        const target = e.target;
+                        if (target.closest('[data-rt-ignore-row-click]')) {
+                            e.nativeEvent._rtIgnoreRowClick = true;
+                        }
+                    }, onClick: (e) => {
+                        if (e.nativeEvent._rtIgnoreRowClick) {
+                            return;
+                        }
+                        if (pluginOnClick)
+                            pluginOnClick(e);
+                        if (onRowClick)
+                            onRowClick(row);
+                    } },
+                    React.createElement("div", { className: styles$2['card-body'] }, visibleColumns.map((columnDefinition, colIndex) => {
+                        const colDef = getColumnDefinition(columnDefinition, rowIndex);
+                        const onHeaderClick = onHeaderClickCallback(columnDefinition);
+                        const clickableHeaderClassName = getClickableHeaderClassName(onHeaderClick, columnDefinition);
+                        // Use a dummy call or dataKey to get a sample value for inference if cellRenderer is too complex
+                        // For now, we'll try to infer from what cellRenderer returns if it's a simple primitive
+                        const sampleValue = colDef.dataKey ? row[colDef.dataKey] : null;
+                        const dataType = inferDataType(colDef, sampleValue);
+                        const typeClassName = getTypeClassName(dataType);
+                        return (React.createElement("div", { key: colIndex, className: `${styles$2['card-row']} ${styles$2.stacked}` },
+                            React.createElement("span", { className: `${styles$2['card-label']} ${clickableHeaderClassName} ${colDef.headerClassName || ''}`, style: colDef.headerStyle, onClick: (e) => {
+                                    if (onHeaderClick) {
+                                        e.stopPropagation();
+                                        onHeaderClick(colDef.interactivity.id);
+                                    }
+                                } }, colDef.displayLabel),
+                            React.createElement("span", { className: `${styles$2['card-value']} ${typeClassName} ${colDef.cellClassName || ''}`, style: colDef.cellStyle },
+                                React.createElement(TableBodyCell, { row: row, rowIndex: rowIndex, columnDefinition: columnDefinition }))));
+                    }))),
+                expandRowRenderer && (React.createElement(MobileDetailSection, { row: row, rowIndex: rowIndex, expandRowRenderer: expandRowRenderer, isExpanded: expandedIds.has(getRowId(row, rowIndex)), onToggle: () => toggleExpanded(getRowId(row, rowIndex)) }))));
         }),
         (pagination === null || pagination === void 0 ? void 0 : pagination.hasMore) && (React.createElement(TableSentinel, { onIntersect: () => pagination.loadNextPage(), isLoading: pagination.isFetchingMore })),
         (pagination === null || pagination === void 0 ? void 0 : pagination.isFetchingMore) && (React.createElement("div", { className: styles$2.infoContainer },
@@ -1156,7 +1249,7 @@ const useTableDataSource = (props) => {
  * Supports static data or async data sources with built-in infinite scroll.
  */
 function ResponsiveTableInner(props, ref) {
-    const { columnDefinitions, data: initialData, dataSource, pageSize, noDataComponent, maxHeight, onRowClick, footerRows, mobileBreakpoint, plugins, enablePageLevelStickyHeader, infiniteScrollProps, filterProps, selectionProps, animationProps, sortProps, mobileCardClassName, onDataSourceStateChange, onPageChange, onDataSourceError, } = props;
+    const { columnDefinitions, data: initialData, dataSource, pageSize, noDataComponent, maxHeight, onRowClick, footerRows, mobileBreakpoint, plugins, enablePageLevelStickyHeader, infiniteScrollProps, filterProps, selectionProps, animationProps, sortProps, mobileCardClassName, onDataSourceStateChange, onPageChange, onDataSourceError, expandRowRenderer, } = props;
     const tableContainerRef = useRef(null);
     const headerRef = useRef(null);
     const { isMobile, isHeaderSticky } = useResponsiveTable({
@@ -1361,6 +1454,7 @@ function ResponsiveTableInner(props, ref) {
                 error,
             } : undefined,
             mobileCardClassName,
+            expandRowRenderer,
         } },
         React.createElement("div", null,
             React.createElement("div", { style: { display: 'flex', justifyContent: 'flex-end' } }, renderPluginHeaders()),