@pallasoft/ps-table-components 1.22.2 → 1.24.0

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';
@@ -35,9 +38,9 @@ const densityClassNames = {
         head: 'px-5 py-3.5',
     },
 };
-const columnStyle = (column) => ({
-    maxWidth: PsTableColumnSizeService.maxWidthOf(column),
-    minWidth: PsTableColumnSizeService.minWidthOf(column),
+const columnStyle = (column, fittedMinWidth) => ({
+    maxWidth: column.measure === undefined ? PsTableColumnSizeService.maxWidthOf(column) : undefined,
+    minWidth: fittedMinWidth === undefined ? PsTableColumnSizeService.minWidthOf(column) : fittedMinWidth,
     width: column.width,
 });
 const alignClassNames = {
@@ -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));
@@ -56,6 +59,9 @@ export const PsDataTable = ({ caption, className, columns, defaultSort, density
     const currentQuery = query ? query : uncontrolledQuery;
     const { filters, hiddenColumnIds, search, sort } = currentQuery;
     const visibleColumns = columns.filter((column) => !hiddenColumnIds.includes(column.id));
+    const fittedWidths = useMemo(() => new Map(columns
+        .filter((column) => column.measure !== undefined)
+        .map((column) => [column.id, PsTableColumnSizeService.fittedMinWidthOf(column, rows)])), [columns, rows]);
     const updateQuery = (patch) => {
         const next = { ...currentQuery, ...patch };
         if (!query)
@@ -70,6 +76,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 +148,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 +273,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 +290,14 @@ 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) ||
-                                PsTableColumnSizeService.maxWidthOf(column) !== undefined
+                        : 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', column.measure === undefined &&
+                                ((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));
+                                : '', 'text-sm text-ink'), style: columnStyle(column, fittedWidths.get(column.id)), 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 +316,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, fittedWidths.get(column.id)), 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 +345,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) })] }));
 };

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

@@ -1,4 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { PsDragGrip } from '@pallasoft/ps-core-components';
 import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
-export const PsTableReorderHandle = ({ activatorRef, className, label, ...buttonProps }) => (_jsx("button", { ...buttonProps, "aria-label": label, className: 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: _jsx(PsDragGrip, {}) }));
+export const PsTableReorderHandle = ({ activatorRef, className, label, ...buttonProps }) => (_jsx("button", { ...buttonProps, "aria-label": label, className: 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: _jsx(PsDragGrip, {}) }));

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

@@ -10,5 +10,5 @@ export const PsTableSortHeader = ({ align, columnId, label, onSort, sort, }) =>
             : PsIconKey.SortDescending;
     return (_jsxs("button", { className: 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: [_jsx("span", { children: label }), _jsx(PsIcon, { "aria-hidden": 'true', className: 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 })] }));
 };

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

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

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

@@ -0,0 +1,5 @@
+export const 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/esm/constants/ps-table-drop-placement.js

@@ -0,0 +1,5 @@
+export const PsTableDropPlacement = {
+    after: 'after',
+    before: 'before',
+    into: 'into',
+};

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

@@ -0,0 +1,16 @@
+export const 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/esm/constants/table-breakpoint.js

@@ -0,0 +1,10 @@
+export const PsTableBreakpoint = {
+    md: 'md',
+    lg: 'lg',
+    xl: 'xl',
+};
+export const PsTableHideBelowClasses = {
+    md: 'hidden md:table-cell',
+    lg: 'hidden lg:table-cell',
+    xl: 'hidden xl:table-cell',
+};

package/dist/esm/hooks/use-ps-table-overflow.js

@@ -0,0 +1,19 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { PsTableOverflowService } from '../services/ps-table-overflow-service';
+export const usePsTableOverflow = (layoutKey) => {
+    const ref = useRef(null);
+    const [edges, setEdges] = useState(PsTableOverflowService.none);
+    const update = useCallback(() => {
+        const element = ref.current;
+        if (element === null)
+            return;
+        const next = PsTableOverflowService.edges(element.scrollLeft, element.clientWidth, element.scrollWidth);
+        setEdges((current) => (PsTableOverflowService.isSame(current, next) ? current : next));
+    }, []);
+    useEffect(() => {
+        update();
+        window.addEventListener('resize', update);
+        return () => window.removeEventListener('resize', update);
+    }, [layoutKey, update]);
+    return { edges, ref, update };
+};

package/dist/esm/hooks/use-ps-table-reorder.js

@@ -1,9 +1,16 @@
-import { useMemo, useState } from 'react';
-import { closestCenter, } from '@dnd-kit/core';
+import { useMemo, useRef, useState } from 'react';
+import { closestCenter, pointerWithin, } from '@dnd-kit/core';
 import { usePsDragSensors } from '@pallasoft/ps-core-components';
+import { PsTableDropPlacement } from '../constants/ps-table-drop-placement';
 import { PsTableReorderService } from '../services/ps-table-reorder-service';
-export const usePsTableReorder = ({ announcements: texts, enabled, instructions, items, onReorder, }) => {
+const pointerThenCenter = (args) => {
+    const within = pointerWithin(args);
+    return within.length > 0 ? within : closestCenter(args);
+};
+export const usePsTableReorder = ({ announcements: texts, enabled, instructions, items, nesting, onReorder, }) => {
     const [activeId, setActiveId] = useState(null);
+    const [drop, setDrop] = useState(null);
+    const dropRef = useRef(null);
     const sensors = usePsDragSensors();
     const runs = useMemo(() => enabled
         ? PsTableReorderService.runs(items, (item) => item.groupKey, (item) => item.id)
@@ -11,6 +18,7 @@ export const usePsTableReorder = ({ announcements: texts, enabled, instructions,
     const placements = useMemo(() => PsTableReorderService.placements(runs, (item) => item.id), [runs]);
     const activePlacement = activeId === null ? undefined : placements.get(activeId);
     const itemById = useMemo(() => new Map(items.map((item) => [item.id, item])), [items]);
+    const indexById = useMemo(() => new Map(items.map((item, index) => [item.id, index])), [items]);
     const labelOf = (id) => {
         const item = itemById.get(id);
         return item === undefined ? id : item.label;
@@ -23,23 +31,83 @@ export const usePsTableReorder = ({ announcements: texts, enabled, instructions,
         const placement = placements.get(id);
         return placement === undefined ? 0 : placement.size;
     };
+    const edgeFor = (activeKey, overId) => {
+        const activeIndex = indexById.get(activeKey);
+        const overIndex = indexById.get(overId);
+        return activeIndex !== undefined && overIndex !== undefined && activeIndex < overIndex
+            ? PsTableDropPlacement.after
+            : PsTableDropPlacement.before;
+    };
+    const resolveDrop = (event) => {
+        if (nesting === undefined || event.over === null || event.over.id === event.active.id)
+            return null;
+        const activeKey = String(event.active.id);
+        const overId = String(event.over.id);
+        const placement = PsTableReorderService.dropPlacement(PsTableReorderService.pointerY(event.activatorEvent, event.delta.y), event.over.rect, edgeFor(activeKey, overId), (candidate) => nesting.canDrop(activeKey, overId, candidate));
+        return placement === null ? null : { overId, placement };
+    };
+    const announcedDrop = (activeKey, overId) => {
+        if (nesting === undefined)
+            return null;
+        const known = dropRef.current;
+        if (known !== null && known.overId === overId)
+            return known;
+        const placement = edgeFor(activeKey, overId);
+        return nesting.canDrop(activeKey, overId, placement) ? { overId, placement } : null;
+    };
+    const describeDrop = (active, target) => nesting === undefined
+        ? undefined
+        : nesting.announcements[target.placement](labelOf(active), labelOf(target.overId));
     const announcements = {
         onDragCancel: ({ active }) => texts.cancelled(labelOf(String(active.id))),
-        onDragEnd: ({ active, over }) => over === null
-            ? texts.cancelled(labelOf(String(active.id)))
-            : texts.dropped(labelOf(String(active.id)), positionOf(String(over.id)), countOf(String(over.id))),
-        onDragOver: ({ active, over }) => over === null
-            ? undefined
-            : texts.moved(labelOf(String(active.id)), positionOf(String(over.id)), countOf(String(over.id))),
+        onDragEnd: ({ active, over }) => {
+            if (nesting !== undefined) {
+                const target = over === null ? null : announcedDrop(String(active.id), String(over.id));
+                return target === null
+                    ? texts.cancelled(labelOf(String(active.id)))
+                    : describeDrop(String(active.id), target);
+            }
+            return over === null
+                ? texts.cancelled(labelOf(String(active.id)))
+                : texts.dropped(labelOf(String(active.id)), positionOf(String(over.id)), countOf(String(over.id)));
+        },
+        onDragOver: ({ active, over }) => {
+            if (over === null)
+                return undefined;
+            if (nesting !== undefined) {
+                const target = announcedDrop(String(active.id), String(over.id));
+                return target === null ? undefined : describeDrop(String(active.id), target);
+            }
+            return texts.moved(labelOf(String(active.id)), positionOf(String(over.id)), countOf(String(over.id)));
+        },
         onDragStart: ({ active }) => texts.lifted(labelOf(String(active.id)), positionOf(String(active.id)), countOf(String(active.id))),
     };
-    const handleDragEnd = ({ active, over }) => {
+    const handleDragMove = (event) => {
+        const next = resolveDrop(event);
+        dropRef.current = next;
+        setDrop((current) => current !== null &&
+            next !== null &&
+            current.overId === next.overId &&
+            current.placement === next.placement
+            ? current
+            : next);
+    };
+    const handleDragEnd = (event) => {
+        const { active, over } = event;
+        const target = resolveDrop(event);
         setActiveId(null);
-        if (over === null || active.id === over.id)
+        setDrop(null);
+        dropRef.current = null;
+        if (nesting !== undefined) {
+            if (target !== null)
+                nesting.onMove(String(active.id), target.overId, target.placement);
+            return;
+        }
+        if (over === null || active.id === over.id || onReorder === undefined)
             return;
         const placement = placements.get(String(active.id));
-        const target = placements.get(String(over.id));
-        if (placement === undefined || target === undefined || placement.runId !== target.runId)
+        const sibling = placements.get(String(over.id));
+        if (placement === undefined || sibling === undefined || placement.runId !== sibling.runId)
             return;
         const run = runs.find((candidate) => candidate.id === placement.runId);
         if (run === undefined)
@@ -51,13 +119,19 @@ export const usePsTableReorder = ({ announcements: texts, enabled, instructions,
         activeRunId: activePlacement === undefined ? null : activePlacement.runId,
         contextProps: {
             accessibility: { announcements, screenReaderInstructions: { draggable: instructions } },
-            collisionDetection: closestCenter,
+            collisionDetection: nesting === undefined ? closestCenter : pointerThenCenter,
             modifiers: [PsTableReorderService.lockToVerticalAxis],
-            onDragCancel: () => setActiveId(null),
+            onDragCancel: () => {
+                setActiveId(null);
+                setDrop(null);
+                dropRef.current = null;
+            },
             onDragEnd: handleDragEnd,
+            onDragMove: nesting === undefined ? undefined : handleDragMove,
             onDragStart: ({ active }) => setActiveId(String(active.id)),
             sensors,
         },
+        drop,
         placements,
     };
 };

package/dist/esm/index.js

@@ -3,7 +3,9 @@ export * from './components/ps-streamed-rows';
 export * from './components/ps-table-stream-status';
 export * from './components/ps-table-group-header';
 export * from './components/ps-table-pagination';
+export * from './constants/table-breakpoint';
 export * from './constants/table-card-role';
+export * from './constants/ps-table-pin-classes';
 export * from './constants/table-column-size';
 export * from './constants/table-filter-kind';
 export * from './interfaces/table-column';
@@ -27,6 +29,11 @@ export * from './services/ps-table-group-service';
 export * from './services/ps-table-query-service';
 export * from './services/ps-table-search-service';
 export * from './services/ps-table-scroll-service';
+export * from './services/ps-table-pin-service';
+export * from './services/ps-table-overflow-service';
+export * from './hooks/use-ps-table-overflow';
+export * from './interfaces/table-pin-classes';
+export * from './interfaces/table-overflow-edges';
 export * from './services/ps-table-stream-service';
 export * from './components/ps-table-export-button';
 export * from './constants/ps-table-download-config';
@@ -36,4 +43,7 @@ export * from './hooks/use-ps-table-page';
 export * from './interfaces/ps-table-page-state';
 export * from './interfaces/table-reorder';
 export * from './interfaces/table-reorder-announcements';
+export * from './interfaces/table-reorder-nesting';
+export * from './interfaces/table-nesting-announcements';
+export * from './constants/ps-table-drop-placement';
 export * from './services/ps-table-reorder-service';

package/dist/esm/interfaces/table-drop.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/interfaces/table-nesting-announcements.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/interfaces/table-overflow-edges.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/interfaces/table-pin-classes.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/interfaces/table-reorder-nesting-binding.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/interfaces/table-reorder-nesting.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/services/ps-table-column-size-service.js

@@ -1,6 +1,13 @@
 import { PsTableColumnMaxWidths, PsTableColumnSize, PsTableColumnWidths, } from '../constants/table-column-size';
 import { PsTableFilterKind } from '../constants/table-filter-kind';
 export class PsTableColumnSizeService {
+    static fittedMinWidthOf(column, rows) {
+        const measure = column.measure;
+        if (measure === undefined)
+            return undefined;
+        const longest = rows.reduce((length, row) => Math.max(length, measure(row).length), 0);
+        return `max(${PsTableColumnSizeService.minWidthOf(column)}, calc(${(longest * 1.1).toFixed(1)}ch + 3rem))`;
+    }
     static sizeOf(column) {
         if (column.size !== undefined)
             return column.size;

package/dist/esm/services/ps-table-overflow-service.js

@@ -0,0 +1,11 @@
+export class PsTableOverflowService {
+    static edges(scrollLeft, clientWidth, scrollWidth) {
+        const start = Math.abs(scrollLeft) > 0.5;
+        const end = scrollWidth - clientWidth - Math.abs(scrollLeft) > 0.5;
+        return { end, start };
+    }
+    static isSame(current, next) {
+        return current.end === next.end && current.start === next.start;
+    }
+}
+PsTableOverflowService.none = { end: false, start: false };

package/dist/esm/services/ps-table-pin-service.js

@@ -0,0 +1,22 @@
+import { PsTablePinClasses } from '../constants/ps-table-pin-classes';
+export class PsTablePinService {
+    static leading(isPinned, hasReorder, isSelectable) {
+        if (!isPinned)
+            return { first: '', reorder: '', select: '' };
+        const firstOffset = hasReorder && isSelectable
+            ? PsTablePinClasses.first.both
+            : hasReorder
+                ? PsTablePinClasses.first.reorder
+                : isSelectable
+                    ? PsTablePinClasses.first.select
+                    : PsTablePinClasses.first.none;
+        return {
+            first: `${PsTablePinClasses.cell} ${PsTablePinClasses.edge} ${firstOffset}`,
+            reorder: `${PsTablePinClasses.cell} ${PsTablePinClasses.reorder}`,
+            select: `${PsTablePinClasses.cell} ${hasReorder ? PsTablePinClasses.select.withReorder : PsTablePinClasses.select.alone}`,
+        };
+    }
+    static end(isPinned) {
+        return isPinned ? PsTablePinClasses.end : '';
+    }
+}