@pallasoft/ps-table-components 1.14.1 → 1.15.0

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.
@@ -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) && !isServerPaginated;
60
- const hasFilters = columns.some((column) => column.filter) && !isServerPaginated;
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 ? 'truncate' : '', '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));
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 && !isServerPaginated
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 && !isServerPaginated ? ((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));
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);
@@ -207,6 +212,6 @@ const PsDataTable = ({ caption, className, columns, defaultSort, density = 'norm
207
212
  })
208
213
  : visibleRows.map((row) => renderRow(row))] }), hasFooter ? ((0, jsx_runtime_1.jsx)("tfoot", { className: 'border-t-2 border-line bg-mist/50 text-sm font-semibold text-ink', children: (0, jsx_runtime_1.jsxs)("tr", { children: [isSelectable ? (0, jsx_runtime_1.jsx)("td", {}) : 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
209
214
  ? column.align
210
- : 'left'], 'whitespace-nowrap'), children: column.footer }, column.id)))] }) })) : null] }) }), pageSize && !grouping ? ((0, jsx_runtime_1.jsx)(ps_table_pagination_1.PsTablePagination, { onPageChange: changePage, page: safePage, pageCount: pageCount, pageSize: pageSize, totalRows: rowCount })) : null] })] }));
215
+ : 'left'], 'whitespace-nowrap'), children: column.footer }, column.id)))] }) })) : null] }) }), pageSize && (!grouping || isServerPaginated) ? ((0, jsx_runtime_1.jsx)(ps_table_pagination_1.PsTablePagination, { onPageChange: changePage, page: safePage, pageCount: pageCount, pageSize: pageSize, totalRows: rowCount })) : null] })] }));
211
216
  };
212
217
  exports.PsDataTable = PsDataTable;
@@ -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: '8.5rem',
15
- compact: '6rem',
16
- date: '7.5rem',
17
- identifier: '9rem',
18
- status: '8rem',
19
- text: '12rem',
20
- wide: '18rem',
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) && !isServerPaginated;
57
- const hasFilters = columns.some((column) => column.filter) && !isServerPaginated;
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 ? 'truncate' : '', '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));
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 && !isServerPaginated
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 && !isServerPaginated ? (_jsx(PsTableSortHeader, { align: align, columnId: column.id, label: column.label, onSort: updateSort, sort: sort })) : (column.label) }, column.id));
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);
@@ -204,5 +209,5 @@ export const PsDataTable = ({ caption, className, columns, defaultSort, density
204
209
  })
205
210
  : visibleRows.map((row) => renderRow(row))] }), hasFooter ? (_jsx("tfoot", { className: 'border-t-2 border-line bg-mist/50 text-sm font-semibold text-ink', children: _jsxs("tr", { children: [isSelectable ? _jsx("td", {}) : null, visibleColumns.map((column) => (_jsx("td", { className: PallasoftClassNameService.merge(densityClassNames[density].cell, alignClassNames[column.align !== null && column.align !== undefined
206
211
  ? column.align
207
- : 'left'], 'whitespace-nowrap'), children: column.footer }, column.id)))] }) })) : null] }) }), pageSize && !grouping ? (_jsx(PsTablePagination, { onPageChange: changePage, page: safePage, pageCount: pageCount, pageSize: pageSize, totalRows: rowCount })) : null] })] }));
212
+ : 'left'], 'whitespace-nowrap'), children: column.footer }, column.id)))] }) })) : null] }) }), pageSize && (!grouping || isServerPaginated) ? (_jsx(PsTablePagination, { onPageChange: changePage, page: safePage, pageCount: pageCount, pageSize: pageSize, totalRows: rowCount })) : null] })] }));
208
213
  };
@@ -8,11 +8,15 @@ export const PsTableColumnSize = {
8
8
  wide: 'wide',
9
9
  };
10
10
  export const PsTableColumnWidths = {
11
- amount: '8.5rem',
12
- compact: '6rem',
13
- date: '7.5rem',
14
- identifier: '9rem',
15
- status: '8rem',
16
- text: '12rem',
17
- wide: '18rem',
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;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pallasoft/ps-table-components",
3
- "version": "1.14.1",
3
+ "version": "1.15.0",
4
4
  "private": false,
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/esm/index.js",