@pallasoft/ps-table-components 1.14.1 → 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 +10 -5
- 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 +10 -5
- 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 }));
|
|
@@ -193,9 +198,9 @@ const PsDataTable = ({ caption, className, columns, defaultSort, density = 'norm
|
|
|
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);
|
|
@@ -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 }));
|
|
@@ -190,9 +195,9 @@ export const PsDataTable = ({ caption, className, columns, defaultSort, density
|
|
|
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);
|
|
@@ -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;
|