@pallasoft/ps-table-components 1.23.0 → 1.24.0

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

@@ -74,9 +74,9 @@ const densityClassNames = {
         head: 'px-5 py-3.5',
     },
 };
-const columnStyle = (column) => ({
-    maxWidth: ps_table_column_size_service_1.PsTableColumnSizeService.maxWidthOf(column),
-    minWidth: ps_table_column_size_service_1.PsTableColumnSizeService.minWidthOf(column),
+const columnStyle = (column, fittedMinWidth) => ({
+    maxWidth: column.measure === undefined ? ps_table_column_size_service_1.PsTableColumnSizeService.maxWidthOf(column) : undefined,
+    minWidth: fittedMinWidth === undefined ? ps_table_column_size_service_1.PsTableColumnSizeService.minWidthOf(column) : fittedMinWidth,
     width: column.width,
 });
 const alignClassNames = {
@@ -95,6 +95,9 @@ const PsDataTable = ({ caption, className, columns, defaultSort, density = 'norm
     const currentQuery = query ? query : uncontrolledQuery;
     const { filters, hiddenColumnIds, search, sort } = currentQuery;
     const visibleColumns = columns.filter((column) => !hiddenColumnIds.includes(column.id));
+    const fittedWidths = (0, react_1.useMemo)(() => new Map(columns
+        .filter((column) => column.measure !== undefined)
+        .map((column) => [column.id, ps_table_column_size_service_1.PsTableColumnSizeService.fittedMinWidthOf(column, rows)])), [columns, rows]);
     const updateQuery = (patch) => {
         const next = { ...currentQuery, ...patch };
         if (!query)
@@ -323,10 +326,11 @@ const PsDataTable = ({ caption, className, columns, defaultSort, density = 'norm
                         }
                         : undefined, style: motion && motion.delayMs !== undefined
                         ? { animationDelay: `${motion.delayMs}ms` }
-                        : undefined, tabIndex: onRowClick ? 0 : undefined, children: [reorder && !api.isActive ? ((0, jsx_runtime_1.jsx)("td", { className: ps_design_system_1.PallasoftClassNameService.merge('w-9 min-w-9 pl-3 pr-0', pins.reorder) })) : null, isSelectable ? ((0, jsx_runtime_1.jsx)("td", { className: ps_design_system_1.PallasoftClassNameService.merge('w-10 min-w-10 pl-4 pr-0', pins.select), onClick: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation(), children: (0, jsx_runtime_1.jsx)(ps_input_components_1.PsCheckbox, { isSelected: selectedIdSet.has(rowId), label: `Select ${rowLabel}`, onChange: () => toggleRow(rowId) }) })) : null, visibleColumns.map((column, columnIndex) => ((0, jsx_runtime_1.jsx)("td", { className: ps_design_system_1.PallasoftClassNameService.merge(densityClassNames[density].cell, placementOf(column, columnIndex), alignClassNames[column.align !== null && column.align !== undefined ? column.align : 'left'], column.wrap ? '' : 'whitespace-nowrap', (layout === 'fixed' && !column.wrap) ||
-                                ps_table_column_size_service_1.PsTableColumnSizeService.maxWidthOf(column) !== undefined
+                        : undefined, tabIndex: onRowClick ? 0 : undefined, children: [reorder && !api.isActive ? ((0, jsx_runtime_1.jsx)("td", { className: ps_design_system_1.PallasoftClassNameService.merge('w-9 min-w-9 pl-3 pr-0', pins.reorder) })) : null, isSelectable ? ((0, jsx_runtime_1.jsx)("td", { className: ps_design_system_1.PallasoftClassNameService.merge('w-10 min-w-10 pl-4 pr-0', pins.select), onClick: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation(), children: (0, jsx_runtime_1.jsx)(ps_input_components_1.PsCheckbox, { isSelected: selectedIdSet.has(rowId), label: `Select ${rowLabel}`, onChange: () => toggleRow(rowId) }) })) : null, visibleColumns.map((column, columnIndex) => ((0, jsx_runtime_1.jsx)("td", { className: ps_design_system_1.PallasoftClassNameService.merge(densityClassNames[density].cell, placementOf(column, columnIndex), alignClassNames[column.align !== null && column.align !== undefined ? column.align : 'left'], column.wrap ? '' : 'whitespace-nowrap', column.measure === undefined &&
+                                ((layout === 'fixed' && !column.wrap) ||
+                                    ps_table_column_size_service_1.PsTableColumnSizeService.maxWidthOf(column) !== undefined)
                                 ? 'truncate'
-                                : '', 'text-sm text-ink'), style: columnStyle(column), title: ps_table_cell_tooltip_service_1.PsTableCellTooltipService.forCell(column, row), children: column.render(row) }, column.id)))] }), renderExpandedRow ? ((0, jsx_runtime_1.jsx)("tr", { "aria-hidden": !isExpanded, className: isExpanded ? 'border-t-0' : 'border-0', children: (0, jsx_runtime_1.jsx)("td", { className: 'p-0', colSpan: columnCount, children: (0, jsx_runtime_1.jsx)(ps_motion_components_1.PsCollapse, { isOpen: isExpanded, children: (0, jsx_runtime_1.jsx)("div", { className: 'w-0 min-w-full border-l-2 border-primary bg-mist/40 px-4 py-4', children: renderExpandedRow(row) }) }) }) })) : null] }, rowId));
+                                : '', 'text-sm text-ink'), style: columnStyle(column, fittedWidths.get(column.id)), title: ps_table_cell_tooltip_service_1.PsTableCellTooltipService.forCell(column, row), children: column.render(row) }, column.id)))] }), renderExpandedRow ? ((0, jsx_runtime_1.jsx)("tr", { "aria-hidden": !isExpanded, className: isExpanded ? 'border-t-0' : 'border-0', children: (0, jsx_runtime_1.jsx)("td", { className: 'p-0', colSpan: columnCount, children: (0, jsx_runtime_1.jsx)(ps_motion_components_1.PsCollapse, { isOpen: isExpanded, children: (0, jsx_runtime_1.jsx)("div", { className: 'w-0 min-w-full border-l-2 border-primary bg-mist/40 px-4 py-4', children: renderExpandedRow(row) }) }) }) })) : null] }, rowId));
     };
     const renderEntries = (api, entries) => reorder
         ? ps_table_reorder_service_1.PsTableReorderService.runs(entries, (entry) => reorderKey(entry.row), (entry) => getRowId(entry.row)).map((run) => api.run(run.id, run.items.map((entry) => getRowId(entry.row)), run.items.map((entry) => renderRow(api, entry.row, entry.motion, entry.virtualItem))))
@@ -355,7 +359,7 @@ const PsDataTable = ({ caption, className, columns, defaultSort, density = 'norm
                                                         ? sort.direction
                                                         : column.sortValue && isQueryable
                                                             ? 'none'
-                                                            : undefined, className: ps_design_system_1.PallasoftClassNameService.merge(densityClassNames[density].head, alignClassNames[align], placementOf(column, columnIndex), 'whitespace-nowrap'), scope: 'col', style: columnStyle(column), children: column.sortValue && isQueryable ? ((0, jsx_runtime_1.jsx)(ps_table_sort_header_1.PsTableSortHeader, { align: align, columnId: column.id, label: column.label, onSort: updateSort, sort: sort })) : (column.label) }, column.id));
+                                                            : undefined, className: ps_design_system_1.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 ? ((0, jsx_runtime_1.jsx)(ps_table_sort_header_1.PsTableSortHeader, { align: align, columnId: column.id, label: column.label, onSort: updateSort, sort: sort })) : (column.label) }, column.id));
                                             })] }) }), (0, jsx_runtime_1.jsxs)("tbody", { className: 'divide-y divide-line', ref: bodyRef, children: [visibleRows.length === 0 && isSearching ? ((0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("td", { className: 'p-0', colSpan: columnCount, children: (0, jsx_runtime_1.jsx)(ps_table_searching_state_1.PsTableSearchingState, { label: searchingLabel, skeletonRows: table_config_1.PsTableConfig.searchingSkeletonRows }) }) })) : null, visibleRows.length === 0 && isQueried && !isSearching ? ((0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsxs)("td", { className: 'px-4 py-12 text-center', colSpan: columnCount, children: [(0, jsx_runtime_1.jsx)("p", { className: 'text-sm font-semibold text-ink', children: table_config_1.PsTableConfig.noMatchesTitle }), (0, jsx_runtime_1.jsx)("p", { className: 'mt-1 text-sm text-ink/55', children: table_config_1.PsTableConfig.noMatchesDescription }), (0, jsx_runtime_1.jsx)("button", { className: ps_design_system_1.PallasoftClassNameService.merge(ps_table_control_classes_1.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);

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

@@ -38,9 +38,9 @@ const densityClassNames = {
         head: 'px-5 py-3.5',
     },
 };
-const columnStyle = (column) => ({
-    maxWidth: PsTableColumnSizeService.maxWidthOf(column),
-    minWidth: PsTableColumnSizeService.minWidthOf(column),
+const columnStyle = (column, fittedMinWidth) => ({
+    maxWidth: column.measure === undefined ? PsTableColumnSizeService.maxWidthOf(column) : undefined,
+    minWidth: fittedMinWidth === undefined ? PsTableColumnSizeService.minWidthOf(column) : fittedMinWidth,
     width: column.width,
 });
 const alignClassNames = {
@@ -59,6 +59,9 @@ export const PsDataTable = ({ caption, className, columns, defaultSort, density
     const currentQuery = query ? query : uncontrolledQuery;
     const { filters, hiddenColumnIds, search, sort } = currentQuery;
     const visibleColumns = columns.filter((column) => !hiddenColumnIds.includes(column.id));
+    const fittedWidths = useMemo(() => new Map(columns
+        .filter((column) => column.measure !== undefined)
+        .map((column) => [column.id, PsTableColumnSizeService.fittedMinWidthOf(column, rows)])), [columns, rows]);
     const updateQuery = (patch) => {
         const next = { ...currentQuery, ...patch };
         if (!query)
@@ -287,10 +290,11 @@ export const PsDataTable = ({ caption, className, columns, defaultSort, density
                         }
                         : undefined, style: motion && motion.delayMs !== undefined
                         ? { animationDelay: `${motion.delayMs}ms` }
-                        : undefined, tabIndex: onRowClick ? 0 : undefined, children: [reorder && !api.isActive ? (_jsx("td", { className: PallasoftClassNameService.merge('w-9 min-w-9 pl-3 pr-0', pins.reorder) })) : null, isSelectable ? (_jsx("td", { className: PallasoftClassNameService.merge('w-10 min-w-10 pl-4 pr-0', pins.select), onClick: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation(), children: _jsx(PsCheckbox, { isSelected: selectedIdSet.has(rowId), label: `Select ${rowLabel}`, onChange: () => toggleRow(rowId) }) })) : null, visibleColumns.map((column, columnIndex) => (_jsx("td", { className: PallasoftClassNameService.merge(densityClassNames[density].cell, placementOf(column, columnIndex), alignClassNames[column.align !== null && column.align !== undefined ? column.align : 'left'], column.wrap ? '' : 'whitespace-nowrap', (layout === 'fixed' && !column.wrap) ||
-                                PsTableColumnSizeService.maxWidthOf(column) !== undefined
+                        : undefined, tabIndex: onRowClick ? 0 : undefined, children: [reorder && !api.isActive ? (_jsx("td", { className: PallasoftClassNameService.merge('w-9 min-w-9 pl-3 pr-0', pins.reorder) })) : null, isSelectable ? (_jsx("td", { className: PallasoftClassNameService.merge('w-10 min-w-10 pl-4 pr-0', pins.select), onClick: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation(), children: _jsx(PsCheckbox, { isSelected: selectedIdSet.has(rowId), label: `Select ${rowLabel}`, onChange: () => toggleRow(rowId) }) })) : null, visibleColumns.map((column, columnIndex) => (_jsx("td", { className: PallasoftClassNameService.merge(densityClassNames[density].cell, placementOf(column, columnIndex), alignClassNames[column.align !== null && column.align !== undefined ? column.align : 'left'], column.wrap ? '' : 'whitespace-nowrap', column.measure === undefined &&
+                                ((layout === 'fixed' && !column.wrap) ||
+                                    PsTableColumnSizeService.maxWidthOf(column) !== undefined)
                                 ? 'truncate'
-                                : '', 'text-sm text-ink'), style: columnStyle(column), title: PsTableCellTooltipService.forCell(column, row), children: column.render(row) }, column.id)))] }), renderExpandedRow ? (_jsx("tr", { "aria-hidden": !isExpanded, className: isExpanded ? 'border-t-0' : 'border-0', children: _jsx("td", { className: 'p-0', colSpan: columnCount, children: _jsx(PsCollapse, { isOpen: isExpanded, children: _jsx("div", { className: 'w-0 min-w-full border-l-2 border-primary bg-mist/40 px-4 py-4', children: renderExpandedRow(row) }) }) }) })) : null] }, rowId));
+                                : '', 'text-sm text-ink'), style: columnStyle(column, fittedWidths.get(column.id)), title: PsTableCellTooltipService.forCell(column, row), children: column.render(row) }, column.id)))] }), renderExpandedRow ? (_jsx("tr", { "aria-hidden": !isExpanded, className: isExpanded ? 'border-t-0' : 'border-0', children: _jsx("td", { className: 'p-0', colSpan: columnCount, children: _jsx(PsCollapse, { isOpen: isExpanded, children: _jsx("div", { className: 'w-0 min-w-full border-l-2 border-primary bg-mist/40 px-4 py-4', children: renderExpandedRow(row) }) }) }) })) : null] }, rowId));
     };
     const renderEntries = (api, entries) => reorder
         ? PsTableReorderService.runs(entries, (entry) => reorderKey(entry.row), (entry) => getRowId(entry.row)).map((run) => api.run(run.id, run.items.map((entry) => getRowId(entry.row)), run.items.map((entry) => renderRow(api, entry.row, entry.motion, entry.virtualItem))))
@@ -319,7 +323,7 @@ export const PsDataTable = ({ caption, className, columns, defaultSort, density
                                                         ? 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), children: column.sortValue && isQueryable ? (_jsx(PsTableSortHeader, { align: align, columnId: column.id, label: column.label, onSort: updateSort, sort: sort })) : (column.label) }, column.id));
+                                                            : undefined, className: PallasoftClassNameService.merge(densityClassNames[density].head, alignClassNames[align], placementOf(column, columnIndex), 'whitespace-nowrap'), scope: 'col', style: columnStyle(column, fittedWidths.get(column.id)), children: column.sortValue && isQueryable ? (_jsx(PsTableSortHeader, { align: align, columnId: column.id, label: column.label, onSort: updateSort, sort: sort })) : (column.label) }, column.id));
                                             })] }) }), _jsxs("tbody", { className: 'divide-y divide-line', ref: bodyRef, children: [visibleRows.length === 0 && isSearching ? (_jsx("tr", { children: _jsx("td", { className: 'p-0', colSpan: columnCount, children: _jsx(PsTableSearchingState, { label: searchingLabel, skeletonRows: PsTableConfig.searchingSkeletonRows }) }) })) : null, visibleRows.length === 0 && isQueried && !isSearching ? (_jsx("tr", { children: _jsxs("td", { className: 'px-4 py-12 text-center', colSpan: columnCount, children: [_jsx("p", { className: 'text-sm font-semibold text-ink', children: PsTableConfig.noMatchesTitle }), _jsx("p", { className: 'mt-1 text-sm text-ink/55', children: PsTableConfig.noMatchesDescription }), _jsx("button", { className: PallasoftClassNameService.merge(PsTableControlClasses.textButton, 'mt-3 text-primary hover:underline'), onClick: clearFilters, type: 'button', children: "Clear search and filters" })] }) })) : null, grouping
                                             ? groups.map((group, groupIndex) => {
                                                 const isExpanded = isGroupExpanded(group.key, groupIndex);

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

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

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

@@ -14,6 +14,8 @@ export interface PsTableColumn<RowData> {
     hideOnCards?: boolean;
     id: string;
     label: string;
+    /** Formatted text of the cell (for example the money string). The column is widened to fit the longest value, so numbers never truncate. */
+    measure?: (row: RowData) => string;
     minWidth?: string;
     pinEnd?: boolean;
     render: (row: RowData) => ReactNode;

package/dist/services/ps-table-column-size-service.d.ts

@@ -1,6 +1,7 @@
 import { PsTableColumnSize } from '../constants/table-column-size';
 import type { PsTableColumn } from '../interfaces/table-column';
 export declare class PsTableColumnSizeService {
+    static fittedMinWidthOf<RowData>(column: PsTableColumn<RowData>, rows: RowData[]): string | undefined;
     static sizeOf<RowData>(column: PsTableColumn<RowData>): PsTableColumnSize;
     static minWidthOf<RowData>(column: PsTableColumn<RowData>): string;
     static maxWidthOf<RowData>(column: PsTableColumn<RowData>): string | undefined;

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

@@ -4,6 +4,13 @@ exports.PsTableColumnSizeService = void 0;
 const table_column_size_1 = require("../constants/table-column-size");
 const table_filter_kind_1 = require("../constants/table-filter-kind");
 class PsTableColumnSizeService {
+    static fittedMinWidthOf(column, rows) {
+        const measure = column.measure;
+        if (measure === undefined)
+            return undefined;
+        const longest = rows.reduce((length, row) => Math.max(length, measure(row).length), 0);
+        return `max(${PsTableColumnSizeService.minWidthOf(column)}, calc(${(longest * 1.1).toFixed(1)}ch + 3rem))`;
+    }
     static sizeOf(column) {
         if (column.size !== undefined)
             return column.size;

package/package.json

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