@pallasoft/ps-table-components 1.25.0 → 1.26.0

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

@@ -1,4 +1,5 @@
 import { type ReactNode } from 'react';
+import { PsTablePaginationPosition } from '../constants/ps-table-pagination-position';
 import type { PsTableColumn } from '../interfaces/table-column';
 import type { PsTableGrouping } from '../interfaces/table-grouping';
 import type { PsTableQuery } from '../interfaces/table-query';
@@ -27,6 +28,7 @@ export interface PsDataTableProps<RowData> {
     onRowHover?: (row: RowData) => void;
     page?: number;
     pageSize?: number;
+    paginationPosition?: PsTablePaginationPosition;
     pinFirstColumn?: boolean;
     query?: PsTableQuery;
     renderExpandedRow?: (row: RowData) => ReactNode;
@@ -37,4 +39,4 @@ export interface PsDataTableProps<RowData> {
     toolbarActions?: ReactNode;
     totalRows?: number;
 }
-export declare const PsDataTable: <RowData>({ caption, className, columns, defaultSort, density, expandedRowIds, mobileLayout, getBulkActions, getRowId, getRowLabel, getSearchText, grouping, isLoading, isPending, layout, onPageChange, onQueryChange, onRowClick, onRowHover, page, pageSize, pinFirstColumn, query, renderExpandedRow, reorder, rows, searchingLabel, searchPlaceholder, toolbarActions, totalRows, }: PsDataTableProps<RowData>) => import("react").JSX.Element;
+export declare const PsDataTable: <RowData>({ caption, className, columns, defaultSort, density, expandedRowIds, mobileLayout, getBulkActions, getRowId, getRowLabel, getSearchText, grouping, isLoading, isPending, layout, onPageChange, onQueryChange, onRowClick, onRowHover, page, pageSize, paginationPosition, pinFirstColumn, query, renderExpandedRow, reorder, rows, searchingLabel, searchPlaceholder, toolbarActions, totalRows, }: PsDataTableProps<RowData>) => import("react").JSX.Element;

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

@@ -42,6 +42,7 @@ const ps_input_components_1 = require("@pallasoft/ps-input-components");
 const ps_motion_components_1 = require("@pallasoft/ps-motion-components");
 const react_virtual_1 = require("@tanstack/react-virtual");
 const ps_table_control_classes_1 = require("../constants/ps-table-control-classes");
+const ps_table_pagination_position_1 = require("../constants/ps-table-pagination-position");
 const table_breakpoint_1 = require("../constants/table-breakpoint");
 const table_config_1 = require("../constants/table-config");
 const use_ps_incremental_count_1 = require("../hooks/use-ps-incremental-count");
@@ -84,7 +85,7 @@ const alignClassNames = {
     left: 'text-left',
     right: 'text-right tabular-nums',
 };
-const PsDataTable = ({ caption, className, columns, defaultSort, density = 'normal', expandedRowIds, mobileLayout = 'cards', getBulkActions, getRowId, getRowLabel, getSearchText, grouping, isLoading = false, isPending = false, layout = 'auto', onPageChange, onQueryChange, onRowClick, onRowHover, page, pageSize, pinFirstColumn = true, query, renderExpandedRow, reorder, rows, searchingLabel = table_config_1.PsTableConfig.searchingLabel, searchPlaceholder = table_config_1.PsTableConfig.searchPlaceholder, toolbarActions, totalRows, }) => {
+const PsDataTable = ({ caption, className, columns, defaultSort, density = 'normal', expandedRowIds, mobileLayout = 'cards', getBulkActions, getRowId, getRowLabel, getSearchText, grouping, isLoading = false, isPending = false, layout = 'auto', onPageChange, onQueryChange, onRowClick, onRowHover, page, pageSize, paginationPosition = ps_table_pagination_position_1.PsTablePaginationPosition.bottom, pinFirstColumn = true, query, renderExpandedRow, reorder, rows, searchingLabel = table_config_1.PsTableConfig.searchingLabel, searchPlaceholder = table_config_1.PsTableConfig.searchPlaceholder, toolbarActions, totalRows, }) => {
     const containerRef = (0, react_1.useRef)(null);
     const [uncontrolledPage, setUncontrolledPage] = (0, react_1.useState)(1);
     const [uncontrolledQuery, setUncontrolledQuery] = (0, react_1.useState)(() => ps_table_query_service_1.PsTableQueryService.empty(defaultSort ? defaultSort : null));
@@ -194,7 +195,9 @@ const PsDataTable = ({ caption, className, columns, defaultSort, density = 'norm
             announcements: nesting.announcements,
             canDrag: (id) => {
                 const row = find(id);
-                return row !== undefined && nesting.canDrag(row);
+                return (row !== undefined &&
+                    (reorder.isRowDraggable === undefined || reorder.isRowDraggable(row)) &&
+                    nesting.canDrag(row));
             },
             canDrop: (activeId, targetId, placement) => {
                 const active = find(activeId);
@@ -226,13 +229,16 @@ const PsDataTable = ({ caption, className, columns, defaultSort, density = 'norm
                 groupKey: reorderKey(row),
                 handleLabel: reorder.getHandleLabel(label),
                 id: rowId,
+                isDraggable: reorder.isRowDraggable === undefined || reorder.isRowDraggable(row),
                 label,
             };
         })
         : [], [getRowId, getRowLabel, reorder, reorderKey, visibleRows]);
-    const renderOverlayRow = (rowId) => {
+    const showsPagination = Boolean(pageSize) && (!grouping || isServerPaginated);
+    const renderPagination = (paginationClassName) => pageSize ? ((0, jsx_runtime_1.jsx)(ps_table_pagination_1.PsTablePagination, { className: paginationClassName, isPartial: isPartial, loadedPageCount: pageCountOf(loadedRowCount), onPageChange: changePage, page: safePage, pageCount: pageCount, pageSize: pageSize, totalRows: rowCount })) : null;
+    const renderOverlayRow = (rowId, size) => {
         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) }) }));
+        return row === undefined ? null : ((0, jsx_runtime_1.jsxs)("table", { className: 'pointer-events-none w-full table-fixed border-collapse bg-surface text-left', style: size === null ? undefined : { width: size.width }, children: [size === null ? null : ((0, jsx_runtime_1.jsx)("colgroup", { children: size.columnWidths.map((width, index) => ((0, jsx_runtime_1.jsx)("col", { style: { width } }, index))) })), (0, jsx_runtime_1.jsx)("tbody", { children: renderRow(ps_table_reorder_service_1.PsTableReorderService.plain, row, undefined, undefined, true) })] }));
     };
     const renderReorder = (children) => reorder === undefined ? (children(ps_table_reorder_service_1.PsTableReorderService.plain)) : ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: children(ps_table_reorder_service_1.PsTableReorderService.plain), children: (0, jsx_runtime_1.jsx)(LazyReorderFrame, { announcements: reorder.announcements, enabled: reorder.enabled, instructions: reorder.instructions, items: reorderItems, nesting: nestingBinding, onReorder: reorder.onReorder, renderOverlay: renderOverlayRow, children: children }) }));
     const changePage = (next) => {
@@ -312,7 +318,7 @@ 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 = (api, row, motion, virtualItem) => {
+    const renderRow = (api, row, motion, virtualItem, isOverlay = false) => {
         const rowId = getRowId(row);
         const isExpanded = expandedRowIds ? expandedRowIds.includes(rowId) : false;
         const rowLabel = getRowLabel ? getRowLabel(row) : rowId;
@@ -324,7 +330,7 @@ const PsDataTable = ({ caption, className, columns, defaultSort, density = 'norm
                 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
+        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 hover:bg-mist/60', motion ? motion.className : '', onRowClick ? 'ps-focus-ring cursor-pointer' : '', isExpanded ? 'bg-mist/60' : ''), onClick: onRowClick ? () => onRowClick(row) : undefined, onFocus: onRowHover ? () => onRowHover(row) : undefined, onPointerEnter: onRowHover ? () => onRowHover(row) : undefined, onKeyDown: onRowClick
                         ? (event) => {
                             if (event.target !== event.currentTarget)
                                 return;
@@ -339,7 +345,7 @@ const PsDataTable = ({ caption, className, columns, defaultSort, density = 'norm
                                 ((layout === 'fixed' && !column.wrap) ||
                                     ps_table_column_size_service_1.PsTableColumnSizeService.maxWidthOf(column) !== undefined)
                                 ? 'truncate'
-                                : '', 'text-sm text-ink'), style: columnStyle(column, fittedWidths.get(column.id)), 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));
+                                : '', 'text-sm text-ink'), style: columnStyle(column, fittedWidths.get(column.id)), title: ps_table_cell_tooltip_service_1.PsTableCellTooltipService.forCell(column, row), children: column.render(row) }, column.id)))] }), renderExpandedRow && !isOverlay ? ((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) => reorderKey(entry.row), (entry) => getRowId(entry.row)).map((run) => api.run(run.id, run.items.map((entry) => getRowId(entry.row)), run.items.map((entry) => renderRow(api, entry.row, entry.motion, entry.virtualItem))))
@@ -354,7 +360,9 @@ 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: [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
+                }, 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: [showsPagination && paginationPosition !== ps_table_pagination_position_1.PsTablePaginationPosition.bottom
+                        ? renderPagination('border-b border-t-0')
+                        : null, 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
@@ -392,6 +400,8 @@ const PsDataTable = ({ caption, className, columns, defaultSort, density = 'norm
                                                 ]
                                                 : renderEntries(api, visibleRows.map((row) => ({ row })))] }), hasFooter ? ((0, jsx_runtime_1.jsx)("tfoot", { className: 'border-t-2 border-line bg-mist/50 text-sm font-semibold text-ink', children: (0, jsx_runtime_1.jsxs)("tr", { children: [reorder ? (0, jsx_runtime_1.jsx)("td", { className: pins.reorder }) : null, isSelectable ? (0, jsx_runtime_1.jsx)("td", { className: pins.select }) : null, visibleColumns.map((column, columnIndex) => ((0, jsx_runtime_1.jsx)("td", { className: ps_design_system_1.PallasoftClassNameService.merge(densityClassNames[density].cell, placementOf(column, columnIndex), alignClassNames[column.align !== null && column.align !== undefined
                                                     ? column.align
-                                                    : 'left'], 'whitespace-nowrap'), children: column.footer }, column.id)))] }) })) : null] }))) }), visibleRows.length > 0 && isSearching ? ((0, jsx_runtime_1.jsx)(ps_table_searching_state_1.PsTableSearchingState, { className: 'border-t border-line py-3', label: searchingLabel })) : null, pageSize && (!grouping || isServerPaginated) ? ((0, jsx_runtime_1.jsx)(ps_table_pagination_1.PsTablePagination, { isPartial: isPartial, loadedPageCount: pageCountOf(loadedRowCount), onPageChange: changePage, page: safePage, pageCount: pageCount, pageSize: pageSize, totalRows: rowCount })) : null] })] }));
+                                                    : '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, showsPagination && paginationPosition !== ps_table_pagination_position_1.PsTablePaginationPosition.top
+                        ? renderPagination('')
+                        : null] })] }));
 };
 exports.PsDataTable = PsDataTable;

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

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

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

@@ -9,7 +9,7 @@ const use_ps_table_reorder_1 = require("../hooks/use-ps-table-reorder");
 const ps_table_reorder_service_1 = require("../services/ps-table-reorder-service");
 const ps_table_sortable_row_1 = require("./ps-table-sortable-row");
 const PsTableReorderFrame = ({ children, renderOverlay, ...input }) => {
-    const { activeId, activeRunId, blockedReason, contextProps, drop, placements } = (0, use_ps_table_reorder_1.usePsTableReorder)(input);
+    const { activeId, activeRunId, activeSize, blockedReason, contextProps, drop, placements } = (0, use_ps_table_reorder_1.usePsTableReorder)(input);
     const itemById = new Map(input.items.map((item) => [item.id, item]));
     const { nesting } = input;
     const api = {
@@ -22,7 +22,7 @@ const PsTableReorderFrame = ({ children, renderOverlay, ...input }) => {
                 return {
                     dropPlacement: drop !== null && drop.overId === rowId ? drop.placement : null,
                     handleLabel: item === undefined ? '' : item.handleLabel,
-                    hasHandle: item !== undefined && input.enabled && nesting.canDrag(rowId),
+                    hasHandle: item !== undefined && item.isDraggable && input.enabled && nesting.canDrag(rowId),
                     isDisabled: !input.enabled,
                     isDropTarget: item !== undefined,
                     rowId,
@@ -30,7 +30,11 @@ const PsTableReorderFrame = ({ children, renderOverlay, ...input }) => {
             return {
                 dropPlacement: null,
                 handleLabel: item === undefined ? '' : item.handleLabel,
-                hasHandle: item !== undefined && input.enabled && placement !== undefined && placement.size > 1,
+                hasHandle: item !== undefined &&
+                    item.isDraggable &&
+                    input.enabled &&
+                    placement !== undefined &&
+                    placement.size > 1,
                 isDisabled: activeRunId !== null && (placement === undefined || placement.runId !== activeRunId),
                 isDropTarget: false,
                 rowId,
@@ -38,6 +42,6 @@ const PsTableReorderFrame = ({ children, renderOverlay, ...input }) => {
         },
         run: (runId, ids, runChildren) => ((0, jsx_runtime_1.jsx)(sortable_1.SortableContext, { items: ids, strategy: nesting === undefined ? sortable_1.verticalListSortingStrategy : ps_table_reorder_service_1.PsTableReorderService.still, children: runChildren }, runId)),
     };
-    return ((0, jsx_runtime_1.jsxs)(core_1.DndContext, { ...contextProps, children: [children(api), blockedReason === null ? null : ((0, jsx_runtime_1.jsx)("p", { className: 'pointer-events-none fixed bottom-6 left-1/2 z-50 max-w-sm -translate-x-1/2 rounded-ps-control bg-ink px-3 py-2 text-sm text-white shadow-lg', role: 'status', children: blockedReason })), (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) })] }));
+    return ((0, jsx_runtime_1.jsxs)(core_1.DndContext, { ...contextProps, children: [children(api), blockedReason === null ? null : ((0, jsx_runtime_1.jsx)("p", { className: 'pointer-events-none fixed bottom-6 left-1/2 z-50 max-w-sm -translate-x-1/2 rounded-ps-control bg-ink px-3 py-2 text-sm text-white shadow-lg', role: 'status', children: blockedReason })), (0, jsx_runtime_1.jsx)(ps_core_components_1.PsDragOverlay, { className: ps_core_components_1.PsDragClasses.lifted, frames: ps_core_components_1.PsDragListLiftFrames, isDropAnimated: nesting === undefined, children: activeId === null ? null : renderOverlay(activeId, activeSize) })] }));
 };
 exports.PsTableReorderFrame = PsTableReorderFrame;

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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsTableDropClasses = void 0;
 exports.PsTableDropClasses = {
-    after: '[&>td]:shadow-[inset_0_-2px_0_0_rgb(var(--ps-color-primary-rgb))]',
-    before: '[&>td]:shadow-[inset_0_2px_0_0_rgb(var(--ps-color-primary-rgb))]',
+    after: '[&>td]:bg-[linear-gradient(rgb(var(--ps-color-primary-rgb)),rgb(var(--ps-color-primary-rgb)))] [&>td]:bg-[length:100%_2px] [&>td]:bg-bottom [&>td]:bg-no-repeat',
+    before: '[&>td]:bg-[linear-gradient(rgb(var(--ps-color-primary-rgb)),rgb(var(--ps-color-primary-rgb)))] [&>td]:bg-[length:100%_2px] [&>td]:bg-top [&>td]:bg-no-repeat',
     into: 'bg-primary/10 [&>td]:shadow-[inset_0_0_0_2px_rgb(var(--ps-color-primary-rgb)/0.5)]',
 };

package/dist/constants/ps-table-pagination-position.d.ts

@@ -0,0 +1,6 @@
+export declare const PsTablePaginationPosition: {
+    readonly both: "both";
+    readonly bottom: "bottom";
+    readonly top: "top";
+};
+export type PsTablePaginationPosition = (typeof PsTablePaginationPosition)[keyof typeof PsTablePaginationPosition];

package/dist/constants/ps-table-pagination-position.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsTablePaginationPosition = void 0;
+exports.PsTablePaginationPosition = {
+    both: 'both',
+    bottom: 'bottom',
+    top: 'top',
+};

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

@@ -6,6 +6,7 @@ import { PsCheckbox } from '@pallasoft/ps-input-components';
 import { PsCollapse } from '@pallasoft/ps-motion-components';
 import { useVirtualizer, useWindowVirtualizer } from '@tanstack/react-virtual';
 import { PsTableControlClasses } from '../constants/ps-table-control-classes';
+import { PsTablePaginationPosition } from '../constants/ps-table-pagination-position';
 import { PsTableHideBelowClasses } from '../constants/table-breakpoint';
 import { PsTableConfig } from '../constants/table-config';
 import { usePsIncrementalCount } from '../hooks/use-ps-incremental-count';
@@ -48,7 +49,7 @@ const alignClassNames = {
     left: 'text-left',
     right: 'text-right tabular-nums',
 };
-export const PsDataTable = ({ caption, className, columns, defaultSort, density = 'normal', expandedRowIds, mobileLayout = 'cards', getBulkActions, getRowId, getRowLabel, getSearchText, grouping, isLoading = false, isPending = false, layout = 'auto', onPageChange, onQueryChange, onRowClick, onRowHover, page, pageSize, pinFirstColumn = true, query, renderExpandedRow, reorder, rows, searchingLabel = PsTableConfig.searchingLabel, searchPlaceholder = PsTableConfig.searchPlaceholder, toolbarActions, totalRows, }) => {
+export const PsDataTable = ({ caption, className, columns, defaultSort, density = 'normal', expandedRowIds, mobileLayout = 'cards', getBulkActions, getRowId, getRowLabel, getSearchText, grouping, isLoading = false, isPending = false, layout = 'auto', onPageChange, onQueryChange, onRowClick, onRowHover, page, pageSize, paginationPosition = PsTablePaginationPosition.bottom, pinFirstColumn = true, query, renderExpandedRow, reorder, rows, searchingLabel = PsTableConfig.searchingLabel, searchPlaceholder = PsTableConfig.searchPlaceholder, toolbarActions, totalRows, }) => {
     const containerRef = useRef(null);
     const [uncontrolledPage, setUncontrolledPage] = useState(1);
     const [uncontrolledQuery, setUncontrolledQuery] = useState(() => PsTableQueryService.empty(defaultSort ? defaultSort : null));
@@ -158,7 +159,9 @@ export const PsDataTable = ({ caption, className, columns, defaultSort, density
             announcements: nesting.announcements,
             canDrag: (id) => {
                 const row = find(id);
-                return row !== undefined && nesting.canDrag(row);
+                return (row !== undefined &&
+                    (reorder.isRowDraggable === undefined || reorder.isRowDraggable(row)) &&
+                    nesting.canDrag(row));
             },
             canDrop: (activeId, targetId, placement) => {
                 const active = find(activeId);
@@ -190,13 +193,16 @@ export const PsDataTable = ({ caption, className, columns, defaultSort, density
                 groupKey: reorderKey(row),
                 handleLabel: reorder.getHandleLabel(label),
                 id: rowId,
+                isDraggable: reorder.isRowDraggable === undefined || reorder.isRowDraggable(row),
                 label,
             };
         })
         : [], [getRowId, getRowLabel, reorder, reorderKey, visibleRows]);
-    const renderOverlayRow = (rowId) => {
+    const showsPagination = Boolean(pageSize) && (!grouping || isServerPaginated);
+    const renderPagination = (paginationClassName) => pageSize ? (_jsx(PsTablePagination, { className: paginationClassName, isPartial: isPartial, loadedPageCount: pageCountOf(loadedRowCount), onPageChange: changePage, page: safePage, pageCount: pageCount, pageSize: pageSize, totalRows: rowCount })) : null;
+    const renderOverlayRow = (rowId, size) => {
         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) }) }));
+        return row === undefined ? null : (_jsxs("table", { className: 'pointer-events-none w-full table-fixed border-collapse bg-surface text-left', style: size === null ? undefined : { width: size.width }, children: [size === null ? null : (_jsx("colgroup", { children: size.columnWidths.map((width, index) => (_jsx("col", { style: { width } }, index))) })), _jsx("tbody", { children: renderRow(PsTableReorderService.plain, row, undefined, undefined, true) })] }));
     };
     const renderReorder = (children) => reorder === undefined ? (children(PsTableReorderService.plain)) : (_jsx(Suspense, { fallback: children(PsTableReorderService.plain), children: _jsx(LazyReorderFrame, { announcements: reorder.announcements, enabled: reorder.enabled, instructions: reorder.instructions, items: reorderItems, nesting: nestingBinding, onReorder: reorder.onReorder, renderOverlay: renderOverlayRow, children: children }) }));
     const changePage = (next) => {
@@ -276,7 +282,7 @@ 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 = (api, row, motion, virtualItem) => {
+    const renderRow = (api, row, motion, virtualItem, isOverlay = false) => {
         const rowId = getRowId(row);
         const isExpanded = expandedRowIds ? expandedRowIds.includes(rowId) : false;
         const rowLabel = getRowLabel ? getRowLabel(row) : rowId;
@@ -288,7 +294,7 @@ export const PsDataTable = ({ caption, className, columns, defaultSort, density
                 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
+        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 hover:bg-mist/60', motion ? motion.className : '', onRowClick ? 'ps-focus-ring cursor-pointer' : '', isExpanded ? 'bg-mist/60' : ''), onClick: onRowClick ? () => onRowClick(row) : undefined, onFocus: onRowHover ? () => onRowHover(row) : undefined, onPointerEnter: onRowHover ? () => onRowHover(row) : undefined, onKeyDown: onRowClick
                         ? (event) => {
                             if (event.target !== event.currentTarget)
                                 return;
@@ -303,7 +309,7 @@ export const PsDataTable = ({ caption, className, columns, defaultSort, density
                                 ((layout === 'fixed' && !column.wrap) ||
                                     PsTableColumnSizeService.maxWidthOf(column) !== undefined)
                                 ? 'truncate'
-                                : '', 'text-sm text-ink'), style: columnStyle(column, fittedWidths.get(column.id)), title: PsTableCellTooltipService.forCell(column, row), children: column.render(row) }, column.id)))] }), renderExpandedRow ? (_jsx("tr", { "aria-hidden": !isExpanded, className: isExpanded ? 'border-t-0' : 'border-0', children: _jsx("td", { className: 'p-0', colSpan: columnCount, children: _jsx(PsCollapse, { isOpen: isExpanded, children: _jsx("div", { className: 'w-0 min-w-full border-l-2 border-primary bg-mist/40 px-4 py-4', children: renderExpandedRow(row) }) }) }) })) : null] }, rowId));
+                                : '', 'text-sm text-ink'), style: columnStyle(column, fittedWidths.get(column.id)), title: PsTableCellTooltipService.forCell(column, row), children: column.render(row) }, column.id)))] }), renderExpandedRow && !isOverlay ? (_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) => reorderKey(entry.row), (entry) => getRowId(entry.row)).map((run) => api.run(run.id, run.items.map((entry) => getRowId(entry.row)), run.items.map((entry) => renderRow(api, entry.row, entry.motion, entry.virtualItem))))
@@ -318,7 +324,9 @@ 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: [reorder && reorder.cardsReason ? (_jsx("p", { className: 'border-b border-line px-4 py-2 text-xs text-ink/55', children: reorder.cardsReason })) : null, 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: [showsPagination && paginationPosition !== PsTablePaginationPosition.bottom
+                        ? renderPagination('border-b border-t-0')
+                        : null, 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
@@ -356,5 +364,7 @@ export const PsDataTable = ({ caption, className, columns, defaultSort, density
                                                 ]
                                                 : renderEntries(api, visibleRows.map((row) => ({ row })))] }), hasFooter ? (_jsx("tfoot", { className: 'border-t-2 border-line bg-mist/50 text-sm font-semibold text-ink', children: _jsxs("tr", { children: [reorder ? _jsx("td", { className: pins.reorder }) : null, isSelectable ? _jsx("td", { className: pins.select }) : null, visibleColumns.map((column, columnIndex) => (_jsx("td", { className: PallasoftClassNameService.merge(densityClassNames[density].cell, placementOf(column, columnIndex), alignClassNames[column.align !== null && column.align !== undefined
                                                     ? column.align
-                                                    : 'left'], 'whitespace-nowrap'), children: column.footer }, column.id)))] }) })) : null] }))) }), visibleRows.length > 0 && isSearching ? (_jsx(PsTableSearchingState, { className: 'border-t border-line py-3', label: searchingLabel })) : null, pageSize && (!grouping || isServerPaginated) ? (_jsx(PsTablePagination, { isPartial: isPartial, loadedPageCount: pageCountOf(loadedRowCount), onPageChange: changePage, page: safePage, pageCount: pageCount, pageSize: pageSize, totalRows: rowCount })) : null] })] }));
+                                                    : '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, showsPagination && paginationPosition !== PsTablePaginationPosition.top
+                        ? renderPagination('')
+                        : null] })] }));
 };

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

@@ -6,7 +6,7 @@ import { usePsTableReorder } from '../hooks/use-ps-table-reorder';
 import { PsTableReorderService } from '../services/ps-table-reorder-service';
 import { PsTableSortableRow } from './ps-table-sortable-row';
 export const PsTableReorderFrame = ({ children, renderOverlay, ...input }) => {
-    const { activeId, activeRunId, blockedReason, contextProps, drop, placements } = usePsTableReorder(input);
+    const { activeId, activeRunId, activeSize, blockedReason, contextProps, drop, placements } = usePsTableReorder(input);
     const itemById = new Map(input.items.map((item) => [item.id, item]));
     const { nesting } = input;
     const api = {
@@ -19,7 +19,7 @@ export const PsTableReorderFrame = ({ children, renderOverlay, ...input }) => {
                 return {
                     dropPlacement: drop !== null && drop.overId === rowId ? drop.placement : null,
                     handleLabel: item === undefined ? '' : item.handleLabel,
-                    hasHandle: item !== undefined && input.enabled && nesting.canDrag(rowId),
+                    hasHandle: item !== undefined && item.isDraggable && input.enabled && nesting.canDrag(rowId),
                     isDisabled: !input.enabled,
                     isDropTarget: item !== undefined,
                     rowId,
@@ -27,7 +27,11 @@ export const PsTableReorderFrame = ({ children, renderOverlay, ...input }) => {
             return {
                 dropPlacement: null,
                 handleLabel: item === undefined ? '' : item.handleLabel,
-                hasHandle: item !== undefined && input.enabled && placement !== undefined && placement.size > 1,
+                hasHandle: item !== undefined &&
+                    item.isDraggable &&
+                    input.enabled &&
+                    placement !== undefined &&
+                    placement.size > 1,
                 isDisabled: activeRunId !== null && (placement === undefined || placement.runId !== activeRunId),
                 isDropTarget: false,
                 rowId,
@@ -35,5 +39,5 @@ export const PsTableReorderFrame = ({ children, renderOverlay, ...input }) => {
         },
         run: (runId, ids, runChildren) => (_jsx(SortableContext, { items: ids, strategy: nesting === undefined ? verticalListSortingStrategy : PsTableReorderService.still, children: runChildren }, runId)),
     };
-    return (_jsxs(DndContext, { ...contextProps, children: [children(api), blockedReason === null ? null : (_jsx("p", { className: 'pointer-events-none fixed bottom-6 left-1/2 z-50 max-w-sm -translate-x-1/2 rounded-ps-control bg-ink px-3 py-2 text-sm text-white shadow-lg', role: 'status', children: blockedReason })), _jsx(PsDragOverlay, { className: PsDragClasses.lifted, frames: PsDragListLiftFrames, children: activeId === null ? null : renderOverlay(activeId) })] }));
+    return (_jsxs(DndContext, { ...contextProps, children: [children(api), blockedReason === null ? null : (_jsx("p", { className: 'pointer-events-none fixed bottom-6 left-1/2 z-50 max-w-sm -translate-x-1/2 rounded-ps-control bg-ink px-3 py-2 text-sm text-white shadow-lg', role: 'status', children: blockedReason })), _jsx(PsDragOverlay, { className: PsDragClasses.lifted, frames: PsDragListLiftFrames, isDropAnimated: nesting === undefined, children: activeId === null ? null : renderOverlay(activeId, activeSize) })] }));
 };

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

@@ -1,5 +1,5 @@
 export const PsTableDropClasses = {
-    after: '[&>td]:shadow-[inset_0_-2px_0_0_rgb(var(--ps-color-primary-rgb))]',
-    before: '[&>td]:shadow-[inset_0_2px_0_0_rgb(var(--ps-color-primary-rgb))]',
+    after: '[&>td]:bg-[linear-gradient(rgb(var(--ps-color-primary-rgb)),rgb(var(--ps-color-primary-rgb)))] [&>td]:bg-[length:100%_2px] [&>td]:bg-bottom [&>td]:bg-no-repeat',
+    before: '[&>td]:bg-[linear-gradient(rgb(var(--ps-color-primary-rgb)),rgb(var(--ps-color-primary-rgb)))] [&>td]:bg-[length:100%_2px] [&>td]:bg-top [&>td]:bg-no-repeat',
     into: 'bg-primary/10 [&>td]:shadow-[inset_0_0_0_2px_rgb(var(--ps-color-primary-rgb)/0.5)]',
 };

package/dist/esm/constants/ps-table-pagination-position.js

@@ -0,0 +1,5 @@
+export const PsTablePaginationPosition = {
+    both: 'both',
+    bottom: 'bottom',
+    top: 'top',
+};

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

@@ -9,6 +9,7 @@ const pointerThenCenter = (args) => {
 };
 export const usePsTableReorder = ({ announcements: texts, enabled, instructions, items, nesting, onReorder, }) => {
     const [activeId, setActiveId] = useState(null);
+    const [activeSize, setActiveSize] = useState(null);
     const [drop, setDrop] = useState(null);
     const [blockedReason, setBlockedReason] = useState(null);
     const dropRef = useRef(null);
@@ -101,6 +102,7 @@ export const usePsTableReorder = ({ announcements: texts, enabled, instructions,
         const { active, over } = event;
         const target = resolveDrop(event);
         setActiveId(null);
+        setActiveSize(null);
         setDrop(null);
         setBlockedReason(null);
         dropRef.current = null;
@@ -122,6 +124,7 @@ export const usePsTableReorder = ({ announcements: texts, enabled, instructions,
     };
     return {
         activeId,
+        activeSize,
         blockedReason,
         activeRunId: activePlacement === undefined ? null : activePlacement.runId,
         contextProps: {
@@ -130,13 +133,17 @@ export const usePsTableReorder = ({ announcements: texts, enabled, instructions,
             modifiers: [PsTableReorderService.lockToVerticalAxis],
             onDragCancel: () => {
                 setActiveId(null);
+                setActiveSize(null);
                 setDrop(null);
                 setBlockedReason(null);
                 dropRef.current = null;
             },
             onDragEnd: handleDragEnd,
             onDragMove: nesting === undefined ? undefined : handleDragMove,
-            onDragStart: ({ active }) => setActiveId(String(active.id)),
+            onDragStart: ({ active, activatorEvent }) => {
+                setActiveSize(PsTableReorderService.measure(activatorEvent));
+                setActiveId(String(active.id));
+            },
             sensors,
         },
         drop,

package/dist/esm/index.js

@@ -47,3 +47,5 @@ export * from './interfaces/table-reorder-nesting';
 export * from './interfaces/table-nesting-announcements';
 export * from './constants/ps-table-drop-placement';
 export * from './services/ps-table-reorder-service';
+export * from './constants/ps-table-pagination-position';
+export * from './interfaces/table-drag-size';

package/dist/esm/interfaces/table-drag-size.js

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

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

@@ -33,6 +33,18 @@ export class PsTableReorderService {
         next.splice(to, 0, moved);
         return next;
     }
+    static measure(activator) {
+        const target = activator === null ? null : activator.target;
+        const row = target instanceof Element ? target.closest('tr') : null;
+        if (row === null)
+            return null;
+        const rect = row.getBoundingClientRect();
+        return {
+            columnWidths: Array.from(row.children).map((cell) => cell.getBoundingClientRect().width),
+            height: rect.height,
+            width: rect.width,
+        };
+    }
     static pointerY(event, deltaY) {
         if (event instanceof MouseEvent)
             return event.clientY + deltaY;

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

@@ -1,4 +1,5 @@
 import { type DndContextProps } from '@dnd-kit/core';
+import type { PsTableDragSize } from '../interfaces/table-drag-size';
 import type { PsTableDrop } from '../interfaces/table-drop';
 import type { PsTableReorderAnnouncements } from '../interfaces/table-reorder-announcements';
 import type { PsTableReorderItem } from '../interfaces/table-reorder-item';
@@ -15,6 +16,7 @@ export interface UsePsTableReorderInput {
 export interface PsTableReorderState {
     activeId: string | null;
     activeRunId: string | null;
+    activeSize: PsTableDragSize | null;
     contextProps: Omit<DndContextProps, 'children'>;
     blockedReason: string | null;
     drop: PsTableDrop | null;

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

@@ -12,6 +12,7 @@ const pointerThenCenter = (args) => {
 };
 const usePsTableReorder = ({ announcements: texts, enabled, instructions, items, nesting, onReorder, }) => {
     const [activeId, setActiveId] = (0, react_1.useState)(null);
+    const [activeSize, setActiveSize] = (0, react_1.useState)(null);
     const [drop, setDrop] = (0, react_1.useState)(null);
     const [blockedReason, setBlockedReason] = (0, react_1.useState)(null);
     const dropRef = (0, react_1.useRef)(null);
@@ -104,6 +105,7 @@ const usePsTableReorder = ({ announcements: texts, enabled, instructions, items,
         const { active, over } = event;
         const target = resolveDrop(event);
         setActiveId(null);
+        setActiveSize(null);
         setDrop(null);
         setBlockedReason(null);
         dropRef.current = null;
@@ -125,6 +127,7 @@ const usePsTableReorder = ({ announcements: texts, enabled, instructions, items,
     };
     return {
         activeId,
+        activeSize,
         blockedReason,
         activeRunId: activePlacement === undefined ? null : activePlacement.runId,
         contextProps: {
@@ -133,13 +136,17 @@ const usePsTableReorder = ({ announcements: texts, enabled, instructions, items,
             modifiers: [ps_table_reorder_service_1.PsTableReorderService.lockToVerticalAxis],
             onDragCancel: () => {
                 setActiveId(null);
+                setActiveSize(null);
                 setDrop(null);
                 setBlockedReason(null);
                 dropRef.current = null;
             },
             onDragEnd: handleDragEnd,
             onDragMove: nesting === undefined ? undefined : handleDragMove,
-            onDragStart: ({ active }) => setActiveId(String(active.id)),
+            onDragStart: ({ active, activatorEvent }) => {
+                setActiveSize(ps_table_reorder_service_1.PsTableReorderService.measure(activatorEvent));
+                setActiveId(String(active.id));
+            },
             sensors,
         },
         drop,

package/dist/index.d.ts

@@ -47,3 +47,5 @@ export * from './interfaces/table-reorder-nesting';
 export * from './interfaces/table-nesting-announcements';
 export * from './constants/ps-table-drop-placement';
 export * from './services/ps-table-reorder-service';
+export * from './constants/ps-table-pagination-position';
+export * from './interfaces/table-drag-size';

package/dist/index.js

@@ -63,3 +63,5 @@ __exportStar(require("./interfaces/table-reorder-nesting"), exports);
 __exportStar(require("./interfaces/table-nesting-announcements"), exports);
 __exportStar(require("./constants/ps-table-drop-placement"), exports);
 __exportStar(require("./services/ps-table-reorder-service"), exports);
+__exportStar(require("./constants/ps-table-pagination-position"), exports);
+__exportStar(require("./interfaces/table-drag-size"), exports);

package/dist/interfaces/table-drag-size.d.ts

@@ -0,0 +1,5 @@
+export interface PsTableDragSize {
+    columnWidths: number[];
+    height: number;
+    width: number;
+}

package/dist/interfaces/table-drag-size.js

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

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

@@ -2,5 +2,6 @@ export interface PsTableReorderItem {
     groupKey: string;
     handleLabel: string;
     id: string;
+    isDraggable: boolean;
     label: string;
 }

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

@@ -9,6 +9,7 @@ export interface PsTableReorder<RowData> {
     getHandleLabel: (rowLabel: string) => string;
     groupKey?: (row: RowData) => string;
     instructions: string;
+    isRowDraggable?: (row: RowData) => boolean;
     nesting?: PsTableReorderNesting<RowData>;
     onReorder?: (groupKey: string, orderedIds: string[]) => void;
 }

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

@@ -1,6 +1,7 @@
 import type { Modifier } from '@dnd-kit/core';
 import type { SortingStrategy } from '@dnd-kit/sortable';
 import { PsTableDropPlacement } from '../constants/ps-table-drop-placement';
+import type { PsTableDragSize } from '../interfaces/table-drag-size';
 import type { PsTableReorderApi } from '../interfaces/table-reorder-api';
 import type { PsTableReorderPlacement } from '../interfaces/table-reorder-placement';
 import type { PsTableReorderRun } from '../interfaces/table-reorder-run';
@@ -11,6 +12,7 @@ export declare class PsTableReorderService {
     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 measure(activator: Event | null): PsTableDragSize | null;
     static pointerY(event: Event | null, deltaY: number): number | null;
     static dropPlacement(pointerY: number | null, rect: {
         height: number;

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

@@ -36,6 +36,18 @@ class PsTableReorderService {
         next.splice(to, 0, moved);
         return next;
     }
+    static measure(activator) {
+        const target = activator === null ? null : activator.target;
+        const row = target instanceof Element ? target.closest('tr') : null;
+        if (row === null)
+            return null;
+        const rect = row.getBoundingClientRect();
+        return {
+            columnWidths: Array.from(row.children).map((cell) => cell.getBoundingClientRect().width),
+            height: rect.height,
+            width: rect.width,
+        };
+    }
     static pointerY(event, deltaY) {
         if (event instanceof MouseEvent)
             return event.clientY + deltaY;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pallasoft/ps-table-components",
-	"version": "1.25.0",
+	"version": "1.26.0",
 	"private": false,
 	"main": "./dist/index.js",
 	"module": "./dist/esm/index.js",
@@ -78,7 +78,7 @@
 		"@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-core-components": "^2.32.0",
 		"@pallasoft/ps-icons": "^1.5.4",
 		"@pallasoft/ps-input-components": "^1.14.0 || ^2.0.0",
 		"@pallasoft/ps-motion-components": "^1.2.0",