@pallasoft/ps-table-components 1.28.4 → 1.29.0

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

@@ -99,7 +99,6 @@ const PsDataTable = ({ caption, className, clearSelectionKey, columns, cursorPag
     const [openedGroupKeys, setOpenedGroupKeys] = (0, react_1.useState)([]);
     const [seenClearKey, setSeenClearKey] = (0, react_1.useState)(clearSelectionKey);
     const stickyRegionRef = (0, react_1.useRef)(null);
-    const stickySentinelRef = (0, react_1.useRef)(null);
     const stickyCardRef = (0, react_1.useRef)(null);
     const stickyContentRef = (0, react_1.useRef)(null);
     const stickyHeadRef = (0, react_1.useRef)(null);
@@ -130,13 +129,12 @@ const PsDataTable = ({ caption, className, clearSelectionKey, columns, cursorPag
     const pins = ps_table_pin_service_1.PsTablePinService.leading(pinFirstColumn, Boolean(reorder), isSelectable);
     const placementOf = (column, columnIndex) => ps_design_system_1.PallasoftClassNameService.merge(column.hideBelow === undefined ? '' : table_breakpoint_1.PsTableHideBelowClasses[column.hideBelow], columnIndex === 0 ? pins.first : '', ps_table_pin_service_1.PsTablePinService.end(column.pinEnd === true));
     const overflow = (0, use_ps_table_overflow_1.usePsTableOverflow)(`${visibleColumns.map((column) => column.id).join(',')}:${rows.length}`);
-    const isStuck = (0, use_ps_sticky_head_1.usePsStickyHead)({
+    (0, use_ps_sticky_head_1.usePsStickyHead)({
         cardRef: stickyCardRef,
         contentRef: stickyContentRef,
         headRef: stickyHeadRef,
         layoutKey: `${visibleColumns.map((column) => column.id).join(',')}:${rows.length}:${isLoading}`,
         regionRef: stickyRegionRef,
-        sentinelRef: stickySentinelRef,
         stickyTop,
     });
     const deferredSearch = (0, react_1.useDeferredValue)(search);
@@ -399,7 +397,7 @@ const PsDataTable = ({ caption, className, clearSelectionKey, columns, cursorPag
                     updateQuery({ search: next });
                     resetPage();
                 }, rows: rows, search: search, searchPlaceholder: searchPlaceholder })) : null, banner] }));
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: containerRef, className: ps_design_system_1.PallasoftClassNameService.merge('flex min-w-0 flex-col gap-3', className), children: [stickyTop === undefined ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [stickyLeading, topContent] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { "aria-hidden": 'true', className: '-mb-3 h-0', ref: stickySentinelRef }), (0, jsx_runtime_1.jsxs)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('sticky z-sticky flex flex-col gap-3', stickyClassName), "data-stuck": isStuck, ref: stickyRegionRef, style: { top: stickyTop }, children: [stickyLeading, topContent] })] })), (0, jsx_runtime_1.jsx)("div", { className: 'min-w-0 overflow-clip rounded-[1.25rem]', children: (0, jsx_runtime_1.jsx)("div", { "aria-busy": isRefreshing, className: 'min-w-0 overflow-hidden rounded-[1.25rem] border border-line bg-surface', ref: stickyCardRef, children: (0, jsx_runtime_1.jsxs)("div", { ref: stickyContentRef, children: [showsPagination &&
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: containerRef, className: ps_design_system_1.PallasoftClassNameService.merge('flex min-w-0 flex-col gap-3', className), children: [stickyTop === undefined ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [stickyLeading, topContent] })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('sticky z-sticky flex flex-col gap-3', stickyClassName), ref: stickyRegionRef, style: { top: stickyTop }, children: [stickyLeading, topContent] }) })), (0, jsx_runtime_1.jsx)("div", { className: 'min-w-0 overflow-clip rounded-[1.25rem]', children: (0, jsx_runtime_1.jsx)("div", { "aria-busy": isRefreshing, className: 'min-w-0 overflow-hidden rounded-[1.25rem] border border-line bg-surface', ref: stickyCardRef, children: (0, jsx_runtime_1.jsxs)("div", { ref: stickyContentRef, children: [showsPagination &&
                                 paginationPosition !== ps_table_pagination_position_1.PsTablePaginationPosition.bottom &&
                                 rowCount > ps_table_pagination_config_1.PsTablePaginationConfig.topMinRows
                                 ? renderPagination('border-b border-t-0')

package/dist/components/ps-report-table-skeleton.d.ts

@@ -0,0 +1,10 @@
+import { PsReportTableDensity } from '../constants/ps-report-table-density';
+import type { PsReportColumn } from '../interfaces/ps-report-column';
+export interface PsReportTableSkeletonProps<RowData> {
+    className?: string;
+    columns: PsReportColumn<RowData>[];
+    density?: PsReportTableDensity;
+    isFramed?: boolean;
+    rows?: number;
+}
+export declare const PsReportTableSkeleton: <RowData>({ className, columns, density, isFramed, rows, }: PsReportTableSkeletonProps<RowData>) => import("react").JSX.Element;

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

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsReportTableSkeleton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_core_components_1 = require("@pallasoft/ps-core-components");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const ps_report_column_align_1 = require("../constants/ps-report-column-align");
+const ps_report_table_classes_1 = require("../constants/ps-report-table-classes");
+const ps_report_table_config_1 = require("../constants/ps-report-table-config");
+const ps_report_table_density_1 = require("../constants/ps-report-table-density");
+const ps_report_table_service_1 = require("../services/ps-report-table-service");
+const PsReportTableSkeleton = ({ className, columns, density = ps_report_table_density_1.PsReportTableDensity.normal, isFramed = true, rows = ps_report_table_config_1.PsReportTableConfig.skeletonRows, }) => {
+    const isEnd = (column) => ps_report_table_service_1.PsReportTableService.alignOf(column) === ps_report_column_align_1.PsReportColumnAlign.right;
+    const headClass = (column, index) => {
+        if (isEnd(column))
+            return ps_report_table_classes_1.PsReportTableClasses.skeleton.headEnd;
+        return index === 0
+            ? ps_report_table_classes_1.PsReportTableClasses.skeleton.headFirst
+            : ps_report_table_classes_1.PsReportTableClasses.skeleton.headOther;
+    };
+    const cellClass = (column, rowIndex, index) => isEnd(column)
+        ? ps_report_table_classes_1.PsReportTableClasses.skeleton.cellEnd
+        : ps_report_table_classes_1.PsReportTableClasses.skeleton.cellWidths[(rowIndex + index) % ps_report_table_classes_1.PsReportTableClasses.skeleton.cellWidths.length];
+    return ((0, jsx_runtime_1.jsx)(ps_core_components_1.PsSkeletonGroup, { className: ps_design_system_1.PallasoftClassNameService.merge(isFramed ? ps_report_table_classes_1.PsReportTableClasses.frame : ps_report_table_classes_1.PsReportTableClasses.skeleton.plain, className), children: (0, jsx_runtime_1.jsxs)("table", { className: ps_report_table_classes_1.PsReportTableClasses.table, children: [(0, jsx_runtime_1.jsx)("thead", { className: ps_report_table_classes_1.PsReportTableClasses.head, children: (0, jsx_runtime_1.jsx)("tr", { children: columns.map((column, index) => ((0, jsx_runtime_1.jsx)("th", { className: ps_report_table_classes_1.PsReportTableClasses.headCell[density], style: ps_report_table_service_1.PsReportTableService.indent(0, density), children: (0, jsx_runtime_1.jsx)(ps_core_components_1.PsSkeleton, { className: headClass(column, index) }) }, column.id))) }) }), (0, jsx_runtime_1.jsx)("tbody", { className: ps_report_table_classes_1.PsReportTableClasses.body, children: Array.from({ length: rows }, (_, rowIndex) => ((0, jsx_runtime_1.jsx)("tr", { children: columns.map((column, index) => ((0, jsx_runtime_1.jsx)("td", { className: ps_report_table_classes_1.PsReportTableClasses.cell[density], style: {
+                                ...ps_report_table_service_1.PsReportTableService.columnStyle(column),
+                                ...ps_report_table_service_1.PsReportTableService.indent(0, density),
+                            }, children: (0, jsx_runtime_1.jsx)(ps_core_components_1.PsSkeleton, { className: cellClass(column, rowIndex, index) }) }, column.id))) }, rowIndex))) })] }) }));
+};
+exports.PsReportTableSkeleton = PsReportTableSkeleton;

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

@@ -0,0 +1,28 @@
+import type { ReactNode } from 'react';
+import { PsReportRowKind } from '../constants/ps-report-row-kind';
+import { PsReportRowTone } from '../constants/ps-report-row-tone';
+import { PsReportTableDensity } from '../constants/ps-report-table-density';
+import type { PsReportColumn } from '../interfaces/ps-report-column';
+export interface PsReportTableProps<RowData> {
+    caption: string;
+    className?: string;
+    columns: PsReportColumn<RowData>[];
+    density?: PsReportTableDensity;
+    emptyState?: ReactNode;
+    getLeadSpan?: (row: RowData) => number;
+    getRowId: (row: RowData) => string;
+    getRowKind?: (row: RowData) => PsReportRowKind;
+    getRowLevel?: (row: RowData) => number;
+    getRowTone?: (row: RowData) => PsReportRowTone;
+    isFirstColumnSticky?: boolean;
+    isFramed?: boolean;
+    isHeaderHidden?: boolean;
+    isHeaderSticky?: boolean;
+    isLoading?: boolean;
+    isRefreshing?: boolean;
+    maxHeight?: string;
+    minWidth?: string;
+    renderLead?: (row: RowData) => ReactNode;
+    rows: RowData[];
+}
+export declare const PsReportTable: <RowData>({ caption, className, columns, density, emptyState, getLeadSpan, getRowId, getRowKind, getRowLevel, getRowTone, isFirstColumnSticky, isFramed, isHeaderHidden, isHeaderSticky, isLoading, isRefreshing, maxHeight, minWidth, renderLead, rows, }: PsReportTableProps<RowData>) => import("react").JSX.Element;

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

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsReportTable = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const ps_report_row_kind_1 = require("../constants/ps-report-row-kind");
+const ps_report_row_tone_1 = require("../constants/ps-report-row-tone");
+const ps_report_table_classes_1 = require("../constants/ps-report-table-classes");
+const ps_report_table_config_1 = require("../constants/ps-report-table-config");
+const ps_report_table_density_1 = require("../constants/ps-report-table-density");
+const use_ps_table_overflow_1 = require("../hooks/use-ps-table-overflow");
+const ps_report_table_service_1 = require("../services/ps-report-table-service");
+const ps_report_table_skeleton_1 = require("./ps-report-table-skeleton");
+const PsReportTable = ({ caption, className, columns, density = ps_report_table_density_1.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 = (0, use_ps_table_overflow_1.usePsTableOverflow)(String(rows.length));
+    if (isLoading)
+        return ((0, jsx_runtime_1.jsx)(ps_report_table_skeleton_1.PsReportTableSkeleton, { className: className, columns: columns, density: density, isFramed: isFramed }));
+    const kindOf = (row) => getRowKind !== undefined ? getRowKind(row) : ps_report_row_kind_1.PsReportRowKind.data;
+    const toneOf = (row) => getRowTone !== undefined ? getRowTone(row) : ps_report_row_tone_1.PsReportRowTone.neutral;
+    const levelOf = (row) => ps_report_table_service_1.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 ((0, jsx_runtime_1.jsx)("tr", { className: ps_report_table_classes_1.PsReportTableClasses.kind[kind], children: ps_report_table_service_1.PsReportTableService.cells(columns, leadOf(row)).map((plan) => {
+                const className = ps_design_system_1.PallasoftClassNameService.merge(ps_report_table_service_1.PsReportTableService.cellClass(plan.column, plan.index, density, tone, isFirstColumnSticky), plan.index === 0 ? ps_report_table_classes_1.PsReportTableClasses.rowHeader : '');
+                const style = {
+                    ...ps_report_table_service_1.PsReportTableService.columnStyle(plan.column),
+                    ...(plan.index === 0 ? ps_report_table_service_1.PsReportTableService.indent(level, density) : {}),
+                };
+                return plan.index === 0 ? ((0, jsx_runtime_1.jsx)("th", { className: className, colSpan: plan.colSpan, scope: kind === ps_report_row_kind_1.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)) : ((0, jsx_runtime_1.jsx)("td", { className: className, colSpan: plan.colSpan, style: style, children: plan.column.render(row) }, plan.column.id));
+            }) }, getRowId(row)));
+    };
+    const content = ((0, jsx_runtime_1.jsx)("div", { className: ps_design_system_1.PallasoftClassNameService.merge(ps_report_table_classes_1.PsReportTableClasses.scroll, maxHeight !== undefined ? ps_report_table_classes_1.PsReportTableClasses.scrollBounded : '', isRefreshing ? ps_report_table_classes_1.PsReportTableClasses.refreshing : ''), "data-overflow-end": overflow.edges.end, "data-overflow-start": overflow.edges.start, onScroll: overflow.update, ref: overflow.ref, style: { maxHeight }, children: (0, jsx_runtime_1.jsxs)("table", { className: ps_report_table_classes_1.PsReportTableClasses.table, style: { minWidth }, children: [(0, jsx_runtime_1.jsx)("caption", { className: ps_report_table_classes_1.PsReportTableClasses.caption, children: caption }), (0, jsx_runtime_1.jsx)("thead", { className: ps_design_system_1.PallasoftClassNameService.merge(ps_report_table_classes_1.PsReportTableClasses.head, isHeaderHidden ? ps_report_table_classes_1.PsReportTableClasses.headHidden : ''), children: (0, jsx_runtime_1.jsx)("tr", { children: columns.map((column, index) => ((0, jsx_runtime_1.jsx)("th", { className: ps_report_table_service_1.PsReportTableService.headClass(column, index, density, isHeaderSticky, isFirstColumnSticky), scope: 'col', style: {
+                                ...ps_report_table_service_1.PsReportTableService.columnStyle(column),
+                                ...ps_report_table_service_1.PsReportTableService.indent(0, density),
+                            }, children: column.label }, column.id))) }) }), (0, jsx_runtime_1.jsx)("tbody", { className: ps_report_table_classes_1.PsReportTableClasses.body, children: rows.length === 0 ? ((0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("td", { className: ps_report_table_classes_1.PsReportTableClasses.empty, colSpan: columns.length, children: emptyState !== undefined ? emptyState : ps_report_table_config_1.PsReportTableConfig.emptyLabel }) })) : (rows.map(renderRow)) })] }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { "aria-busy": isRefreshing, className: ps_design_system_1.PallasoftClassNameService.merge(isFramed ? ps_report_table_classes_1.PsReportTableClasses.frame : ps_report_table_classes_1.PsReportTableClasses.framePlain, className), children: content }));
+};
+exports.PsReportTable = PsReportTable;

package/dist/constants/ps-report-column-align.d.ts

@@ -0,0 +1,6 @@
+export declare const PsReportColumnAlign: {
+    readonly center: "center";
+    readonly left: "left";
+    readonly right: "right";
+};
+export type PsReportColumnAlign = (typeof PsReportColumnAlign)[keyof typeof PsReportColumnAlign];

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsReportColumnAlign = void 0;
+exports.PsReportColumnAlign = {
+    center: 'center',
+    left: 'left',
+    right: 'right',
+};

package/dist/constants/ps-report-row-kind.d.ts

@@ -0,0 +1,7 @@
+export declare const PsReportRowKind: {
+    readonly data: "data";
+    readonly group: "group";
+    readonly subtotal: "subtotal";
+    readonly total: "total";
+};
+export type PsReportRowKind = (typeof PsReportRowKind)[keyof typeof PsReportRowKind];

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

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsReportRowKind = void 0;
+exports.PsReportRowKind = {
+    data: 'data',
+    group: 'group',
+    subtotal: 'subtotal',
+    total: 'total',
+};

package/dist/constants/ps-report-row-tone.d.ts

@@ -0,0 +1,7 @@
+export declare const PsReportRowTone: {
+    readonly danger: "danger";
+    readonly muted: "muted";
+    readonly neutral: "neutral";
+    readonly primary: "primary";
+};
+export type PsReportRowTone = (typeof PsReportRowTone)[keyof typeof PsReportRowTone];

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

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsReportRowTone = void 0;
+exports.PsReportRowTone = {
+    danger: 'danger',
+    muted: 'muted',
+    neutral: 'neutral',
+    primary: 'primary',
+};

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

@@ -0,0 +1,52 @@
+export declare const PsReportTableClasses: {
+    readonly align: {
+        readonly center: "text-center";
+        readonly left: "text-left";
+        readonly right: "text-right tabular-nums";
+    };
+    readonly body: "divide-y divide-line/60";
+    readonly caption: "sr-only";
+    readonly cell: {
+        readonly compact: "py-1.5 pr-3 text-[0.8125rem] leading-5";
+        readonly normal: "py-3 pr-5 text-sm";
+    };
+    readonly empty: "px-4 py-10 text-center text-sm text-ink/55";
+    readonly framePlain: "min-w-0";
+    readonly frame: "min-w-0 overflow-hidden rounded-[1.25rem] border border-line bg-surface";
+    readonly head: "bg-mist/70 text-[0.68rem] font-semibold uppercase tracking-[0.18em] text-ink/45";
+    readonly headCell: {
+        readonly compact: "py-2 pr-3 whitespace-nowrap";
+        readonly normal: "py-3.5 pr-5 whitespace-nowrap";
+    };
+    readonly headHidden: "sr-only";
+    readonly kind: {
+        readonly data: "text-ink";
+        readonly 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)]";
+        readonly subtotal: "border-t border-line font-semibold text-ink";
+        readonly 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)]";
+    };
+    readonly nowrap: "whitespace-nowrap";
+    readonly refreshing: "opacity-60";
+    readonly rowHeader: "[font-weight:inherit]";
+    readonly scroll: "ps-scrollbar overflow-x-auto overscroll-x-contain";
+    readonly scrollBounded: "overflow-y-auto overscroll-contain";
+    readonly skeleton: {
+        readonly cellEnd: "ml-auto w-16";
+        readonly cellWidths: readonly ["w-3/4", "w-1/2"];
+        readonly headEnd: "ml-auto h-2.5 w-12";
+        readonly headFirst: "h-2.5 w-20";
+        readonly headOther: "h-2.5 w-14";
+        readonly plain: "min-w-0 overflow-hidden";
+    };
+    readonly stickyFirstBody: "ps-table-pin left-0";
+    readonly stickyFirstHead: "ps-table-pin left-0 top-0 z-[3]";
+    readonly stickyHead: "ps-table-pin top-0 z-[2]";
+    readonly table: "w-full border-collapse text-left";
+    readonly tone: {
+        readonly 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)]";
+        readonly muted: "text-ink/60";
+        readonly neutral: "";
+        readonly primary: "bg-primary/10 text-primary [--ps-table-pin-fill:inset_0_0_0_100vmax_rgb(var(--ps-color-primary-rgb)/0.1)]";
+    };
+    readonly truncate: "truncate";
+};

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

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsReportTableClasses = void 0;
+const ps_report_column_align_1 = require("./ps-report-column-align");
+const ps_report_row_kind_1 = require("./ps-report-row-kind");
+const ps_report_row_tone_1 = require("./ps-report-row-tone");
+const ps_report_table_density_1 = require("./ps-report-table-density");
+exports.PsReportTableClasses = {
+    align: {
+        [ps_report_column_align_1.PsReportColumnAlign.center]: 'text-center',
+        [ps_report_column_align_1.PsReportColumnAlign.left]: 'text-left',
+        [ps_report_column_align_1.PsReportColumnAlign.right]: 'text-right tabular-nums',
+    },
+    body: 'divide-y divide-line/60',
+    caption: 'sr-only',
+    cell: {
+        [ps_report_table_density_1.PsReportTableDensity.compact]: 'py-1.5 pr-3 text-[0.8125rem] leading-5',
+        [ps_report_table_density_1.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: {
+        [ps_report_table_density_1.PsReportTableDensity.compact]: 'py-2 pr-3 whitespace-nowrap',
+        [ps_report_table_density_1.PsReportTableDensity.normal]: 'py-3.5 pr-5 whitespace-nowrap',
+    },
+    headHidden: 'sr-only',
+    kind: {
+        [ps_report_row_kind_1.PsReportRowKind.data]: 'text-ink',
+        [ps_report_row_kind_1.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)]',
+        [ps_report_row_kind_1.PsReportRowKind.subtotal]: 'border-t border-line font-semibold text-ink',
+        [ps_report_row_kind_1.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: {
+        [ps_report_row_tone_1.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)]',
+        [ps_report_row_tone_1.PsReportRowTone.muted]: 'text-ink/60',
+        [ps_report_row_tone_1.PsReportRowTone.neutral]: '',
+        [ps_report_row_tone_1.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/constants/ps-report-table-config.d.ts

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

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

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsReportTableConfig = void 0;
+exports.PsReportTableConfig = {
+    baseIndentRem: { compact: 0.75, normal: 1.25 },
+    emptyLabel: 'Nothing to show',
+    indentRem: 1.25,
+    skeletonRows: 6,
+};

package/dist/constants/ps-report-table-density.d.ts

@@ -0,0 +1,5 @@
+export declare const PsReportTableDensity: {
+    readonly compact: "compact";
+    readonly normal: "normal";
+};
+export type PsReportTableDensity = (typeof PsReportTableDensity)[keyof typeof PsReportTableDensity];

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsReportTableDensity = void 0;
+exports.PsReportTableDensity = {
+    compact: 'compact',
+    normal: 'normal',
+};

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

@@ -1,3 +1,4 @@
 export declare const PsTableStickyConfig: {
     readonly cardGapPx: 12;
+    readonly inputTolerancePx: 0.5;
 };

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

@@ -3,4 +3,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsTableStickyConfig = void 0;
 exports.PsTableStickyConfig = {
     cardGapPx: 12,
+    inputTolerancePx: 0.5,
 };

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

@@ -63,7 +63,6 @@ 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);
@@ -94,13 +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);
@@ -363,7 +361,7 @@ 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] })] })), _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 &&
+    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')

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,3 +1,4 @@
 export const PsTableStickyConfig = {
     cardGapPx: 12,
+    inputTolerancePx: 0.5,
 };

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

@@ -1,19 +1,16 @@
-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, contentRef, 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 ||
@@ -23,6 +20,7 @@ export const usePsStickyHead = ({ cardRef, contentRef, headRef, layoutKey, regio
         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 = () => {
@@ -32,10 +30,19 @@ export const usePsStickyHead = ({ cardRef, contentRef, headRef, layoutKey, regio
                 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(content.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) => ({
@@ -53,26 +60,22 @@ export const usePsStickyHead = ({ cardRef, contentRef, headRef, layoutKey, regio
             ];
         };
         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)`;
             const cut = PsTableStickyHeadService.offset(pinnedLine, content.getBoundingClientRect().top, card.offsetHeight, 0);
             card.style.transform = `translateY(${cut}px)`;
             content.style.transform = `translateY(${-cut}px)`;
         };
-        const check = () => {
-            frame = 0;
-            setIsStuck(sentinel.getBoundingClientRect().top < region.getBoundingClientRect().top - 1);
-            if (!isDriven)
-                follow();
-        };
         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();
@@ -80,8 +83,9 @@ export const usePsStickyHead = ({ cardRef, contentRef, headRef, layoutKey, regio
         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());
@@ -93,6 +97,5 @@ export const usePsStickyHead = ({ cardRef, contentRef, headRef, layoutKey, regio
             if (frame !== 0)
                 window.cancelAnimationFrame(frame);
         };
-    }, [cardRef, contentRef, 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

@@ -1,7 +1,17 @@
+import { PsTableStickyConfig } from '../constants/ps-table-sticky-config';
 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 [];
@@ -11,6 +21,9 @@ export class PsTableStickyHeadService {
             shift: shiftAt(scroll),
         }));
     }
+    static close(first, second) {
+        return Math.abs(first - second) <= PsTableStickyConfig.inputTolerancePx;
+    }
     static stops(scrolls, scrollRange) {
         const inside = scrolls.filter((scroll) => scroll >= 0 && scroll <= scrollRange);
         return inside.filter((scroll, index) => inside.indexOf(scroll) === index);

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, contentRef, headRef, layoutKey, regionRef, sentinelRef, stickyTop, }: PsStickyHeadRefs) => boolean;
+export declare const usePsStickyHead: ({ cardRef, contentRef, headRef, layoutKey, regionRef, stickyTop, }: PsStickyHeadRefs) => void;

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

@@ -5,18 +5,15 @@ const react_1 = require("react");
 const ps_table_sticky_config_1 = require("../constants/ps-table-sticky-config");
 const ps_table_scroll_service_1 = require("../services/ps-table-scroll-service");
 const ps_table_sticky_head_service_1 = require("../services/ps-table-sticky-head-service");
-const usePsStickyHead = ({ cardRef, contentRef, headRef, layoutKey, regionRef, sentinelRef, stickyTop, }) => {
-    const [isStuck, setIsStuck] = (0, react_1.useState)(false);
+const usePsStickyHead = ({ cardRef, contentRef, headRef, layoutKey, regionRef, stickyTop, }) => {
     (0, react_1.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 ||
@@ -26,6 +23,7 @@ const usePsStickyHead = ({ cardRef, contentRef, headRef, layoutKey, regionRef, s
         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 = () => {
@@ -35,10 +33,19 @@ const usePsStickyHead = ({ cardRef, contentRef, headRef, layoutKey, regionRef, s
                 Number.parseFloat(getComputedStyle(region).top) +
                 region.offsetHeight +
                 ps_table_sticky_config_1.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 (ps_table_sticky_head_service_1.PsTableStickyHeadService.sameInputs(measured, inputs))
+                return;
+            measured = inputs;
             const timeline = new Timeline({ axis: 'block', source: scroller });
-            const headFrames = ps_table_sticky_head_service_1.PsTableStickyHeadService.keyframes(table.getBoundingClientRect().top + scroller.scrollTop - pinnedLine, headTravel(), scrollRange);
-            const cardFrames = ps_table_sticky_head_service_1.PsTableStickyHeadService.keyframes(content.getBoundingClientRect().top + scroller.scrollTop - pinnedLine, card.offsetHeight, scrollRange);
+            const headFrames = ps_table_sticky_head_service_1.PsTableStickyHeadService.keyframes(inputs.headPin, inputs.headTravel, inputs.scrollRange);
+            const cardFrames = ps_table_sticky_head_service_1.PsTableStickyHeadService.keyframes(inputs.cardPin, inputs.cardTravel, inputs.scrollRange);
             animations.forEach((animation) => animation.cancel());
             animations = [
                 head.animate(headFrames.map((keyframe) => ({
@@ -56,26 +63,22 @@ const usePsStickyHead = ({ cardRef, contentRef, headRef, layoutKey, regionRef, s
             ];
         };
         const follow = () => {
+            frame = 0;
             const pinnedLine = region.getBoundingClientRect().bottom + ps_table_sticky_config_1.PsTableStickyConfig.cardGapPx;
             head.style.transform = `translateY(${ps_table_sticky_head_service_1.PsTableStickyHeadService.offset(pinnedLine, table.getBoundingClientRect().top, table.offsetHeight, head.offsetHeight)}px)`;
             const cut = ps_table_sticky_head_service_1.PsTableStickyHeadService.offset(pinnedLine, content.getBoundingClientRect().top, card.offsetHeight, 0);
             card.style.transform = `translateY(${cut}px)`;
             content.style.transform = `translateY(${-cut}px)`;
         };
-        const check = () => {
-            frame = 0;
-            setIsStuck(sentinel.getBoundingClientRect().top < region.getBoundingClientRect().top - 1);
-            if (!isDriven)
-                follow();
-        };
         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();
@@ -83,8 +86,9 @@ const usePsStickyHead = ({ cardRef, contentRef, headRef, layoutKey, regionRef, s
         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());
@@ -96,7 +100,6 @@ const usePsStickyHead = ({ cardRef, contentRef, headRef, layoutKey, regionRef, s
             if (frame !== 0)
                 window.cancelAnimationFrame(frame);
         };
-    }, [cardRef, contentRef, headRef, layoutKey, regionRef, sentinelRef, stickyTop]);
-    return isStuck;
+    }, [cardRef, contentRef, headRef, layoutKey, regionRef, stickyTop]);
 };
 exports.usePsStickyHead = usePsStickyHead;

package/dist/index.d.ts

@@ -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/index.js

@@ -80,3 +80,11 @@ __exportStar(require("./interfaces/ps-server-rows-result"), exports);
 __exportStar(require("./interfaces/ps-table-cursor-paging"), exports);
 __exportStar(require("./interfaces/ps-table-select-all-matching"), exports);
 __exportStar(require("./services/ps-server-rows-service"), exports);
+__exportStar(require("./components/ps-report-table"), exports);
+__exportStar(require("./components/ps-report-table-skeleton"), exports);
+__exportStar(require("./constants/ps-report-column-align"), exports);
+__exportStar(require("./constants/ps-report-row-kind"), exports);
+__exportStar(require("./constants/ps-report-row-tone"), exports);
+__exportStar(require("./constants/ps-report-table-density"), exports);
+__exportStar(require("./interfaces/ps-report-column"), exports);
+__exportStar(require("./services/ps-report-table-service"), exports);

package/dist/interfaces/ps-report-cell-plan.d.ts

@@ -0,0 +1,6 @@
+import type { PsReportColumn } from './ps-report-column';
+export interface PsReportCellPlan<RowData> {
+    colSpan: number;
+    column: PsReportColumn<RowData>;
+    index: number;
+}

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

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

package/dist/interfaces/ps-report-column.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+import type { PsReportColumnAlign } from '../constants/ps-report-column-align';
+export interface PsReportColumn<RowData> {
+    align?: PsReportColumnAlign;
+    id: string;
+    label: ReactNode;
+    maxWidth?: string;
+    minWidth?: string;
+    render: (row: RowData) => ReactNode;
+    width?: string;
+    wrap?: boolean;
+}

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

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

package/dist/interfaces/ps-sticky-head-refs.d.ts

@@ -5,6 +5,5 @@ export interface PsStickyHeadRefs {
     headRef: RefObject<HTMLTableSectionElement | null>;
     layoutKey: string;
     regionRef: RefObject<HTMLDivElement | null>;
-    sentinelRef: RefObject<HTMLDivElement | null>;
     stickyTop?: string;
 }

package/dist/interfaces/ps-table-sticky-head-inputs.d.ts

@@ -0,0 +1,7 @@
+export interface PsTableStickyHeadInputs {
+    cardPin: number;
+    cardTravel: number;
+    headPin: number;
+    headTravel: number;
+    scrollRange: number;
+}

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

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

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

@@ -0,0 +1,17 @@
+import type { CSSProperties } from 'react';
+import { PsReportColumnAlign } from '../constants/ps-report-column-align';
+import { PsReportRowTone } from '../constants/ps-report-row-tone';
+import { PsReportTableDensity } from '../constants/ps-report-table-density';
+import type { PsReportCellPlan } from '../interfaces/ps-report-cell-plan';
+import type { PsReportColumn } from '../interfaces/ps-report-column';
+export declare class PsReportTableService {
+    static cells<RowData>(columns: PsReportColumn<RowData>[], leadSpan: number): PsReportCellPlan<RowData>[];
+    static span(count: number, leadSpan: number): number;
+    static indent(level: number, density: PsReportTableDensity): CSSProperties;
+    static columnStyle<RowData>(column: PsReportColumn<RowData>): CSSProperties;
+    static levelOf(level: number | undefined): number;
+    static headClass<RowData>(column: PsReportColumn<RowData>, index: number, density: PsReportTableDensity, isHeaderSticky: boolean, isFirstColumnSticky: boolean): string;
+    static headPin(isHeaderSticky: boolean, isPinnedFirst: boolean): string;
+    static cellClass<RowData>(column: PsReportColumn<RowData>, index: number, density: PsReportTableDensity, tone: PsReportRowTone, isFirstColumnSticky: boolean): string;
+    static alignOf<RowData>(column: PsReportColumn<RowData>): PsReportColumnAlign;
+}

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

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsReportTableService = void 0;
+const ps_report_column_align_1 = require("../constants/ps-report-column-align");
+const ps_report_table_classes_1 = require("../constants/ps-report-table-classes");
+const ps_report_table_config_1 = require("../constants/ps-report-table-config");
+const ps_table_pin_classes_1 = require("../constants/ps-table-pin-classes");
+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 = ps_report_table_config_1.PsReportTableConfig.baseIndentRem[density];
+        return { paddingLeft: `${base + level * ps_report_table_config_1.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 [
+            ps_report_table_classes_1.PsReportTableClasses.headCell[density],
+            ps_report_table_classes_1.PsReportTableClasses.align[PsReportTableService.alignOf(column)],
+            pin,
+            isPinnedFirst ? ps_table_pin_classes_1.PsTablePinClasses.edge : '',
+        ]
+            .filter((name) => name !== '')
+            .join(' ');
+    }
+    static headPin(isHeaderSticky, isPinnedFirst) {
+        if (isHeaderSticky && isPinnedFirst)
+            return ps_report_table_classes_1.PsReportTableClasses.stickyFirstHead;
+        if (isHeaderSticky)
+            return ps_report_table_classes_1.PsReportTableClasses.stickyHead;
+        if (isPinnedFirst)
+            return ps_report_table_classes_1.PsReportTableClasses.stickyFirstBody;
+        return '';
+    }
+    static cellClass(column, index, density, tone, isFirstColumnSticky) {
+        const isPinnedFirst = index === 0 && isFirstColumnSticky;
+        return [
+            ps_report_table_classes_1.PsReportTableClasses.cell[density],
+            ps_report_table_classes_1.PsReportTableClasses.align[PsReportTableService.alignOf(column)],
+            ps_report_table_classes_1.PsReportTableClasses.tone[tone],
+            column.wrap === true ? '' : ps_report_table_classes_1.PsReportTableClasses.nowrap,
+            column.maxWidth !== undefined ? ps_report_table_classes_1.PsReportTableClasses.truncate : '',
+            isPinnedFirst ? `${ps_report_table_classes_1.PsReportTableClasses.stickyFirstBody} ${ps_table_pin_classes_1.PsTablePinClasses.edge}` : '',
+        ]
+            .filter((name) => name !== '')
+            .join(' ');
+    }
+    static alignOf(column) {
+        return column.align !== undefined ? column.align : ps_report_column_align_1.PsReportColumnAlign.left;
+    }
+}
+exports.PsReportTableService = PsReportTableService;

package/dist/services/ps-table-sticky-head-service.d.ts

@@ -1,6 +1,9 @@
+import type { PsTableStickyHeadInputs } from '../interfaces/ps-table-sticky-head-inputs';
 import type { PsTableStickyHeadKeyframe } from '../interfaces/ps-table-sticky-head-keyframe';
 export declare class PsTableStickyHeadService {
     static offset(pinnedBottom: number, tableTop: number, tableHeight: number, headHeight: number): number;
+    static sameInputs(previous: PsTableStickyHeadInputs | null, next: PsTableStickyHeadInputs): boolean;
     static keyframes(pinScroll: number, maxShift: number, scrollRange: number): PsTableStickyHeadKeyframe[];
+    private static close;
     private static stops;
 }

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

@@ -1,10 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PsTableStickyHeadService = void 0;
+const ps_table_sticky_config_1 = require("../constants/ps-table-sticky-config");
 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 [];
@@ -14,6 +24,9 @@ class PsTableStickyHeadService {
             shift: shiftAt(scroll),
         }));
     }
+    static close(first, second) {
+        return Math.abs(first - second) <= ps_table_sticky_config_1.PsTableStickyConfig.inputTolerancePx;
+    }
     static stops(scrolls, scrollRange) {
         const inside = scrolls.filter((scroll) => scroll >= 0 && scroll <= scrollRange);
         return inside.filter((scroll, index) => inside.indexOf(scroll) === index);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pallasoft/ps-table-components",
-	"version": "1.28.4",
+	"version": "1.29.0",
 	"private": false,
 	"main": "./dist/index.js",
 	"module": "./dist/esm/index.js",