@pallasoft/ps-table-components 1.2.0 → 1.4.0

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

@@ -1,19 +1,29 @@
 import { type ReactNode } from 'react';
 import type { PsTableColumn } from '../interfaces/table-column';
+import type { PsTableQuery } from '../interfaces/table-query';
+import type { PsTableRowAction } from '../interfaces/table-row-action';
+import type { PsTableSort } from '../interfaces/table-sort';
 export interface PsDataTableProps<RowData> {
     caption?: string;
     className?: string;
     columns: PsTableColumn<RowData>[];
+    defaultSort?: PsTableSort;
     density?: 'compact' | 'normal';
-    /** Ids of rows whose `renderExpandedRow` content is shown beneath them. */
     expandedRowIds?: string[];
+    getBulkActions?: (rows: RowData[]) => PsTableRowAction[];
     getRowId: (row: RowData) => string;
+    getRowLabel?: (row: RowData) => string;
+    getSearchText?: (row: RowData) => string;
     onPageChange?: (page: number) => void;
+    onQueryChange?: (query: PsTableQuery) => void;
     onRowClick?: (row: RowData) => void;
     page?: number;
     pageSize?: number;
+    query?: PsTableQuery;
     renderExpandedRow?: (row: RowData) => ReactNode;
     rows: RowData[];
+    searchPlaceholder?: string;
+    toolbarActions?: ReactNode;
     totalRows?: number;
 }
-export declare const PsDataTable: <RowData>({ caption, className, columns, density, expandedRowIds, getRowId, onPageChange, onRowClick, page, pageSize, renderExpandedRow, rows, totalRows, }: PsDataTableProps<RowData>) => import("react").JSX.Element;
+export declare const PsDataTable: <RowData>({ caption, className, columns, defaultSort, density, expandedRowIds, getBulkActions, getRowId, getRowLabel, getSearchText, onPageChange, onQueryChange, onRowClick, page, pageSize, query, renderExpandedRow, rows, searchPlaceholder, toolbarActions, totalRows, }: PsDataTableProps<RowData>) => import("react").JSX.Element;

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

@@ -4,16 +4,23 @@ exports.PsDataTable = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const ps_input_components_1 = require("@pallasoft/ps-input-components");
 const ps_motion_components_1 = require("@pallasoft/ps-motion-components");
+const table_config_1 = require("../constants/table-config");
+const ps_table_query_service_1 = require("../services/ps-table-query-service");
+const ps_table_bulk_bar_1 = require("./ps-table-bulk-bar");
+const ps_table_column_picker_1 = require("./ps-table-column-picker");
 const ps_table_pagination_1 = require("./ps-table-pagination");
+const ps_table_sort_header_1 = require("./ps-table-sort-header");
+const ps_table_toolbar_1 = require("./ps-table-toolbar");
 const densityClassNames = {
     compact: {
         cell: 'px-4 py-3',
         head: 'px-4 py-3',
     },
     normal: {
-        cell: 'px-4 py-4',
-        head: 'px-4 py-3.5',
+        cell: 'px-4 py-3.5',
+        head: 'px-4 py-3',
     },
 };
 const columnStyle = (column) => column.width || column.minWidth ? { minWidth: column.minWidth, width: column.width } : undefined;
@@ -22,44 +29,108 @@ const alignClassNames = {
     left: 'text-left',
     right: 'text-right tabular-nums',
 };
-const PsDataTable = ({ caption, className, columns, density = 'normal', expandedRowIds, getRowId, onPageChange, onRowClick, page, pageSize, renderExpandedRow, rows, totalRows, }) => {
+const PsDataTable = ({ caption, className, columns, defaultSort, density = 'normal', expandedRowIds, getBulkActions, getRowId, getRowLabel, getSearchText, onPageChange, onQueryChange, onRowClick, page, pageSize, query, renderExpandedRow, rows, searchPlaceholder = table_config_1.PsTableConfig.searchPlaceholder, toolbarActions, totalRows, }) => {
     const containerRef = (0, react_1.useRef)(null);
-    const hasFooter = columns.some((column) => column.footer !== undefined);
     const [uncontrolledPage, setUncontrolledPage] = (0, react_1.useState)(1);
-    const isPaginated = Boolean(pageSize);
+    const [uncontrolledQuery, setUncontrolledQuery] = (0, react_1.useState)(() => ps_table_query_service_1.PsTableQueryService.empty(defaultSort ? defaultSort : null));
+    const [selectedIds, setSelectedIds] = (0, react_1.useState)([]);
+    const currentQuery = query ? query : uncontrolledQuery;
+    const { filters, hiddenColumnIds, search, sort } = currentQuery;
+    const visibleColumns = columns.filter((column) => !hiddenColumnIds.includes(column.id));
+    const updateQuery = (patch) => {
+        const next = { ...currentQuery, ...patch };
+        if (!query)
+            setUncontrolledQuery(next);
+        onQueryChange?.(next);
+    };
     const isServerPaginated = totalRows !== undefined;
+    const hasFooter = columns.some((column) => column.footer !== undefined);
+    const isSearchable = Boolean(getSearchText) && !isServerPaginated;
+    const hasFilters = columns.some((column) => column.filter) && !isServerPaginated;
+    const hasToolbar = isSearchable || hasFilters || Boolean(toolbarActions);
+    const isSelectable = Boolean(getBulkActions);
+    const columnCount = visibleColumns.length + (isSelectable ? 1 : 0);
+    const queriedRows = (0, react_1.useMemo)(() => isServerPaginated
+        ? rows
+        : ps_table_query_service_1.PsTableQueryService.apply(rows, columns, filters, search, getSearchText, sort), [columns, filters, getSearchText, isServerPaginated, rows, search, sort]);
     const currentPage = page !== null && page !== undefined ? page : uncontrolledPage;
-    const rowCount = totalRows !== null && totalRows !== undefined ? totalRows : rows.length;
+    const rowCount = isServerPaginated ? totalRows : queriedRows.length;
     const pageCount = pageSize ? Math.max(Math.ceil(rowCount / pageSize), 1) : 1;
     const safePage = Math.min(Math.max(currentPage, 1), pageCount);
+    const isQueried = search.trim() !== '' ||
+        Object.values(filters).some((value) => ps_table_query_service_1.PsTableQueryService.isActive(value));
     const visibleRows = (0, react_1.useMemo)(() => {
         if (!pageSize || isServerPaginated)
-            return rows;
-        return rows.slice((safePage - 1) * pageSize, safePage * pageSize);
-    }, [isServerPaginated, pageSize, rows, safePage]);
+            return queriedRows;
+        return queriedRows.slice((safePage - 1) * pageSize, safePage * pageSize);
+    }, [isServerPaginated, pageSize, queriedRows, safePage]);
     const changePage = (next) => {
         if (onPageChange) {
             onPageChange(next);
             return;
         }
-        containerRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        containerRef.current?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
         setUncontrolledPage(next);
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: containerRef, className: ps_design_system_1.PallasoftClassNameService.merge('ps-scrollbar overflow-x-auto rounded-[1.25rem] border border-line bg-surface', className), children: [(0, jsx_runtime_1.jsxs)("table", { className: 'w-full border-collapse text-left', 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.jsx)("tr", { children: columns.map((column) => ((0, jsx_runtime_1.jsx)("th", { className: ps_design_system_1.PallasoftClassNameService.merge(densityClassNames[density].head, alignClassNames[column.align !== null && column.align !== undefined ? column.align : 'left'], 'whitespace-nowrap'), scope: 'col', style: columnStyle(column), children: column.label }, column.id))) }) }), (0, jsx_runtime_1.jsx)("tbody", { className: 'divide-y divide-line', children: visibleRows.map((row) => {
-                            const rowId = getRowId(row);
-                            const isExpanded = expandedRowIds ? expandedRowIds.includes(rowId) : false;
-                            return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("tr", { className: ps_design_system_1.PallasoftClassNameService.merge('align-middle transition', onRowClick
-                                            ? 'ps-focus-ring cursor-pointer hover:bg-mist/60'
-                                            : 'hover:bg-mist/40'), onClick: onRowClick ? () => onRowClick(row) : undefined, onKeyDown: onRowClick
-                                            ? (event) => {
-                                                if (event.key !== 'Enter' && event.key !== ' ')
-                                                    return;
-                                                event.preventDefault();
-                                                onRowClick(row);
-                                            }
-                                            : undefined, tabIndex: onRowClick ? 0 : undefined, children: columns.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', 'text-ink'), style: columnStyle(column), children: column.render(row) }, column.id))) }), renderExpandedRow ? ((0, jsx_runtime_1.jsx)("tr", { className: isExpanded ? '' : 'border-t-0', children: (0, jsx_runtime_1.jsx)("td", { className: 'p-0', colSpan: columns.length, children: (0, jsx_runtime_1.jsx)(ps_motion_components_1.PsCollapse, { isOpen: isExpanded, children: (0, jsx_runtime_1.jsx)("div", { className: 'bg-mist/40 px-4 py-4', children: renderExpandedRow(row) }) }) }) })) : null] }, rowId));
-                        }) }), hasFooter ? ((0, jsx_runtime_1.jsx)("tfoot", { className: 'border-t-2 border-line bg-mist/50 font-semibold text-ink', children: (0, jsx_runtime_1.jsx)("tr", { children: columns.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']), children: column.footer }, column.id))) }) })) : null] }), isPaginated && pageSize ? ((0, jsx_runtime_1.jsx)(ps_table_pagination_1.PsTablePagination, { onPageChange: changePage, page: safePage, pageCount: pageCount, pageSize: pageSize, totalRows: rowCount })) : null] }));
+    const resetPage = () => {
+        if (safePage === 1)
+            return;
+        if (onPageChange)
+            onPageChange(1);
+        else
+            setUncontrolledPage(1);
+    };
+    const updateSort = (columnId) => {
+        updateQuery({ sort: ps_table_query_service_1.PsTableQueryService.nextSort(sort, columnId) });
+        resetPage();
+    };
+    const clearFilters = () => {
+        updateQuery({ filters: {}, search: '' });
+        resetPage();
+    };
+    const selectedRows = queriedRows.filter((row) => selectedIds.includes(getRowId(row)));
+    const pageIds = visibleRows.map((row) => getRowId(row));
+    const isPageSelected = pageIds.length > 0 && pageIds.every((rowId) => selectedIds.includes(rowId));
+    const togglePage = () => setSelectedIds((current) => isPageSelected
+        ? current.filter((rowId) => !pageIds.includes(rowId))
+        : [...new Set([...current, ...pageIds])]);
+    const toggleRow = (rowId) => setSelectedIds((current) => current.includes(rowId) ? current.filter((id) => id !== rowId) : [...current, rowId]);
+    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: [isSelectable && selectedRows.length > 0 && getBulkActions ? ((0, jsx_runtime_1.jsx)(ps_table_bulk_bar_1.PsTableBulkBar, { actions: getBulkActions(selectedRows), onClear: () => setSelectedIds([]), selectedCount: selectedRows.length })) : hasToolbar || columns.some((column) => column.canHide) ? ((0, jsx_runtime_1.jsx)(ps_table_toolbar_1.PsTableToolbar, { actions: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [toolbarActions, columns.some((column) => column.canHide) ? ((0, jsx_runtime_1.jsx)(ps_table_column_picker_1.PsTableColumnPicker, { columns: columns
+                                .filter((column) => column.canHide)
+                                .map((column) => ({ id: column.id, label: column.label })), hiddenColumnIds: hiddenColumnIds, onChange: (nextHidden) => updateQuery({ hiddenColumnIds: nextHidden }) })) : null] }), columns: hasFilters ? columns : [], filters: filters, isSearchable: isSearchable, onClearFilters: clearFilters, onFilterChange: (columnId, value) => {
+                    updateQuery({ filters: { ...filters, [columnId]: value } });
+                    resetPage();
+                }, onSearchChange: (next) => {
+                    updateQuery({ search: next });
+                    resetPage();
+                }, rows: rows, search: search, searchPlaceholder: searchPlaceholder })) : null, (0, jsx_runtime_1.jsxs)("div", { className: 'min-w-0 overflow-hidden rounded-[1.25rem] border border-line bg-surface', children: [(0, jsx_runtime_1.jsx)("div", { className: 'ps-scrollbar overflow-x-auto', children: (0, jsx_runtime_1.jsxs)("table", { className: 'w-full border-collapse text-left', 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) => {
+                                                const align = column.align !== null && column.align !== undefined ? column.align : 'left';
+                                                const isSorted = sort !== null && sort.columnId === column.id;
+                                                return ((0, jsx_runtime_1.jsx)("th", { "aria-sort": isSorted
+                                                        ? sort.direction
+                                                        : column.sortValue && !isServerPaginated
+                                                            ? 'none'
+                                                            : 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));
+                                            })] }) }), (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, visibleRows.map((row) => {
+                                            const rowId = getRowId(row);
+                                            const isExpanded = expandedRowIds ? expandedRowIds.includes(rowId) : false;
+                                            const rowLabel = getRowLabel ? getRowLabel(row) : rowId;
+                                            return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("tr", { "aria-label": onRowClick ? rowLabel : undefined, className: ps_design_system_1.PallasoftClassNameService.merge('align-middle transition-colors', onRowClick
+                                                            ? 'ps-focus-ring cursor-pointer hover:bg-mist/60'
+                                                            : 'hover:bg-mist/40'), onClick: onRowClick ? () => onRowClick(row) : undefined, onKeyDown: onRowClick
+                                                            ? (event) => {
+                                                                if (event.target !== event.currentTarget)
+                                                                    return;
+                                                                if (event.key !== 'Enter' && event.key !== ' ')
+                                                                    return;
+                                                                event.preventDefault();
+                                                                onRowClick(row);
+                                                            }
+                                                            : 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', 'text-sm text-ink'), style: columnStyle(column), children: column.render(row) }, column.id)))] }), renderExpandedRow ? ((0, jsx_runtime_1.jsx)("tr", { className: isExpanded ? '' : 'border-t-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: 'bg-mist/40 px-4 py-4', children: renderExpandedRow(row) }) }) }) })) : null] }, rowId));
+                                        })] }), 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
+                                                    ? column.align
+                                                    : 'left'], 'whitespace-nowrap'), children: column.footer }, column.id)))] }) })) : null] }) }), pageSize ? ((0, jsx_runtime_1.jsx)(ps_table_pagination_1.PsTablePagination, { onPageChange: changePage, page: safePage, pageCount: pageCount, pageSize: pageSize, totalRows: rowCount })) : null] })] }));
 };
 exports.PsDataTable = PsDataTable;

package/dist/components/ps-table-bulk-bar.d.ts

@@ -0,0 +1,7 @@
+import type { PsTableRowAction } from '../interfaces/table-row-action';
+export interface PsTableBulkBarProps {
+    actions: PsTableRowAction[];
+    onClear: () => void;
+    selectedCount: number;
+}
+export declare const PsTableBulkBar: ({ actions, onClear, selectedCount }: PsTableBulkBarProps) => import("react").JSX.Element;

package/dist/components/ps-table-bulk-bar.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsTableBulkBar = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const PsTableBulkBar = ({ actions, onClear, selectedCount }) => ((0, jsx_runtime_1.jsxs)("div", { "aria-live": 'polite', className: 'flex flex-wrap items-center gap-2 rounded-full border border-primary/30 bg-primary/10 px-2 py-1.5', children: [(0, jsx_runtime_1.jsxs)("span", { className: 'px-2 text-sm font-semibold text-ink', children: [selectedCount, " selected"] }), actions.map((action) => ((0, jsx_runtime_1.jsx)("button", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-focus-ring inline-flex min-h-8 items-center rounded-full px-3 text-sm font-semibold transition-colors disabled:opacity-40', action.isDanger ? 'text-danger hover:bg-danger/10' : 'text-ink hover:bg-ink/5'), disabled: action.isDisabled, onClick: action.onSelect, type: 'button', children: action.label }, action.id))), (0, jsx_runtime_1.jsx)("button", { className: 'ps-focus-ring ml-auto inline-flex min-h-8 items-center rounded-full px-3 text-sm font-semibold text-ink/65 hover:text-ink', onClick: onClear, type: 'button', children: "Clear selection" })] }));
+exports.PsTableBulkBar = PsTableBulkBar;

package/dist/components/ps-table-column-picker.d.ts

@@ -0,0 +1,10 @@
+export interface PsTableColumnPickerOption {
+    id: string;
+    label: string;
+}
+export interface PsTableColumnPickerProps {
+    columns: PsTableColumnPickerOption[];
+    hiddenColumnIds: string[];
+    onChange: (hiddenColumnIds: string[]) => void;
+}
+export declare const PsTableColumnPicker: ({ columns, hiddenColumnIds, onChange, }: PsTableColumnPickerProps) => import("react").JSX.Element;

package/dist/components/ps-table-column-picker.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsTableColumnPicker = 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_icons_1 = require("@pallasoft/ps-icons");
+const ps_input_components_1 = require("@pallasoft/ps-input-components");
+const react_aria_components_1 = require("react-aria-components");
+const PsTableColumnPicker = ({ columns, hiddenColumnIds, onChange, }) => {
+    const zIndex = (0, ps_core_components_1.usePsLayerZIndex)(ps_design_system_1.PallasoftZIndex.Dropdown);
+    const visibleCount = columns.filter((column) => !hiddenColumnIds.includes(column.id)).length;
+    return ((0, jsx_runtime_1.jsxs)(react_aria_components_1.DialogTrigger, { children: [(0, jsx_runtime_1.jsxs)(react_aria_components_1.Button, { className: 'ps-focus-ring ps-liquid ps-liquid-control inline-flex min-h-10 items-center gap-2 rounded-full px-4 text-sm font-semibold text-ink outline-none transition-colors hover:border-primary/40', children: [(0, jsx_runtime_1.jsx)("span", { children: "Columns" }), (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: 'block h-4 w-4', iconKey: ps_icons_1.PsIconKey.Chevron })] }), (0, jsx_runtime_1.jsx)(react_aria_components_1.Popover, { className: 'ps-floating-panel w-60 outline-none', offset: 6, placement: 'bottom end', style: { zIndex }, children: (0, jsx_runtime_1.jsx)(react_aria_components_1.Dialog, { "aria-label": 'Columns', className: 'flex flex-col gap-0.5 p-1.5 outline-none', children: (0, jsx_runtime_1.jsx)(ps_core_components_1.PsLayer, { zIndex: zIndex, children: columns.map((column) => {
+                            const isVisible = !hiddenColumnIds.includes(column.id);
+                            return ((0, jsx_runtime_1.jsx)(ps_input_components_1.PsCheckbox, { className: 'ps-floating-option w-full', isDisabled: isVisible && visibleCount <= 1, isSelected: isVisible, label: column.label, onChange: () => onChange(isVisible
+                                    ? [...hiddenColumnIds, column.id]
+                                    : hiddenColumnIds.filter((hiddenId) => hiddenId !== column.id)), children: column.label }, column.id));
+                        }) }) }) })] }));
+};
+exports.PsTableColumnPicker = PsTableColumnPicker;

package/dist/components/ps-table-filter-field.d.ts

@@ -0,0 +1,11 @@
+import { PsTableFilterKind } from '../constants/table-filter-kind';
+import type { PsTableFilterOption } from '../interfaces/table-filter-option';
+import type { PsTableFilterValue } from '../interfaces/table-filter-value';
+export interface PsTableFilterFieldProps {
+    kind: (typeof PsTableFilterKind)[keyof typeof PsTableFilterKind];
+    label: string;
+    onChange: (value: PsTableFilterValue) => void;
+    options: PsTableFilterOption[];
+    value: PsTableFilterValue;
+}
+export declare const PsTableFilterField: ({ kind, label, onChange, options, value, }: PsTableFilterFieldProps) => import("react").JSX.Element;

package/dist/components/ps-table-filter-field.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsTableFilterField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_input_components_1 = require("@pallasoft/ps-input-components");
+const table_filter_kind_1 = require("../constants/table-filter-kind");
+const PsTableFilterField = ({ kind, label, onChange, options, value, }) => {
+    if (kind === table_filter_kind_1.PsTableFilterKind.select)
+        return ((0, jsx_runtime_1.jsx)(ps_input_components_1.PsMultiSelectInput, { label: label, onChange: (values) => onChange({ values }), options: options, placeholder: 'Any', value: value.values ? value.values : [] }));
+    if (kind === table_filter_kind_1.PsTableFilterKind.text)
+        return ((0, jsx_runtime_1.jsx)(ps_input_components_1.PsTextInput, { label: label, onChange: (event) => onChange({ text: event.target.value }), placeholder: 'Contains', value: value.text ? value.text : '' }));
+    if (kind === table_filter_kind_1.PsTableFilterKind.number)
+        return ((0, jsx_runtime_1.jsxs)("fieldset", { className: 'grid grid-cols-2 gap-2', children: [(0, jsx_runtime_1.jsx)("legend", { className: 'ps-input-label col-span-2 mb-2', children: label }), (0, jsx_runtime_1.jsx)(ps_input_components_1.PsTextInput, { hideLabel: true, inputMode: 'decimal', label: `${label} minimum`, onChange: (event) => onChange({ ...value, from: event.target.value }), placeholder: 'Min', value: value.from ? value.from : '' }), (0, jsx_runtime_1.jsx)(ps_input_components_1.PsTextInput, { hideLabel: true, inputMode: 'decimal', label: `${label} maximum`, onChange: (event) => onChange({ ...value, to: event.target.value }), placeholder: 'Max', value: value.to ? value.to : '' })] }));
+    return ((0, jsx_runtime_1.jsxs)("fieldset", { className: 'grid grid-cols-2 gap-2', children: [(0, jsx_runtime_1.jsx)("legend", { className: 'ps-input-label col-span-2 mb-2', children: label }), (0, jsx_runtime_1.jsx)(ps_input_components_1.PsDateInput, { hideLabel: true, label: `${label} from`, onChange: (from) => onChange({ ...value, from }), placeholder: 'From', value: value.from ? value.from : '' }), (0, jsx_runtime_1.jsx)(ps_input_components_1.PsDateInput, { hideLabel: true, label: `${label} to`, onChange: (to) => onChange({ ...value, to }), placeholder: 'To', value: value.to ? value.to : '' })] }));
+};
+exports.PsTableFilterField = PsTableFilterField;

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

@@ -6,7 +6,7 @@ const ps_design_system_1 = require("@pallasoft/ps-design-system");
 const PsTablePagination = ({ className, onPageChange, page, pageCount, pageSize, totalRows, }) => {
     const firstRow = totalRows === 0 ? 0 : (page - 1) * pageSize + 1;
     const lastRow = Math.min(page * pageSize, totalRows);
-    const buttonClassName = 'ps-focus-ring rounded-ps-control border border-line px-3 py-1.5 text-sm font-semibold text-ink transition disabled:cursor-not-allowed disabled:opacity-40 enabled:hover:border-primary/40 enabled:hover:text-primary';
-    return ((0, jsx_runtime_1.jsxs)("nav", { "aria-label": 'Pagination', className: ps_design_system_1.PallasoftClassNameService.merge('flex flex-wrap items-center justify-between gap-3 border-t border-line px-4 py-3', className), children: [(0, jsx_runtime_1.jsx)("p", { className: 'text-sm text-muted', children: totalRows === 0 ? 'No rows' : `Showing ${firstRow}-${lastRow} of ${totalRows}` }), (0, jsx_runtime_1.jsxs)("div", { className: 'flex items-center gap-2', children: [(0, jsx_runtime_1.jsx)("button", { className: buttonClassName, disabled: page <= 1, onClick: () => onPageChange(page - 1), type: 'button', children: "Previous" }), (0, jsx_runtime_1.jsxs)("span", { className: 'text-sm font-semibold text-ink', children: ["Page ", Math.min(page, pageCount), " of ", pageCount] }), (0, jsx_runtime_1.jsx)("button", { className: buttonClassName, disabled: page >= pageCount, onClick: () => onPageChange(page + 1), type: 'button', children: "Next" })] })] }));
+    const buttonClassName = 'ps-focus-ring inline-flex min-h-9 items-center rounded-full border border-line px-3.5 text-sm font-semibold text-ink transition-colors disabled:cursor-not-allowed disabled:opacity-40 enabled:hover:border-primary/40';
+    return ((0, jsx_runtime_1.jsxs)("nav", { "aria-label": 'Pagination', className: ps_design_system_1.PallasoftClassNameService.merge('flex flex-wrap items-center justify-between gap-3 border-t border-line px-4 py-3', className), children: [(0, jsx_runtime_1.jsx)("p", { className: 'text-sm text-ink/55', children: totalRows === 0 ? 'No rows' : `${firstRow}–${lastRow} of ${totalRows}` }), (0, jsx_runtime_1.jsxs)("div", { className: 'flex items-center gap-2', children: [(0, jsx_runtime_1.jsx)("button", { className: buttonClassName, disabled: page <= 1, onClick: () => onPageChange(page - 1), type: 'button', children: "Previous" }), (0, jsx_runtime_1.jsxs)("span", { className: 'text-sm text-ink/65', children: ["Page ", Math.min(page, pageCount), " of ", pageCount] }), (0, jsx_runtime_1.jsx)("button", { className: buttonClassName, disabled: page >= pageCount, onClick: () => onPageChange(page + 1), type: 'button', children: "Next" })] })] }));
 };
 exports.PsTablePagination = PsTablePagination;

package/dist/components/ps-table-sort-header.d.ts

@@ -0,0 +1,9 @@
+import type { PsTableSort } from '../interfaces/table-sort';
+export interface PsTableSortHeaderProps {
+    align: 'center' | 'left' | 'right';
+    columnId: string;
+    label: string;
+    onSort: (columnId: string) => void;
+    sort: PsTableSort | null;
+}
+export declare const PsTableSortHeader: ({ align, columnId, label, onSort, sort, }: PsTableSortHeaderProps) => import("react").JSX.Element;

package/dist/components/ps-table-sort-header.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsTableSortHeader = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ps_design_system_1 = require("@pallasoft/ps-design-system");
+const ps_icons_1 = require("@pallasoft/ps-icons");
+const PsTableSortHeader = ({ align, columnId, label, onSort, sort, }) => {
+    const isSorted = sort !== null && sort.columnId === columnId;
+    const iconKey = !isSorted
+        ? ps_icons_1.PsIconKey.Sort
+        : sort.direction === 'ascending'
+            ? ps_icons_1.PsIconKey.SortAscending
+            : ps_icons_1.PsIconKey.SortDescending;
+    return ((0, jsx_runtime_1.jsxs)("button", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-focus-ring group inline-flex items-center gap-1 rounded-md uppercase tracking-[0.18em] transition-colors hover:text-ink', align === 'right' ? 'flex-row-reverse' : '', isSorted ? 'text-ink' : ''), onClick: () => onSort(columnId), type: 'button', children: [(0, jsx_runtime_1.jsx)("span", { children: label }), (0, jsx_runtime_1.jsx)(ps_icons_1.PsIcon, { "aria-hidden": 'true', className: ps_design_system_1.PallasoftClassNameService.merge('block h-3.5 w-3.5 shrink-0', isSorted
+                    ? 'text-primary'
+                    : 'opacity-0 group-hover:opacity-60 group-focus-visible:opacity-60'), iconKey: iconKey })] }));
+};
+exports.PsTableSortHeader = PsTableSortHeader;

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

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+import type { PsTableColumn } from '../interfaces/table-column';
+import type { PsTableFilterValue } from '../interfaces/table-filter-value';
+export interface PsTableToolbarProps<RowData> {
+    actions?: ReactNode;
+    columns: PsTableColumn<RowData>[];
+    filters: Record<string, PsTableFilterValue>;
+    isSearchable: boolean;
+    onClearFilters: () => void;
+    onFilterChange: (columnId: string, value: PsTableFilterValue) => void;
+    onSearchChange: (search: string) => void;
+    rows: RowData[];
+    search: string;
+    searchPlaceholder: string;
+}
+export declare const PsTableToolbar: <RowData>({ actions, columns, filters, isSearchable, onClearFilters, onFilterChange, onSearchChange, rows, search, searchPlaceholder, }: PsTableToolbarProps<RowData>) => import("react").JSX.Element;

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

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsTableToolbar = 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_icons_1 = require("@pallasoft/ps-icons");
+const react_aria_components_1 = require("react-aria-components");
+const ps_table_query_service_1 = require("../services/ps-table-query-service");
+const ps_table_filter_field_1 = require("./ps-table-filter-field");
+const toolbarButtonClassName = 'ps-focus-ring ps-liquid ps-liquid-control inline-flex min-h-10 items-center gap-2 rounded-full px-4 text-sm font-semibold text-ink outline-none transition-colors hover:border-primary/40';
+const PsTableToolbar = ({ actions, columns, filters, isSearchable, onClearFilters, onFilterChange, onSearchChange, rows, search, searchPlaceholder, }) => {
+    const filterableColumns = columns.filter((column) => column.filter);
+    const zIndex = (0, ps_core_components_1.usePsLayerZIndex)(ps_design_system_1.PallasoftZIndex.Dropdown);
+    const activeCount = filterableColumns.filter((column) => ps_table_query_service_1.PsTableQueryService.isActive(filters[column.id])).length;
+    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 min-w-[12rem] flex-1 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 min-h-10 rounded-full pl-10 text-sm', onChange: (event) => onSearchChange(event.target.value), placeholder: searchPlaceholder, type: 'search', value: search })] })) : null, 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", { 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 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 flex-wrap items-center gap-2', children: actions }) : null] }));
+};
+exports.PsTableToolbar = PsTableToolbar;

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

@@ -0,0 +1,5 @@
+export declare const PsTableConfig: {
+    readonly noMatchesDescription: "Try a different search or clear the filters.";
+    readonly noMatchesTitle: "Nothing matches";
+    readonly searchPlaceholder: "Search";
+};

package/dist/constants/table-config.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsTableConfig = void 0;
+exports.PsTableConfig = {
+    noMatchesDescription: 'Try a different search or clear the filters.',
+    noMatchesTitle: 'Nothing matches',
+    searchPlaceholder: 'Search',
+};

package/dist/constants/table-filter-kind.d.ts

@@ -0,0 +1,6 @@
+export declare const PsTableFilterKind: {
+    readonly date: "date";
+    readonly number: "number";
+    readonly select: "select";
+    readonly text: "text";
+};

package/dist/constants/table-filter-kind.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsTableFilterKind = void 0;
+exports.PsTableFilterKind = {
+    date: 'date',
+    number: 'number',
+    select: 'select',
+    text: 'text',
+};

package/dist/index.d.ts

@@ -1,3 +1,11 @@
 export * from './components/ps-data-table';
 export * from './components/ps-table-pagination';
+export * from './constants/table-filter-kind';
 export * from './interfaces/table-column';
+export * from './interfaces/table-column-filter';
+export * from './interfaces/table-filter-option';
+export * from './interfaces/table-filter-value';
+export * from './interfaces/table-query';
+export * from './interfaces/table-row-action';
+export * from './interfaces/table-sort';
+export * from './services/ps-table-query-service';

package/dist/index.js

@@ -16,4 +16,12 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./components/ps-data-table"), exports);
 __exportStar(require("./components/ps-table-pagination"), exports);
+__exportStar(require("./constants/table-filter-kind"), exports);
 __exportStar(require("./interfaces/table-column"), exports);
+__exportStar(require("./interfaces/table-column-filter"), exports);
+__exportStar(require("./interfaces/table-filter-option"), exports);
+__exportStar(require("./interfaces/table-filter-value"), exports);
+__exportStar(require("./interfaces/table-query"), exports);
+__exportStar(require("./interfaces/table-row-action"), exports);
+__exportStar(require("./interfaces/table-sort"), exports);
+__exportStar(require("./services/ps-table-query-service"), exports);

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

@@ -0,0 +1,7 @@
+import type { PsTableFilterKind } from '../constants/table-filter-kind';
+import type { PsTableFilterOption } from './table-filter-option';
+export interface PsTableColumnFilter<RowData> {
+    getValue: (row: RowData) => string | number | null;
+    kind: (typeof PsTableFilterKind)[keyof typeof PsTableFilterKind];
+    options?: PsTableFilterOption[];
+}

package/dist/interfaces/table-column-filter.js

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

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

@@ -1,13 +1,15 @@
 import type { ReactNode } from 'react';
+import type { PsTableColumnFilter } from './table-column-filter';
 export interface PsTableColumn<RowData> {
     align?: 'center' | 'left' | 'right';
+    canHide?: boolean;
+    filter?: PsTableColumnFilter<RowData>;
     footer?: ReactNode;
     id: string;
     label: string;
-    /** Stops the table squeezing this column below the given CSS width. */
     minWidth?: string;
     render: (row: RowData) => ReactNode;
+    sortValue?: (row: RowData) => string | number | null;
     width?: string;
-    /** Lets long cell content wrap onto several lines. Cells stay on one line by default. */
     wrap?: boolean;
 }

package/dist/interfaces/table-filter-option.d.ts

@@ -0,0 +1,4 @@
+export interface PsTableFilterOption {
+    label: string;
+    value: string;
+}

package/dist/interfaces/table-filter-option.js

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

package/dist/interfaces/table-filter-value.d.ts

@@ -0,0 +1,6 @@
+export interface PsTableFilterValue {
+    from?: string;
+    text?: string;
+    to?: string;
+    values?: string[];
+}

package/dist/interfaces/table-filter-value.js

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

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

@@ -0,0 +1,8 @@
+import type { PsTableFilterValue } from './table-filter-value';
+import type { PsTableSort } from './table-sort';
+export interface PsTableQuery {
+    filters: Record<string, PsTableFilterValue>;
+    hiddenColumnIds: string[];
+    search: string;
+    sort: PsTableSort | null;
+}

package/dist/interfaces/table-query.js

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

package/dist/interfaces/table-row-action.d.ts

@@ -0,0 +1,7 @@
+export interface PsTableRowAction {
+    id: string;
+    isDanger?: boolean;
+    isDisabled?: boolean;
+    label: string;
+    onSelect: () => void;
+}

package/dist/interfaces/table-row-action.js

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

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

@@ -0,0 +1,4 @@
+export interface PsTableSort {
+    columnId: string;
+    direction: 'ascending' | 'descending';
+}

package/dist/interfaces/table-sort.js

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

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

@@ -0,0 +1,13 @@
+import type { PsTableColumn } from '../interfaces/table-column';
+import type { PsTableFilterValue } from '../interfaces/table-filter-value';
+import type { PsTableQuery } from '../interfaces/table-query';
+import type { PsTableSort } from '../interfaces/table-sort';
+export declare class PsTableQueryService {
+    static isActive(value: PsTableFilterValue | undefined): boolean;
+    static matchesFilter<RowData>(row: RowData, column: PsTableColumn<RowData>, value: PsTableFilterValue): boolean;
+    static apply<RowData>(rows: RowData[], columns: PsTableColumn<RowData>[], filters: Record<string, PsTableFilterValue>, search: string, getSearchText: ((row: RowData) => string) | undefined, sort: PsTableSort | null): RowData[];
+    static options<RowData>(rows: RowData[], column: PsTableColumn<RowData>): import("..").PsTableFilterOption[];
+    static empty(sort: PsTableSort | null): PsTableQuery;
+    static isEqual(left: PsTableQuery, right: PsTableQuery): boolean;
+    static nextSort(current: PsTableSort | null, columnId: string): PsTableSort | null;
+}

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

@@ -0,0 +1,97 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PsTableQueryService = void 0;
+const table_filter_kind_1 = require("../constants/table-filter-kind");
+class PsTableQueryService {
+    static isActive(value) {
+        if (!value)
+            return false;
+        return Boolean((value.text && value.text.trim() !== '') ||
+            (value.values && value.values.length > 0) ||
+            (value.from && value.from !== '') ||
+            (value.to && value.to !== ''));
+    }
+    static matchesFilter(row, column, value) {
+        if (!column.filter || !PsTableQueryService.isActive(value))
+            return true;
+        const raw = column.filter.getValue(row);
+        const cell = raw === null ? '' : String(raw);
+        if (column.filter.kind === table_filter_kind_1.PsTableFilterKind.text)
+            return cell.toLowerCase().includes((value.text ? value.text : '').trim().toLowerCase());
+        if (column.filter.kind === table_filter_kind_1.PsTableFilterKind.select)
+            return value.values ? value.values.includes(cell) : true;
+        if (column.filter.kind === table_filter_kind_1.PsTableFilterKind.number) {
+            const amount = Number(cell);
+            if (cell === '' || Number.isNaN(amount))
+                return false;
+            if (value.from && amount < Number(value.from))
+                return false;
+            if (value.to && amount > Number(value.to))
+                return false;
+            return true;
+        }
+        if (cell === '')
+            return false;
+        if (value.from && cell < value.from)
+            return false;
+        if (value.to && cell > value.to)
+            return false;
+        return true;
+    }
+    static apply(rows, columns, filters, search, getSearchText, sort) {
+        const query = search.trim().toLowerCase();
+        const filtered = rows.filter((row) => (query === '' || !getSearchText || getSearchText(row).toLowerCase().includes(query)) &&
+            columns.every((column) => PsTableQueryService.matchesFilter(row, column, filters[column.id] ? filters[column.id] : {})));
+        const sortColumn = sort ? columns.find((column) => column.id === sort.columnId) : undefined;
+        if (!sort || !sortColumn || !sortColumn.sortValue)
+            return filtered;
+        const getValue = sortColumn.sortValue;
+        const direction = sort.direction === 'ascending' ? 1 : -1;
+        return [...filtered].sort((left, right) => {
+            const a = getValue(left);
+            const b = getValue(right);
+            if (a === b)
+                return 0;
+            if (a === null)
+                return 1;
+            if (b === null)
+                return -1;
+            if (typeof a === 'number' && typeof b === 'number')
+                return (a - b) * direction;
+            return String(a).localeCompare(String(b), undefined, { numeric: true }) * direction;
+        });
+    }
+    static options(rows, column) {
+        if (!column.filter)
+            return [];
+        if (column.filter.options)
+            return column.filter.options;
+        const getValue = column.filter.getValue;
+        const values = new Set(rows.map((row) => getValue(row)).filter((value) => value !== null));
+        return [...values]
+            .map((value) => String(value))
+            .sort((a, b) => a.localeCompare(b))
+            .map((value) => ({ label: value, value }));
+    }
+    static empty(sort) {
+        return { filters: {}, hiddenColumnIds: [], search: '', sort };
+    }
+    static isEqual(left, right) {
+        const activeFilters = (query) => Object.entries(query.filters)
+            .filter(([, value]) => PsTableQueryService.isActive(value))
+            .sort(([a], [b]) => a.localeCompare(b));
+        return (left.search.trim() === right.search.trim() &&
+            JSON.stringify(left.sort) === JSON.stringify(right.sort) &&
+            JSON.stringify([...left.hiddenColumnIds].sort()) ===
+                JSON.stringify([...right.hiddenColumnIds].sort()) &&
+            JSON.stringify(activeFilters(left)) === JSON.stringify(activeFilters(right)));
+    }
+    static nextSort(current, columnId) {
+        if (!current || current.columnId !== columnId)
+            return { columnId, direction: 'ascending' };
+        if (current.direction === 'ascending')
+            return { columnId, direction: 'descending' };
+        return null;
+    }
+}
+exports.PsTableQueryService = PsTableQueryService;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pallasoft/ps-table-components",
-	"version": "1.2.0",
+	"version": "1.4.0",
 	"private": false,
 	"main": "./dist/index.js",
 	"types": "./dist/index.d.ts",
@@ -68,7 +68,11 @@
 		"url": "git+https://github.com/pallasoft/ps-table-components.git"
 	},
 	"dependencies": {
-		"@pallasoft/ps-design-system": "^1.1.0",
-		"@pallasoft/ps-motion-components": "^1.1.0"
+		"@pallasoft/ps-core-components": "^2.2.0",
+		"@pallasoft/ps-design-system": "^1.3.0",
+		"@pallasoft/ps-icons": "^1.3.0",
+		"@pallasoft/ps-input-components": "^1.4.1",
+		"@pallasoft/ps-motion-components": "^1.1.0",
+		"react-aria-components": "^1.21.1"
 	}
 }