@pallasoft/ps-table-components 1.14.0 → 1.14.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/ps-data-table.js +11 -6
- package/dist/components/ps-table-toolbar.js +1 -1
- package/dist/constants/table-column-size.d.ts +1 -0
- package/dist/constants/table-column-size.js +12 -8
- package/dist/esm/components/ps-data-table.js +11 -6
- package/dist/esm/components/ps-table-toolbar.js +1 -1
- package/dist/esm/constants/table-column-size.js +11 -7
- package/dist/esm/services/ps-table-column-size-service.js +13 -1
- package/dist/services/ps-table-column-size-service.d.ts +1 -0
- package/dist/services/ps-table-column-size-service.js +12 -0
- package/package.json +1 -1
|
@@ -29,6 +29,7 @@ const densityClassNames = {
|
|
|
29
29
|
},
|
|
30
30
|
};
|
|
31
31
|
const columnStyle = (column) => ({
|
|
32
|
+
maxWidth: ps_table_column_size_service_1.PsTableColumnSizeService.maxWidthOf(column),
|
|
32
33
|
minWidth: ps_table_column_size_service_1.PsTableColumnSizeService.minWidthOf(column),
|
|
33
34
|
width: column.width,
|
|
34
35
|
});
|
|
@@ -55,9 +56,10 @@ const PsDataTable = ({ caption, className, columns, defaultSort, density = 'norm
|
|
|
55
56
|
onQueryChange?.(next);
|
|
56
57
|
};
|
|
57
58
|
const isServerPaginated = totalRows !== undefined;
|
|
59
|
+
const isQueryable = !isServerPaginated || onQueryChange !== undefined;
|
|
58
60
|
const hasFooter = columns.some((column) => column.footer !== undefined);
|
|
59
|
-
const isSearchable = Boolean(getSearchText) &&
|
|
60
|
-
const hasFilters = columns.some((column) => column.filter) &&
|
|
61
|
+
const isSearchable = Boolean(getSearchText) && isQueryable;
|
|
62
|
+
const hasFilters = columns.some((column) => column.filter) && isQueryable;
|
|
61
63
|
const hasToolbar = isSearchable || hasFilters || Boolean(toolbarActions);
|
|
62
64
|
const isSelectable = Boolean(getBulkActions);
|
|
63
65
|
const columnCount = visibleColumns.length + (isSelectable ? 1 : 0);
|
|
@@ -169,7 +171,10 @@ const PsDataTable = ({ caption, className, columns, defaultSort, density = 'norm
|
|
|
169
171
|
}
|
|
170
172
|
: undefined, style: motion && motion.delayMs !== undefined
|
|
171
173
|
? { animationDelay: `${motion.delayMs}ms` }
|
|
172
|
-
: undefined, tabIndex: onRowClick ? 0 : undefined, children: [isSelectable ? ((0, jsx_runtime_1.jsx)("td", { className: 'w-10 pl-4 pr-0', onClick: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation(), children: (0, jsx_runtime_1.jsx)(ps_input_components_1.PsCheckbox, { isSelected: selectedIds.includes(rowId), label: `Select ${rowLabel}`, onChange: () => toggleRow(rowId) }) })) : null, visibleColumns.map((column) => ((0, jsx_runtime_1.jsx)("td", { className: ps_design_system_1.PallasoftClassNameService.merge(densityClassNames[density].cell, alignClassNames[column.align !== null && column.align !== undefined ? column.align : 'left'], column.wrap ? '' : 'whitespace-nowrap', layout === 'fixed' && !column.wrap
|
|
174
|
+
: undefined, tabIndex: onRowClick ? 0 : undefined, children: [isSelectable ? ((0, jsx_runtime_1.jsx)("td", { className: 'w-10 pl-4 pr-0', onClick: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation(), children: (0, jsx_runtime_1.jsx)(ps_input_components_1.PsCheckbox, { isSelected: selectedIds.includes(rowId), label: `Select ${rowLabel}`, onChange: () => toggleRow(rowId) }) })) : null, visibleColumns.map((column) => ((0, jsx_runtime_1.jsx)("td", { className: ps_design_system_1.PallasoftClassNameService.merge(densityClassNames[density].cell, alignClassNames[column.align !== null && column.align !== undefined ? column.align : 'left'], column.wrap ? '' : 'whitespace-nowrap', (layout === 'fixed' && !column.wrap) ||
|
|
175
|
+
ps_table_column_size_service_1.PsTableColumnSizeService.maxWidthOf(column) !== undefined
|
|
176
|
+
? 'truncate'
|
|
177
|
+
: '', 'text-sm text-ink'), style: columnStyle(column), 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));
|
|
173
178
|
};
|
|
174
179
|
if (isLoading)
|
|
175
180
|
return ((0, jsx_runtime_1.jsx)(ps_core_components_1.PsSkeletonTable, { className: className, columns: visibleColumns.length, hasToolbar: hasToolbar, rows: table_config_1.PsTableConfig.skeletonRows }));
|
|
@@ -188,14 +193,14 @@ const PsDataTable = ({ caption, className, columns, defaultSort, density = 'norm
|
|
|
188
193
|
? grouping.renderGroupSummary(group.rows)
|
|
189
194
|
: undefined }), (0, jsx_runtime_1.jsx)(ps_motion_components_1.PsCollapse, { isOpen: isExpanded && !closingGroupKeys.includes(group.key), children: renderCardList(group.rows, null) })] }, `group-${group.key}`));
|
|
190
195
|
})
|
|
191
|
-
: renderCardList(visibleRows, visibleRows.length === 0 && isQueried ? ((0, jsx_runtime_1.jsxs)("div", { className: 'px-4 py-10 text-center', children: [(0, jsx_runtime_1.jsx)("p", { className: 'text-sm font-semibold text-ink', children: table_config_1.PsTableConfig.noMatchesTitle }), (0, jsx_runtime_1.jsx)("button", { className: 'ps-focus-ring mt-2 rounded-full px-3 py-1.5 text-sm font-semibold text-primary', onClick: clearFilters, type: 'button', children: "Clear search and filters" })] })) : null) })) : null, (0, jsx_runtime_1.jsx)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-scrollbar overflow-x-auto', mobileLayout === 'cards' ? 'hidden sm:block' : ''), children: (0, jsx_runtime_1.jsxs)("table", { className: ps_design_system_1.PallasoftClassNameService.merge('w-full min-w-max border-collapse text-left', layout === 'fixed' ? 'table-fixed' : ''), children: [caption ? (0, jsx_runtime_1.jsx)("caption", { className: 'sr-only', children: caption }) : null, (0, jsx_runtime_1.jsx)("thead", { className: 'bg-mist/70 text-[0.68rem] font-semibold uppercase tracking-[0.18em] text-ink/45', children: (0, jsx_runtime_1.jsxs)("tr", { children: [isSelectable ? ((0, jsx_runtime_1.jsx)("th", { className: 'w-10 pl-4 pr-0', scope: 'col', children: (0, jsx_runtime_1.jsx)(ps_input_components_1.PsCheckbox, { isIndeterminate: !isPageSelected && pageIds.some((rowId) => selectedIds.includes(rowId)), isSelected: isPageSelected, label: 'Select all rows on this page', onChange: togglePage }) })) : null, visibleColumns.map((column) => {
|
|
196
|
+
: renderCardList(visibleRows, visibleRows.length === 0 && isQueried ? ((0, jsx_runtime_1.jsxs)("div", { className: 'px-4 py-10 text-center', children: [(0, jsx_runtime_1.jsx)("p", { className: 'text-sm font-semibold text-ink', children: table_config_1.PsTableConfig.noMatchesTitle }), (0, jsx_runtime_1.jsx)("button", { className: 'ps-focus-ring mt-2 rounded-full px-3 py-1.5 text-sm font-semibold text-primary', onClick: clearFilters, type: 'button', children: "Clear search and filters" })] })) : null) })) : null, (0, jsx_runtime_1.jsx)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-scrollbar overflow-x-auto overflow-y-hidden', mobileLayout === 'cards' ? 'hidden sm:block' : ''), children: (0, jsx_runtime_1.jsxs)("table", { className: ps_design_system_1.PallasoftClassNameService.merge('w-full min-w-max border-collapse text-left', layout === 'fixed' ? 'table-fixed' : ''), children: [caption ? (0, jsx_runtime_1.jsx)("caption", { className: 'sr-only', children: caption }) : null, (0, jsx_runtime_1.jsx)("thead", { className: 'bg-mist/70 text-[0.68rem] font-semibold uppercase tracking-[0.18em] text-ink/45', children: (0, jsx_runtime_1.jsxs)("tr", { children: [isSelectable ? ((0, jsx_runtime_1.jsx)("th", { className: 'w-10 pl-4 pr-0', scope: 'col', children: (0, jsx_runtime_1.jsx)(ps_input_components_1.PsCheckbox, { isIndeterminate: !isPageSelected && pageIds.some((rowId) => selectedIds.includes(rowId)), isSelected: isPageSelected, label: 'Select all rows on this page', onChange: togglePage }) })) : null, visibleColumns.map((column) => {
|
|
192
197
|
const align = column.align !== null && column.align !== undefined ? column.align : 'left';
|
|
193
198
|
const isSorted = sort !== null && sort.columnId === column.id;
|
|
194
199
|
return ((0, jsx_runtime_1.jsx)("th", { "aria-sort": isSorted
|
|
195
200
|
? sort.direction
|
|
196
|
-
: column.sortValue &&
|
|
201
|
+
: column.sortValue && isQueryable
|
|
197
202
|
? 'none'
|
|
198
|
-
: undefined, className: ps_design_system_1.PallasoftClassNameService.merge(densityClassNames[density].head, alignClassNames[align], 'whitespace-nowrap'), scope: 'col', style: columnStyle(column), children: column.sortValue &&
|
|
203
|
+
: undefined, className: ps_design_system_1.PallasoftClassNameService.merge(densityClassNames[density].head, alignClassNames[align], 'whitespace-nowrap'), scope: 'col', style: columnStyle(column), children: column.sortValue && isQueryable ? ((0, jsx_runtime_1.jsx)(ps_table_sort_header_1.PsTableSortHeader, { align: align, columnId: column.id, label: column.label, onSort: updateSort, sort: sort })) : (column.label) }, column.id));
|
|
199
204
|
})] }) }), (0, jsx_runtime_1.jsxs)("tbody", { className: 'divide-y divide-line', children: [visibleRows.length === 0 && isQueried ? ((0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsxs)("td", { className: 'px-4 py-12 text-center', colSpan: columnCount, children: [(0, jsx_runtime_1.jsx)("p", { className: 'text-sm font-semibold text-ink', children: table_config_1.PsTableConfig.noMatchesTitle }), (0, jsx_runtime_1.jsx)("p", { className: 'mt-1 text-sm text-ink/55', children: table_config_1.PsTableConfig.noMatchesDescription }), (0, jsx_runtime_1.jsx)("button", { className: 'ps-focus-ring mt-3 rounded-full px-3 py-1.5 text-sm font-semibold text-primary hover:underline', onClick: clearFilters, type: 'button', children: "Clear search and filters" })] }) })) : null, grouping
|
|
200
205
|
? groups.map((group, groupIndex) => {
|
|
201
206
|
const isExpanded = isGroupExpanded(group.key, groupIndex);
|
|
@@ -13,6 +13,6 @@ const PsTableToolbar = ({ actions, columns, filters, isSearchable, onClearFilter
|
|
|
13
13
|
const filterableColumns = columns.filter((column) => column.filter);
|
|
14
14
|
const zIndex = (0, ps_core_components_1.usePsLayerZIndex)(ps_design_system_1.PallasoftZIndex.Dropdown);
|
|
15
15
|
const activeCount = filterableColumns.filter((column) => ps_table_query_service_1.PsTableQueryService.isActive(filters[column.id])).length;
|
|
16
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-wrap items-center gap-2', children: [isSearchable ? ((0, jsx_runtime_1.jsxs)("label", { className: 'relative basis-full sm:min-w-[12rem] sm:flex-1 sm:basis-auto sm:max-w-xs', children: [(0, jsx_runtime_1.jsx)("span", { className: 'sr-only', children: searchPlaceholder }), (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'pointer-events-none absolute left-3.5 top-1/2 h-4 w-4 -translate-y-1/2 text-ink/45', iconKey: ps_icons_1.PsIconKey.Search }), (0, jsx_runtime_1.jsx)("input", { className: 'ps-input-control ps-focus-ring ps-control rounded-ps-control pl-10 text-sm', onChange: (event) => onSearchChange(event.target.value), placeholder: searchPlaceholder, type: 'search', value: search })] })) : null, (0, jsx_runtime_1.jsxs)("div", { className: 'ps-scrollbar-hidden flex w-full min-w-0 items-center gap-2 overflow-x-auto sm:w-auto
|
|
16
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-wrap items-center gap-2', children: [isSearchable ? ((0, jsx_runtime_1.jsxs)("label", { className: 'relative basis-full sm:min-w-[12rem] sm:flex-1 sm:basis-auto sm:max-w-xs', children: [(0, jsx_runtime_1.jsx)("span", { className: 'sr-only', children: searchPlaceholder }), (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'pointer-events-none absolute left-3.5 top-1/2 h-4 w-4 -translate-y-1/2 text-ink/45', iconKey: ps_icons_1.PsIconKey.Search }), (0, jsx_runtime_1.jsx)("input", { className: 'ps-input-control ps-focus-ring ps-control rounded-ps-control pl-10 text-sm', onChange: (event) => onSearchChange(event.target.value), placeholder: searchPlaceholder, type: 'search', value: search })] })) : null, (0, jsx_runtime_1.jsxs)("div", { className: 'ps-scrollbar-hidden flex w-full min-w-0 flex-1 items-center gap-2 overflow-x-auto sm:w-auto', children: [filterableColumns.length > 0 ? ((0, jsx_runtime_1.jsxs)(react_aria_components_1.DialogTrigger, { children: [(0, jsx_runtime_1.jsxs)(react_aria_components_1.Button, { className: toolbarButtonClassName, children: [(0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'block h-4 w-4', iconKey: ps_icons_1.PsIconKey.Filter }), (0, jsx_runtime_1.jsx)("span", { className: 'sr-only sm:not-sr-only', children: "Filters" }), activeCount > 0 ? ((0, jsx_runtime_1.jsx)("span", { className: 'inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-primary px-1.5 text-xs font-semibold text-[color:var(--ps-color-primary-contrast)]', children: activeCount })) : null] }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Popover, { className: 'ps-floating-panel ps-scrollbar-hidden max-h-[min(34rem,80vh)] w-[min(22rem,calc(100vw-2rem))] overflow-y-auto outline-none', offset: 6, placement: 'bottom start', style: { zIndex }, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Dialog, { "aria-label": 'Filters', className: 'flex flex-col gap-4 p-4 outline-none', children: (0, jsx_runtime_1.jsxs)(ps_core_components_1.PsLayer, { zIndex: zIndex, children: [filterableColumns.map((column) => ((0, jsx_runtime_1.jsx)(ps_table_filter_field_1.PsTableFilterField, { kind: column.filter ? column.filter.kind : 'text', label: column.label, onChange: (value) => onFilterChange(column.id, value), options: ps_table_query_service_1.PsTableQueryService.options(rows, column), value: filters[column.id] ? filters[column.id] : {} }, column.id))), (0, jsx_runtime_1.jsx)("div", { className: 'flex justify-end border-t border-line pt-3', children: (0, jsx_runtime_1.jsx)("button", { className: 'ps-focus-ring rounded-lg px-2 py-1 text-sm font-semibold text-ink/65 hover:text-ink disabled:opacity-40', disabled: activeCount === 0, onClick: onClearFilters, type: 'button', children: "Clear all" }) })] }) }) })] })) : null, activeCount > 0 ? ((0, jsx_runtime_1.jsx)("button", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-focus-ring rounded-full px-3 py-2 text-sm font-semibold text-ink/65 hover:text-ink'), onClick: onClearFilters, type: 'button', children: "Clear filters" })) : null, actions ? (0, jsx_runtime_1.jsx)("div", { className: 'ml-auto flex shrink-0 items-center gap-2', children: actions }) : null] })] }));
|
|
17
17
|
};
|
|
18
18
|
exports.PsTableToolbar = PsTableToolbar;
|
|
@@ -9,3 +9,4 @@ export declare const PsTableColumnSize: {
|
|
|
9
9
|
};
|
|
10
10
|
export type PsTableColumnSize = (typeof PsTableColumnSize)[keyof typeof PsTableColumnSize];
|
|
11
11
|
export declare const PsTableColumnWidths: Record<PsTableColumnSize, string>;
|
|
12
|
+
export declare const PsTableColumnMaxWidths: Partial<Record<PsTableColumnSize, string>>;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.PsTableColumnWidths = exports.PsTableColumnSize = void 0;
|
|
3
|
+
exports.PsTableColumnMaxWidths = exports.PsTableColumnWidths = exports.PsTableColumnSize = void 0;
|
|
4
4
|
exports.PsTableColumnSize = {
|
|
5
5
|
amount: 'amount',
|
|
6
6
|
compact: 'compact',
|
|
@@ -11,11 +11,15 @@ exports.PsTableColumnSize = {
|
|
|
11
11
|
wide: 'wide',
|
|
12
12
|
};
|
|
13
13
|
exports.PsTableColumnWidths = {
|
|
14
|
-
amount: '
|
|
15
|
-
compact: '
|
|
16
|
-
date: '
|
|
17
|
-
identifier: '
|
|
18
|
-
status: '
|
|
19
|
-
text: '
|
|
20
|
-
wide: '
|
|
14
|
+
amount: '7.5rem',
|
|
15
|
+
compact: '5rem',
|
|
16
|
+
date: '7rem',
|
|
17
|
+
identifier: '8rem',
|
|
18
|
+
status: '7rem',
|
|
19
|
+
text: '9rem',
|
|
20
|
+
wide: '14rem',
|
|
21
|
+
};
|
|
22
|
+
exports.PsTableColumnMaxWidths = {
|
|
23
|
+
text: '18rem',
|
|
24
|
+
wide: '26rem',
|
|
21
25
|
};
|
|
@@ -26,6 +26,7 @@ const densityClassNames = {
|
|
|
26
26
|
},
|
|
27
27
|
};
|
|
28
28
|
const columnStyle = (column) => ({
|
|
29
|
+
maxWidth: PsTableColumnSizeService.maxWidthOf(column),
|
|
29
30
|
minWidth: PsTableColumnSizeService.minWidthOf(column),
|
|
30
31
|
width: column.width,
|
|
31
32
|
});
|
|
@@ -52,9 +53,10 @@ export const PsDataTable = ({ caption, className, columns, defaultSort, density
|
|
|
52
53
|
onQueryChange?.(next);
|
|
53
54
|
};
|
|
54
55
|
const isServerPaginated = totalRows !== undefined;
|
|
56
|
+
const isQueryable = !isServerPaginated || onQueryChange !== undefined;
|
|
55
57
|
const hasFooter = columns.some((column) => column.footer !== undefined);
|
|
56
|
-
const isSearchable = Boolean(getSearchText) &&
|
|
57
|
-
const hasFilters = columns.some((column) => column.filter) &&
|
|
58
|
+
const isSearchable = Boolean(getSearchText) && isQueryable;
|
|
59
|
+
const hasFilters = columns.some((column) => column.filter) && isQueryable;
|
|
58
60
|
const hasToolbar = isSearchable || hasFilters || Boolean(toolbarActions);
|
|
59
61
|
const isSelectable = Boolean(getBulkActions);
|
|
60
62
|
const columnCount = visibleColumns.length + (isSelectable ? 1 : 0);
|
|
@@ -166,7 +168,10 @@ export const PsDataTable = ({ caption, className, columns, defaultSort, density
|
|
|
166
168
|
}
|
|
167
169
|
: undefined, style: motion && motion.delayMs !== undefined
|
|
168
170
|
? { animationDelay: `${motion.delayMs}ms` }
|
|
169
|
-
: undefined, tabIndex: onRowClick ? 0 : undefined, children: [isSelectable ? (_jsx("td", { className: 'w-10 pl-4 pr-0', onClick: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation(), children: _jsx(PsCheckbox, { isSelected: selectedIds.includes(rowId), label: `Select ${rowLabel}`, onChange: () => toggleRow(rowId) }) })) : null, visibleColumns.map((column) => (_jsx("td", { className: PallasoftClassNameService.merge(densityClassNames[density].cell, alignClassNames[column.align !== null && column.align !== undefined ? column.align : 'left'], column.wrap ? '' : 'whitespace-nowrap', layout === 'fixed' && !column.wrap
|
|
171
|
+
: undefined, tabIndex: onRowClick ? 0 : undefined, children: [isSelectable ? (_jsx("td", { className: 'w-10 pl-4 pr-0', onClick: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation(), children: _jsx(PsCheckbox, { isSelected: selectedIds.includes(rowId), label: `Select ${rowLabel}`, onChange: () => toggleRow(rowId) }) })) : null, visibleColumns.map((column) => (_jsx("td", { className: PallasoftClassNameService.merge(densityClassNames[density].cell, alignClassNames[column.align !== null && column.align !== undefined ? column.align : 'left'], column.wrap ? '' : 'whitespace-nowrap', (layout === 'fixed' && !column.wrap) ||
|
|
172
|
+
PsTableColumnSizeService.maxWidthOf(column) !== undefined
|
|
173
|
+
? 'truncate'
|
|
174
|
+
: '', 'text-sm text-ink'), style: columnStyle(column), 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));
|
|
170
175
|
};
|
|
171
176
|
if (isLoading)
|
|
172
177
|
return (_jsx(PsSkeletonTable, { className: className, columns: visibleColumns.length, hasToolbar: hasToolbar, rows: PsTableConfig.skeletonRows }));
|
|
@@ -185,14 +190,14 @@ export const PsDataTable = ({ caption, className, columns, defaultSort, density
|
|
|
185
190
|
? grouping.renderGroupSummary(group.rows)
|
|
186
191
|
: undefined }), _jsx(PsCollapse, { isOpen: isExpanded && !closingGroupKeys.includes(group.key), children: renderCardList(group.rows, null) })] }, `group-${group.key}`));
|
|
187
192
|
})
|
|
188
|
-
: renderCardList(visibleRows, visibleRows.length === 0 && isQueried ? (_jsxs("div", { className: 'px-4 py-10 text-center', children: [_jsx("p", { className: 'text-sm font-semibold text-ink', children: PsTableConfig.noMatchesTitle }), _jsx("button", { className: 'ps-focus-ring mt-2 rounded-full px-3 py-1.5 text-sm font-semibold text-primary', onClick: clearFilters, type: 'button', children: "Clear search and filters" })] })) : null) })) : null, _jsx("div", { className: PallasoftClassNameService.merge('ps-scrollbar overflow-x-auto', mobileLayout === 'cards' ? 'hidden sm:block' : ''), children: _jsxs("table", { className: PallasoftClassNameService.merge('w-full min-w-max border-collapse text-left', layout === 'fixed' ? 'table-fixed' : ''), children: [caption ? _jsx("caption", { className: 'sr-only', children: caption }) : null, _jsx("thead", { className: 'bg-mist/70 text-[0.68rem] font-semibold uppercase tracking-[0.18em] text-ink/45', children: _jsxs("tr", { children: [isSelectable ? (_jsx("th", { className: 'w-10 pl-4 pr-0', scope: 'col', children: _jsx(PsCheckbox, { isIndeterminate: !isPageSelected && pageIds.some((rowId) => selectedIds.includes(rowId)), isSelected: isPageSelected, label: 'Select all rows on this page', onChange: togglePage }) })) : null, visibleColumns.map((column) => {
|
|
193
|
+
: renderCardList(visibleRows, visibleRows.length === 0 && isQueried ? (_jsxs("div", { className: 'px-4 py-10 text-center', children: [_jsx("p", { className: 'text-sm font-semibold text-ink', children: PsTableConfig.noMatchesTitle }), _jsx("button", { className: 'ps-focus-ring mt-2 rounded-full px-3 py-1.5 text-sm font-semibold text-primary', onClick: clearFilters, type: 'button', children: "Clear search and filters" })] })) : null) })) : null, _jsx("div", { className: PallasoftClassNameService.merge('ps-scrollbar overflow-x-auto overflow-y-hidden', mobileLayout === 'cards' ? 'hidden sm:block' : ''), children: _jsxs("table", { className: PallasoftClassNameService.merge('w-full min-w-max border-collapse text-left', layout === 'fixed' ? 'table-fixed' : ''), children: [caption ? _jsx("caption", { className: 'sr-only', children: caption }) : null, _jsx("thead", { className: 'bg-mist/70 text-[0.68rem] font-semibold uppercase tracking-[0.18em] text-ink/45', children: _jsxs("tr", { children: [isSelectable ? (_jsx("th", { className: 'w-10 pl-4 pr-0', scope: 'col', children: _jsx(PsCheckbox, { isIndeterminate: !isPageSelected && pageIds.some((rowId) => selectedIds.includes(rowId)), isSelected: isPageSelected, label: 'Select all rows on this page', onChange: togglePage }) })) : null, visibleColumns.map((column) => {
|
|
189
194
|
const align = column.align !== null && column.align !== undefined ? column.align : 'left';
|
|
190
195
|
const isSorted = sort !== null && sort.columnId === column.id;
|
|
191
196
|
return (_jsx("th", { "aria-sort": isSorted
|
|
192
197
|
? sort.direction
|
|
193
|
-
: column.sortValue &&
|
|
198
|
+
: column.sortValue && isQueryable
|
|
194
199
|
? 'none'
|
|
195
|
-
: undefined, className: PallasoftClassNameService.merge(densityClassNames[density].head, alignClassNames[align], 'whitespace-nowrap'), scope: 'col', style: columnStyle(column), children: column.sortValue &&
|
|
200
|
+
: undefined, className: PallasoftClassNameService.merge(densityClassNames[density].head, alignClassNames[align], 'whitespace-nowrap'), scope: 'col', style: columnStyle(column), children: column.sortValue && isQueryable ? (_jsx(PsTableSortHeader, { align: align, columnId: column.id, label: column.label, onSort: updateSort, sort: sort })) : (column.label) }, column.id));
|
|
196
201
|
})] }) }), _jsxs("tbody", { className: 'divide-y divide-line', children: [visibleRows.length === 0 && isQueried ? (_jsx("tr", { children: _jsxs("td", { className: 'px-4 py-12 text-center', colSpan: columnCount, children: [_jsx("p", { className: 'text-sm font-semibold text-ink', children: PsTableConfig.noMatchesTitle }), _jsx("p", { className: 'mt-1 text-sm text-ink/55', children: PsTableConfig.noMatchesDescription }), _jsx("button", { className: 'ps-focus-ring mt-3 rounded-full px-3 py-1.5 text-sm font-semibold text-primary hover:underline', onClick: clearFilters, type: 'button', children: "Clear search and filters" })] }) })) : null, grouping
|
|
197
202
|
? groups.map((group, groupIndex) => {
|
|
198
203
|
const isExpanded = isGroupExpanded(group.key, groupIndex);
|
|
@@ -10,5 +10,5 @@ export const PsTableToolbar = ({ actions, columns, filters, isSearchable, onClea
|
|
|
10
10
|
const filterableColumns = columns.filter((column) => column.filter);
|
|
11
11
|
const zIndex = usePsLayerZIndex(PallasoftZIndex.Dropdown);
|
|
12
12
|
const activeCount = filterableColumns.filter((column) => PsTableQueryService.isActive(filters[column.id])).length;
|
|
13
|
-
return (_jsxs("div", { className: 'flex flex-wrap items-center gap-2', children: [isSearchable ? (_jsxs("label", { className: 'relative basis-full sm:min-w-[12rem] sm:flex-1 sm:basis-auto sm:max-w-xs', children: [_jsx("span", { className: 'sr-only', children: searchPlaceholder }), _jsx(PsIcon, { "aria-hidden": 'true', className: 'pointer-events-none absolute left-3.5 top-1/2 h-4 w-4 -translate-y-1/2 text-ink/45', iconKey: PsIconKey.Search }), _jsx("input", { className: 'ps-input-control ps-focus-ring ps-control rounded-ps-control pl-10 text-sm', onChange: (event) => onSearchChange(event.target.value), placeholder: searchPlaceholder, type: 'search', value: search })] })) : null, _jsxs("div", { className: 'ps-scrollbar-hidden flex w-full min-w-0 items-center gap-2 overflow-x-auto sm:w-auto
|
|
13
|
+
return (_jsxs("div", { className: 'flex flex-wrap items-center gap-2', children: [isSearchable ? (_jsxs("label", { className: 'relative basis-full sm:min-w-[12rem] sm:flex-1 sm:basis-auto sm:max-w-xs', children: [_jsx("span", { className: 'sr-only', children: searchPlaceholder }), _jsx(PsIcon, { "aria-hidden": 'true', className: 'pointer-events-none absolute left-3.5 top-1/2 h-4 w-4 -translate-y-1/2 text-ink/45', iconKey: PsIconKey.Search }), _jsx("input", { className: 'ps-input-control ps-focus-ring ps-control rounded-ps-control pl-10 text-sm', onChange: (event) => onSearchChange(event.target.value), placeholder: searchPlaceholder, type: 'search', value: search })] })) : null, _jsxs("div", { className: 'ps-scrollbar-hidden flex w-full min-w-0 flex-1 items-center gap-2 overflow-x-auto sm:w-auto', children: [filterableColumns.length > 0 ? (_jsxs(DialogTrigger, { children: [_jsxs(Button, { className: toolbarButtonClassName, children: [_jsx(PsIcon, { "aria-hidden": 'true', className: 'block h-4 w-4', iconKey: PsIconKey.Filter }), _jsx("span", { className: 'sr-only sm:not-sr-only', children: "Filters" }), activeCount > 0 ? (_jsx("span", { className: 'inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-primary px-1.5 text-xs font-semibold text-[color:var(--ps-color-primary-contrast)]', children: activeCount })) : null] }), _jsx(Popover, { className: 'ps-floating-panel ps-scrollbar-hidden max-h-[min(34rem,80vh)] w-[min(22rem,calc(100vw-2rem))] overflow-y-auto outline-none', offset: 6, placement: 'bottom start', style: { zIndex }, children: _jsx(Dialog, { "aria-label": 'Filters', className: 'flex flex-col gap-4 p-4 outline-none', children: _jsxs(PsLayer, { zIndex: zIndex, children: [filterableColumns.map((column) => (_jsx(PsTableFilterField, { kind: column.filter ? column.filter.kind : 'text', label: column.label, onChange: (value) => onFilterChange(column.id, value), options: PsTableQueryService.options(rows, column), value: filters[column.id] ? filters[column.id] : {} }, column.id))), _jsx("div", { className: 'flex justify-end border-t border-line pt-3', children: _jsx("button", { className: 'ps-focus-ring rounded-lg px-2 py-1 text-sm font-semibold text-ink/65 hover:text-ink disabled:opacity-40', disabled: activeCount === 0, onClick: onClearFilters, type: 'button', children: "Clear all" }) })] }) }) })] })) : null, activeCount > 0 ? (_jsx("button", { className: PallasoftClassNameService.merge('ps-focus-ring rounded-full px-3 py-2 text-sm font-semibold text-ink/65 hover:text-ink'), onClick: onClearFilters, type: 'button', children: "Clear filters" })) : null, actions ? _jsx("div", { className: 'ml-auto flex shrink-0 items-center gap-2', children: actions }) : null] })] }));
|
|
14
14
|
};
|
|
@@ -8,11 +8,15 @@ export const PsTableColumnSize = {
|
|
|
8
8
|
wide: 'wide',
|
|
9
9
|
};
|
|
10
10
|
export const PsTableColumnWidths = {
|
|
11
|
-
amount: '
|
|
12
|
-
compact: '
|
|
13
|
-
date: '
|
|
14
|
-
identifier: '
|
|
15
|
-
status: '
|
|
16
|
-
text: '
|
|
17
|
-
wide: '
|
|
11
|
+
amount: '7.5rem',
|
|
12
|
+
compact: '5rem',
|
|
13
|
+
date: '7rem',
|
|
14
|
+
identifier: '8rem',
|
|
15
|
+
status: '7rem',
|
|
16
|
+
text: '9rem',
|
|
17
|
+
wide: '14rem',
|
|
18
|
+
};
|
|
19
|
+
export const PsTableColumnMaxWidths = {
|
|
20
|
+
text: '18rem',
|
|
21
|
+
wide: '26rem',
|
|
18
22
|
};
|
|
@@ -1,10 +1,17 @@
|
|
|
1
|
-
import { PsTableColumnSize, PsTableColumnWidths } from '../constants/table-column-size';
|
|
1
|
+
import { PsTableColumnMaxWidths, PsTableColumnSize, PsTableColumnWidths, } from '../constants/table-column-size';
|
|
2
|
+
import { PsTableFilterKind } from '../constants/table-filter-kind';
|
|
2
3
|
export class PsTableColumnSizeService {
|
|
3
4
|
static sizeOf(column) {
|
|
4
5
|
if (column.size !== undefined)
|
|
5
6
|
return column.size;
|
|
6
7
|
if (column.align === 'right')
|
|
7
8
|
return PsTableColumnSize.amount;
|
|
9
|
+
if (column.filter !== undefined && column.filter.kind === PsTableFilterKind.date)
|
|
10
|
+
return PsTableColumnSize.date;
|
|
11
|
+
if (column.filter !== undefined && column.filter.kind === PsTableFilterKind.number)
|
|
12
|
+
return PsTableColumnSize.amount;
|
|
13
|
+
if (column.filter !== undefined && column.filter.kind === PsTableFilterKind.select)
|
|
14
|
+
return PsTableColumnSize.status;
|
|
8
15
|
if (column.align === 'center')
|
|
9
16
|
return PsTableColumnSize.status;
|
|
10
17
|
return PsTableColumnSize.text;
|
|
@@ -14,4 +21,9 @@ export class PsTableColumnSizeService {
|
|
|
14
21
|
return column.minWidth;
|
|
15
22
|
return PsTableColumnWidths[PsTableColumnSizeService.sizeOf(column)];
|
|
16
23
|
}
|
|
24
|
+
static maxWidthOf(column) {
|
|
25
|
+
if (column.wrap)
|
|
26
|
+
return undefined;
|
|
27
|
+
return PsTableColumnMaxWidths[PsTableColumnSizeService.sizeOf(column)];
|
|
28
|
+
}
|
|
17
29
|
}
|
|
@@ -3,4 +3,5 @@ import type { PsTableColumn } from '../interfaces/table-column';
|
|
|
3
3
|
export declare class PsTableColumnSizeService {
|
|
4
4
|
static sizeOf<RowData>(column: PsTableColumn<RowData>): PsTableColumnSize;
|
|
5
5
|
static minWidthOf<RowData>(column: PsTableColumn<RowData>): string;
|
|
6
|
+
static maxWidthOf<RowData>(column: PsTableColumn<RowData>): string | undefined;
|
|
6
7
|
}
|
|
@@ -2,12 +2,19 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.PsTableColumnSizeService = void 0;
|
|
4
4
|
const table_column_size_1 = require("../constants/table-column-size");
|
|
5
|
+
const table_filter_kind_1 = require("../constants/table-filter-kind");
|
|
5
6
|
class PsTableColumnSizeService {
|
|
6
7
|
static sizeOf(column) {
|
|
7
8
|
if (column.size !== undefined)
|
|
8
9
|
return column.size;
|
|
9
10
|
if (column.align === 'right')
|
|
10
11
|
return table_column_size_1.PsTableColumnSize.amount;
|
|
12
|
+
if (column.filter !== undefined && column.filter.kind === table_filter_kind_1.PsTableFilterKind.date)
|
|
13
|
+
return table_column_size_1.PsTableColumnSize.date;
|
|
14
|
+
if (column.filter !== undefined && column.filter.kind === table_filter_kind_1.PsTableFilterKind.number)
|
|
15
|
+
return table_column_size_1.PsTableColumnSize.amount;
|
|
16
|
+
if (column.filter !== undefined && column.filter.kind === table_filter_kind_1.PsTableFilterKind.select)
|
|
17
|
+
return table_column_size_1.PsTableColumnSize.status;
|
|
11
18
|
if (column.align === 'center')
|
|
12
19
|
return table_column_size_1.PsTableColumnSize.status;
|
|
13
20
|
return table_column_size_1.PsTableColumnSize.text;
|
|
@@ -17,5 +24,10 @@ class PsTableColumnSizeService {
|
|
|
17
24
|
return column.minWidth;
|
|
18
25
|
return table_column_size_1.PsTableColumnWidths[PsTableColumnSizeService.sizeOf(column)];
|
|
19
26
|
}
|
|
27
|
+
static maxWidthOf(column) {
|
|
28
|
+
if (column.wrap)
|
|
29
|
+
return undefined;
|
|
30
|
+
return table_column_size_1.PsTableColumnMaxWidths[PsTableColumnSizeService.sizeOf(column)];
|
|
31
|
+
}
|
|
20
32
|
}
|
|
21
33
|
exports.PsTableColumnSizeService = PsTableColumnSizeService;
|