@pallasoft/ps-table-components 1.28.3 → 1.29.0

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

@@ -63,8 +63,8 @@ export const PsDataTable = ({ caption, className, clearSelectionKey, columns, cu
     const [openedGroupKeys, setOpenedGroupKeys] = useState([]);
     const [seenClearKey, setSeenClearKey] = useState(clearSelectionKey);
     const stickyRegionRef = useRef(null);
-    const stickySentinelRef = useRef(null);
     const stickyCardRef = useRef(null);
+    const stickyContentRef = useRef(null);
     const stickyHeadRef = useRef(null);
     const currentQuery = query ? query : uncontrolledQuery;
     if (seenClearKey !== clearSelectionKey) {
@@ -93,12 +93,12 @@ export const PsDataTable = ({ caption, className, clearSelectionKey, columns, cu
     const pins = PsTablePinService.leading(pinFirstColumn, Boolean(reorder), isSelectable);
     const placementOf = (column, columnIndex) => PallasoftClassNameService.merge(column.hideBelow === undefined ? '' : PsTableHideBelowClasses[column.hideBelow], columnIndex === 0 ? pins.first : '', PsTablePinService.end(column.pinEnd === true));
     const overflow = usePsTableOverflow(`${visibleColumns.map((column) => column.id).join(',')}:${rows.length}`);
-    const isStuck = usePsStickyHead({
+    usePsStickyHead({
         cardRef: stickyCardRef,
+        contentRef: stickyContentRef,
         headRef: stickyHeadRef,
         layoutKey: `${visibleColumns.map((column) => column.id).join(',')}:${rows.length}:${isLoading}`,
         regionRef: stickyRegionRef,
-        sentinelRef: stickySentinelRef,
         stickyTop,
     });
     const deferredSearch = useDeferredValue(search);
@@ -361,51 +361,53 @@ export const PsDataTable = ({ caption, className, clearSelectionKey, columns, cu
                     updateQuery({ search: next });
                     resetPage();
                 }, rows: rows, search: search, searchPlaceholder: searchPlaceholder })) : null, banner] }));
-    return (_jsxs("div", { ref: containerRef, className: PallasoftClassNameService.merge('flex min-w-0 flex-col gap-3', className), children: [stickyTop === undefined ? (_jsxs(_Fragment, { children: [stickyLeading, topContent] })) : (_jsxs(_Fragment, { children: [_jsx("div", { "aria-hidden": 'true', className: '-mb-3 h-0', ref: stickySentinelRef }), _jsxs("div", { className: PallasoftClassNameService.merge('sticky z-sticky flex flex-col gap-3', stickyClassName), "data-stuck": isStuck, ref: stickyRegionRef, style: { top: stickyTop }, children: [stickyLeading, topContent] })] })), _jsxs("div", { "aria-busy": isRefreshing, className: 'min-w-0 overflow-hidden rounded-[1.25rem] border border-line bg-surface', ref: stickyCardRef, children: [showsPagination &&
-                        paginationPosition !== PsTablePaginationPosition.bottom &&
-                        rowCount > PsTablePaginationConfig.topMinRows
-                        ? renderPagination('border-b border-t-0')
-                        : null, mobileLayout === 'cards' ? (_jsxs("div", { className: PallasoftClassNameService.merge('sm:hidden', isRefreshing ? PsTableBodyClasses.refreshing : ''), 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 && isSearching ? (_jsx(PsTableSearchingState, { label: searchingLabel, skeletonRows: PsTableConfig.searchingSkeletonRows })) : visibleRows.length === 0 && isQueried ? (_jsxs("div", { className: 'px-4 py-10 text-center', children: [_jsx("p", { className: 'text-sm font-semibold text-ink', children: PsTableConfig.noMatchesTitle }), _jsx("button", { className: PallasoftClassNameService.merge(PsTableControlClasses.textButton, 'mt-2 text-primary'), onClick: clearFilters, type: 'button', children: "Clear search and filters" })] })) : null), !grouping && shouldVirtualize && cards.count < visibleRows.length ? (_jsx("div", { "aria-hidden": 'true', className: 'h-px', ref: cards.sentinelRef })) : null] })) : null, _jsx("div", { className: PallasoftClassNameService.merge('ps-scrollbar overflow-x-auto overflow-y-hidden overscroll-x-contain', isRefreshing ? PsTableBodyClasses.refreshing : '', mobileLayout === 'cards' ? 'hidden sm:block' : ''), "data-overflow-end": overflow.edges.end, "data-overflow-start": overflow.edges.start, onScroll: overflow.update, ref: overflow.ref, children: renderReorder((api) => (_jsxs("table", { className: PallasoftClassNameService.merge('w-full border-collapse text-left', layout === 'fixed' ? 'table-fixed' : ''), children: [caption ? _jsx("caption", { className: 'sr-only', children: caption }) : null, _jsx("thead", { className: PallasoftClassNameService.merge('bg-mist/70 text-[0.68rem] font-semibold uppercase tracking-[0.18em] text-ink/45', stickyTop === undefined
-                                        ? ''
-                                        : 'relative z-docked bg-surface will-change-transform [&_th]:border-b [&_th]:border-line [&>tr]:bg-mist/70'), ref: stickyHeadRef, children: _jsxs("tr", { children: [reorder ? (_jsx("th", { className: PallasoftClassNameService.merge('w-9 min-w-9 pl-3 pr-0', pins.reorder), scope: 'col', children: reorder.enabled ? (_jsx("span", { className: 'sr-only', children: reorder.columnLabel })) : reorder.disabledReason ? (_jsx("span", { "aria-label": reorder.disabledReason, className: 'inline-flex cursor-help opacity-40', role: 'img', title: reorder.disabledReason, children: _jsx(PsDragGrip, {}) })) : null })) : null, isSelectable ? (_jsx("th", { className: PallasoftClassNameService.merge('w-10 min-w-10 pl-4 pr-0', pins.select), scope: 'col', children: _jsx(PsCheckbox, { isIndeterminate: !isPageSelected && pageIds.some((rowId) => selectedIdSet.has(rowId)), isSelected: isPageSelected, label: 'Select all rows on this page', onChange: togglePage }) })) : null, visibleColumns.map((column, columnIndex) => {
-                                                const align = column.align !== null && column.align !== undefined ? column.align : 'left';
-                                                const isSorted = sort !== null && sort.columnId === column.id;
-                                                return (_jsx("th", { "aria-sort": isSorted
-                                                        ? sort.direction
-                                                        : column.sortValue && isQueryable
-                                                            ? 'none'
-                                                            : undefined, className: PallasoftClassNameService.merge(densityClassNames[density].head, alignClassNames[align], placementOf(column, columnIndex), 'whitespace-nowrap'), scope: 'col', style: columnStyle(column, fittedWidths.get(column.id)), children: column.sortValue && isQueryable ? (_jsx(PsTableSortHeader, { align: align, columnId: column.id, label: column.label, onSort: updateSort, sort: sort })) : (column.label) }, column.id));
-                                            })] }) }), _jsxs("tbody", { className: 'divide-y divide-line', ref: bodyRef, children: [visibleRows.length === 0 && isSearching ? (_jsx("tr", { children: _jsx("td", { className: 'p-0', colSpan: columnCount, children: _jsx(PsTableSearchingState, { label: searchingLabel, skeletonRows: PsTableConfig.searchingSkeletonRows }) }) })) : null, visibleRows.length === 0 && isQueried && !isSearching ? (_jsx("tr", { children: _jsxs("td", { className: 'px-4 py-12 text-center', colSpan: columnCount, children: [_jsx("p", { className: 'text-sm font-semibold text-ink', children: PsTableConfig.noMatchesTitle }), _jsx("p", { className: 'mt-1 text-sm text-ink/55', children: PsTableConfig.noMatchesDescription }), _jsx("button", { className: PallasoftClassNameService.merge(PsTableControlClasses.textButton, 'mt-3 text-primary hover:underline'), onClick: clearFilters, type: 'button', children: "Clear search and filters" })] }) })) : null, grouping
-                                            ? groups.map((group, groupIndex) => {
-                                                const isExpanded = isGroupExpanded(group.key, groupIndex);
-                                                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
-                                                            ? 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'),
-                                                    ...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'),
-                                                ]
-                                                : 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, showsPagination && paginationPosition !== PsTablePaginationPosition.top
-                        ? renderPagination('')
-                        : null] })] }));
+    return (_jsxs("div", { ref: containerRef, className: PallasoftClassNameService.merge('flex min-w-0 flex-col gap-3', className), children: [stickyTop === undefined ? (_jsxs(_Fragment, { children: [stickyLeading, topContent] })) : (_jsx(_Fragment, { children: _jsxs("div", { className: PallasoftClassNameService.merge('sticky z-sticky flex flex-col gap-3', stickyClassName), ref: stickyRegionRef, style: { top: stickyTop }, children: [stickyLeading, topContent] }) })), _jsx("div", { className: 'min-w-0 overflow-clip rounded-[1.25rem]', children: _jsx("div", { "aria-busy": isRefreshing, className: 'min-w-0 overflow-hidden rounded-[1.25rem] border border-line bg-surface', ref: stickyCardRef, children: _jsxs("div", { ref: stickyContentRef, children: [showsPagination &&
+                                paginationPosition !== PsTablePaginationPosition.bottom &&
+                                rowCount > PsTablePaginationConfig.topMinRows
+                                ? renderPagination('border-b border-t-0')
+                                : null, mobileLayout === 'cards' ? (_jsxs("div", { className: PallasoftClassNameService.merge('sm:hidden', isRefreshing ? PsTableBodyClasses.refreshing : ''), 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 && isSearching ? (_jsx(PsTableSearchingState, { label: searchingLabel, skeletonRows: PsTableConfig.searchingSkeletonRows })) : visibleRows.length === 0 && isQueried ? (_jsxs("div", { className: 'px-4 py-10 text-center', children: [_jsx("p", { className: 'text-sm font-semibold text-ink', children: PsTableConfig.noMatchesTitle }), _jsx("button", { className: PallasoftClassNameService.merge(PsTableControlClasses.textButton, 'mt-2 text-primary'), onClick: clearFilters, type: 'button', children: "Clear search and filters" })] })) : null), !grouping && shouldVirtualize && cards.count < visibleRows.length ? (_jsx("div", { "aria-hidden": 'true', className: 'h-px', ref: cards.sentinelRef })) : null] })) : null, _jsx("div", { className: PallasoftClassNameService.merge('ps-scrollbar overflow-x-auto overflow-y-hidden overscroll-x-contain', isRefreshing ? PsTableBodyClasses.refreshing : '', mobileLayout === 'cards' ? 'hidden sm:block' : ''), "data-overflow-end": overflow.edges.end, "data-overflow-start": overflow.edges.start, onScroll: overflow.update, ref: overflow.ref, children: renderReorder((api) => (_jsxs("table", { className: PallasoftClassNameService.merge('w-full border-collapse text-left', layout === 'fixed' ? 'table-fixed' : ''), children: [caption ? _jsx("caption", { className: 'sr-only', children: caption }) : null, _jsx("thead", { className: PallasoftClassNameService.merge('bg-mist/70 text-[0.68rem] font-semibold uppercase tracking-[0.18em] text-ink/45', stickyTop === undefined
+                                                ? ''
+                                                : 'relative z-docked bg-surface will-change-transform [&_th]:border-b [&_th]:border-line [&>tr]:bg-mist/70'), ref: stickyHeadRef, children: _jsxs("tr", { children: [reorder ? (_jsx("th", { className: PallasoftClassNameService.merge('w-9 min-w-9 pl-3 pr-0', pins.reorder), scope: 'col', children: reorder.enabled ? (_jsx("span", { className: 'sr-only', children: reorder.columnLabel })) : reorder.disabledReason ? (_jsx("span", { "aria-label": reorder.disabledReason, className: 'inline-flex cursor-help opacity-40', role: 'img', title: reorder.disabledReason, children: _jsx(PsDragGrip, {}) })) : null })) : null, isSelectable ? (_jsx("th", { className: PallasoftClassNameService.merge('w-10 min-w-10 pl-4 pr-0', pins.select), scope: 'col', children: _jsx(PsCheckbox, { isIndeterminate: !isPageSelected && pageIds.some((rowId) => selectedIdSet.has(rowId)), isSelected: isPageSelected, label: 'Select all rows on this page', onChange: togglePage }) })) : null, visibleColumns.map((column, columnIndex) => {
+                                                        const align = column.align !== null && column.align !== undefined
+                                                            ? column.align
+                                                            : 'left';
+                                                        const isSorted = sort !== null && sort.columnId === column.id;
+                                                        return (_jsx("th", { "aria-sort": isSorted
+                                                                ? sort.direction
+                                                                : column.sortValue && isQueryable
+                                                                    ? 'none'
+                                                                    : undefined, className: PallasoftClassNameService.merge(densityClassNames[density].head, alignClassNames[align], placementOf(column, columnIndex), 'whitespace-nowrap'), scope: 'col', style: columnStyle(column, fittedWidths.get(column.id)), children: column.sortValue && isQueryable ? (_jsx(PsTableSortHeader, { align: align, columnId: column.id, label: column.label, onSort: updateSort, sort: sort })) : (column.label) }, column.id));
+                                                    })] }) }), _jsxs("tbody", { className: 'divide-y divide-line', ref: bodyRef, children: [visibleRows.length === 0 && isSearching ? (_jsx("tr", { children: _jsx("td", { className: 'p-0', colSpan: columnCount, children: _jsx(PsTableSearchingState, { label: searchingLabel, skeletonRows: PsTableConfig.searchingSkeletonRows }) }) })) : null, visibleRows.length === 0 && isQueried && !isSearching ? (_jsx("tr", { children: _jsxs("td", { className: 'px-4 py-12 text-center', colSpan: columnCount, children: [_jsx("p", { className: 'text-sm font-semibold text-ink', children: PsTableConfig.noMatchesTitle }), _jsx("p", { className: 'mt-1 text-sm text-ink/55', children: PsTableConfig.noMatchesDescription }), _jsx("button", { className: PallasoftClassNameService.merge(PsTableControlClasses.textButton, 'mt-3 text-primary hover:underline'), onClick: clearFilters, type: 'button', children: "Clear search and filters" })] }) })) : null, grouping
+                                                    ? groups.map((group, groupIndex) => {
+                                                        const isExpanded = isGroupExpanded(group.key, groupIndex);
+                                                        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
+                                                                    ? 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'),
+                                                            ...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'),
+                                                        ]
+                                                        : 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, showsPagination && paginationPosition !== PsTablePaginationPosition.top
+                                ? renderPagination('')
+                                : null] }) }) })] }));
 };

package/dist/esm/components/ps-report-table-skeleton.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PsSkeleton, PsSkeletonGroup } from '@pallasoft/ps-core-components';
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { PsReportColumnAlign } from '../constants/ps-report-column-align';
+import { PsReportTableClasses } from '../constants/ps-report-table-classes';
+import { PsReportTableConfig } from '../constants/ps-report-table-config';
+import { PsReportTableDensity } from '../constants/ps-report-table-density';
+import { PsReportTableService } from '../services/ps-report-table-service';
+export const PsReportTableSkeleton = ({ className, columns, density = PsReportTableDensity.normal, isFramed = true, rows = PsReportTableConfig.skeletonRows, }) => {
+    const isEnd = (column) => PsReportTableService.alignOf(column) === PsReportColumnAlign.right;
+    const headClass = (column, index) => {
+        if (isEnd(column))
+            return PsReportTableClasses.skeleton.headEnd;
+        return index === 0
+            ? PsReportTableClasses.skeleton.headFirst
+            : PsReportTableClasses.skeleton.headOther;
+    };
+    const cellClass = (column, rowIndex, index) => isEnd(column)
+        ? PsReportTableClasses.skeleton.cellEnd
+        : PsReportTableClasses.skeleton.cellWidths[(rowIndex + index) % PsReportTableClasses.skeleton.cellWidths.length];
+    return (_jsx(PsSkeletonGroup, { className: PallasoftClassNameService.merge(isFramed ? PsReportTableClasses.frame : PsReportTableClasses.skeleton.plain, className), children: _jsxs("table", { className: PsReportTableClasses.table, children: [_jsx("thead", { className: PsReportTableClasses.head, children: _jsx("tr", { children: columns.map((column, index) => (_jsx("th", { className: PsReportTableClasses.headCell[density], style: PsReportTableService.indent(0, density), children: _jsx(PsSkeleton, { className: headClass(column, index) }) }, column.id))) }) }), _jsx("tbody", { className: PsReportTableClasses.body, children: Array.from({ length: rows }, (_, rowIndex) => (_jsx("tr", { children: columns.map((column, index) => (_jsx("td", { className: PsReportTableClasses.cell[density], style: {
+                                ...PsReportTableService.columnStyle(column),
+                                ...PsReportTableService.indent(0, density),
+                            }, children: _jsx(PsSkeleton, { className: cellClass(column, rowIndex, index) }) }, column.id))) }, rowIndex))) })] }) }));
+};

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

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
+import { PsReportRowKind } from '../constants/ps-report-row-kind';
+import { PsReportRowTone } from '../constants/ps-report-row-tone';
+import { PsReportTableClasses } from '../constants/ps-report-table-classes';
+import { PsReportTableConfig } from '../constants/ps-report-table-config';
+import { PsReportTableDensity } from '../constants/ps-report-table-density';
+import { usePsTableOverflow } from '../hooks/use-ps-table-overflow';
+import { PsReportTableService } from '../services/ps-report-table-service';
+import { PsReportTableSkeleton } from './ps-report-table-skeleton';
+export const PsReportTable = ({ caption, className, columns, density = PsReportTableDensity.normal, emptyState, getLeadSpan, getRowId, getRowKind, getRowLevel, getRowTone, isFirstColumnSticky = false, isFramed = true, isHeaderHidden = false, isHeaderSticky = false, isLoading = false, isRefreshing = false, maxHeight, minWidth, renderLead, rows, }) => {
+    const overflow = usePsTableOverflow(String(rows.length));
+    if (isLoading)
+        return (_jsx(PsReportTableSkeleton, { className: className, columns: columns, density: density, isFramed: isFramed }));
+    const kindOf = (row) => getRowKind !== undefined ? getRowKind(row) : PsReportRowKind.data;
+    const toneOf = (row) => getRowTone !== undefined ? getRowTone(row) : PsReportRowTone.neutral;
+    const levelOf = (row) => PsReportTableService.levelOf(getRowLevel !== undefined ? getRowLevel(row) : undefined);
+    const leadOf = (row) => (getLeadSpan !== undefined ? getLeadSpan(row) : 1);
+    const renderRow = (row) => {
+        const kind = kindOf(row);
+        const tone = toneOf(row);
+        const level = levelOf(row);
+        return (_jsx("tr", { className: PsReportTableClasses.kind[kind], children: PsReportTableService.cells(columns, leadOf(row)).map((plan) => {
+                const className = PallasoftClassNameService.merge(PsReportTableService.cellClass(plan.column, plan.index, density, tone, isFirstColumnSticky), plan.index === 0 ? PsReportTableClasses.rowHeader : '');
+                const style = {
+                    ...PsReportTableService.columnStyle(plan.column),
+                    ...(plan.index === 0 ? PsReportTableService.indent(level, density) : {}),
+                };
+                return plan.index === 0 ? (_jsx("th", { className: className, colSpan: plan.colSpan, scope: kind === PsReportRowKind.group && plan.colSpan === columns.length
+                        ? 'colgroup'
+                        : 'row', style: style, children: plan.colSpan > 1 && renderLead !== undefined
+                        ? renderLead(row)
+                        : plan.column.render(row) }, plan.column.id)) : (_jsx("td", { className: className, colSpan: plan.colSpan, style: style, children: plan.column.render(row) }, plan.column.id));
+            }) }, getRowId(row)));
+    };
+    const content = (_jsx("div", { className: PallasoftClassNameService.merge(PsReportTableClasses.scroll, maxHeight !== undefined ? PsReportTableClasses.scrollBounded : '', isRefreshing ? PsReportTableClasses.refreshing : ''), "data-overflow-end": overflow.edges.end, "data-overflow-start": overflow.edges.start, onScroll: overflow.update, ref: overflow.ref, style: { maxHeight }, children: _jsxs("table", { className: PsReportTableClasses.table, style: { minWidth }, children: [_jsx("caption", { className: PsReportTableClasses.caption, children: caption }), _jsx("thead", { className: PallasoftClassNameService.merge(PsReportTableClasses.head, isHeaderHidden ? PsReportTableClasses.headHidden : ''), children: _jsx("tr", { children: columns.map((column, index) => (_jsx("th", { className: PsReportTableService.headClass(column, index, density, isHeaderSticky, isFirstColumnSticky), scope: 'col', style: {
+                                ...PsReportTableService.columnStyle(column),
+                                ...PsReportTableService.indent(0, density),
+                            }, children: column.label }, column.id))) }) }), _jsx("tbody", { className: PsReportTableClasses.body, children: rows.length === 0 ? (_jsx("tr", { children: _jsx("td", { className: PsReportTableClasses.empty, colSpan: columns.length, children: emptyState !== undefined ? emptyState : PsReportTableConfig.emptyLabel }) })) : (rows.map(renderRow)) })] }) }));
+    return (_jsx("div", { "aria-busy": isRefreshing, className: PallasoftClassNameService.merge(isFramed ? PsReportTableClasses.frame : PsReportTableClasses.framePlain, className), children: content }));
+};

package/dist/esm/constants/ps-report-column-align.js

@@ -0,0 +1,5 @@
+export const PsReportColumnAlign = {
+    center: 'center',
+    left: 'left',
+    right: 'right',
+};

package/dist/esm/constants/ps-report-row-kind.js

@@ -0,0 +1,6 @@
+export const PsReportRowKind = {
+    data: 'data',
+    group: 'group',
+    subtotal: 'subtotal',
+    total: 'total',
+};

package/dist/esm/constants/ps-report-row-tone.js

@@ -0,0 +1,6 @@
+export const PsReportRowTone = {
+    danger: 'danger',
+    muted: 'muted',
+    neutral: 'neutral',
+    primary: 'primary',
+};

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

@@ -0,0 +1,56 @@
+import { PsReportColumnAlign } from './ps-report-column-align';
+import { PsReportRowKind } from './ps-report-row-kind';
+import { PsReportRowTone } from './ps-report-row-tone';
+import { PsReportTableDensity } from './ps-report-table-density';
+export const PsReportTableClasses = {
+    align: {
+        [PsReportColumnAlign.center]: 'text-center',
+        [PsReportColumnAlign.left]: 'text-left',
+        [PsReportColumnAlign.right]: 'text-right tabular-nums',
+    },
+    body: 'divide-y divide-line/60',
+    caption: 'sr-only',
+    cell: {
+        [PsReportTableDensity.compact]: 'py-1.5 pr-3 text-[0.8125rem] leading-5',
+        [PsReportTableDensity.normal]: 'py-3 pr-5 text-sm',
+    },
+    empty: 'px-4 py-10 text-center text-sm text-ink/55',
+    framePlain: 'min-w-0',
+    frame: 'min-w-0 overflow-hidden rounded-[1.25rem] border border-line bg-surface',
+    head: 'bg-mist/70 text-[0.68rem] font-semibold uppercase tracking-[0.18em] text-ink/45',
+    headCell: {
+        [PsReportTableDensity.compact]: 'py-2 pr-3 whitespace-nowrap',
+        [PsReportTableDensity.normal]: 'py-3.5 pr-5 whitespace-nowrap',
+    },
+    headHidden: 'sr-only',
+    kind: {
+        [PsReportRowKind.data]: 'text-ink',
+        [PsReportRowKind.group]: 'bg-mist/40 font-semibold text-ink [--ps-table-pin-fill:inset_0_0_0_100vmax_rgb(var(--ps-color-mist-rgb)/0.4)]',
+        [PsReportRowKind.subtotal]: 'border-t border-line font-semibold text-ink',
+        [PsReportRowKind.total]: 'border-t-2 border-line bg-mist/50 font-semibold text-ink [--ps-table-pin-fill:inset_0_0_0_100vmax_rgb(var(--ps-color-mist-rgb)/0.5)]',
+    },
+    nowrap: 'whitespace-nowrap',
+    refreshing: 'opacity-60',
+    rowHeader: '[font-weight:inherit]',
+    scroll: 'ps-scrollbar overflow-x-auto overscroll-x-contain',
+    scrollBounded: 'overflow-y-auto overscroll-contain',
+    skeleton: {
+        cellEnd: 'ml-auto w-16',
+        cellWidths: ['w-3/4', 'w-1/2'],
+        headEnd: 'ml-auto h-2.5 w-12',
+        headFirst: 'h-2.5 w-20',
+        headOther: 'h-2.5 w-14',
+        plain: 'min-w-0 overflow-hidden',
+    },
+    stickyFirstBody: 'ps-table-pin left-0',
+    stickyFirstHead: 'ps-table-pin left-0 top-0 z-[3]',
+    stickyHead: 'ps-table-pin top-0 z-[2]',
+    table: 'w-full border-collapse text-left',
+    tone: {
+        [PsReportRowTone.danger]: 'bg-danger-soft/60 text-danger [--ps-table-pin-fill:inset_0_0_0_100vmax_rgb(var(--ps-color-danger-soft-rgb)/0.6)]',
+        [PsReportRowTone.muted]: 'text-ink/60',
+        [PsReportRowTone.neutral]: '',
+        [PsReportRowTone.primary]: 'bg-primary/10 text-primary [--ps-table-pin-fill:inset_0_0_0_100vmax_rgb(var(--ps-color-primary-rgb)/0.1)]',
+    },
+    truncate: 'truncate',
+};

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

@@ -0,0 +1,6 @@
+export const PsReportTableConfig = {
+    baseIndentRem: { compact: 0.75, normal: 1.25 },
+    emptyLabel: 'Nothing to show',
+    indentRem: 1.25,
+    skeletonRows: 6,
+};

package/dist/esm/constants/ps-report-table-density.js

@@ -0,0 +1,4 @@
+export const PsReportTableDensity = {
+    compact: 'compact',
+    normal: 'normal',
+};

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

@@ -1,4 +1,4 @@
 export const PsTableStickyConfig = {
     cardGapPx: 12,
-    cardRadius: '1.25rem',
+    inputTolerancePx: 0.5,
 };

package/dist/esm/hooks/use-ps-sticky-head.js

@@ -1,19 +1,18 @@
-import { useLayoutEffect, useState } from 'react';
+import { useLayoutEffect } from 'react';
 import { PsTableStickyConfig } from '../constants/ps-table-sticky-config';
 import { PsTableScrollService } from '../services/ps-table-scroll-service';
 import { PsTableStickyHeadService } from '../services/ps-table-sticky-head-service';
-export const usePsStickyHead = ({ cardRef, headRef, layoutKey, regionRef, sentinelRef, stickyTop, }) => {
-    const [isStuck, setIsStuck] = useState(false);
+export const usePsStickyHead = ({ cardRef, contentRef, headRef, layoutKey, regionRef, stickyTop, }) => {
     useLayoutEffect(() => {
         const region = regionRef.current;
-        const sentinel = sentinelRef.current;
         const card = cardRef.current;
+        const content = contentRef.current;
         const head = headRef.current;
         const table = head === null ? null : head.parentElement;
         if (stickyTop === undefined ||
             region === null ||
-            sentinel === null ||
             card === null ||
+            content === null ||
             head === null ||
             table === null)
             return;
@@ -21,6 +20,7 @@ export const usePsStickyHead = ({ cardRef, headRef, layoutKey, regionRef, sentin
         const Timeline = window.ScrollTimeline;
         const isDriven = scroller !== null && Timeline !== undefined;
         let animations = [];
+        let measured = null;
         let frame = 0;
         const headTravel = () => Math.max(table.offsetHeight - head.offsetHeight, 0);
         const drive = () => {
@@ -30,10 +30,19 @@ export const usePsStickyHead = ({ cardRef, headRef, layoutKey, regionRef, sentin
                 Number.parseFloat(getComputedStyle(region).top) +
                 region.offsetHeight +
                 PsTableStickyConfig.cardGapPx;
-            const scrollRange = scroller.scrollHeight - scroller.clientHeight;
+            const inputs = {
+                cardPin: content.getBoundingClientRect().top + scroller.scrollTop - pinnedLine,
+                cardTravel: card.offsetHeight,
+                headPin: table.getBoundingClientRect().top + scroller.scrollTop - pinnedLine,
+                headTravel: headTravel(),
+                scrollRange: scroller.scrollHeight - scroller.clientHeight,
+            };
+            if (PsTableStickyHeadService.sameInputs(measured, inputs))
+                return;
+            measured = inputs;
             const timeline = new Timeline({ axis: 'block', source: scroller });
-            const headFrames = PsTableStickyHeadService.keyframes(table.getBoundingClientRect().top + scroller.scrollTop - pinnedLine, headTravel(), scrollRange);
-            const cardFrames = PsTableStickyHeadService.keyframes(card.getBoundingClientRect().top + scroller.scrollTop - pinnedLine, card.offsetHeight, scrollRange);
+            const headFrames = PsTableStickyHeadService.keyframes(inputs.headPin, inputs.headTravel, inputs.scrollRange);
+            const cardFrames = PsTableStickyHeadService.keyframes(inputs.cardPin, inputs.cardTravel, inputs.scrollRange);
             animations.forEach((animation) => animation.cancel());
             animations = [
                 head.animate(headFrames.map((keyframe) => ({
@@ -41,30 +50,32 @@ export const usePsStickyHead = ({ cardRef, headRef, layoutKey, regionRef, sentin
                     transform: `translateY(${keyframe.shift}px)`,
                 })), { fill: 'both', timeline }),
                 card.animate(cardFrames.map((keyframe) => ({
-                    clipPath: PsTableStickyHeadService.clip(keyframe.shift),
                     offset: keyframe.offset,
+                    transform: `translateY(${keyframe.shift}px)`,
+                })), { fill: 'both', timeline }),
+                content.animate(cardFrames.map((keyframe) => ({
+                    offset: keyframe.offset,
+                    transform: `translateY(${-keyframe.shift}px)`,
                 })), { fill: 'both', timeline }),
             ];
         };
         const follow = () => {
+            frame = 0;
             const pinnedLine = region.getBoundingClientRect().bottom + PsTableStickyConfig.cardGapPx;
             head.style.transform = `translateY(${PsTableStickyHeadService.offset(pinnedLine, table.getBoundingClientRect().top, table.offsetHeight, head.offsetHeight)}px)`;
-            card.style.clipPath = PsTableStickyHeadService.clip(PsTableStickyHeadService.offset(pinnedLine, card.getBoundingClientRect().top, card.offsetHeight, 0));
-        };
-        const check = () => {
-            frame = 0;
-            setIsStuck(sentinel.getBoundingClientRect().top < region.getBoundingClientRect().top - 1);
-            if (!isDriven)
-                follow();
+            const cut = PsTableStickyHeadService.offset(pinnedLine, content.getBoundingClientRect().top, card.offsetHeight, 0);
+            card.style.transform = `translateY(${cut}px)`;
+            content.style.transform = `translateY(${-cut}px)`;
         };
         const schedule = () => {
             if (frame === 0)
-                frame = window.requestAnimationFrame(check);
+                frame = window.requestAnimationFrame(follow);
         };
         const measure = () => {
             if (isDriven)
                 drive();
-            schedule();
+            else
+                schedule();
         };
         const observer = new ResizeObserver(measure);
         measure();
@@ -72,18 +83,19 @@ export const usePsStickyHead = ({ cardRef, headRef, layoutKey, regionRef, sentin
         observer.observe(card);
         if (scroller !== null)
             Array.from(scroller.children).forEach((child) => observer.observe(child));
-        window.addEventListener('scroll', schedule, { capture: true, passive: true });
         window.addEventListener('resize', measure);
+        if (!isDriven)
+            window.addEventListener('scroll', schedule, { capture: true, passive: true });
         return () => {
             observer.disconnect();
             animations.forEach((animation) => animation.cancel());
             head.style.transform = '';
-            card.style.clipPath = '';
+            card.style.transform = '';
+            content.style.transform = '';
             window.removeEventListener('scroll', schedule, { capture: true });
             window.removeEventListener('resize', measure);
             if (frame !== 0)
                 window.cancelAnimationFrame(frame);
         };
-    }, [cardRef, headRef, layoutKey, regionRef, sentinelRef, stickyTop]);
-    return isStuck;
+    }, [cardRef, contentRef, headRef, layoutKey, regionRef, stickyTop]);
 };

package/dist/esm/index.js

@@ -64,3 +64,11 @@ export * from './interfaces/ps-server-rows-result';
 export * from './interfaces/ps-table-cursor-paging';
 export * from './interfaces/ps-table-select-all-matching';
 export * from './services/ps-server-rows-service';
+export * from './components/ps-report-table';
+export * from './components/ps-report-table-skeleton';
+export * from './constants/ps-report-column-align';
+export * from './constants/ps-report-row-kind';
+export * from './constants/ps-report-row-tone';
+export * from './constants/ps-report-table-density';
+export * from './interfaces/ps-report-column';
+export * from './services/ps-report-table-service';

package/dist/esm/interfaces/ps-report-cell-plan.js

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

package/dist/esm/interfaces/ps-report-column.js

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

package/dist/esm/interfaces/ps-table-sticky-head-inputs.js

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

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

@@ -0,0 +1,67 @@
+import { PsReportColumnAlign } from '../constants/ps-report-column-align';
+import { PsReportTableClasses } from '../constants/ps-report-table-classes';
+import { PsReportTableConfig } from '../constants/ps-report-table-config';
+import { PsTablePinClasses } from '../constants/ps-table-pin-classes';
+export class PsReportTableService {
+    static cells(columns, leadSpan) {
+        const span = PsReportTableService.span(columns.length, leadSpan);
+        const plan = [{ colSpan: span, column: columns[0], index: 0 }];
+        for (let index = span; index < columns.length; index += 1)
+            plan.push({ colSpan: 1, column: columns[index], index });
+        return plan;
+    }
+    static span(count, leadSpan) {
+        return Math.min(Math.max(leadSpan, 1), count);
+    }
+    static indent(level, density) {
+        const base = PsReportTableConfig.baseIndentRem[density];
+        return { paddingLeft: `${base + level * PsReportTableConfig.indentRem}rem` };
+    }
+    static columnStyle(column) {
+        return {
+            maxWidth: column.maxWidth,
+            minWidth: column.minWidth,
+            width: column.width,
+        };
+    }
+    static levelOf(level) {
+        return level !== undefined && level > 0 ? level : 0;
+    }
+    static headClass(column, index, density, isHeaderSticky, isFirstColumnSticky) {
+        const isPinnedFirst = index === 0 && isFirstColumnSticky;
+        const pin = PsReportTableService.headPin(isHeaderSticky, isPinnedFirst);
+        return [
+            PsReportTableClasses.headCell[density],
+            PsReportTableClasses.align[PsReportTableService.alignOf(column)],
+            pin,
+            isPinnedFirst ? PsTablePinClasses.edge : '',
+        ]
+            .filter((name) => name !== '')
+            .join(' ');
+    }
+    static headPin(isHeaderSticky, isPinnedFirst) {
+        if (isHeaderSticky && isPinnedFirst)
+            return PsReportTableClasses.stickyFirstHead;
+        if (isHeaderSticky)
+            return PsReportTableClasses.stickyHead;
+        if (isPinnedFirst)
+            return PsReportTableClasses.stickyFirstBody;
+        return '';
+    }
+    static cellClass(column, index, density, tone, isFirstColumnSticky) {
+        const isPinnedFirst = index === 0 && isFirstColumnSticky;
+        return [
+            PsReportTableClasses.cell[density],
+            PsReportTableClasses.align[PsReportTableService.alignOf(column)],
+            PsReportTableClasses.tone[tone],
+            column.wrap === true ? '' : PsReportTableClasses.nowrap,
+            column.maxWidth !== undefined ? PsReportTableClasses.truncate : '',
+            isPinnedFirst ? `${PsReportTableClasses.stickyFirstBody} ${PsTablePinClasses.edge}` : '',
+        ]
+            .filter((name) => name !== '')
+            .join(' ');
+    }
+    static alignOf(column) {
+        return column.align !== undefined ? column.align : PsReportColumnAlign.left;
+    }
+}

package/dist/esm/services/ps-table-sticky-head-service.js

@@ -3,6 +3,15 @@ export class PsTableStickyHeadService {
     static offset(pinnedBottom, tableTop, tableHeight, headHeight) {
         return Math.min(Math.max(pinnedBottom - tableTop, 0), Math.max(tableHeight - headHeight, 0));
     }
+    static sameInputs(previous, next) {
+        if (previous === null)
+            return false;
+        return (PsTableStickyHeadService.close(previous.headPin, next.headPin) &&
+            PsTableStickyHeadService.close(previous.headTravel, next.headTravel) &&
+            PsTableStickyHeadService.close(previous.cardPin, next.cardPin) &&
+            PsTableStickyHeadService.close(previous.cardTravel, next.cardTravel) &&
+            PsTableStickyHeadService.close(previous.scrollRange, next.scrollRange));
+    }
     static keyframes(pinScroll, maxShift, scrollRange) {
         if (scrollRange <= 0)
             return [];
@@ -12,9 +21,8 @@ export class PsTableStickyHeadService {
             shift: shiftAt(scroll),
         }));
     }
-    static clip(shift) {
-        const radius = PsTableStickyConfig.cardRadius;
-        return `inset(${shift}px 0 0 0 round ${radius} ${radius} 0 0)`;
+    static close(first, second) {
+        return Math.abs(first - second) <= PsTableStickyConfig.inputTolerancePx;
     }
     static stops(scrolls, scrollRange) {
         const inside = scrolls.filter((scroll) => scroll >= 0 && scroll <= scrollRange);

package/dist/hooks/use-ps-sticky-head.d.ts

@@ -1,2 +1,2 @@
 import type { PsStickyHeadRefs } from '../interfaces/ps-sticky-head-refs';
-export declare const usePsStickyHead: ({ cardRef, headRef, layoutKey, regionRef, sentinelRef, stickyTop, }: PsStickyHeadRefs) => boolean;
+export declare const usePsStickyHead: ({ cardRef, contentRef, headRef, layoutKey, regionRef, stickyTop, }: PsStickyHeadRefs) => void;