@pallasoft/ps-table-components 1.21.0 → 1.22.0

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

@@ -2,6 +2,7 @@ import { type ReactNode } from 'react';
 import type { PsTableColumn } from '../interfaces/table-column';
 import type { PsTableGrouping } from '../interfaces/table-grouping';
 import type { PsTableQuery } from '../interfaces/table-query';
+import type { PsTableReorder } from '../interfaces/table-reorder';
 import type { PsTableRowAction } from '../interfaces/table-row-action';
 import type { PsTableSort } from '../interfaces/table-sort';
 export interface PsDataTableProps<RowData> {
@@ -18,6 +19,7 @@ export interface PsDataTableProps<RowData> {
     getSearchText?: (row: RowData) => string;
     grouping?: PsTableGrouping<RowData>;
     isLoading?: boolean;
+    isPending?: boolean;
     layout?: 'auto' | 'fixed';
     onPageChange?: (page: number) => void;
     onQueryChange?: (query: PsTableQuery) => void;
@@ -27,9 +29,11 @@ export interface PsDataTableProps<RowData> {
     pageSize?: number;
     query?: PsTableQuery;
     renderExpandedRow?: (row: RowData) => ReactNode;
+    reorder?: PsTableReorder<RowData>;
     rows: RowData[];
+    searchingLabel?: string;
     searchPlaceholder?: string;
     toolbarActions?: ReactNode;
     totalRows?: number;
 }
-export declare const PsDataTable: <RowData>({ caption, className, columns, defaultSort, density, expandedRowIds, mobileLayout, getBulkActions, getRowId, getRowLabel, getSearchText, grouping, isLoading, layout, onPageChange, onQueryChange, onRowClick, onRowHover, page, pageSize, query, renderExpandedRow, rows, 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, query, renderExpandedRow, reorder, rows, searchingLabel, searchPlaceholder, toolbarActions, totalRows, }: PsDataTableProps<RowData>) => import("react").JSX.Element;

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

@@ -1,4 +1,37 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsDataTable = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -16,14 +49,17 @@ const ps_table_cell_tooltip_service_1 = require("../services/ps-table-cell-toolt
 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_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");
 const ps_table_bulk_bar_1 = require("./ps-table-bulk-bar");
 const ps_table_card_list_1 = require("./ps-table-card-list");
 const ps_table_column_picker_1 = require("./ps-table-column-picker");
 const ps_table_group_header_1 = require("./ps-table-group-header");
 const ps_table_pagination_1 = require("./ps-table-pagination");
+const ps_table_searching_state_1 = require("./ps-table-searching-state");
 const ps_table_sort_header_1 = require("./ps-table-sort-header");
 const ps_table_toolbar_1 = require("./ps-table-toolbar");
+const LazyReorderFrame = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./ps-table-reorder-frame'))).then((module) => ({ default: module.PsTableReorderFrame })));
 const densityClassNames = {
     compact: {
         cell: 'px-3 py-1.5 text-[0.8125rem] leading-5',
@@ -44,7 +80,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, layout = 'auto', onPageChange, onQueryChange, onRowClick, onRowHover, page, pageSize, query, renderExpandedRow, rows, 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, 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));
@@ -68,7 +104,7 @@ const PsDataTable = ({ caption, className, columns, defaultSort, density = 'norm
     const hasFilters = columns.some((column) => column.filter) && isQueryable;
     const hasToolbar = isSearchable || hasFilters || Boolean(toolbarActions);
     const isSelectable = Boolean(getBulkActions);
-    const columnCount = visibleColumns.length + (isSelectable ? 1 : 0);
+    const columnCount = visibleColumns.length + (isSelectable ? 1 : 0) + (reorder ? 1 : 0);
     const deferredSearch = (0, react_1.useDeferredValue)(search);
     const queriedRows = (0, react_1.useMemo)(() => isServerPaginated
         ? rows
@@ -76,6 +112,8 @@ const PsDataTable = ({ caption, className, columns, defaultSort, density = 'norm
     const streamStatus = (0, use_ps_table_stream_status_1.usePsTableStreamStatus)();
     const isQueried = search.trim() !== '' ||
         Object.values(filters).some((value) => ps_table_query_service_1.PsTableQueryService.isActive(value));
+    const isPartial = streamStatus !== null && !isServerPaginated && isQueried;
+    const isSearching = isPartial || isPending;
     const currentPage = page !== null && page !== undefined ? page : uncontrolledPage;
     const loadedRowCount = isServerPaginated ? totalRows : queriedRows.length;
     const rowCount = streamStatus !== null && !isServerPaginated && !isQueried
@@ -136,6 +174,23 @@ const PsDataTable = ({ caption, className, columns, defaultSort, density = 'norm
         safePage,
         toggledGroupKeys,
     ]);
+    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),
+                handleLabel: reorder.getHandleLabel(label),
+                id: rowId,
+                label,
+            };
+        })
+        : [], [getRowId, getRowLabel, reorder, 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 changePage = (next) => {
         if (onPageChange) {
             onPageChange(next);
@@ -213,11 +268,15 @@ const PsDataTable = ({ caption, className, columns, defaultSort, density = 'norm
     }, [shouldVirtualize, visibleRows.length]);
     const toggleRow = (rowId) => setSelectedIds((current) => current.includes(rowId) ? current.filter((id) => id !== rowId) : [...current, rowId]);
     const renderCardList = (cardRows, emptyContent) => ((0, jsx_runtime_1.jsx)(ps_table_card_list_1.PsTableCardList, { columns: visibleColumns, emptyContent: emptyContent, expandedRowIds: expandedRowIds, footerColumns: hasFooter ? visibleColumns.filter((column) => column.footer !== undefined) : [], getRowId: getRowId, getRowLabel: (row) => (getRowLabel ? getRowLabel(row) : getRowId(row)), isSelectable: isSelectable, onRowClick: onRowClick, onRowHover: onRowHover, onToggleRow: toggleRow, renderExpandedRow: renderExpandedRow, rows: cardRows, selectedIds: selectedIds }));
-    const renderRow = (row, motion, virtualItem) => {
+    const renderRow = (api, row, motion, virtualItem) => {
         const rowId = getRowId(row);
         const isExpanded = expandedRowIds ? expandedRowIds.includes(rowId) : false;
         const rowLabel = getRowLabel ? getRowLabel(row) : rowId;
-        return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("tr", { "data-index": virtualItem ? virtualItem.index : undefined, ref: virtualItem ? virtualizer.measureElement : 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
+        const Row = api.Row;
+        const rowExtras = api.isActive
+            ? { ...api.rowProps(rowId), 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) => {
                             if (event.target !== event.currentTarget)
                                 return;
@@ -228,11 +287,14 @@ const PsDataTable = ({ caption, className, columns, defaultSort, density = 'norm
                         }
                         : undefined, style: motion && motion.delayMs !== undefined
                         ? { animationDelay: `${motion.delayMs}ms` }
-                        : undefined, tabIndex: onRowClick ? 0 : undefined, children: [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: '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) ||
                                 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))))
+        : 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 }));
     return ((0, jsx_runtime_1.jsxs)("div", { ref: containerRef, className: ps_design_system_1.PallasoftClassNameService.merge('flex min-w-0 flex-col gap-3', className), children: [isSelectable && selectedRows.length > 0 && getBulkActions ? ((0, jsx_runtime_1.jsx)(ps_table_bulk_bar_1.PsTableBulkBar, { actions: getBulkActions(selectedRows), onClear: () => setSelectedIds([]), selectedCount: selectedRows.length })) : hasToolbar || columns.some((column) => column.canHide) ? ((0, jsx_runtime_1.jsx)(ps_table_toolbar_1.PsTableToolbar, { actions: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [toolbarActions, columns.some((column) => column.canHide) ? ((0, jsx_runtime_1.jsx)(ps_table_column_picker_1.PsTableColumnPicker, { columns: columns
@@ -243,14 +305,14 @@ const PsDataTable = ({ caption, className, columns, defaultSort, density = 'norm
                 }, onSearchChange: (next) => {
                     updateQuery({ search: next });
                     resetPage();
-                }, rows: rows, search: search, searchPlaceholder: searchPlaceholder })) : null, (0, jsx_runtime_1.jsxs)("div", { className: 'min-w-0 overflow-hidden rounded-[1.25rem] border border-line bg-surface', children: [mobileLayout === 'cards' ? ((0, jsx_runtime_1.jsxs)("div", { className: 'sm:hidden', children: [grouping
+                }, rows: rows, search: search, searchPlaceholder: searchPlaceholder })) : null, (0, jsx_runtime_1.jsxs)("div", { className: 'min-w-0 overflow-hidden rounded-[1.25rem] border border-line bg-surface', children: [mobileLayout === 'cards' ? ((0, jsx_runtime_1.jsxs)("div", { className: 'sm:hidden', children: [reorder && reorder.cardsReason ? ((0, jsx_runtime_1.jsx)("p", { className: 'border-b border-line px-4 py-2 text-xs text-ink/55', children: reorder.cardsReason })) : null, grouping
                                 ? groups.map((group, groupIndex) => {
                                     const isExpanded = isGroupExpanded(group.key, groupIndex);
                                     return ((0, jsx_runtime_1.jsxs)("div", { className: 'border-b border-line last:border-b-0', children: [(0, jsx_runtime_1.jsx)(ps_table_group_header_1.PsTableGroupHeader, { count: group.rows.length, isExpanded: isExpanded, label: grouping.getGroupLabel(group.key, group.rows), onToggle: () => toggleGroup(group.key, isExpanded), summary: grouping.renderGroupSummary
                                                     ? 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 && 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-focus-ring mt-2 rounded-full px-3 py-1.5 text-sm font-semibold 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: (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: [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-focus-ring mt-2 rounded-full px-3 py-1.5 text-sm font-semibold 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) => {
                                                 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
@@ -258,23 +320,29 @@ const PsDataTable = ({ caption, className, columns, defaultSort, density = 'norm
                                                         : 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));
-                                            })] }) }), (0, jsx_runtime_1.jsxs)("tbody", { className: 'divide-y divide-line', ref: bodyRef, children: [visibleRows.length === 0 && isQueried ? ((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-focus-ring mt-3 rounded-full px-3 py-1.5 text-sm font-semibold text-primary hover:underline', onClick: clearFilters, type: 'button', children: "Clear search and filters" })] }) })) : null, grouping
+                                            })] }) }), (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-focus-ring mt-3 rounded-full px-3 py-1.5 text-sm font-semibold 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);
                                                 return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(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_group_header_1.PsTableGroupHeader, { count: group.rows.length, isExpanded: isExpanded, label: grouping.getGroupLabel(group.key, group.rows), onToggle: () => toggleGroup(group.key, isExpanded), summary: grouping.renderGroupSummary
                                                                         ? grouping.renderGroupSummary(group.rows)
                                                                         : undefined }) }) }), isExpanded
-                                                            ? group.rows.map((row, rowIndex) => renderRow(row, groupRowMotion(group.key, rowIndex)))
+                                                            ? renderEntries(api, group.rows.map((row, rowIndex) => ({
+                                                                motion: groupRowMotion(group.key, rowIndex),
+                                                                row,
+                                                            })))
                                                             : null] }, `group-${group.key}`));
                                             })
                                             : shouldVirtualize
                                                 ? [
                                                     (0, jsx_runtime_1.jsx)("tr", { "aria-hidden": 'true', children: (0, jsx_runtime_1.jsx)("td", { className: 'p-0', colSpan: columnCount, style: { height: virtualTop } }) }, 'virtual-top'),
-                                                    ...virtualItems.map((item) => renderRow(visibleRows[item.index], undefined, item)),
+                                                    ...renderEntries(api, virtualItems.map((item) => ({
+                                                        row: visibleRows[item.index],
+                                                        virtualItem: item,
+                                                    }))),
                                                     (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'),
                                                 ]
-                                                : visibleRows.map((row) => renderRow(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: [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", {}) : 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
                                                     ? column.align
-                                                    : 'left'], 'whitespace-nowrap'), children: column.footer }, column.id)))] }) })) : null] }) }), pageSize && (!grouping || isServerPaginated) ? ((0, jsx_runtime_1.jsx)(ps_table_pagination_1.PsTablePagination, { loadedPageCount: pageCountOf(loadedRowCount), onPageChange: changePage, page: safePage, pageCount: pageCount, pageSize: pageSize, totalRows: rowCount })) : null] })] }));
+                                                    : '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] })] }));
 };
 exports.PsDataTable = PsDataTable;

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

@@ -1,5 +1,6 @@
 export interface PsTablePaginationProps {
     className?: string;
+    isPartial?: boolean;
     loadedPageCount?: number;
     onPageChange: (page: number) => void;
     page: number;
@@ -7,4 +8,4 @@ export interface PsTablePaginationProps {
     pageSize: number;
     totalRows: number;
 }
-export declare const PsTablePagination: ({ className, loadedPageCount, onPageChange, page, pageCount, pageSize, totalRows, }: PsTablePaginationProps) => import("react").JSX.Element;
+export declare const PsTablePagination: ({ className, isPartial, loadedPageCount, onPageChange, page, pageCount, pageSize, totalRows, }: PsTablePaginationProps) => import("react").JSX.Element;

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

@@ -3,11 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsTablePagination = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ps_design_system_1 = require("@pallasoft/ps-design-system");
-const PsTablePagination = ({ className, loadedPageCount, onPageChange, page, pageCount, pageSize, totalRows, }) => {
+const PsTablePagination = ({ className, isPartial = false, loadedPageCount, onPageChange, page, pageCount, pageSize, totalRows, }) => {
     const firstRow = totalRows === 0 ? 0 : (page - 1) * pageSize + 1;
     const lastRow = Math.min(page * pageSize, totalRows);
     const buttonClassName = 'ps-focus-ring inline-flex min-h-9 items-center rounded-full border border-line px-3.5 text-sm font-semibold text-ink transition-colors disabled:cursor-not-allowed disabled:opacity-40 enabled:hover:border-primary/40';
-    return ((0, jsx_runtime_1.jsxs)("nav", { "aria-label": 'Pagination', className: ps_design_system_1.PallasoftClassNameService.merge('flex flex-wrap items-center justify-between gap-3 border-t border-line px-4 py-3', className), children: [(0, jsx_runtime_1.jsx)("p", { className: 'text-sm text-ink/55', children: totalRows === 0 ? 'No rows' : `${firstRow}–${lastRow} of ${totalRows}` }), (0, jsx_runtime_1.jsxs)("div", { className: 'flex items-center gap-2', children: [(0, jsx_runtime_1.jsx)("button", { className: buttonClassName, disabled: page <= 1, onClick: () => onPageChange(page - 1), type: 'button', children: "Previous" }), (0, jsx_runtime_1.jsxs)("span", { className: 'hidden text-sm text-ink/65 sm:inline', children: ["Page ", Math.min(page, pageCount), " of ", pageCount] }), (0, jsx_runtime_1.jsx)("button", { className: buttonClassName, disabled: page >=
+    return ((0, jsx_runtime_1.jsxs)("nav", { "aria-label": 'Pagination', className: ps_design_system_1.PallasoftClassNameService.merge('flex flex-wrap items-center justify-between gap-3 border-t border-line px-4 py-3', className), children: [(0, jsx_runtime_1.jsx)("p", { className: 'text-sm text-ink/55', children: totalRows === 0
+                    ? 'No rows'
+                    : `${firstRow}–${lastRow} of ${totalRows}${isPartial ? '+' : ''}` }), (0, jsx_runtime_1.jsxs)("div", { className: 'flex items-center gap-2', children: [(0, jsx_runtime_1.jsx)("button", { className: buttonClassName, disabled: page <= 1, onClick: () => onPageChange(page - 1), type: 'button', children: "Previous" }), (0, jsx_runtime_1.jsxs)("span", { className: 'hidden text-sm text-ink/65 sm:inline', children: ["Page ", Math.min(page, pageCount), " of ", pageCount] }), (0, jsx_runtime_1.jsx)("button", { className: buttonClassName, disabled: page >=
                             (loadedPageCount === undefined ? pageCount : Math.min(loadedPageCount, pageCount)), onClick: () => onPageChange(page + 1), type: 'button', children: "Next" })] })] }));
 };
 exports.PsTablePagination = PsTablePagination;

package/dist/components/ps-table-reorder-frame.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+import { type UsePsTableReorderInput } from '../hooks/use-ps-table-reorder';
+import type { PsTableReorderApi } from '../interfaces/table-reorder-api';
+export interface PsTableReorderFrameProps extends UsePsTableReorderInput {
+    children: (api: PsTableReorderApi) => ReactNode;
+    renderOverlay: (rowId: string) => ReactNode;
+}
+export declare const PsTableReorderFrame: ({ children, renderOverlay, ...input }: PsTableReorderFrameProps) => import("react").JSX.Element;

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

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsTableReorderFrame = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+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_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 itemById = new Map(input.items.map((item) => [item.id, item]));
+    const api = {
+        isActive: true,
+        Row: ps_table_sortable_row_1.PsTableSortableRow,
+        rowProps: (rowId) => {
+            const item = itemById.get(rowId);
+            const placement = placements.get(rowId);
+            return {
+                handleLabel: item === undefined ? '' : item.handleLabel,
+                hasHandle: item !== undefined && input.enabled && placement !== undefined && placement.size > 1,
+                isDisabled: activeRunId !== null && (placement === undefined || placement.runId !== activeRunId),
+                rowId,
+            };
+        },
+        run: (runId, ids, runChildren) => ((0, jsx_runtime_1.jsx)(sortable_1.SortableContext, { items: ids, strategy: sortable_1.verticalListSortingStrategy, 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) })] }));
+};
+exports.PsTableReorderFrame = PsTableReorderFrame;

package/dist/components/ps-table-reorder-handle.d.ts

@@ -0,0 +1,6 @@
+import type { ComponentProps } from 'react';
+export interface PsTableReorderHandleProps extends Omit<ComponentProps<'button'>, 'ref' | 'type'> {
+    activatorRef?: (element: HTMLElement | null) => void;
+    label: string;
+}
+export declare const PsTableReorderHandle: ({ activatorRef, className, label, ...buttonProps }: PsTableReorderHandleProps) => import("react").JSX.Element;

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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-md 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-searching-state.d.ts

@@ -0,0 +1,6 @@
+export interface PsTableSearchingStateProps {
+    className?: string;
+    label: string;
+    skeletonRows?: number;
+}
+export declare const PsTableSearchingState: ({ className, label, skeletonRows, }: PsTableSearchingStateProps) => import("react").JSX.Element;

package/dist/components/ps-table-searching-state.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsTableSearchingState = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const PsTableSearchingState = ({ className, label, skeletonRows = 0, }) => ((0, jsx_runtime_1.jsxs)("div", { "aria-live": 'polite', className: ps_design_system_1.PallasoftClassNameService.merge('flex flex-col gap-3 px-4 py-4', className), role: 'status', children: [Array.from({ length: skeletonRows }).map((_, index) => ((0, jsx_runtime_1.jsx)("div", { className: 'h-4 w-full animate-pulse rounded-full bg-mist' }, index))), (0, jsx_runtime_1.jsx)("p", { className: 'text-sm text-ink/55', children: label })] }));
+exports.PsTableSearchingState = PsTableSearchingState;

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

@@ -0,0 +1,9 @@
+import type { ComponentProps } from 'react';
+export interface PsTableSortableRowProps extends Omit<ComponentProps<'tr'>, 'ref'> {
+    handleLabel: string;
+    hasHandle: boolean;
+    isDisabled: 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;

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

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsTableSortableRow = void 0;
+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_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) => {
+            setNodeRef(element);
+            if (measureRef)
+                measureRef(element);
+        }, style: {
+            ...style,
+            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] }));
+};
+exports.PsTableSortableRow = PsTableSortableRow;

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

@@ -4,6 +4,8 @@ export declare const PsTableConfig: {
     readonly groupOpenMs: 280;
     readonly groupRowStaggerMs: 16;
     readonly groupStaggerLimit: 12;
+    readonly searchingLabel: "Searching all rows…";
+    readonly searchingSkeletonRows: 3;
     readonly noMatchesDescription: "Try a different search or clear the filters.";
     readonly noMatchesTitle: "Nothing matches";
     readonly rowEstimatePx: {

package/dist/constants/table-config.js

@@ -7,6 +7,8 @@ exports.PsTableConfig = {
     groupOpenMs: 280,
     groupRowStaggerMs: 16,
     groupStaggerLimit: 12,
+    searchingLabel: 'Searching all rows…',
+    searchingSkeletonRows: 3,
     noMatchesDescription: 'Try a different search or clear the filters.',
     noMatchesTitle: 'Nothing matches',
     rowEstimatePx: { compact: 37, normal: 57 },

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Fragment, useDeferredValue, useEffect, useMemo, useRef, useState, } from 'react';
-import { PsSkeletonTable } from '@pallasoft/ps-core-components';
+import { Fragment, Suspense, lazy, 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';
@@ -13,14 +13,17 @@ import { PsTableCellTooltipService } from '../services/ps-table-cell-tooltip-ser
 import { PsTableColumnSizeService } from '../services/ps-table-column-size-service';
 import { PsTableGroupService } from '../services/ps-table-group-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';
 import { PsTableBulkBar } from './ps-table-bulk-bar';
 import { PsTableCardList } from './ps-table-card-list';
 import { PsTableColumnPicker } from './ps-table-column-picker';
 import { PsTableGroupHeader } from './ps-table-group-header';
 import { PsTablePagination } from './ps-table-pagination';
+import { PsTableSearchingState } from './ps-table-searching-state';
 import { PsTableSortHeader } from './ps-table-sort-header';
 import { PsTableToolbar } from './ps-table-toolbar';
+const LazyReorderFrame = lazy(() => import('./ps-table-reorder-frame').then((module) => ({ default: module.PsTableReorderFrame })));
 const densityClassNames = {
     compact: {
         cell: 'px-3 py-1.5 text-[0.8125rem] leading-5',
@@ -41,7 +44,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, layout = 'auto', onPageChange, onQueryChange, onRowClick, onRowHover, page, pageSize, query, renderExpandedRow, rows, 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, 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));
@@ -65,7 +68,7 @@ export const PsDataTable = ({ caption, className, columns, defaultSort, density
     const hasFilters = columns.some((column) => column.filter) && isQueryable;
     const hasToolbar = isSearchable || hasFilters || Boolean(toolbarActions);
     const isSelectable = Boolean(getBulkActions);
-    const columnCount = visibleColumns.length + (isSelectable ? 1 : 0);
+    const columnCount = visibleColumns.length + (isSelectable ? 1 : 0) + (reorder ? 1 : 0);
     const deferredSearch = useDeferredValue(search);
     const queriedRows = useMemo(() => isServerPaginated
         ? rows
@@ -73,6 +76,8 @@ export const PsDataTable = ({ caption, className, columns, defaultSort, density
     const streamStatus = usePsTableStreamStatus();
     const isQueried = search.trim() !== '' ||
         Object.values(filters).some((value) => PsTableQueryService.isActive(value));
+    const isPartial = streamStatus !== null && !isServerPaginated && isQueried;
+    const isSearching = isPartial || isPending;
     const currentPage = page !== null && page !== undefined ? page : uncontrolledPage;
     const loadedRowCount = isServerPaginated ? totalRows : queriedRows.length;
     const rowCount = streamStatus !== null && !isServerPaginated && !isQueried
@@ -133,6 +138,23 @@ export const PsDataTable = ({ caption, className, columns, defaultSort, density
         safePage,
         toggledGroupKeys,
     ]);
+    const reorderItems = useMemo(() => reorder
+        ? visibleRows.map((row) => {
+            const rowId = getRowId(row);
+            const label = getRowLabel ? getRowLabel(row) : rowId;
+            return {
+                groupKey: reorder.groupKey(row),
+                handleLabel: reorder.getHandleLabel(label),
+                id: rowId,
+                label,
+            };
+        })
+        : [], [getRowId, getRowLabel, reorder, 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 changePage = (next) => {
         if (onPageChange) {
             onPageChange(next);
@@ -210,11 +232,15 @@ export const PsDataTable = ({ caption, className, columns, defaultSort, density
     }, [shouldVirtualize, visibleRows.length]);
     const toggleRow = (rowId) => setSelectedIds((current) => current.includes(rowId) ? current.filter((id) => id !== rowId) : [...current, rowId]);
     const renderCardList = (cardRows, emptyContent) => (_jsx(PsTableCardList, { columns: visibleColumns, emptyContent: emptyContent, expandedRowIds: expandedRowIds, footerColumns: hasFooter ? visibleColumns.filter((column) => column.footer !== undefined) : [], getRowId: getRowId, getRowLabel: (row) => (getRowLabel ? getRowLabel(row) : getRowId(row)), isSelectable: isSelectable, onRowClick: onRowClick, onRowHover: onRowHover, onToggleRow: toggleRow, renderExpandedRow: renderExpandedRow, rows: cardRows, selectedIds: selectedIds }));
-    const renderRow = (row, motion, virtualItem) => {
+    const renderRow = (api, row, motion, virtualItem) => {
         const rowId = getRowId(row);
         const isExpanded = expandedRowIds ? expandedRowIds.includes(rowId) : false;
         const rowLabel = getRowLabel ? getRowLabel(row) : rowId;
-        return (_jsxs(Fragment, { children: [_jsxs("tr", { "data-index": virtualItem ? virtualItem.index : undefined, ref: virtualItem ? virtualizer.measureElement : 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
+        const Row = api.Row;
+        const rowExtras = api.isActive
+            ? { ...api.rowProps(rowId), 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) => {
                             if (event.target !== event.currentTarget)
                                 return;
@@ -225,11 +251,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: [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: '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
                                 ? '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))))
+        : 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 }));
     return (_jsxs("div", { ref: containerRef, className: PallasoftClassNameService.merge('flex min-w-0 flex-col gap-3', className), children: [isSelectable && selectedRows.length > 0 && getBulkActions ? (_jsx(PsTableBulkBar, { actions: getBulkActions(selectedRows), onClear: () => setSelectedIds([]), selectedCount: selectedRows.length })) : hasToolbar || columns.some((column) => column.canHide) ? (_jsx(PsTableToolbar, { actions: _jsxs(_Fragment, { children: [toolbarActions, columns.some((column) => column.canHide) ? (_jsx(PsTableColumnPicker, { columns: columns
@@ -240,14 +269,14 @@ export const PsDataTable = ({ caption, className, columns, defaultSort, density
                 }, onSearchChange: (next) => {
                     updateQuery({ search: next });
                     resetPage();
-                }, rows: rows, search: search, searchPlaceholder: searchPlaceholder })) : null, _jsxs("div", { className: 'min-w-0 overflow-hidden rounded-[1.25rem] border border-line bg-surface', children: [mobileLayout === 'cards' ? (_jsxs("div", { className: 'sm:hidden', children: [grouping
+                }, rows: rows, search: search, searchPlaceholder: searchPlaceholder })) : null, _jsxs("div", { className: 'min-w-0 overflow-hidden rounded-[1.25rem] border border-line bg-surface', children: [mobileLayout === 'cards' ? (_jsxs("div", { className: 'sm:hidden', children: [reorder && reorder.cardsReason ? (_jsx("p", { className: 'border-b border-line px-4 py-2 text-xs text-ink/55', children: reorder.cardsReason })) : null, grouping
                                 ? groups.map((group, groupIndex) => {
                                     const isExpanded = isGroupExpanded(group.key, groupIndex);
                                     return (_jsxs("div", { className: 'border-b border-line last:border-b-0', children: [_jsx(PsTableGroupHeader, { count: group.rows.length, isExpanded: isExpanded, label: grouping.getGroupLabel(group.key, group.rows), onToggle: () => toggleGroup(group.key, isExpanded), summary: grouping.renderGroupSummary
                                                     ? 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 && 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: 'ps-focus-ring mt-2 rounded-full px-3 py-1.5 text-sm font-semibold 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: _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: [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: 'ps-focus-ring mt-2 rounded-full px-3 py-1.5 text-sm font-semibold 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) => {
                                                 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
@@ -255,22 +284,28 @@ export const PsDataTable = ({ caption, className, columns, defaultSort, density
                                                         : 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));
-                                            })] }) }), _jsxs("tbody", { className: 'divide-y divide-line', ref: bodyRef, children: [visibleRows.length === 0 && isQueried ? (_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: 'ps-focus-ring mt-3 rounded-full px-3 py-1.5 text-sm font-semibold text-primary hover:underline', onClick: clearFilters, type: 'button', children: "Clear search and filters" })] }) })) : null, grouping
+                                            })] }) }), _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: 'ps-focus-ring mt-3 rounded-full px-3 py-1.5 text-sm font-semibold 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);
                                                 return (_jsxs(Fragment, { children: [_jsx("tr", { children: _jsx("td", { className: 'p-0', colSpan: columnCount, children: _jsx(PsTableGroupHeader, { count: group.rows.length, isExpanded: isExpanded, label: grouping.getGroupLabel(group.key, group.rows), onToggle: () => toggleGroup(group.key, isExpanded), summary: grouping.renderGroupSummary
                                                                         ? grouping.renderGroupSummary(group.rows)
                                                                         : undefined }) }) }), isExpanded
-                                                            ? group.rows.map((row, rowIndex) => renderRow(row, groupRowMotion(group.key, rowIndex)))
+                                                            ? renderEntries(api, group.rows.map((row, rowIndex) => ({
+                                                                motion: groupRowMotion(group.key, rowIndex),
+                                                                row,
+                                                            })))
                                                             : null] }, `group-${group.key}`));
                                             })
                                             : shouldVirtualize
                                                 ? [
                                                     _jsx("tr", { "aria-hidden": 'true', children: _jsx("td", { className: 'p-0', colSpan: columnCount, style: { height: virtualTop } }) }, 'virtual-top'),
-                                                    ...virtualItems.map((item) => renderRow(visibleRows[item.index], undefined, item)),
+                                                    ...renderEntries(api, virtualItems.map((item) => ({
+                                                        row: visibleRows[item.index],
+                                                        virtualItem: item,
+                                                    }))),
                                                     _jsx("tr", { "aria-hidden": 'true', children: _jsx("td", { className: 'p-0', colSpan: columnCount, style: { height: virtualBottom } }) }, 'virtual-bottom'),
                                                 ]
-                                                : visibleRows.map((row) => renderRow(row))] }), hasFooter ? (_jsx("tfoot", { className: 'border-t-2 border-line bg-mist/50 text-sm font-semibold text-ink', children: _jsxs("tr", { children: [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", {}) : null, isSelectable ? _jsx("td", {}) : null, visibleColumns.map((column) => (_jsx("td", { className: PallasoftClassNameService.merge(densityClassNames[density].cell, alignClassNames[column.align !== null && column.align !== undefined
                                                     ? column.align
-                                                    : 'left'], 'whitespace-nowrap'), children: column.footer }, column.id)))] }) })) : null] }) }), pageSize && (!grouping || isServerPaginated) ? (_jsx(PsTablePagination, { loadedPageCount: pageCountOf(loadedRowCount), onPageChange: changePage, page: safePage, pageCount: pageCount, pageSize: pageSize, totalRows: rowCount })) : null] })] }));
+                                                    : '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-pagination.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
-export const PsTablePagination = ({ className, loadedPageCount, onPageChange, page, pageCount, pageSize, totalRows, }) => {
+export const PsTablePagination = ({ className, isPartial = false, loadedPageCount, onPageChange, page, pageCount, pageSize, totalRows, }) => {
     const firstRow = totalRows === 0 ? 0 : (page - 1) * pageSize + 1;
     const lastRow = Math.min(page * pageSize, totalRows);
     const buttonClassName = 'ps-focus-ring inline-flex min-h-9 items-center rounded-full border border-line px-3.5 text-sm font-semibold text-ink transition-colors disabled:cursor-not-allowed disabled:opacity-40 enabled:hover:border-primary/40';
-    return (_jsxs("nav", { "aria-label": 'Pagination', className: PallasoftClassNameService.merge('flex flex-wrap items-center justify-between gap-3 border-t border-line px-4 py-3', className), children: [_jsx("p", { className: 'text-sm text-ink/55', children: totalRows === 0 ? 'No rows' : `${firstRow}–${lastRow} of ${totalRows}` }), _jsxs("div", { className: 'flex items-center gap-2', children: [_jsx("button", { className: buttonClassName, disabled: page <= 1, onClick: () => onPageChange(page - 1), type: 'button', children: "Previous" }), _jsxs("span", { className: 'hidden text-sm text-ink/65 sm:inline', children: ["Page ", Math.min(page, pageCount), " of ", pageCount] }), _jsx("button", { className: buttonClassName, disabled: page >=
+    return (_jsxs("nav", { "aria-label": 'Pagination', className: PallasoftClassNameService.merge('flex flex-wrap items-center justify-between gap-3 border-t border-line px-4 py-3', className), children: [_jsx("p", { className: 'text-sm text-ink/55', children: totalRows === 0
+                    ? 'No rows'
+                    : `${firstRow}–${lastRow} of ${totalRows}${isPartial ? '+' : ''}` }), _jsxs("div", { className: 'flex items-center gap-2', children: [_jsx("button", { className: buttonClassName, disabled: page <= 1, onClick: () => onPageChange(page - 1), type: 'button', children: "Previous" }), _jsxs("span", { className: 'hidden text-sm text-ink/65 sm:inline', children: ["Page ", Math.min(page, pageCount), " of ", pageCount] }), _jsx("button", { className: buttonClassName, disabled: page >=
                             (loadedPageCount === undefined ? pageCount : Math.min(loadedPageCount, pageCount)), onClick: () => onPageChange(page + 1), type: 'button', children: "Next" })] })] }));
 };

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

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 { PsTableSortableRow } from './ps-table-sortable-row';
+export const PsTableReorderFrame = ({ children, renderOverlay, ...input }) => {
+    const { activeId, activeRunId, contextProps, placements } = usePsTableReorder(input);
+    const itemById = new Map(input.items.map((item) => [item.id, item]));
+    const api = {
+        isActive: true,
+        Row: PsTableSortableRow,
+        rowProps: (rowId) => {
+            const item = itemById.get(rowId);
+            const placement = placements.get(rowId);
+            return {
+                handleLabel: item === undefined ? '' : item.handleLabel,
+                hasHandle: item !== undefined && input.enabled && placement !== undefined && placement.size > 1,
+                isDisabled: activeRunId !== null && (placement === undefined || placement.runId !== activeRunId),
+                rowId,
+            };
+        },
+        run: (runId, ids, runChildren) => (_jsx(SortableContext, { items: ids, strategy: verticalListSortingStrategy, 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

@@ -0,0 +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-md 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-searching-state.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+export const PsTableSearchingState = ({ className, label, skeletonRows = 0, }) => (_jsxs("div", { "aria-live": 'polite', className: PallasoftClassNameService.merge('flex flex-col gap-3 px-4 py-4', className), role: 'status', children: [Array.from({ length: skeletonRows }).map((_, index) => (_jsx("div", { className: 'h-4 w-full animate-pulse rounded-full bg-mist' }, index))), _jsx("p", { className: 'text-sm text-ink/55', children: label })] }));

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

@@ -0,0 +1,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 { 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) => {
+            setNodeRef(element);
+            if (measureRef)
+                measureRef(element);
+        }, style: {
+            ...style,
+            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] }));
+};

package/dist/esm/constants/table-config.js

@@ -4,6 +4,8 @@ export const PsTableConfig = {
     groupOpenMs: 280,
     groupRowStaggerMs: 16,
     groupStaggerLimit: 12,
+    searchingLabel: 'Searching all rows…',
+    searchingSkeletonRows: 3,
     noMatchesDescription: 'Try a different search or clear the filters.',
     noMatchesTitle: 'Nothing matches',
     rowEstimatePx: { compact: 37, normal: 57 },

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

@@ -0,0 +1,63 @@
+import { useMemo, useState } from 'react';
+import { closestCenter, } from '@dnd-kit/core';
+import { usePsDragSensors } from '@pallasoft/ps-core-components';
+import { PsTableReorderService } from '../services/ps-table-reorder-service';
+export const usePsTableReorder = ({ announcements: texts, enabled, instructions, items, onReorder, }) => {
+    const [activeId, setActiveId] = useState(null);
+    const sensors = usePsDragSensors();
+    const runs = useMemo(() => enabled
+        ? PsTableReorderService.runs(items, (item) => item.groupKey, (item) => item.id)
+        : [], [enabled, items]);
+    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 labelOf = (id) => {
+        const item = itemById.get(id);
+        return item === undefined ? id : item.label;
+    };
+    const positionOf = (id) => {
+        const placement = placements.get(id);
+        return placement === undefined ? 0 : placement.index + 1;
+    };
+    const countOf = (id) => {
+        const placement = placements.get(id);
+        return placement === undefined ? 0 : placement.size;
+    };
+    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))),
+        onDragStart: ({ active }) => texts.lifted(labelOf(String(active.id)), positionOf(String(active.id)), countOf(String(active.id))),
+    };
+    const handleDragEnd = ({ active, over }) => {
+        setActiveId(null);
+        if (over === null || active.id === over.id)
+            return;
+        const placement = placements.get(String(active.id));
+        const target = placements.get(String(over.id));
+        if (placement === undefined || target === undefined || placement.runId !== target.runId)
+            return;
+        const run = runs.find((candidate) => candidate.id === placement.runId);
+        if (run === undefined)
+            return;
+        onReorder(run.groupKey, PsTableReorderService.move(run.items.map((item) => item.id), String(active.id), String(over.id)));
+    };
+    return {
+        activeId,
+        activeRunId: activePlacement === undefined ? null : activePlacement.runId,
+        contextProps: {
+            accessibility: { announcements, screenReaderInstructions: { draggable: instructions } },
+            collisionDetection: closestCenter,
+            modifiers: [PsTableReorderService.lockToVerticalAxis],
+            onDragCancel: () => setActiveId(null),
+            onDragEnd: handleDragEnd,
+            onDragStart: ({ active }) => setActiveId(String(active.id)),
+            sensors,
+        },
+        placements,
+    };
+};

package/dist/esm/index.js

@@ -34,3 +34,6 @@ export * from './services/ps-table-download-service';
 export * from './services/ps-table-scroll-anchor-service';
 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 './services/ps-table-reorder-service';

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

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

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

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

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

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

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

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

package/dist/esm/interfaces/table-reorder-row-props.js

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

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

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

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

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

package/dist/esm/interfaces/table-row-entry.js

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

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

@@ -0,0 +1,42 @@
+export class PsTableReorderService {
+    static runs(items, getKey, getId) {
+        const runs = [];
+        for (const item of items) {
+            const groupKey = getKey(item);
+            const last = runs[runs.length - 1];
+            if (last !== undefined && last.groupKey === groupKey)
+                last.items.push(item);
+            else
+                runs.push({ groupKey, id: `${groupKey}:${getId(item)}`, items: [item] });
+        }
+        return runs;
+    }
+    static placements(runs, getId) {
+        const placements = new Map();
+        for (const run of runs)
+            run.items.forEach((item, index) => placements.set(getId(item), {
+                groupKey: run.groupKey,
+                index,
+                runId: run.id,
+                size: run.items.length,
+            }));
+        return placements;
+    }
+    static move(ids, activeId, overId) {
+        const from = ids.indexOf(activeId);
+        const to = ids.indexOf(overId);
+        if (from < 0 || to < 0 || from === to)
+            return ids;
+        const next = [...ids];
+        const [moved] = next.splice(from, 1);
+        next.splice(to, 0, moved);
+        return next;
+    }
+}
+PsTableReorderService.plain = {
+    Row: 'tr',
+    isActive: false,
+    rowProps: (rowId) => ({ handleLabel: '', hasHandle: false, isDisabled: true, rowId }),
+    run: (_runId, _ids, children) => children,
+};
+PsTableReorderService.lockToVerticalAxis = ({ transform }) => ({ ...transform, x: 0 });

package/dist/hooks/use-ps-table-reorder.d.ts

@@ -0,0 +1,18 @@
+import { type DndContextProps } from '@dnd-kit/core';
+import type { PsTableReorderAnnouncements } from '../interfaces/table-reorder-announcements';
+import type { PsTableReorderItem } from '../interfaces/table-reorder-item';
+import type { PsTableReorderPlacement } from '../interfaces/table-reorder-placement';
+export interface UsePsTableReorderInput {
+    announcements: PsTableReorderAnnouncements;
+    enabled: boolean;
+    instructions: string;
+    items: PsTableReorderItem[];
+    onReorder: (groupKey: string, orderedIds: string[]) => void;
+}
+export interface PsTableReorderState {
+    activeId: string | null;
+    activeRunId: string | null;
+    contextProps: Omit<DndContextProps, 'children'>;
+    placements: Map<string, PsTableReorderPlacement>;
+}
+export declare const usePsTableReorder: ({ announcements: texts, enabled, instructions, items, onReorder, }: UsePsTableReorderInput) => PsTableReorderState;

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

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePsTableReorder = void 0;
+const react_1 = require("react");
+const core_1 = require("@dnd-kit/core");
+const ps_core_components_1 = require("@pallasoft/ps-core-components");
+const ps_table_reorder_service_1 = require("../services/ps-table-reorder-service");
+const usePsTableReorder = ({ announcements: texts, enabled, instructions, items, onReorder, }) => {
+    const [activeId, setActiveId] = (0, react_1.useState)(null);
+    const sensors = (0, ps_core_components_1.usePsDragSensors)();
+    const runs = (0, react_1.useMemo)(() => enabled
+        ? ps_table_reorder_service_1.PsTableReorderService.runs(items, (item) => item.groupKey, (item) => item.id)
+        : [], [enabled, items]);
+    const placements = (0, react_1.useMemo)(() => ps_table_reorder_service_1.PsTableReorderService.placements(runs, (item) => item.id), [runs]);
+    const activePlacement = activeId === null ? undefined : placements.get(activeId);
+    const itemById = (0, react_1.useMemo)(() => new Map(items.map((item) => [item.id, item])), [items]);
+    const labelOf = (id) => {
+        const item = itemById.get(id);
+        return item === undefined ? id : item.label;
+    };
+    const positionOf = (id) => {
+        const placement = placements.get(id);
+        return placement === undefined ? 0 : placement.index + 1;
+    };
+    const countOf = (id) => {
+        const placement = placements.get(id);
+        return placement === undefined ? 0 : placement.size;
+    };
+    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))),
+        onDragStart: ({ active }) => texts.lifted(labelOf(String(active.id)), positionOf(String(active.id)), countOf(String(active.id))),
+    };
+    const handleDragEnd = ({ active, over }) => {
+        setActiveId(null);
+        if (over === null || active.id === over.id)
+            return;
+        const placement = placements.get(String(active.id));
+        const target = placements.get(String(over.id));
+        if (placement === undefined || target === undefined || placement.runId !== target.runId)
+            return;
+        const run = runs.find((candidate) => candidate.id === placement.runId);
+        if (run === undefined)
+            return;
+        onReorder(run.groupKey, ps_table_reorder_service_1.PsTableReorderService.move(run.items.map((item) => item.id), String(active.id), String(over.id)));
+    };
+    return {
+        activeId,
+        activeRunId: activePlacement === undefined ? null : activePlacement.runId,
+        contextProps: {
+            accessibility: { announcements, screenReaderInstructions: { draggable: instructions } },
+            collisionDetection: core_1.closestCenter,
+            modifiers: [ps_table_reorder_service_1.PsTableReorderService.lockToVerticalAxis],
+            onDragCancel: () => setActiveId(null),
+            onDragEnd: handleDragEnd,
+            onDragStart: ({ active }) => setActiveId(String(active.id)),
+            sensors,
+        },
+        placements,
+    };
+};
+exports.usePsTableReorder = usePsTableReorder;

package/dist/index.d.ts

@@ -34,3 +34,6 @@ export * from './services/ps-table-download-service';
 export * from './services/ps-table-scroll-anchor-service';
 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 './services/ps-table-reorder-service';

package/dist/index.js

@@ -50,3 +50,6 @@ __exportStar(require("./services/ps-table-download-service"), exports);
 __exportStar(require("./services/ps-table-scroll-anchor-service"), exports);
 __exportStar(require("./hooks/use-ps-table-page"), exports);
 __exportStar(require("./interfaces/ps-table-page-state"), exports);
+__exportStar(require("./interfaces/table-reorder"), exports);
+__exportStar(require("./interfaces/table-reorder-announcements"), exports);
+__exportStar(require("./services/ps-table-reorder-service"), exports);

package/dist/interfaces/table-reorder-announcements.d.ts

@@ -0,0 +1,6 @@
+export interface PsTableReorderAnnouncements {
+    cancelled: (rowLabel: string) => string;
+    dropped: (rowLabel: string, position: number, count: number) => string;
+    lifted: (rowLabel: string, position: number, count: number) => string;
+    moved: (rowLabel: string, position: number, count: number) => string;
+}

package/dist/interfaces/table-reorder-announcements.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/interfaces/table-reorder-api.d.ts

@@ -0,0 +1,8 @@
+import type { ElementType, ReactNode } from 'react';
+import type { PsTableReorderRowProps } from './table-reorder-row-props';
+export interface PsTableReorderApi {
+    isActive: boolean;
+    Row: ElementType;
+    rowProps: (rowId: string) => PsTableReorderRowProps;
+    run: (runId: string, ids: string[], children: ReactNode) => ReactNode;
+}

package/dist/interfaces/table-reorder-api.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/interfaces/table-reorder-item.d.ts

@@ -0,0 +1,6 @@
+export interface PsTableReorderItem {
+    groupKey: string;
+    handleLabel: string;
+    id: string;
+    label: string;
+}

package/dist/interfaces/table-reorder-item.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/interfaces/table-reorder-placement.d.ts

@@ -0,0 +1,6 @@
+export interface PsTableReorderPlacement {
+    groupKey: string;
+    index: number;
+    runId: string;
+    size: number;
+}

package/dist/interfaces/table-reorder-placement.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/interfaces/table-reorder-row-props.d.ts

@@ -0,0 +1,6 @@
+export interface PsTableReorderRowProps {
+    handleLabel: string;
+    hasHandle: boolean;
+    isDisabled: boolean;
+    rowId: string;
+}

package/dist/interfaces/table-reorder-row-props.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/interfaces/table-reorder-run.d.ts

@@ -0,0 +1,5 @@
+export interface PsTableReorderRun<Item> {
+    groupKey: string;
+    id: string;
+    items: Item[];
+}

package/dist/interfaces/table-reorder-run.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/interfaces/table-reorder.d.ts

@@ -0,0 +1,12 @@
+import type { PsTableReorderAnnouncements } from './table-reorder-announcements';
+export interface PsTableReorder<RowData> {
+    announcements: PsTableReorderAnnouncements;
+    cardsReason?: string;
+    columnLabel: string;
+    disabledReason?: string;
+    enabled: boolean;
+    getHandleLabel: (rowLabel: string) => string;
+    groupKey: (row: RowData) => string;
+    instructions: string;
+    onReorder: (groupKey: string, orderedIds: string[]) => void;
+}

package/dist/interfaces/table-reorder.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/interfaces/table-row-entry.d.ts

@@ -0,0 +1,7 @@
+import type { VirtualItem } from '@tanstack/react-virtual';
+import type { PsTableRowMotion } from './table-row-motion';
+export interface PsTableRowEntry<RowData> {
+    motion?: PsTableRowMotion;
+    row: RowData;
+    virtualItem?: VirtualItem;
+}

package/dist/interfaces/table-row-entry.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/services/ps-table-reorder-service.d.ts

@@ -0,0 +1,11 @@
+import type { Modifier } from '@dnd-kit/core';
+import type { PsTableReorderApi } from '../interfaces/table-reorder-api';
+import type { PsTableReorderPlacement } from '../interfaces/table-reorder-placement';
+import type { PsTableReorderRun } from '../interfaces/table-reorder-run';
+export declare class PsTableReorderService {
+    static readonly plain: PsTableReorderApi;
+    static runs<Item>(items: Item[], getKey: (item: Item) => string, getId: (item: Item) => string): PsTableReorderRun<Item>[];
+    static placements<Item>(runs: PsTableReorderRun<Item>[], getId: (item: Item) => string): Map<string, PsTableReorderPlacement>;
+    static move(ids: string[], activeId: string, overId: string): string[];
+    static readonly lockToVerticalAxis: Modifier;
+}

package/dist/services/ps-table-reorder-service.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsTableReorderService = void 0;
+class PsTableReorderService {
+    static runs(items, getKey, getId) {
+        const runs = [];
+        for (const item of items) {
+            const groupKey = getKey(item);
+            const last = runs[runs.length - 1];
+            if (last !== undefined && last.groupKey === groupKey)
+                last.items.push(item);
+            else
+                runs.push({ groupKey, id: `${groupKey}:${getId(item)}`, items: [item] });
+        }
+        return runs;
+    }
+    static placements(runs, getId) {
+        const placements = new Map();
+        for (const run of runs)
+            run.items.forEach((item, index) => placements.set(getId(item), {
+                groupKey: run.groupKey,
+                index,
+                runId: run.id,
+                size: run.items.length,
+            }));
+        return placements;
+    }
+    static move(ids, activeId, overId) {
+        const from = ids.indexOf(activeId);
+        const to = ids.indexOf(overId);
+        if (from < 0 || to < 0 || from === to)
+            return ids;
+        const next = [...ids];
+        const [moved] = next.splice(from, 1);
+        next.splice(to, 0, moved);
+        return next;
+    }
+}
+exports.PsTableReorderService = PsTableReorderService;
+PsTableReorderService.plain = {
+    Row: 'tr',
+    isActive: false,
+    rowProps: (rowId) => ({ handleLabel: '', hasHandle: false, isDisabled: true, rowId }),
+    run: (_runId, _ids, children) => children,
+};
+PsTableReorderService.lockToVerticalAxis = ({ transform }) => ({ ...transform, x: 0 });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pallasoft/ps-table-components",
-	"version": "1.21.0",
+	"version": "1.22.0",
 	"private": false,
 	"main": "./dist/index.js",
 	"module": "./dist/esm/index.js",
@@ -74,7 +74,10 @@
 		"url": "git+https://github.com/pallasoft/ps-table-components.git"
 	},
 	"dependencies": {
-		"@pallasoft/ps-core-components": "^2.10.0",
+		"@dnd-kit/core": "^6.3.1",
+		"@dnd-kit/sortable": "^10.0.0",
+		"@dnd-kit/utilities": "^3.2.2",
+		"@pallasoft/ps-core-components": "^2.23.0",
 		"@pallasoft/ps-design-system": "^1.5.0",
 		"@pallasoft/ps-icons": "^1.5.4",
 		"@pallasoft/ps-input-components": "^1.14.0",