@pallasoft/ps-table-components 1.22.2 → 1.23.0

package/dist/components/ps-data-table.d.ts

@@ -27,6 +27,7 @@ export interface PsDataTableProps<RowData> {
     onRowHover?: (row: RowData) => void;
     page?: number;
     pageSize?: number;
+    pinFirstColumn?: boolean;
     query?: PsTableQuery;
     renderExpandedRow?: (row: RowData) => ReactNode;
     reorder?: PsTableReorder<RowData>;
@@ -36,4 +37,4 @@ export interface PsDataTableProps<RowData> {
     toolbarActions?: ReactNode;
     totalRows?: number;
 }
-export declare const PsDataTable: <RowData>({ caption, className, columns, defaultSort, density, expandedRowIds, mobileLayout, getBulkActions, getRowId, getRowLabel, getSearchText, grouping, isLoading, isPending, layout, onPageChange, onQueryChange, onRowClick, onRowHover, page, pageSize, query, renderExpandedRow, reorder, rows, searchingLabel, searchPlaceholder, toolbarActions, totalRows, }: PsDataTableProps<RowData>) => import("react").JSX.Element;
+export declare const PsDataTable: <RowData>({ caption, className, columns, defaultSort, density, expandedRowIds, mobileLayout, getBulkActions, getRowId, getRowLabel, getSearchText, grouping, isLoading, isPending, layout, onPageChange, onQueryChange, onRowClick, onRowHover, page, pageSize, pinFirstColumn, query, renderExpandedRow, reorder, rows, searchingLabel, searchPlaceholder, toolbarActions, totalRows, }: PsDataTableProps<RowData>) => import("react").JSX.Element;

package/dist/components/ps-data-table.js

@@ -42,13 +42,16 @@ const ps_input_components_1 = require("@pallasoft/ps-input-components");
 const ps_motion_components_1 = require("@pallasoft/ps-motion-components");
 const react_virtual_1 = require("@tanstack/react-virtual");
 const ps_table_control_classes_1 = require("../constants/ps-table-control-classes");
+const table_breakpoint_1 = require("../constants/table-breakpoint");
 const table_config_1 = require("../constants/table-config");
 const use_ps_incremental_count_1 = require("../hooks/use-ps-incremental-count");
 const use_ps_scroll_anchor_1 = require("../hooks/use-ps-scroll-anchor");
+const use_ps_table_overflow_1 = require("../hooks/use-ps-table-overflow");
 const use_ps_table_stream_status_1 = require("../hooks/use-ps-table-stream-status");
 const ps_table_cell_tooltip_service_1 = require("../services/ps-table-cell-tooltip-service");
 const ps_table_column_size_service_1 = require("../services/ps-table-column-size-service");
 const ps_table_group_service_1 = require("../services/ps-table-group-service");
+const ps_table_pin_service_1 = require("../services/ps-table-pin-service");
 const ps_table_query_service_1 = require("../services/ps-table-query-service");
 const ps_table_reorder_service_1 = require("../services/ps-table-reorder-service");
 const ps_table_scroll_service_1 = require("../services/ps-table-scroll-service");
@@ -81,7 +84,7 @@ const alignClassNames = {
     left: 'text-left',
     right: 'text-right tabular-nums',
 };
-const PsDataTable = ({ caption, className, columns, defaultSort, density = 'normal', expandedRowIds, mobileLayout = 'cards', getBulkActions, getRowId, getRowLabel, getSearchText, grouping, isLoading = false, isPending = false, layout = 'auto', onPageChange, onQueryChange, onRowClick, onRowHover, page, pageSize, query, renderExpandedRow, reorder, rows, searchingLabel = table_config_1.PsTableConfig.searchingLabel, searchPlaceholder = table_config_1.PsTableConfig.searchPlaceholder, toolbarActions, totalRows, }) => {
+const PsDataTable = ({ caption, className, columns, defaultSort, density = 'normal', expandedRowIds, mobileLayout = 'cards', getBulkActions, getRowId, getRowLabel, getSearchText, grouping, isLoading = false, isPending = false, layout = 'auto', onPageChange, onQueryChange, onRowClick, onRowHover, page, pageSize, pinFirstColumn = true, query, renderExpandedRow, reorder, rows, searchingLabel = table_config_1.PsTableConfig.searchingLabel, searchPlaceholder = table_config_1.PsTableConfig.searchPlaceholder, toolbarActions, totalRows, }) => {
     const containerRef = (0, react_1.useRef)(null);
     const [uncontrolledPage, setUncontrolledPage] = (0, react_1.useState)(1);
     const [uncontrolledQuery, setUncontrolledQuery] = (0, react_1.useState)(() => ps_table_query_service_1.PsTableQueryService.empty(defaultSort ? defaultSort : null));
@@ -106,6 +109,9 @@ const PsDataTable = ({ caption, className, columns, defaultSort, density = 'norm
     const hasToolbar = isSearchable || hasFilters || Boolean(toolbarActions);
     const isSelectable = Boolean(getBulkActions);
     const columnCount = visibleColumns.length + (isSelectable ? 1 : 0) + (reorder ? 1 : 0);
+    const pins = ps_table_pin_service_1.PsTablePinService.leading(pinFirstColumn, Boolean(reorder), isSelectable);
+    const placementOf = (column, columnIndex) => ps_design_system_1.PallasoftClassNameService.merge(column.hideBelow === undefined ? '' : table_breakpoint_1.PsTableHideBelowClasses[column.hideBelow], columnIndex === 0 ? pins.first : '', ps_table_pin_service_1.PsTablePinService.end(column.pinEnd === true));
+    const overflow = (0, use_ps_table_overflow_1.usePsTableOverflow)(`${visibleColumns.map((column) => column.id).join(',')}:${rows.length}`);
     const deferredSearch = (0, react_1.useDeferredValue)(search);
     const queriedRows = (0, react_1.useMemo)(() => isServerPaginated
         ? rows
@@ -175,23 +181,48 @@ const PsDataTable = ({ caption, className, columns, defaultSort, density = 'norm
         safePage,
         toggledGroupKeys,
     ]);
+    const reorderKey = (0, react_1.useCallback)((row) => reorder && reorder.groupKey ? reorder.groupKey(row) : ps_table_reorder_service_1.PsTableReorderService.treeKey, [reorder]);
+    const nestingBinding = (0, react_1.useMemo)(() => {
+        if (reorder === undefined || reorder.nesting === undefined)
+            return undefined;
+        const { nesting } = reorder;
+        const find = (id) => visibleRows.find((candidate) => getRowId(candidate) === id);
+        return {
+            announcements: nesting.announcements,
+            canDrag: (id) => {
+                const row = find(id);
+                return row !== undefined && nesting.canDrag(row);
+            },
+            canDrop: (activeId, targetId, placement) => {
+                const active = find(activeId);
+                const target = find(targetId);
+                return (active !== undefined && target !== undefined && nesting.canDrop(active, target, placement));
+            },
+            onMove: (activeId, targetId, placement) => {
+                const active = find(activeId);
+                const target = find(targetId);
+                if (active !== undefined && target !== undefined)
+                    nesting.onMove(active, target, placement);
+            },
+        };
+    }, [getRowId, reorder, visibleRows]);
     const reorderItems = (0, react_1.useMemo)(() => reorder
         ? visibleRows.map((row) => {
             const rowId = getRowId(row);
             const label = getRowLabel ? getRowLabel(row) : rowId;
             return {
-                groupKey: reorder.groupKey(row),
+                groupKey: reorderKey(row),
                 handleLabel: reorder.getHandleLabel(label),
                 id: rowId,
                 label,
             };
         })
-        : [], [getRowId, getRowLabel, reorder, visibleRows]);
+        : [], [getRowId, getRowLabel, reorder, reorderKey, visibleRows]);
     const renderOverlayRow = (rowId) => {
         const row = visibleRows.find((candidate) => getRowId(candidate) === rowId);
         return row === undefined ? null : ((0, jsx_runtime_1.jsx)("table", { className: 'w-full table-fixed border-collapse bg-surface text-left', children: (0, jsx_runtime_1.jsx)("tbody", { children: renderRow(ps_table_reorder_service_1.PsTableReorderService.plain, row) }) }));
     };
-    const renderReorder = (children) => reorder === undefined ? (children(ps_table_reorder_service_1.PsTableReorderService.plain)) : ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: children(ps_table_reorder_service_1.PsTableReorderService.plain), children: (0, jsx_runtime_1.jsx)(LazyReorderFrame, { announcements: reorder.announcements, enabled: reorder.enabled, instructions: reorder.instructions, items: reorderItems, onReorder: reorder.onReorder, renderOverlay: renderOverlayRow, children: children }) }));
+    const renderReorder = (children) => reorder === undefined ? (children(ps_table_reorder_service_1.PsTableReorderService.plain)) : ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: children(ps_table_reorder_service_1.PsTableReorderService.plain), children: (0, jsx_runtime_1.jsx)(LazyReorderFrame, { announcements: reorder.announcements, enabled: reorder.enabled, instructions: reorder.instructions, items: reorderItems, nesting: nestingBinding, onReorder: reorder.onReorder, renderOverlay: renderOverlayRow, children: children }) }));
     const changePage = (next) => {
         if (onPageChange) {
             onPageChange(next);
@@ -275,7 +306,11 @@ const PsDataTable = ({ caption, className, columns, defaultSort, density = 'norm
         const rowLabel = getRowLabel ? getRowLabel(row) : rowId;
         const Row = api.Row;
         const rowExtras = api.isActive
-            ? { ...api.rowProps(rowId), measureRef: virtualItem ? virtualizer.measureElement : undefined }
+            ? {
+                ...api.rowProps(rowId),
+                handleCellClassName: pins.reorder,
+                measureRef: virtualItem ? virtualizer.measureElement : undefined,
+            }
             : { ref: virtualItem ? virtualizer.measureElement : undefined };
         return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Row, { ...rowExtras, "data-index": virtualItem ? virtualItem.index : undefined, "aria-expanded": renderExpandedRow ? isExpanded : undefined, "aria-label": onRowClick ? rowLabel : undefined, className: ps_design_system_1.PallasoftClassNameService.merge('align-middle transition-colors', motion ? motion.className : '', onRowClick ? 'ps-focus-ring cursor-pointer hover:bg-mist/60' : 'hover:bg-mist/40', isExpanded ? 'bg-mist/40' : ''), onClick: onRowClick ? () => onRowClick(row) : undefined, onFocus: onRowHover ? () => onRowHover(row) : undefined, onPointerEnter: onRowHover ? () => onRowHover(row) : undefined, onKeyDown: onRowClick
                         ? (event) => {
@@ -288,13 +323,13 @@ const PsDataTable = ({ caption, className, columns, defaultSort, density = 'norm
                         }
                         : undefined, style: motion && motion.delayMs !== undefined
                         ? { animationDelay: `${motion.delayMs}ms` }
-                        : undefined, tabIndex: onRowClick ? 0 : undefined, children: [reorder && !api.isActive ? (0, jsx_runtime_1.jsx)("td", { className: 'w-9 pl-3 pr-0' }) : null, isSelectable ? ((0, jsx_runtime_1.jsx)("td", { className: 'w-10 pl-4 pr-0', onClick: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation(), children: (0, jsx_runtime_1.jsx)(ps_input_components_1.PsCheckbox, { isSelected: selectedIdSet.has(rowId), label: `Select ${rowLabel}`, onChange: () => toggleRow(rowId) }) })) : null, visibleColumns.map((column) => ((0, jsx_runtime_1.jsx)("td", { className: ps_design_system_1.PallasoftClassNameService.merge(densityClassNames[density].cell, alignClassNames[column.align !== null && column.align !== undefined ? column.align : 'left'], column.wrap ? '' : 'whitespace-nowrap', (layout === 'fixed' && !column.wrap) ||
+                        : undefined, tabIndex: onRowClick ? 0 : undefined, children: [reorder && !api.isActive ? ((0, jsx_runtime_1.jsx)("td", { className: ps_design_system_1.PallasoftClassNameService.merge('w-9 min-w-9 pl-3 pr-0', pins.reorder) })) : null, isSelectable ? ((0, jsx_runtime_1.jsx)("td", { className: ps_design_system_1.PallasoftClassNameService.merge('w-10 min-w-10 pl-4 pr-0', pins.select), onClick: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation(), children: (0, jsx_runtime_1.jsx)(ps_input_components_1.PsCheckbox, { isSelected: selectedIdSet.has(rowId), label: `Select ${rowLabel}`, onChange: () => toggleRow(rowId) }) })) : null, visibleColumns.map((column, columnIndex) => ((0, jsx_runtime_1.jsx)("td", { className: ps_design_system_1.PallasoftClassNameService.merge(densityClassNames[density].cell, placementOf(column, columnIndex), alignClassNames[column.align !== null && column.align !== undefined ? column.align : 'left'], column.wrap ? '' : 'whitespace-nowrap', (layout === 'fixed' && !column.wrap) ||
                                 ps_table_column_size_service_1.PsTableColumnSizeService.maxWidthOf(column) !== undefined
                                 ? 'truncate'
                                 : '', 'text-sm text-ink'), style: columnStyle(column), title: ps_table_cell_tooltip_service_1.PsTableCellTooltipService.forCell(column, row), children: column.render(row) }, column.id)))] }), renderExpandedRow ? ((0, jsx_runtime_1.jsx)("tr", { "aria-hidden": !isExpanded, className: isExpanded ? 'border-t-0' : 'border-0', children: (0, jsx_runtime_1.jsx)("td", { className: 'p-0', colSpan: columnCount, children: (0, jsx_runtime_1.jsx)(ps_motion_components_1.PsCollapse, { isOpen: isExpanded, children: (0, jsx_runtime_1.jsx)("div", { className: 'w-0 min-w-full border-l-2 border-primary bg-mist/40 px-4 py-4', children: renderExpandedRow(row) }) }) }) })) : null] }, rowId));
     };
     const renderEntries = (api, entries) => reorder
-        ? ps_table_reorder_service_1.PsTableReorderService.runs(entries, (entry) => reorder.groupKey(entry.row), (entry) => getRowId(entry.row)).map((run) => api.run(run.id, run.items.map((entry) => getRowId(entry.row)), run.items.map((entry) => renderRow(api, entry.row, entry.motion, entry.virtualItem))))
+        ? ps_table_reorder_service_1.PsTableReorderService.runs(entries, (entry) => reorderKey(entry.row), (entry) => getRowId(entry.row)).map((run) => api.run(run.id, run.items.map((entry) => getRowId(entry.row)), run.items.map((entry) => renderRow(api, entry.row, entry.motion, entry.virtualItem))))
         : entries.map((entry) => renderRow(api, entry.row, entry.motion, entry.virtualItem));
     if (isLoading)
         return ((0, jsx_runtime_1.jsx)(ps_core_components_1.PsSkeletonTable, { className: className, columns: visibleColumns.length, hasToolbar: hasToolbar, rows: table_config_1.PsTableConfig.skeletonRows }));
@@ -313,14 +348,14 @@ const PsDataTable = ({ caption, className, columns, defaultSort, density = 'norm
                                                     ? grouping.renderGroupSummary(group.rows)
                                                     : undefined }), (0, jsx_runtime_1.jsx)(ps_motion_components_1.PsCollapse, { isOpen: isExpanded && !closingGroupKeys.includes(group.key), children: renderCardList(group.rows, null) })] }, `group-${group.key}`));
                                 })
-                                : renderCardList(shouldVirtualize ? visibleRows.slice(0, cards.count) : visibleRows, visibleRows.length === 0 && isSearching ? ((0, jsx_runtime_1.jsx)(ps_table_searching_state_1.PsTableSearchingState, { label: searchingLabel, skeletonRows: table_config_1.PsTableConfig.searchingSkeletonRows })) : visibleRows.length === 0 && isQueried ? ((0, jsx_runtime_1.jsxs)("div", { className: 'px-4 py-10 text-center', children: [(0, jsx_runtime_1.jsx)("p", { className: 'text-sm font-semibold text-ink', children: table_config_1.PsTableConfig.noMatchesTitle }), (0, jsx_runtime_1.jsx)("button", { className: ps_design_system_1.PallasoftClassNameService.merge(ps_table_control_classes_1.PsTableControlClasses.textButton, 'mt-2 text-primary'), onClick: clearFilters, type: 'button', children: "Clear search and filters" })] })) : null), !grouping && shouldVirtualize && cards.count < visibleRows.length ? ((0, jsx_runtime_1.jsx)("div", { "aria-hidden": 'true', className: 'h-px', ref: cards.sentinelRef })) : null] })) : null, (0, jsx_runtime_1.jsx)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-scrollbar overflow-x-auto overflow-y-hidden', mobileLayout === 'cards' ? 'hidden sm:block' : ''), children: renderReorder((api) => ((0, jsx_runtime_1.jsxs)("table", { className: ps_design_system_1.PallasoftClassNameService.merge('w-full border-collapse text-left', layout === 'fixed' ? 'table-fixed' : ''), children: [caption ? (0, jsx_runtime_1.jsx)("caption", { className: 'sr-only', children: caption }) : null, (0, jsx_runtime_1.jsx)("thead", { className: 'bg-mist/70 text-[0.68rem] font-semibold uppercase tracking-[0.18em] text-ink/45', children: (0, jsx_runtime_1.jsxs)("tr", { children: [reorder ? ((0, jsx_runtime_1.jsx)("th", { className: 'w-9 pl-3 pr-0', scope: 'col', children: reorder.enabled ? ((0, jsx_runtime_1.jsx)("span", { className: 'sr-only', children: reorder.columnLabel })) : reorder.disabledReason ? ((0, jsx_runtime_1.jsx)("span", { "aria-label": reorder.disabledReason, className: 'inline-flex cursor-help opacity-40', role: 'img', title: reorder.disabledReason, children: (0, jsx_runtime_1.jsx)(ps_core_components_1.PsDragGrip, {}) })) : null })) : null, isSelectable ? ((0, jsx_runtime_1.jsx)("th", { className: 'w-10 pl-4 pr-0', scope: 'col', children: (0, jsx_runtime_1.jsx)(ps_input_components_1.PsCheckbox, { isIndeterminate: !isPageSelected && pageIds.some((rowId) => selectedIdSet.has(rowId)), isSelected: isPageSelected, label: 'Select all rows on this page', onChange: togglePage }) })) : null, visibleColumns.map((column) => {
+                                : renderCardList(shouldVirtualize ? visibleRows.slice(0, cards.count) : visibleRows, visibleRows.length === 0 && isSearching ? ((0, jsx_runtime_1.jsx)(ps_table_searching_state_1.PsTableSearchingState, { label: searchingLabel, skeletonRows: table_config_1.PsTableConfig.searchingSkeletonRows })) : visibleRows.length === 0 && isQueried ? ((0, jsx_runtime_1.jsxs)("div", { className: 'px-4 py-10 text-center', children: [(0, jsx_runtime_1.jsx)("p", { className: 'text-sm font-semibold text-ink', children: table_config_1.PsTableConfig.noMatchesTitle }), (0, jsx_runtime_1.jsx)("button", { className: ps_design_system_1.PallasoftClassNameService.merge(ps_table_control_classes_1.PsTableControlClasses.textButton, 'mt-2 text-primary'), onClick: clearFilters, type: 'button', children: "Clear search and filters" })] })) : null), !grouping && shouldVirtualize && cards.count < visibleRows.length ? ((0, jsx_runtime_1.jsx)("div", { "aria-hidden": 'true', className: 'h-px', ref: cards.sentinelRef })) : null] })) : null, (0, jsx_runtime_1.jsx)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-scrollbar overflow-x-auto overflow-y-hidden overscroll-x-contain', mobileLayout === 'cards' ? 'hidden sm:block' : ''), "data-overflow-end": overflow.edges.end, "data-overflow-start": overflow.edges.start, onScroll: overflow.update, ref: overflow.ref, children: renderReorder((api) => ((0, jsx_runtime_1.jsxs)("table", { className: ps_design_system_1.PallasoftClassNameService.merge('w-full border-collapse text-left', layout === 'fixed' ? 'table-fixed' : ''), children: [caption ? (0, jsx_runtime_1.jsx)("caption", { className: 'sr-only', children: caption }) : null, (0, jsx_runtime_1.jsx)("thead", { className: 'bg-mist/70 text-[0.68rem] font-semibold uppercase tracking-[0.18em] text-ink/45', children: (0, jsx_runtime_1.jsxs)("tr", { children: [reorder ? ((0, jsx_runtime_1.jsx)("th", { className: ps_design_system_1.PallasoftClassNameService.merge('w-9 min-w-9 pl-3 pr-0', pins.reorder), scope: 'col', children: reorder.enabled ? ((0, jsx_runtime_1.jsx)("span", { className: 'sr-only', children: reorder.columnLabel })) : reorder.disabledReason ? ((0, jsx_runtime_1.jsx)("span", { "aria-label": reorder.disabledReason, className: 'inline-flex cursor-help opacity-40', role: 'img', title: reorder.disabledReason, children: (0, jsx_runtime_1.jsx)(ps_core_components_1.PsDragGrip, {}) })) : null })) : null, isSelectable ? ((0, jsx_runtime_1.jsx)("th", { className: ps_design_system_1.PallasoftClassNameService.merge('w-10 min-w-10 pl-4 pr-0', pins.select), scope: 'col', children: (0, jsx_runtime_1.jsx)(ps_input_components_1.PsCheckbox, { isIndeterminate: !isPageSelected && pageIds.some((rowId) => selectedIdSet.has(rowId)), isSelected: isPageSelected, label: 'Select all rows on this page', onChange: togglePage }) })) : null, visibleColumns.map((column, columnIndex) => {
                                                 const align = column.align !== null && column.align !== undefined ? column.align : 'left';
                                                 const isSorted = sort !== null && sort.columnId === column.id;
                                                 return ((0, jsx_runtime_1.jsx)("th", { "aria-sort": isSorted
                                                         ? sort.direction
                                                         : column.sortValue && isQueryable
                                                             ? 'none'
-                                                            : undefined, className: ps_design_system_1.PallasoftClassNameService.merge(densityClassNames[density].head, alignClassNames[align], 'whitespace-nowrap'), scope: 'col', style: columnStyle(column), children: column.sortValue && isQueryable ? ((0, jsx_runtime_1.jsx)(ps_table_sort_header_1.PsTableSortHeader, { align: align, columnId: column.id, label: column.label, onSort: updateSort, sort: sort })) : (column.label) }, column.id));
+                                                            : undefined, className: ps_design_system_1.PallasoftClassNameService.merge(densityClassNames[density].head, alignClassNames[align], placementOf(column, columnIndex), 'whitespace-nowrap'), scope: 'col', style: columnStyle(column), children: column.sortValue && isQueryable ? ((0, jsx_runtime_1.jsx)(ps_table_sort_header_1.PsTableSortHeader, { align: align, columnId: column.id, label: column.label, onSort: updateSort, sort: sort })) : (column.label) }, column.id));
                                             })] }) }), (0, jsx_runtime_1.jsxs)("tbody", { className: 'divide-y divide-line', ref: bodyRef, children: [visibleRows.length === 0 && isSearching ? ((0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("td", { className: 'p-0', colSpan: columnCount, children: (0, jsx_runtime_1.jsx)(ps_table_searching_state_1.PsTableSearchingState, { label: searchingLabel, skeletonRows: table_config_1.PsTableConfig.searchingSkeletonRows }) }) })) : null, visibleRows.length === 0 && isQueried && !isSearching ? ((0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsxs)("td", { className: 'px-4 py-12 text-center', colSpan: columnCount, children: [(0, jsx_runtime_1.jsx)("p", { className: 'text-sm font-semibold text-ink', children: table_config_1.PsTableConfig.noMatchesTitle }), (0, jsx_runtime_1.jsx)("p", { className: 'mt-1 text-sm text-ink/55', children: table_config_1.PsTableConfig.noMatchesDescription }), (0, jsx_runtime_1.jsx)("button", { className: ps_design_system_1.PallasoftClassNameService.merge(ps_table_control_classes_1.PsTableControlClasses.textButton, 'mt-3 text-primary hover:underline'), onClick: clearFilters, type: 'button', children: "Clear search and filters" })] }) })) : null, grouping
                                             ? groups.map((group, groupIndex) => {
                                                 const isExpanded = isGroupExpanded(group.key, groupIndex);
@@ -342,7 +377,7 @@ const PsDataTable = ({ caption, className, columns, defaultSort, density = 'norm
                                                     }))),
                                                     (0, jsx_runtime_1.jsx)("tr", { "aria-hidden": 'true', children: (0, jsx_runtime_1.jsx)("td", { className: 'p-0', colSpan: columnCount, style: { height: virtualBottom } }) }, 'virtual-bottom'),
                                                 ]
-                                                : renderEntries(api, visibleRows.map((row) => ({ row })))] }), hasFooter ? ((0, jsx_runtime_1.jsx)("tfoot", { className: 'border-t-2 border-line bg-mist/50 text-sm font-semibold text-ink', children: (0, jsx_runtime_1.jsxs)("tr", { children: [reorder ? (0, jsx_runtime_1.jsx)("td", {}) : null, isSelectable ? (0, jsx_runtime_1.jsx)("td", {}) : null, visibleColumns.map((column) => ((0, jsx_runtime_1.jsx)("td", { className: ps_design_system_1.PallasoftClassNameService.merge(densityClassNames[density].cell, alignClassNames[column.align !== null && column.align !== undefined
+                                                : renderEntries(api, visibleRows.map((row) => ({ row })))] }), hasFooter ? ((0, jsx_runtime_1.jsx)("tfoot", { className: 'border-t-2 border-line bg-mist/50 text-sm font-semibold text-ink', children: (0, jsx_runtime_1.jsxs)("tr", { children: [reorder ? (0, jsx_runtime_1.jsx)("td", { className: pins.reorder }) : null, isSelectable ? (0, jsx_runtime_1.jsx)("td", { className: pins.select }) : null, visibleColumns.map((column, columnIndex) => ((0, jsx_runtime_1.jsx)("td", { className: ps_design_system_1.PallasoftClassNameService.merge(densityClassNames[density].cell, placementOf(column, columnIndex), alignClassNames[column.align !== null && column.align !== undefined
                                                     ? column.align
                                                     : 'left'], 'whitespace-nowrap'), children: column.footer }, column.id)))] }) })) : null] }))) }), visibleRows.length > 0 && isSearching ? ((0, jsx_runtime_1.jsx)(ps_table_searching_state_1.PsTableSearchingState, { className: 'border-t border-line py-3', label: searchingLabel })) : null, pageSize && (!grouping || isServerPaginated) ? ((0, jsx_runtime_1.jsx)(ps_table_pagination_1.PsTablePagination, { isPartial: isPartial, loadedPageCount: pageCountOf(loadedRowCount), onPageChange: changePage, page: safePage, pageCount: pageCount, pageSize: pageSize, totalRows: rowCount })) : null] })] }));
 };

package/dist/components/ps-table-reorder-frame.js

@@ -6,24 +6,37 @@ const core_1 = require("@dnd-kit/core");
 const sortable_1 = require("@dnd-kit/sortable");
 const ps_core_components_1 = require("@pallasoft/ps-core-components");
 const use_ps_table_reorder_1 = require("../hooks/use-ps-table-reorder");
+const ps_table_reorder_service_1 = require("../services/ps-table-reorder-service");
 const ps_table_sortable_row_1 = require("./ps-table-sortable-row");
 const PsTableReorderFrame = ({ children, renderOverlay, ...input }) => {
-    const { activeId, activeRunId, contextProps, placements } = (0, use_ps_table_reorder_1.usePsTableReorder)(input);
+    const { activeId, activeRunId, contextProps, drop, placements } = (0, use_ps_table_reorder_1.usePsTableReorder)(input);
     const itemById = new Map(input.items.map((item) => [item.id, item]));
+    const { nesting } = input;
     const api = {
         isActive: true,
         Row: ps_table_sortable_row_1.PsTableSortableRow,
         rowProps: (rowId) => {
             const item = itemById.get(rowId);
             const placement = placements.get(rowId);
+            if (nesting !== undefined)
+                return {
+                    dropPlacement: drop !== null && drop.overId === rowId ? drop.placement : null,
+                    handleLabel: item === undefined ? '' : item.handleLabel,
+                    hasHandle: item !== undefined && input.enabled && nesting.canDrag(rowId),
+                    isDisabled: !input.enabled,
+                    isDropTarget: item !== undefined,
+                    rowId,
+                };
             return {
+                dropPlacement: null,
                 handleLabel: item === undefined ? '' : item.handleLabel,
                 hasHandle: item !== undefined && input.enabled && placement !== undefined && placement.size > 1,
                 isDisabled: activeRunId !== null && (placement === undefined || placement.runId !== activeRunId),
+                isDropTarget: false,
                 rowId,
             };
         },
-        run: (runId, ids, runChildren) => ((0, jsx_runtime_1.jsx)(sortable_1.SortableContext, { items: ids, strategy: sortable_1.verticalListSortingStrategy, children: runChildren }, runId)),
+        run: (runId, ids, runChildren) => ((0, jsx_runtime_1.jsx)(sortable_1.SortableContext, { items: ids, strategy: nesting === undefined ? sortable_1.verticalListSortingStrategy : ps_table_reorder_service_1.PsTableReorderService.still, children: runChildren }, runId)),
     };
     return ((0, jsx_runtime_1.jsxs)(core_1.DndContext, { ...contextProps, children: [children(api), (0, jsx_runtime_1.jsx)(ps_core_components_1.PsDragOverlay, { className: ps_core_components_1.PsDragClasses.lifted, frames: ps_core_components_1.PsDragListLiftFrames, children: activeId === null ? null : renderOverlay(activeId) })] }));
 };

package/dist/components/ps-table-reorder-handle.js

@@ -4,5 +4,5 @@ exports.PsTableReorderHandle = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ps_core_components_1 = require("@pallasoft/ps-core-components");
 const ps_design_system_1 = require("@pallasoft/ps-design-system");
-const PsTableReorderHandle = ({ activatorRef, className, label, ...buttonProps }) => ((0, jsx_runtime_1.jsx)("button", { ...buttonProps, "aria-label": label, className: ps_design_system_1.PallasoftClassNameService.merge('ps-focus-ring flex h-7 w-6 shrink-0 cursor-grab touch-none items-center justify-center rounded-ps-control text-ink/40 transition-colors hover:bg-mist hover:text-ink active:cursor-grabbing', className), onClick: (event) => event.stopPropagation(), ref: activatorRef, title: label, type: 'button', children: (0, jsx_runtime_1.jsx)(ps_core_components_1.PsDragGrip, {}) }));
+const PsTableReorderHandle = ({ activatorRef, className, label, ...buttonProps }) => ((0, jsx_runtime_1.jsx)("button", { ...buttonProps, "aria-label": label, className: ps_design_system_1.PallasoftClassNameService.merge('ps-focus-ring ps-touch-target relative flex h-7 w-6 shrink-0 cursor-grab touch-none items-center justify-center rounded-ps-control text-ink/40 transition-colors hover:bg-mist hover:text-ink active:cursor-grabbing', className), onClick: (event) => event.stopPropagation(), ref: activatorRef, title: label, type: 'button', children: (0, jsx_runtime_1.jsx)(ps_core_components_1.PsDragGrip, {}) }));
 exports.PsTableReorderHandle = PsTableReorderHandle;

package/dist/components/ps-table-sort-header.js

@@ -13,6 +13,6 @@ const PsTableSortHeader = ({ align, columnId, label, onSort, sort, }) => {
             : ps_icons_1.PsIconKey.SortDescending;
     return ((0, jsx_runtime_1.jsxs)("button", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-focus-ring group inline-flex items-center gap-1 rounded-ps-control uppercase tracking-[0.18em] transition-colors hover:text-ink', align === 'right' ? 'flex-row-reverse' : '', isSorted ? 'text-ink' : ''), onClick: () => onSort(columnId), type: 'button', children: [(0, jsx_runtime_1.jsx)("span", { children: label }), (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: ps_design_system_1.PallasoftClassNameService.merge('block h-3.5 w-3.5 shrink-0', isSorted
                     ? 'text-primary'
-                    : 'opacity-0 group-hover:opacity-60 group-focus-visible:opacity-60'), iconKey: iconKey })] }));
+                    : 'opacity-0 group-hover:opacity-60 group-focus-visible:opacity-60 [@media(hover:none)]:opacity-40'), iconKey: iconKey })] }));
 };
 exports.PsTableSortHeader = PsTableSortHeader;

package/dist/components/ps-table-sortable-row.d.ts

@@ -1,9 +1,13 @@
 import type { ComponentProps } from 'react';
+import type { PsTableDropPlacement } from '../constants/ps-table-drop-placement';
 export interface PsTableSortableRowProps extends Omit<ComponentProps<'tr'>, 'ref'> {
+    dropPlacement?: PsTableDropPlacement | null;
+    handleCellClassName?: string;
     handleLabel: string;
     hasHandle: boolean;
     isDisabled: boolean;
+    isDropTarget?: boolean;
     measureRef?: (element: HTMLTableRowElement | null) => void;
     rowId: string;
 }
-export declare const PsTableSortableRow: ({ children, className, handleLabel, hasHandle, isDisabled, measureRef, rowId, style, ...rowProps }: PsTableSortableRowProps) => import("react").JSX.Element;
+export declare const PsTableSortableRow: ({ children, className, dropPlacement, handleCellClassName, handleLabel, hasHandle, isDisabled, isDropTarget, measureRef, rowId, style, ...rowProps }: PsTableSortableRowProps) => import("react").JSX.Element;

package/dist/components/ps-table-sortable-row.js

@@ -5,10 +5,18 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const sortable_1 = require("@dnd-kit/sortable");
 const utilities_1 = require("@dnd-kit/utilities");
 const ps_core_components_1 = require("@pallasoft/ps-core-components");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const ps_table_drop_classes_1 = require("../constants/ps-table-drop-classes");
 const ps_table_reorder_handle_1 = require("./ps-table-reorder-handle");
-const PsTableSortableRow = ({ children, className, handleLabel, hasHandle, isDisabled, measureRef, rowId, style, ...rowProps }) => {
-    const { attributes, isDragging, listeners, setActivatorNodeRef, setNodeRef, transform, transition, } = (0, sortable_1.useSortable)({ disabled: isDisabled || !hasHandle, id: rowId });
-    return ((0, jsx_runtime_1.jsxs)("tr", { ...rowProps, className: className, ref: (element) => {
+const PsTableSortableRow = ({ children, className, dropPlacement = null, handleCellClassName, handleLabel, hasHandle, isDisabled, isDropTarget = false, measureRef, rowId, style, ...rowProps }) => {
+    const { attributes, isDragging, listeners, setActivatorNodeRef, setNodeRef, transform, transition, } = (0, sortable_1.useSortable)({
+        disabled: {
+            draggable: isDisabled || !hasHandle,
+            droppable: isDisabled || (!hasHandle && !isDropTarget),
+        },
+        id: rowId,
+    });
+    return ((0, jsx_runtime_1.jsxs)("tr", { ...rowProps, className: ps_design_system_1.PallasoftClassNameService.merge(className, dropPlacement === null ? '' : ps_table_drop_classes_1.PsTableDropClasses[dropPlacement]), ref: (element) => {
             setNodeRef(element);
             if (measureRef)
                 measureRef(element);
@@ -17,6 +25,6 @@ const PsTableSortableRow = ({ children, className, handleLabel, hasHandle, isDis
             opacity: isDragging ? ps_core_components_1.PsDragConfig.placeholderOpacity : style?.opacity,
             transform: utilities_1.CSS.Translate.toString(transform),
             transition,
-        }, children: [(0, jsx_runtime_1.jsx)("td", { className: 'w-9 pl-3 pr-0', onClick: (event) => event.stopPropagation(), children: hasHandle ? ((0, jsx_runtime_1.jsx)(ps_table_reorder_handle_1.PsTableReorderHandle, { ...attributes, ...listeners, activatorRef: setActivatorNodeRef, label: handleLabel })) : null }), children] }));
+        }, children: [(0, jsx_runtime_1.jsx)("td", { className: ps_design_system_1.PallasoftClassNameService.merge('w-9 min-w-9 pl-3 pr-0', handleCellClassName), onClick: (event) => event.stopPropagation(), children: hasHandle ? ((0, jsx_runtime_1.jsx)(ps_table_reorder_handle_1.PsTableReorderHandle, { ...attributes, ...listeners, activatorRef: setActivatorNodeRef, label: handleLabel })) : null }), children] }));
 };
 exports.PsTableSortableRow = PsTableSortableRow;

package/dist/constants/ps-table-drop-classes.d.ts

@@ -0,0 +1,2 @@
+import { PsTableDropPlacement } from './ps-table-drop-placement';
+export declare const PsTableDropClasses: Record<PsTableDropPlacement, string>;

package/dist/constants/ps-table-drop-classes.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsTableDropClasses = void 0;
+exports.PsTableDropClasses = {
+    after: '[&>td]:shadow-[inset_0_-2px_0_0_rgb(var(--ps-color-primary-rgb))]',
+    before: '[&>td]:shadow-[inset_0_2px_0_0_rgb(var(--ps-color-primary-rgb))]',
+    into: 'bg-primary/10 [&>td]:shadow-[inset_0_0_0_2px_rgb(var(--ps-color-primary-rgb)/0.5)]',
+};

package/dist/constants/ps-table-drop-placement.d.ts

@@ -0,0 +1,6 @@
+export declare const PsTableDropPlacement: {
+    readonly after: "after";
+    readonly before: "before";
+    readonly into: "into";
+};
+export type PsTableDropPlacement = (typeof PsTableDropPlacement)[keyof typeof PsTableDropPlacement];

package/dist/constants/ps-table-drop-placement.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsTableDropPlacement = void 0;
+exports.PsTableDropPlacement = {
+    after: 'after',
+    before: 'before',
+    into: 'into',
+};

package/dist/constants/ps-table-pin-classes.d.ts

@@ -0,0 +1,16 @@
+export declare const PsTablePinClasses: {
+    readonly cell: "ps-table-pin";
+    readonly edge: "ps-table-pin-start-edge";
+    readonly end: "ps-table-pin ps-table-pin-end right-0";
+    readonly first: {
+        readonly both: "left-[4.75rem]";
+        readonly none: "left-0";
+        readonly reorder: "left-9";
+        readonly select: "left-10";
+    };
+    readonly reorder: "left-0";
+    readonly select: {
+        readonly alone: "left-0";
+        readonly withReorder: "left-9";
+    };
+};

package/dist/constants/ps-table-pin-classes.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsTablePinClasses = void 0;
+exports.PsTablePinClasses = {
+    cell: 'ps-table-pin',
+    edge: 'ps-table-pin-start-edge',
+    end: 'ps-table-pin ps-table-pin-end right-0',
+    first: {
+        both: 'left-[4.75rem]',
+        none: 'left-0',
+        reorder: 'left-9',
+        select: 'left-10',
+    },
+    reorder: 'left-0',
+    select: {
+        alone: 'left-0',
+        withReorder: 'left-9',
+    },
+};

package/dist/constants/table-breakpoint.d.ts

@@ -0,0 +1,7 @@
+export declare const PsTableBreakpoint: {
+    readonly md: "md";
+    readonly lg: "lg";
+    readonly xl: "xl";
+};
+export type PsTableBreakpoint = (typeof PsTableBreakpoint)[keyof typeof PsTableBreakpoint];
+export declare const PsTableHideBelowClasses: Record<PsTableBreakpoint, string>;

package/dist/constants/table-breakpoint.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsTableHideBelowClasses = exports.PsTableBreakpoint = void 0;
+exports.PsTableBreakpoint = {
+    md: 'md',
+    lg: 'lg',
+    xl: 'xl',
+};
+exports.PsTableHideBelowClasses = {
+    md: 'hidden md:table-cell',
+    lg: 'hidden lg:table-cell',
+    xl: 'hidden xl:table-cell',
+};

package/dist/esm/components/ps-data-table.js

@@ -1,18 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Fragment, Suspense, lazy, useDeferredValue, useEffect, useMemo, useRef, useState, } from 'react';
+import { Fragment, Suspense, lazy, useCallback, useDeferredValue, useEffect, useMemo, useRef, useState, } from 'react';
 import { PsDragGrip, PsSkeletonTable } from '@pallasoft/ps-core-components';
 import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
 import { PsCheckbox } from '@pallasoft/ps-input-components';
 import { PsCollapse } from '@pallasoft/ps-motion-components';
 import { useVirtualizer, useWindowVirtualizer } from '@tanstack/react-virtual';
 import { PsTableControlClasses } from '../constants/ps-table-control-classes';
+import { PsTableHideBelowClasses } from '../constants/table-breakpoint';
 import { PsTableConfig } from '../constants/table-config';
 import { usePsIncrementalCount } from '../hooks/use-ps-incremental-count';
 import { usePsScrollAnchor } from '../hooks/use-ps-scroll-anchor';
+import { usePsTableOverflow } from '../hooks/use-ps-table-overflow';
 import { usePsTableStreamStatus } from '../hooks/use-ps-table-stream-status';
 import { PsTableCellTooltipService } from '../services/ps-table-cell-tooltip-service';
 import { PsTableColumnSizeService } from '../services/ps-table-column-size-service';
 import { PsTableGroupService } from '../services/ps-table-group-service';
+import { PsTablePinService } from '../services/ps-table-pin-service';
 import { PsTableQueryService } from '../services/ps-table-query-service';
 import { PsTableReorderService } from '../services/ps-table-reorder-service';
 import { PsTableScrollService } from '../services/ps-table-scroll-service';
@@ -45,7 +48,7 @@ const alignClassNames = {
     left: 'text-left',
     right: 'text-right tabular-nums',
 };
-export const PsDataTable = ({ caption, className, columns, defaultSort, density = 'normal', expandedRowIds, mobileLayout = 'cards', getBulkActions, getRowId, getRowLabel, getSearchText, grouping, isLoading = false, isPending = false, layout = 'auto', onPageChange, onQueryChange, onRowClick, onRowHover, page, pageSize, query, renderExpandedRow, reorder, rows, searchingLabel = PsTableConfig.searchingLabel, searchPlaceholder = PsTableConfig.searchPlaceholder, toolbarActions, totalRows, }) => {
+export const PsDataTable = ({ caption, className, columns, defaultSort, density = 'normal', expandedRowIds, mobileLayout = 'cards', getBulkActions, getRowId, getRowLabel, getSearchText, grouping, isLoading = false, isPending = false, layout = 'auto', onPageChange, onQueryChange, onRowClick, onRowHover, page, pageSize, pinFirstColumn = true, query, renderExpandedRow, reorder, rows, searchingLabel = PsTableConfig.searchingLabel, searchPlaceholder = PsTableConfig.searchPlaceholder, toolbarActions, totalRows, }) => {
     const containerRef = useRef(null);
     const [uncontrolledPage, setUncontrolledPage] = useState(1);
     const [uncontrolledQuery, setUncontrolledQuery] = useState(() => PsTableQueryService.empty(defaultSort ? defaultSort : null));
@@ -70,6 +73,9 @@ export const PsDataTable = ({ caption, className, columns, defaultSort, density
     const hasToolbar = isSearchable || hasFilters || Boolean(toolbarActions);
     const isSelectable = Boolean(getBulkActions);
     const columnCount = visibleColumns.length + (isSelectable ? 1 : 0) + (reorder ? 1 : 0);
+    const pins = PsTablePinService.leading(pinFirstColumn, Boolean(reorder), isSelectable);
+    const placementOf = (column, columnIndex) => PallasoftClassNameService.merge(column.hideBelow === undefined ? '' : PsTableHideBelowClasses[column.hideBelow], columnIndex === 0 ? pins.first : '', PsTablePinService.end(column.pinEnd === true));
+    const overflow = usePsTableOverflow(`${visibleColumns.map((column) => column.id).join(',')}:${rows.length}`);
     const deferredSearch = useDeferredValue(search);
     const queriedRows = useMemo(() => isServerPaginated
         ? rows
@@ -139,23 +145,48 @@ export const PsDataTable = ({ caption, className, columns, defaultSort, density
         safePage,
         toggledGroupKeys,
     ]);
+    const reorderKey = useCallback((row) => reorder && reorder.groupKey ? reorder.groupKey(row) : PsTableReorderService.treeKey, [reorder]);
+    const nestingBinding = useMemo(() => {
+        if (reorder === undefined || reorder.nesting === undefined)
+            return undefined;
+        const { nesting } = reorder;
+        const find = (id) => visibleRows.find((candidate) => getRowId(candidate) === id);
+        return {
+            announcements: nesting.announcements,
+            canDrag: (id) => {
+                const row = find(id);
+                return row !== undefined && nesting.canDrag(row);
+            },
+            canDrop: (activeId, targetId, placement) => {
+                const active = find(activeId);
+                const target = find(targetId);
+                return (active !== undefined && target !== undefined && nesting.canDrop(active, target, placement));
+            },
+            onMove: (activeId, targetId, placement) => {
+                const active = find(activeId);
+                const target = find(targetId);
+                if (active !== undefined && target !== undefined)
+                    nesting.onMove(active, target, placement);
+            },
+        };
+    }, [getRowId, reorder, visibleRows]);
     const reorderItems = useMemo(() => reorder
         ? visibleRows.map((row) => {
             const rowId = getRowId(row);
             const label = getRowLabel ? getRowLabel(row) : rowId;
             return {
-                groupKey: reorder.groupKey(row),
+                groupKey: reorderKey(row),
                 handleLabel: reorder.getHandleLabel(label),
                 id: rowId,
                 label,
             };
         })
-        : [], [getRowId, getRowLabel, reorder, visibleRows]);
+        : [], [getRowId, getRowLabel, reorder, reorderKey, visibleRows]);
     const renderOverlayRow = (rowId) => {
         const row = visibleRows.find((candidate) => getRowId(candidate) === rowId);
         return row === undefined ? null : (_jsx("table", { className: 'w-full table-fixed border-collapse bg-surface text-left', children: _jsx("tbody", { children: renderRow(PsTableReorderService.plain, row) }) }));
     };
-    const renderReorder = (children) => reorder === undefined ? (children(PsTableReorderService.plain)) : (_jsx(Suspense, { fallback: children(PsTableReorderService.plain), children: _jsx(LazyReorderFrame, { announcements: reorder.announcements, enabled: reorder.enabled, instructions: reorder.instructions, items: reorderItems, onReorder: reorder.onReorder, renderOverlay: renderOverlayRow, children: children }) }));
+    const renderReorder = (children) => reorder === undefined ? (children(PsTableReorderService.plain)) : (_jsx(Suspense, { fallback: children(PsTableReorderService.plain), children: _jsx(LazyReorderFrame, { announcements: reorder.announcements, enabled: reorder.enabled, instructions: reorder.instructions, items: reorderItems, nesting: nestingBinding, onReorder: reorder.onReorder, renderOverlay: renderOverlayRow, children: children }) }));
     const changePage = (next) => {
         if (onPageChange) {
             onPageChange(next);
@@ -239,7 +270,11 @@ export const PsDataTable = ({ caption, className, columns, defaultSort, density
         const rowLabel = getRowLabel ? getRowLabel(row) : rowId;
         const Row = api.Row;
         const rowExtras = api.isActive
-            ? { ...api.rowProps(rowId), measureRef: virtualItem ? virtualizer.measureElement : undefined }
+            ? {
+                ...api.rowProps(rowId),
+                handleCellClassName: pins.reorder,
+                measureRef: virtualItem ? virtualizer.measureElement : undefined,
+            }
             : { ref: virtualItem ? virtualizer.measureElement : undefined };
         return (_jsxs(Fragment, { children: [_jsxs(Row, { ...rowExtras, "data-index": virtualItem ? virtualItem.index : undefined, "aria-expanded": renderExpandedRow ? isExpanded : undefined, "aria-label": onRowClick ? rowLabel : undefined, className: PallasoftClassNameService.merge('align-middle transition-colors', motion ? motion.className : '', onRowClick ? 'ps-focus-ring cursor-pointer hover:bg-mist/60' : 'hover:bg-mist/40', isExpanded ? 'bg-mist/40' : ''), onClick: onRowClick ? () => onRowClick(row) : undefined, onFocus: onRowHover ? () => onRowHover(row) : undefined, onPointerEnter: onRowHover ? () => onRowHover(row) : undefined, onKeyDown: onRowClick
                         ? (event) => {
@@ -252,13 +287,13 @@ export const PsDataTable = ({ caption, className, columns, defaultSort, density
                         }
                         : undefined, style: motion && motion.delayMs !== undefined
                         ? { animationDelay: `${motion.delayMs}ms` }
-                        : undefined, tabIndex: onRowClick ? 0 : undefined, children: [reorder && !api.isActive ? _jsx("td", { className: 'w-9 pl-3 pr-0' }) : null, isSelectable ? (_jsx("td", { className: 'w-10 pl-4 pr-0', onClick: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation(), children: _jsx(PsCheckbox, { isSelected: selectedIdSet.has(rowId), label: `Select ${rowLabel}`, onChange: () => toggleRow(rowId) }) })) : null, visibleColumns.map((column) => (_jsx("td", { className: PallasoftClassNameService.merge(densityClassNames[density].cell, alignClassNames[column.align !== null && column.align !== undefined ? column.align : 'left'], column.wrap ? '' : 'whitespace-nowrap', (layout === 'fixed' && !column.wrap) ||
+                        : undefined, tabIndex: onRowClick ? 0 : undefined, children: [reorder && !api.isActive ? (_jsx("td", { className: PallasoftClassNameService.merge('w-9 min-w-9 pl-3 pr-0', pins.reorder) })) : null, isSelectable ? (_jsx("td", { className: PallasoftClassNameService.merge('w-10 min-w-10 pl-4 pr-0', pins.select), onClick: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation(), children: _jsx(PsCheckbox, { isSelected: selectedIdSet.has(rowId), label: `Select ${rowLabel}`, onChange: () => toggleRow(rowId) }) })) : null, visibleColumns.map((column, columnIndex) => (_jsx("td", { className: PallasoftClassNameService.merge(densityClassNames[density].cell, placementOf(column, columnIndex), alignClassNames[column.align !== null && column.align !== undefined ? column.align : 'left'], column.wrap ? '' : 'whitespace-nowrap', (layout === 'fixed' && !column.wrap) ||
                                 PsTableColumnSizeService.maxWidthOf(column) !== undefined
                                 ? 'truncate'
                                 : '', 'text-sm text-ink'), style: columnStyle(column), title: PsTableCellTooltipService.forCell(column, row), children: column.render(row) }, column.id)))] }), renderExpandedRow ? (_jsx("tr", { "aria-hidden": !isExpanded, className: isExpanded ? 'border-t-0' : 'border-0', children: _jsx("td", { className: 'p-0', colSpan: columnCount, children: _jsx(PsCollapse, { isOpen: isExpanded, children: _jsx("div", { className: 'w-0 min-w-full border-l-2 border-primary bg-mist/40 px-4 py-4', children: renderExpandedRow(row) }) }) }) })) : null] }, rowId));
     };
     const renderEntries = (api, entries) => reorder
-        ? PsTableReorderService.runs(entries, (entry) => reorder.groupKey(entry.row), (entry) => getRowId(entry.row)).map((run) => api.run(run.id, run.items.map((entry) => getRowId(entry.row)), run.items.map((entry) => renderRow(api, entry.row, entry.motion, entry.virtualItem))))
+        ? PsTableReorderService.runs(entries, (entry) => reorderKey(entry.row), (entry) => getRowId(entry.row)).map((run) => api.run(run.id, run.items.map((entry) => getRowId(entry.row)), run.items.map((entry) => renderRow(api, entry.row, entry.motion, entry.virtualItem))))
         : entries.map((entry) => renderRow(api, entry.row, entry.motion, entry.virtualItem));
     if (isLoading)
         return (_jsx(PsSkeletonTable, { className: className, columns: visibleColumns.length, hasToolbar: hasToolbar, rows: PsTableConfig.skeletonRows }));
@@ -277,14 +312,14 @@ export const PsDataTable = ({ caption, className, columns, defaultSort, density
                                                     ? grouping.renderGroupSummary(group.rows)
                                                     : undefined }), _jsx(PsCollapse, { isOpen: isExpanded && !closingGroupKeys.includes(group.key), children: renderCardList(group.rows, null) })] }, `group-${group.key}`));
                                 })
-                                : renderCardList(shouldVirtualize ? visibleRows.slice(0, cards.count) : visibleRows, visibleRows.length === 0 && isSearching ? (_jsx(PsTableSearchingState, { label: searchingLabel, skeletonRows: PsTableConfig.searchingSkeletonRows })) : visibleRows.length === 0 && isQueried ? (_jsxs("div", { className: 'px-4 py-10 text-center', children: [_jsx("p", { className: 'text-sm font-semibold text-ink', children: PsTableConfig.noMatchesTitle }), _jsx("button", { className: PallasoftClassNameService.merge(PsTableControlClasses.textButton, 'mt-2 text-primary'), onClick: clearFilters, type: 'button', children: "Clear search and filters" })] })) : null), !grouping && shouldVirtualize && cards.count < visibleRows.length ? (_jsx("div", { "aria-hidden": 'true', className: 'h-px', ref: cards.sentinelRef })) : null] })) : null, _jsx("div", { className: PallasoftClassNameService.merge('ps-scrollbar overflow-x-auto overflow-y-hidden', mobileLayout === 'cards' ? 'hidden sm:block' : ''), children: renderReorder((api) => (_jsxs("table", { className: PallasoftClassNameService.merge('w-full border-collapse text-left', layout === 'fixed' ? 'table-fixed' : ''), children: [caption ? _jsx("caption", { className: 'sr-only', children: caption }) : null, _jsx("thead", { className: 'bg-mist/70 text-[0.68rem] font-semibold uppercase tracking-[0.18em] text-ink/45', children: _jsxs("tr", { children: [reorder ? (_jsx("th", { className: 'w-9 pl-3 pr-0', scope: 'col', children: reorder.enabled ? (_jsx("span", { className: 'sr-only', children: reorder.columnLabel })) : reorder.disabledReason ? (_jsx("span", { "aria-label": reorder.disabledReason, className: 'inline-flex cursor-help opacity-40', role: 'img', title: reorder.disabledReason, children: _jsx(PsDragGrip, {}) })) : null })) : null, isSelectable ? (_jsx("th", { className: 'w-10 pl-4 pr-0', scope: 'col', children: _jsx(PsCheckbox, { isIndeterminate: !isPageSelected && pageIds.some((rowId) => selectedIdSet.has(rowId)), isSelected: isPageSelected, label: 'Select all rows on this page', onChange: togglePage }) })) : null, visibleColumns.map((column) => {
+                                : renderCardList(shouldVirtualize ? visibleRows.slice(0, cards.count) : visibleRows, visibleRows.length === 0 && isSearching ? (_jsx(PsTableSearchingState, { label: searchingLabel, skeletonRows: PsTableConfig.searchingSkeletonRows })) : visibleRows.length === 0 && isQueried ? (_jsxs("div", { className: 'px-4 py-10 text-center', children: [_jsx("p", { className: 'text-sm font-semibold text-ink', children: PsTableConfig.noMatchesTitle }), _jsx("button", { className: PallasoftClassNameService.merge(PsTableControlClasses.textButton, 'mt-2 text-primary'), onClick: clearFilters, type: 'button', children: "Clear search and filters" })] })) : null), !grouping && shouldVirtualize && cards.count < visibleRows.length ? (_jsx("div", { "aria-hidden": 'true', className: 'h-px', ref: cards.sentinelRef })) : null] })) : null, _jsx("div", { className: PallasoftClassNameService.merge('ps-scrollbar overflow-x-auto overflow-y-hidden overscroll-x-contain', mobileLayout === 'cards' ? 'hidden sm:block' : ''), "data-overflow-end": overflow.edges.end, "data-overflow-start": overflow.edges.start, onScroll: overflow.update, ref: overflow.ref, children: renderReorder((api) => (_jsxs("table", { className: PallasoftClassNameService.merge('w-full border-collapse text-left', layout === 'fixed' ? 'table-fixed' : ''), children: [caption ? _jsx("caption", { className: 'sr-only', children: caption }) : null, _jsx("thead", { className: 'bg-mist/70 text-[0.68rem] font-semibold uppercase tracking-[0.18em] text-ink/45', children: _jsxs("tr", { children: [reorder ? (_jsx("th", { className: PallasoftClassNameService.merge('w-9 min-w-9 pl-3 pr-0', pins.reorder), scope: 'col', children: reorder.enabled ? (_jsx("span", { className: 'sr-only', children: reorder.columnLabel })) : reorder.disabledReason ? (_jsx("span", { "aria-label": reorder.disabledReason, className: 'inline-flex cursor-help opacity-40', role: 'img', title: reorder.disabledReason, children: _jsx(PsDragGrip, {}) })) : null })) : null, isSelectable ? (_jsx("th", { className: PallasoftClassNameService.merge('w-10 min-w-10 pl-4 pr-0', pins.select), scope: 'col', children: _jsx(PsCheckbox, { isIndeterminate: !isPageSelected && pageIds.some((rowId) => selectedIdSet.has(rowId)), isSelected: isPageSelected, label: 'Select all rows on this page', onChange: togglePage }) })) : null, visibleColumns.map((column, columnIndex) => {
                                                 const align = column.align !== null && column.align !== undefined ? column.align : 'left';
                                                 const isSorted = sort !== null && sort.columnId === column.id;
                                                 return (_jsx("th", { "aria-sort": isSorted
                                                         ? sort.direction
                                                         : column.sortValue && isQueryable
                                                             ? 'none'
-                                                            : undefined, className: PallasoftClassNameService.merge(densityClassNames[density].head, alignClassNames[align], 'whitespace-nowrap'), scope: 'col', style: columnStyle(column), children: column.sortValue && isQueryable ? (_jsx(PsTableSortHeader, { align: align, columnId: column.id, label: column.label, onSort: updateSort, sort: sort })) : (column.label) }, column.id));
+                                                            : undefined, className: PallasoftClassNameService.merge(densityClassNames[density].head, alignClassNames[align], placementOf(column, columnIndex), 'whitespace-nowrap'), scope: 'col', style: columnStyle(column), children: column.sortValue && isQueryable ? (_jsx(PsTableSortHeader, { align: align, columnId: column.id, label: column.label, onSort: updateSort, sort: sort })) : (column.label) }, column.id));
                                             })] }) }), _jsxs("tbody", { className: 'divide-y divide-line', ref: bodyRef, children: [visibleRows.length === 0 && isSearching ? (_jsx("tr", { children: _jsx("td", { className: 'p-0', colSpan: columnCount, children: _jsx(PsTableSearchingState, { label: searchingLabel, skeletonRows: PsTableConfig.searchingSkeletonRows }) }) })) : null, visibleRows.length === 0 && isQueried && !isSearching ? (_jsx("tr", { children: _jsxs("td", { className: 'px-4 py-12 text-center', colSpan: columnCount, children: [_jsx("p", { className: 'text-sm font-semibold text-ink', children: PsTableConfig.noMatchesTitle }), _jsx("p", { className: 'mt-1 text-sm text-ink/55', children: PsTableConfig.noMatchesDescription }), _jsx("button", { className: PallasoftClassNameService.merge(PsTableControlClasses.textButton, 'mt-3 text-primary hover:underline'), onClick: clearFilters, type: 'button', children: "Clear search and filters" })] }) })) : null, grouping
                                             ? groups.map((group, groupIndex) => {
                                                 const isExpanded = isGroupExpanded(group.key, groupIndex);
@@ -306,7 +341,7 @@ export const PsDataTable = ({ caption, className, columns, defaultSort, density
                                                     }))),
                                                     _jsx("tr", { "aria-hidden": 'true', children: _jsx("td", { className: 'p-0', colSpan: columnCount, style: { height: virtualBottom } }) }, 'virtual-bottom'),
                                                 ]
-                                                : renderEntries(api, visibleRows.map((row) => ({ row })))] }), hasFooter ? (_jsx("tfoot", { className: 'border-t-2 border-line bg-mist/50 text-sm font-semibold text-ink', children: _jsxs("tr", { children: [reorder ? _jsx("td", {}) : null, isSelectable ? _jsx("td", {}) : null, visibleColumns.map((column) => (_jsx("td", { className: PallasoftClassNameService.merge(densityClassNames[density].cell, alignClassNames[column.align !== null && column.align !== undefined
+                                                : renderEntries(api, visibleRows.map((row) => ({ row })))] }), hasFooter ? (_jsx("tfoot", { className: 'border-t-2 border-line bg-mist/50 text-sm font-semibold text-ink', children: _jsxs("tr", { children: [reorder ? _jsx("td", { className: pins.reorder }) : null, isSelectable ? _jsx("td", { className: pins.select }) : null, visibleColumns.map((column, columnIndex) => (_jsx("td", { className: PallasoftClassNameService.merge(densityClassNames[density].cell, placementOf(column, columnIndex), alignClassNames[column.align !== null && column.align !== undefined
                                                     ? column.align
                                                     : 'left'], 'whitespace-nowrap'), children: column.footer }, column.id)))] }) })) : null] }))) }), visibleRows.length > 0 && isSearching ? (_jsx(PsTableSearchingState, { className: 'border-t border-line py-3', label: searchingLabel })) : null, pageSize && (!grouping || isServerPaginated) ? (_jsx(PsTablePagination, { isPartial: isPartial, loadedPageCount: pageCountOf(loadedRowCount), onPageChange: changePage, page: safePage, pageCount: pageCount, pageSize: pageSize, totalRows: rowCount })) : null] })] }));
 };

package/dist/esm/components/ps-table-reorder-frame.js

@@ -3,24 +3,37 @@ import { DndContext } from '@dnd-kit/core';
 import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { PsDragClasses, PsDragListLiftFrames, PsDragOverlay } from '@pallasoft/ps-core-components';
 import { usePsTableReorder } from '../hooks/use-ps-table-reorder';
+import { PsTableReorderService } from '../services/ps-table-reorder-service';
 import { PsTableSortableRow } from './ps-table-sortable-row';
 export const PsTableReorderFrame = ({ children, renderOverlay, ...input }) => {
-    const { activeId, activeRunId, contextProps, placements } = usePsTableReorder(input);
+    const { activeId, activeRunId, contextProps, drop, placements } = usePsTableReorder(input);
     const itemById = new Map(input.items.map((item) => [item.id, item]));
+    const { nesting } = input;
     const api = {
         isActive: true,
         Row: PsTableSortableRow,
         rowProps: (rowId) => {
             const item = itemById.get(rowId);
             const placement = placements.get(rowId);
+            if (nesting !== undefined)
+                return {
+                    dropPlacement: drop !== null && drop.overId === rowId ? drop.placement : null,
+                    handleLabel: item === undefined ? '' : item.handleLabel,
+                    hasHandle: item !== undefined && input.enabled && nesting.canDrag(rowId),
+                    isDisabled: !input.enabled,
+                    isDropTarget: item !== undefined,
+                    rowId,
+                };
             return {
+                dropPlacement: null,
                 handleLabel: item === undefined ? '' : item.handleLabel,
                 hasHandle: item !== undefined && input.enabled && placement !== undefined && placement.size > 1,
                 isDisabled: activeRunId !== null && (placement === undefined || placement.runId !== activeRunId),
+                isDropTarget: false,
                 rowId,
             };
         },
-        run: (runId, ids, runChildren) => (_jsx(SortableContext, { items: ids, strategy: verticalListSortingStrategy, children: runChildren }, runId)),
+        run: (runId, ids, runChildren) => (_jsx(SortableContext, { items: ids, strategy: nesting === undefined ? verticalListSortingStrategy : PsTableReorderService.still, children: runChildren }, runId)),
     };
     return (_jsxs(DndContext, { ...contextProps, children: [children(api), _jsx(PsDragOverlay, { className: PsDragClasses.lifted, frames: PsDragListLiftFrames, children: activeId === null ? null : renderOverlay(activeId) })] }));
 };