@ackplus/react-tanstack-data-table 1.0.19-beta-0.7 → 1.0.19-beta-0.8

package/src/lib/components/table/data-table.types.d.ts

@@ -0,0 +1,114 @@
+import { Row, SortingState, ColumnResizeMode, ColumnPinningState, RowData } from '@tanstack/react-table';
+import { ReactNode } from 'react';
+import type { CustomColumnFilterState, TableFilters, TableState } from '../../types';
+import { DataTableColumn } from '../../types';
+import { DataTableSlots, PartialSlotProps } from '../../types/slots.types';
+import { DataTableSize } from '../../utils/table-helpers';
+import { SelectionState } from '../../features/custom-selection.feature';
+export type SelectMode = 'page' | 'all';
+declare module '@tanstack/table-core' {
+    interface ColumnMeta<TData extends RowData, TValue> {
+    }
+}
+export interface DataTableProps<T> {
+    columns: DataTableColumn<T>[];
+    data?: T[];
+    totalRow?: number;
+    idKey?: keyof T;
+    extraFilter?: ReactNode | null;
+    footerFilter?: ReactNode | null;
+    dataMode?: 'client' | 'server';
+    initialState?: Partial<TableState>;
+    initialLoadData?: boolean;
+    onDataStateChange?: (filters: Partial<TableState>) => void;
+    onFetchData?: (filters: Partial<TableFilters>) => Promise<{
+        data: T[];
+        total: number;
+    }>;
+    exportFilename?: string;
+    onExportProgress?: (progress: {
+        processedRows: number;
+        totalRows: number;
+        percentage: number;
+    }) => void;
+    onExportComplete?: (result: {
+        success: boolean;
+        filename: string;
+        totalRows: number;
+    }) => void;
+    onExportError?: (error: {
+        message: string;
+        code: string;
+    }) => void;
+    onServerExport?: (filters?: Partial<TableState>, selection?: SelectionState) => Promise<{
+        data: any[];
+        total: number;
+    }>;
+    onExportCancel?: () => void;
+    enableRowSelection?: boolean | ((row: Row<T>) => boolean);
+    enableMultiRowSelection?: boolean;
+    selectMode?: SelectMode;
+    isRowSelectable?: (params: {
+        row: T;
+        id: string;
+    }) => boolean;
+    onRowSelectionChange?: (selectedRows: T[], selection?: SelectionState) => void;
+    onSelectionChange?: (selection: SelectionState) => void;
+    enableBulkActions?: boolean;
+    bulkActions?: (selectionState: SelectionState) => ReactNode;
+    enableColumnResizing?: boolean;
+    columnResizeMode?: ColumnResizeMode;
+    enableColumnDragging?: boolean;
+    onColumnDragEnd?: (columnOrder: string[]) => void;
+    enableColumnPinning?: boolean;
+    onColumnPinningChange?: (pinning: ColumnPinningState) => void;
+    enableExpanding?: boolean;
+    getRowCanExpand?: (row: Row<T>) => boolean;
+    renderSubComponent?: (row: Row<T>) => ReactNode;
+    enablePagination?: boolean;
+    paginationMode?: 'client' | 'server';
+    enableGlobalFilter?: boolean;
+    enableColumnFilter?: boolean;
+    filterMode?: 'client' | 'server';
+    enableSorting?: boolean;
+    sortingMode?: 'client' | 'server';
+    onSortingChange?: (sorting: SortingState) => void;
+    enableHover?: boolean;
+    enableStripes?: boolean;
+    tableContainerProps?: any;
+    tableProps?: any;
+    fitToScreen?: boolean;
+    tableSize?: DataTableSize;
+    enableStickyHeaderOrFooter?: boolean;
+    maxHeight?: string | number;
+    enableVirtualization?: boolean;
+    estimateRowHeight?: number;
+    enableColumnVisibility?: boolean;
+    enableTableSizeControl?: boolean;
+    enableExport?: boolean;
+    enableReset?: boolean;
+    loading?: boolean;
+    emptyMessage?: string;
+    skeletonRows?: number;
+    onColumnFiltersChange?: (filterState: CustomColumnFilterState) => void;
+    onDataChange?: (data: T[]) => void;
+    selectionColumn?: {
+        width?: number;
+        pinLeft?: boolean;
+        customColumn?: DataTableColumn<any>;
+        id?: string;
+    };
+    actionColumn?: {
+        pinRight?: boolean;
+        customColumn?: DataTableColumn<any>;
+        id?: string;
+    };
+    expandingColumn?: {
+        width?: number;
+        pinLeft?: boolean;
+        customColumn?: DataTableColumn<any>;
+        id?: string;
+    };
+    slots?: Partial<DataTableSlots<T>>;
+    slotProps?: PartialSlotProps<T>;
+}

package/src/lib/components/table/data-table.types.js

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

package/src/lib/components/table/index.d.ts

@@ -0,0 +1,2 @@
+export * from './data-table.types';
+export * from './data-table';

package/src/lib/components/table/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./data-table.types"), exports);
+tslib_1.__exportStar(require("./data-table"), exports);

package/src/lib/components/toolbar/bulk-actions-toolbar.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { SelectionState } from '../../features/custom-selection.feature';
+export interface BulkActionsToolbarProps<T = any> {
+    selectionState: SelectionState;
+    selectedRowCount: number;
+    bulkActions?: (selectionState: SelectionState) => ReactNode;
+    sx?: any;
+}
+export declare function BulkActionsToolbar<T = any>({ selectionState, selectedRowCount, bulkActions, sx, }: BulkActionsToolbarProps<T>): import("react/jsx-runtime").JSX.Element;

package/src/lib/components/toolbar/bulk-actions-toolbar.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BulkActionsToolbar = BulkActionsToolbar;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_1 = require("react");
+const data_table_context_1 = require("../../contexts/data-table-context");
+const slot_helpers_1 = require("../../utils/slot-helpers");
+function BulkActionsToolbar({ selectionState, selectedRowCount, bulkActions, sx, }) {
+    const { slots, slotProps } = (0, data_table_context_1.useDataTableContext)();
+    const ToolbarSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'toolbar', material_1.Toolbar);
+    const renderedBulkActions = (0, react_1.useMemo)(() => {
+        if (!bulkActions)
+            return null;
+        return bulkActions(selectionState);
+    }, [bulkActions, selectionState]);
+    return ((0, jsx_runtime_1.jsx)(material_1.Fade, { in: selectedRowCount > 0, children: (0, jsx_runtime_1.jsxs)(ToolbarSlot, Object.assign({ sx: Object.assign({ pl: { sm: 2 }, pr: {
+                    xs: 1,
+                    sm: 1,
+                }, bgcolor: (theme) => (0, material_1.alpha)(theme.palette.primary.main, 0.05), mb: 1, position: 'relative', zIndex: 1 }, sx) }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.bulkActionsToolbar, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: { flex: '1 1 100%' }, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { color: "inherit", variant: "subtitle1", component: "div", children: (0, jsx_runtime_1.jsx)(material_1.Chip, { label: `${selectedRowCount} selected`, size: "small", color: "primary", variant: "outlined" }) }) }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: 1,
+                    }, children: renderedBulkActions })] })) }));
+}

package/src/lib/components/toolbar/column-custom-filter-control.d.ts

@@ -0,0 +1 @@
+export declare function ColumnCustomFilterControl(): import("react/jsx-runtime").JSX.Element;

package/src/lib/components/toolbar/column-custom-filter-control.js

@@ -0,0 +1,137 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColumnCustomFilterControl = ColumnCustomFilterControl;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_material_1 = require("@mui/icons-material");
+const material_1 = require("@mui/material");
+const react_1 = require("react");
+const menu_dropdown_1 = require("../droupdown/menu-dropdown");
+const data_table_context_1 = require("../../contexts/data-table-context");
+const icons_1 = require("../../icons");
+const column_helpers_1 = require("../../utils/column-helpers");
+const slot_helpers_1 = require("../../utils/slot-helpers");
+const filters_1 = require("../filters");
+const filter_value_input_1 = require("../filters/filter-value-input");
+function ColumnCustomFilterControl() {
+    var _a, _b, _c;
+    const { table, slots, slotProps } = (0, data_table_context_1.useDataTableContext)();
+    const FilterIconSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'filterIcon', icons_material_1.FilterList);
+    const customFilterState = ((_a = table.getCustomColumnFilterState) === null || _a === void 0 ? void 0 : _a.call(table)) || {
+        filters: [],
+        logic: 'AND',
+        pendingFilters: [],
+        pendingLogic: 'AND'
+    };
+    const filters = customFilterState.pendingFilters;
+    const filterLogic = customFilterState.pendingLogic;
+    const activeFiltersCount = ((_c = (_b = table.getActiveColumnFilters) === null || _b === void 0 ? void 0 : _b.call(table)) === null || _c === void 0 ? void 0 : _c.length) || 0;
+    const filterableColumns = (0, react_1.useMemo)(() => {
+        return table.getAllLeafColumns()
+            .filter(column => (0, column_helpers_1.isColumnFilterable)(column));
+    }, [table]);
+    const addFilter = (0, react_1.useCallback)((columnId, operator) => {
+        var _a, _b;
+        let defaultOperator = operator || '';
+        if (columnId && !operator) {
+            const column = filterableColumns.find(col => col.id === columnId);
+            const columnType = (0, column_helpers_1.getColumnType)(column);
+            const operators = filters_1.FILTER_OPERATORS[columnType] || filters_1.FILTER_OPERATORS.text;
+            defaultOperator = ((_a = operators[0]) === null || _a === void 0 ? void 0 : _a.value) || 'contains';
+        }
+        (_b = table.addPendingColumnFilter) === null || _b === void 0 ? void 0 : _b.call(table, columnId || '', defaultOperator, '');
+    }, [table, filterableColumns]);
+    const handleAddFilter = (0, react_1.useCallback)(() => {
+        addFilter();
+    }, [addFilter]);
+    const updateFilter = (0, react_1.useCallback)((filterId, updates) => {
+        var _a;
+        (_a = table.updatePendingColumnFilter) === null || _a === void 0 ? void 0 : _a.call(table, filterId, updates);
+    }, [table]);
+    const removeFilter = (0, react_1.useCallback)((filterId) => {
+        var _a;
+        (_a = table.removePendingColumnFilter) === null || _a === void 0 ? void 0 : _a.call(table, filterId);
+    }, [table]);
+    const clearAllFilters = (0, react_1.useCallback)((closeDialog) => {
+        var _a;
+        (_a = table.clearAllPendingColumnFilters) === null || _a === void 0 ? void 0 : _a.call(table);
+        setTimeout(() => {
+            var _a;
+            (_a = table.applyPendingColumnFilters) === null || _a === void 0 ? void 0 : _a.call(table);
+            if (closeDialog) {
+                closeDialog();
+            }
+        }, 0);
+    }, [table]);
+    const handleLogicChange = (0, react_1.useCallback)((newLogic) => {
+        var _a;
+        (_a = table.setPendingFilterLogic) === null || _a === void 0 ? void 0 : _a.call(table, newLogic);
+    }, [table]);
+    const applyFilters = (0, react_1.useCallback)(() => {
+        var _a;
+        (_a = table.applyPendingColumnFilters) === null || _a === void 0 ? void 0 : _a.call(table);
+    }, [table]);
+    const handleApplyFilters = (0, react_1.useCallback)((closeDialog) => {
+        applyFilters();
+        closeDialog();
+    }, [applyFilters]);
+    const getOperatorsForColumn = (0, react_1.useCallback)((columnId) => {
+        const column = filterableColumns.find(col => col.id === columnId);
+        const type = (0, column_helpers_1.getColumnType)(column);
+        return filters_1.FILTER_OPERATORS[type] || filters_1.FILTER_OPERATORS.text;
+    }, [filterableColumns]);
+    const handleColumnChange = (0, react_1.useCallback)((filterId, newColumnId, currentFilter) => {
+        var _a;
+        const newColumn = filterableColumns.find(col => col.id === newColumnId);
+        const columnType = (0, column_helpers_1.getColumnType)(newColumn);
+        const operators = filters_1.FILTER_OPERATORS[columnType] || filters_1.FILTER_OPERATORS.text;
+        const currentOperatorValid = operators.some(op => op.value === currentFilter.operator);
+        const newOperator = currentOperatorValid ? currentFilter.operator : ((_a = operators[0]) === null || _a === void 0 ? void 0 : _a.value) || '';
+        updateFilter(filterId, {
+            columnId: newColumnId,
+            operator: newOperator,
+            value: ['isEmpty', 'isNotEmpty'].includes(newOperator) ? '' : currentFilter.value,
+        });
+    }, [filterableColumns, updateFilter]);
+    const handleOperatorChange = (0, react_1.useCallback)((filterId, newOperator, currentFilter) => {
+        updateFilter(filterId, {
+            operator: newOperator,
+            value: ['isEmpty', 'isNotEmpty'].includes(newOperator) ? '' : currentFilter.value,
+        });
+    }, [updateFilter]);
+    const handleFilterValueChange = (0, react_1.useCallback)((filterId, value) => {
+        updateFilter(filterId, { value });
+    }, [updateFilter]);
+    const handleRemoveFilter = (0, react_1.useCallback)((filterId) => {
+        removeFilter(filterId);
+    }, [removeFilter]);
+    const pendingFiltersCount = filters.filter(f => {
+        if (!f.columnId || !f.operator)
+            return false;
+        if (['isEmpty', 'isNotEmpty'].includes(f.operator))
+            return true;
+        return f.value && f.value.toString().trim() !== '';
+    }).length;
+    const hasAppliedFilters = activeFiltersCount > 0;
+    const hasPendingChanges = pendingFiltersCount > 0 || (filters.length === 0 && hasAppliedFilters);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (filters.length === 0 && filterableColumns.length > 0 && activeFiltersCount === 0) {
+            const firstColumn = filterableColumns[0];
+            const columnType = (0, column_helpers_1.getColumnType)(firstColumn);
+            const operators = filters_1.FILTER_OPERATORS[columnType] || filters_1.FILTER_OPERATORS.text;
+            const defaultOperator = ((_a = operators[0]) === null || _a === void 0 ? void 0 : _a.value) || 'contains';
+            addFilter(firstColumn.id, defaultOperator);
+        }
+    }, [filters.length, filterableColumns, addFilter, activeFiltersCount]);
+    return ((0, jsx_runtime_1.jsx)(menu_dropdown_1.MenuDropdown, { anchor: ((0, jsx_runtime_1.jsx)(material_1.Badge, { variant: "dot", color: "primary", invisible: activeFiltersCount === 0, children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", color: activeFiltersCount > 0 ? 'primary' : 'default', sx: {
+                    flexShrink: 0,
+                }, children: (0, jsx_runtime_1.jsx)(FilterIconSlot, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.filterIcon)) }) })), children: ({ handleClose }) => ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                p: 2,
+                minWidth: 500,
+                maxWidth: 650,
+            }, children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { mb: 2 }, children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", alignItems: "center", spacing: 1, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle1", sx: { fontWeight: 'bold' }, children: "Column Filters" }), activeFiltersCount > 0 && ((0, jsx_runtime_1.jsx)(material_1.Chip, { size: "small", label: `${activeFiltersCount} active`, color: "primary", variant: "outlined" }))] }), (0, jsx_runtime_1.jsx)(material_1.Stack, { direction: "row", spacing: 1, children: (0, jsx_runtime_1.jsx)(material_1.Button, { size: "small", variant: "outlined", startIcon: (0, jsx_runtime_1.jsx)(icons_1.AddIcon, {}), onClick: handleAddFilter, children: "Add Filter" }) })] }), filters.length > 1 && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { mb: 2 }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", color: "text.secondary", sx: { mb: 1 }, children: "Filter Logic:" }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", spacing: 1, children: [(0, jsx_runtime_1.jsx)(material_1.Button, { size: "small", variant: filterLogic === 'AND' ? 'contained' : 'outlined', onClick: () => handleLogicChange('AND'), children: "AND (All conditions)" }), (0, jsx_runtime_1.jsx)(material_1.Button, { size: "small", variant: filterLogic === 'OR' ? 'contained' : 'outlined', onClick: () => handleLogicChange('OR'), children: "OR (Any condition)" })] })] })), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: { mb: 2 } }), filters.length === 0 ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", color: "text.secondary", sx: {
+                        textAlign: 'center',
+                        py: 2,
+                    }, children: "No filters applied. Click \"Add Filter\" to start." })) : ((0, jsx_runtime_1.jsx)(material_1.Stack, { spacing: 2, children: filters.map((filter) => ((0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", spacing: 1, alignItems: "center", children: [(0, jsx_runtime_1.jsxs)(material_1.FormControl, { size: "small", sx: { minWidth: 140 }, children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { children: "Column" }), (0, jsx_runtime_1.jsx)(material_1.Select, { value: filter.columnId, label: "Column", onChange: (e) => handleColumnChange(filter.id, e.target.value, filter), children: filterableColumns.map(column => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: column.id, children: typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id }, column.id))) })] }), (0, jsx_runtime_1.jsxs)(material_1.FormControl, { size: "small", sx: { minWidth: 160 }, disabled: !filter.columnId, children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { children: "Operator" }), (0, jsx_runtime_1.jsx)(material_1.Select, { value: filter.operator, label: "Operator", onChange: (e) => handleOperatorChange(filter.id, e.target.value, filter), children: getOperatorsForColumn(filter.columnId).map(op => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: op.value, children: op.label }, op.value))) })] }), !['isEmpty', 'isNotEmpty'].includes(filter.operator) ? ((0, jsx_runtime_1.jsx)(filter_value_input_1.FilterValueInput, { filter: filter, column: filterableColumns.find(col => col.id === filter.columnId), onValueChange: (value) => handleFilterValueChange(filter.id, value) })) : ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: { flex: 1 } })), (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", onClick: () => handleRemoveFilter(filter.id), color: "error", children: (0, jsx_runtime_1.jsx)(icons_1.DeleteIcon, {}) })] }) }, filter.id))) })), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: { my: 2 } }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 1, children: [(hasAppliedFilters || filters.length > 0) && ((0, jsx_runtime_1.jsx)(material_1.Button, { size: "small", variant: "text", color: "warning", onClick: () => clearAllFilters(handleClose), startIcon: (0, jsx_runtime_1.jsx)(icons_1.DeleteIcon, {}), children: "Reset" })), !(hasAppliedFilters || filters.length > 0) && (0, jsx_runtime_1.jsx)(material_1.Box, {}), (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", spacing: 1, children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", onClick: handleClose, children: "Close" }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", onClick: () => handleApplyFilters(handleClose), disabled: !hasPendingChanges, children: pendingFiltersCount === 0 && hasAppliedFilters ? 'Clear All Filters' :
+                                        `Apply ${pendingFiltersCount} Filter${pendingFiltersCount !== 1 ? 's' : ''}${pendingFiltersCount > 1 ? ` (${filterLogic})` : ''}` })] })] })] })) }));
+}

package/src/lib/components/toolbar/column-pinning-control.d.ts

@@ -0,0 +1 @@
+export declare function ColumnPinningControl(): import("react/jsx-runtime").JSX.Element;

package/src/lib/components/toolbar/column-pinning-control.js

@@ -0,0 +1,105 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColumnPinningControl = ColumnPinningControl;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_material_1 = require("@mui/icons-material");
+const material_1 = require("@mui/material");
+const react_1 = require("react");
+const menu_dropdown_1 = require("../droupdown/menu-dropdown");
+const data_table_context_1 = require("../../contexts/data-table-context");
+const icons_1 = require("../../icons");
+const slot_helpers_1 = require("../../utils/slot-helpers");
+function ColumnPinningControl() {
+    var _a, _b;
+    const { table, slots, slotProps } = (0, data_table_context_1.useDataTableContext)();
+    const PinIconSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'pinIcon', icons_material_1.PushPinOutlined);
+    const UnpinIconSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'unpinIcon', icons_1.UnpinIcon);
+    const LeftIconSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'leftIcon', icons_material_1.ArrowLeftOutlined);
+    const RightIconSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'rightIcon', icons_material_1.ArrowRightOutlined);
+    const columnPinning = table.getState().columnPinning;
+    const allColumns = (0, react_1.useMemo)(() => {
+        var _a, _b;
+        if ((_a = slotProps === null || slotProps === void 0 ? void 0 : slotProps.columnsPanel) === null || _a === void 0 ? void 0 : _a.getPinnableColumns) {
+            return (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.columnsPanel) === null || _b === void 0 ? void 0 : _b.getPinnableColumns(table.getAllLeafColumns());
+        }
+        return table.getAllLeafColumns().filter(column => column.getCanPin());
+    }, [slotProps === null || slotProps === void 0 ? void 0 : slotProps.columnsPanel, table]);
+    const handlePinColumn = (columnId, position) => {
+        const currentPinning = table.getState().columnPinning;
+        const newPinning = Object.assign({}, currentPinning);
+        newPinning.left = (newPinning.left || []).filter(id => id !== columnId);
+        newPinning.right = (newPinning.right || []).filter(id => id !== columnId);
+        if (position === 'left') {
+            newPinning.left = [...(newPinning.left || []), columnId];
+        }
+        else if (position === 'right') {
+            newPinning.right = [...(newPinning.right || []), columnId];
+        }
+        table.setColumnPinning(newPinning);
+    };
+    const getColumnPinStatus = (columnId) => {
+        var _a, _b;
+        if ((_a = columnPinning.left) === null || _a === void 0 ? void 0 : _a.includes(columnId))
+            return 'left';
+        if ((_b = columnPinning.right) === null || _b === void 0 ? void 0 : _b.includes(columnId))
+            return 'right';
+        return 'none';
+    };
+    const getColumnDisplayName = (column) => {
+        if (typeof column.columnDef.header === 'string') {
+            return column.columnDef.header;
+        }
+        return column.id;
+    };
+    const handleUnpinAll = (0, react_1.useCallback)(() => {
+        table.setColumnPinning(table.initialState.columnPinning || {});
+    }, [table]);
+    const userPinnedLeft = (((_a = columnPinning.left) === null || _a === void 0 ? void 0 : _a.filter((id) => allColumns.some((column) => column.id === id))) || []);
+    const userPinnedRight = (((_b = columnPinning.right) === null || _b === void 0 ? void 0 : _b.filter((id) => allColumns.some((column) => column.id === id))) || []);
+    const totalPinned = userPinnedLeft.length + userPinnedRight.length;
+    return ((0, jsx_runtime_1.jsx)(menu_dropdown_1.MenuDropdown, { anchor: ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Pin columns", children: (0, jsx_runtime_1.jsxs)(material_1.IconButton, { size: "small", sx: {
+                    flexShrink: 0,
+                }, children: [(0, jsx_runtime_1.jsx)(PinIconSlot, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.pinIcon)), totalPinned > 0 && ((0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                            position: 'absolute',
+                            top: -2,
+                            right: -2,
+                            backgroundColor: 'primary.main',
+                            color: 'white',
+                            borderRadius: '50%',
+                            width: 16,
+                            height: 16,
+                            fontSize: 10,
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                        }, children: totalPinned }))] }) })), children: ({ handleClose }) => ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                minWidth: 300,
+                maxHeight: 400,
+                overflow: 'auto',
+            }, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                        p: 2,
+                        pb: 1,
+                    }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle2", sx: { mb: 1 }, children: "Pin Columns" }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", color: "text.secondary", children: "Pin columns to keep them visible while scrolling" })] }), (0, jsx_runtime_1.jsx)(material_1.Divider, {}), (0, jsx_runtime_1.jsx)(material_1.List, { dense: true, sx: { py: 0 }, children: allColumns.map((column) => {
+                        const pinStatus = getColumnPinStatus(column.id);
+                        const displayName = getColumnDisplayName(column);
+                        return ((0, jsx_runtime_1.jsx)(material_1.ListItem, { sx: { py: 0.5 }, secondaryAction: ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                                    display: 'flex',
+                                    gap: 0.5,
+                                }, children: [(0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Pin left", children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", onClick: () => handlePinColumn(column.id, pinStatus === 'left' ? 'none' : 'left'), color: pinStatus === 'left' ? 'primary' : 'default', children: (0, jsx_runtime_1.jsx)(LeftIconSlot, Object.assign({ fontSize: "small" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.leftIcon)) }) }), (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Pin right", children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", onClick: () => handlePinColumn(column.id, pinStatus === 'right' ? 'none' : 'right'), color: pinStatus === 'right' ? 'secondary' : 'default', children: (0, jsx_runtime_1.jsx)(RightIconSlot, Object.assign({ fontSize: "small" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.rightIcon)) }) }), pinStatus !== 'none' && ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Unpin", children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", onClick: () => handlePinColumn(column.id, 'none'), children: (0, jsx_runtime_1.jsx)(UnpinIconSlot, Object.assign({ fontSize: "small" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.unpinIcon)) }) }))] })), children: (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: displayName, secondary: pinStatus !== 'none' ? ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        gap: 0.5,
+                                        mt: 0.5,
+                                    }, children: [pinStatus === 'left' ? ((0, jsx_runtime_1.jsx)(LeftIconSlot, Object.assign({ fontSize: "small" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.leftIcon))) : ((0, jsx_runtime_1.jsx)(RightIconSlot, Object.assign({ fontSize: "small" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.rightIcon))), (0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "caption", color: pinStatus === 'left' ? 'primary' : 'secondary', children: ["Pinned", ' ', pinStatus] })] })) : null }) }, column.id));
+                    }) }), (0, jsx_runtime_1.jsx)(material_1.Divider, {}), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                        p: 2,
+                        pt: 1,
+                    }, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                            display: 'flex',
+                            gap: 1,
+                            justifyContent: 'space-between',
+                        }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", color: "text.secondary", children: "Quick actions:" }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                                    display: 'flex',
+                                    gap: 1,
+                                }, children: (0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Unpin all user columns", children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", onClick: handleUnpinAll, disabled: totalPinned === 0, children: (0, jsx_runtime_1.jsx)(icons_1.UnpinIcon, { fontSize: "small" }) }) }) })] }) })] })) }));
+}

package/src/lib/components/toolbar/column-reset-control.d.ts

@@ -0,0 +1 @@
+export declare function ColumnResetControl(): import("react/jsx-runtime").JSX.Element;

package/src/lib/components/toolbar/column-reset-control.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColumnResetControl = ColumnResetControl;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_material_1 = require("@mui/icons-material");
+const material_1 = require("@mui/material");
+const data_table_context_1 = require("../../contexts/data-table-context");
+function ColumnResetControl() {
+    const { table } = (0, data_table_context_1.useDataTableContext)();
+    const handleResetLayout = () => {
+        table.resetColumnOrder();
+        table.resetColumnPinning();
+        table.resetColumnSizing();
+    };
+    return ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Reset layout", children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", onClick: handleResetLayout, children: (0, jsx_runtime_1.jsx)(icons_material_1.Autorenew, {}) }) }));
+}

package/src/lib/components/toolbar/column-visibility-control.d.ts

@@ -0,0 +1 @@
+export declare function ColumnVisibilityControl(): import("react/jsx-runtime").JSX.Element;

package/src/lib/components/toolbar/column-visibility-control.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColumnVisibilityControl = ColumnVisibilityControl;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const icons_material_1 = require("@mui/icons-material");
+const material_1 = require("@mui/material");
+const react_1 = require("react");
+const menu_dropdown_1 = require("../droupdown/menu-dropdown");
+const data_table_context_1 = require("../../contexts/data-table-context");
+const slot_helpers_1 = require("../../utils/slot-helpers");
+function ColumnVisibilityControl() {
+    const { table, slots, slotProps } = (0, data_table_context_1.useDataTableContext)();
+    const ColumnIconSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'columnIcon', icons_material_1.ViewColumnOutlined);
+    const columns = (0, react_1.useMemo)(() => {
+        var _a, _b;
+        if ((_a = slotProps === null || slotProps === void 0 ? void 0 : slotProps.columnsPanel) === null || _a === void 0 ? void 0 : _a.getTogglableColumns) {
+            return (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.columnsPanel) === null || _b === void 0 ? void 0 : _b.getTogglableColumns(table.getAllLeafColumns());
+        }
+        return table.getAllLeafColumns().filter(column => column.getCanHide());
+    }, [slotProps === null || slotProps === void 0 ? void 0 : slotProps.columnsPanel, table]);
+    const handleColumnVisibilityChange = ((columnId, visible) => {
+        var _a;
+        (_a = table.getColumn(columnId)) === null || _a === void 0 ? void 0 : _a.toggleVisibility(visible);
+    });
+    return ((0, jsx_runtime_1.jsx)(menu_dropdown_1.MenuDropdown, { anchor: ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Column visibility", children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", sx: {
+                    flexShrink: 0,
+                }, children: (0, jsx_runtime_1.jsx)(ColumnIconSlot, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.columnIcon)) }) })), children: ({ handleClose }) => ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                p: 2,
+                minWidth: 200,
+            }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "subtitle2", sx: { mb: 1 }, children: "Show/Hide Columns" }), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: { mb: 1 } }), (0, jsx_runtime_1.jsx)(material_1.FormGroup, { children: columns.map((column) => ((0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { control: ((0, jsx_runtime_1.jsx)(material_1.Checkbox, { disabled: !column.getCanHide(), checked: column.getIsVisible(), onChange: (e) => handleColumnVisibilityChange(column.id, e.target.checked), size: "small" })), label: typeof column.columnDef.header === 'string' ? column.columnDef.header : column.id }, column.id))) })] })) }));
+}

package/src/lib/components/toolbar/data-table-toolbar.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+export interface DataTableToolbarProps {
+    extraFilter?: ReactNode;
+    enableGlobalFilter?: boolean;
+    title?: string;
+    subtitle?: string;
+    enableColumnVisibility?: boolean;
+    enableExport?: boolean;
+    enableReset?: boolean;
+    enableColumnFilter?: boolean;
+    enableTableSizeControl?: boolean;
+    enableColumnPinning?: boolean;
+}
+export declare function DataTableToolbar({ extraFilter, enableGlobalFilter, title, subtitle, enableColumnVisibility, enableExport, enableReset, enableColumnFilter, enableTableSizeControl, enableColumnPinning, }: DataTableToolbarProps): import("react/jsx-runtime").JSX.Element;

package/src/lib/components/toolbar/data-table-toolbar.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataTableToolbar = DataTableToolbar;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const column_custom_filter_control_1 = require("./column-custom-filter-control");
+const column_pinning_control_1 = require("./column-pinning-control");
+const column_reset_control_1 = require("./column-reset-control");
+const column_visibility_control_1 = require("./column-visibility-control");
+const table_export_control_1 = require("./table-export-control");
+const table_search_control_1 = require("./table-search-control");
+const table_size_control_1 = require("./table-size-control");
+const data_table_context_1 = require("../../contexts/data-table-context");
+const slot_helpers_1 = require("../../utils/slot-helpers");
+function DataTableToolbar({ extraFilter = null, enableGlobalFilter = true, title, subtitle, enableColumnVisibility = true, enableExport = true, enableReset = true, enableColumnFilter = true, enableTableSizeControl = true, enableColumnPinning = true, }) {
+    const { table, slots, slotProps = {} } = (0, data_table_context_1.useDataTableContext)();
+    const ToolbarSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'toolbar', material_1.Toolbar);
+    const TableSearchControlSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'searchInput', table_search_control_1.TableSearchControl);
+    const TableSizeControlSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'tableSizeControl', table_size_control_1.TableSizeControl);
+    const ColumnCustomFilterControlSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'columnCustomFilterControl', column_custom_filter_control_1.ColumnCustomFilterControl);
+    const ColumnPinningControlSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'columnPinningControl', column_pinning_control_1.ColumnPinningControl);
+    const ColumnVisibilityControlSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'columnVisibilityControl', column_visibility_control_1.ColumnVisibilityControl);
+    const ColumnResetControlSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'resetButton', column_reset_control_1.ColumnResetControl);
+    const TableExportControlSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'exportButton', table_export_control_1.TableExportControl);
+    return ((0, jsx_runtime_1.jsx)(ToolbarSlot, Object.assign({ table: table }, slotProps.toolbar, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { width: '100%' }, children: [(title || subtitle) ? ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { mb: 2 }, children: [title ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", component: "div", children: title })) : null, subtitle ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", color: "text.secondary", children: subtitle })) : null] })) : null, (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", spacing: 2, justifyContent: "space-between", alignItems: "center", children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", spacing: 0.5, alignItems: "center", sx: { flex: 1 }, children: [enableGlobalFilter ? (0, jsx_runtime_1.jsx)(TableSearchControlSlot, Object.assign({}, slotProps.searchInput)) : null, enableTableSizeControl ? (0, jsx_runtime_1.jsx)(TableSizeControlSlot, Object.assign({}, slotProps.tableSizeControl)) : null, enableColumnFilter ? (0, jsx_runtime_1.jsx)(ColumnCustomFilterControlSlot, Object.assign({}, slotProps.columnCustomFilterControl)) : null, enableColumnPinning ? (0, jsx_runtime_1.jsx)(ColumnPinningControlSlot, Object.assign({}, slotProps.columnPinningControl)) : null, enableColumnVisibility ? (0, jsx_runtime_1.jsx)(ColumnVisibilityControlSlot, Object.assign({}, slotProps.columnVisibilityControl)) : null, enableReset ? (0, jsx_runtime_1.jsx)(ColumnResetControlSlot, Object.assign({}, slotProps.resetButton)) : null, enableExport ? (0, jsx_runtime_1.jsx)(TableExportControlSlot, Object.assign({}, slotProps.exportButton)) : null] }), (0, jsx_runtime_1.jsx)(material_1.Stack, { direction: "row", spacing: 1, alignItems: "center", children: extraFilter })] })] }) })));
+}

package/src/lib/components/toolbar/index.d.ts

@@ -0,0 +1,8 @@
+export { DataTableToolbar } from './data-table-toolbar';
+export { ColumnVisibilityControl } from './column-visibility-control';
+export { ColumnPinningControl } from './column-pinning-control';
+export { ColumnResetControl } from './column-reset-control';
+export { TableExportControl } from './table-export-control';
+export { TableSizeControl } from './table-size-control';
+export { BulkActionsToolbar } from './bulk-actions-toolbar';
+export type { BulkActionsToolbarProps } from './bulk-actions-toolbar';

package/src/lib/components/toolbar/index.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BulkActionsToolbar = exports.TableSizeControl = exports.TableExportControl = exports.ColumnResetControl = exports.ColumnPinningControl = exports.ColumnVisibilityControl = exports.DataTableToolbar = void 0;
+var data_table_toolbar_1 = require("./data-table-toolbar");
+Object.defineProperty(exports, "DataTableToolbar", { enumerable: true, get: function () { return data_table_toolbar_1.DataTableToolbar; } });
+var column_visibility_control_1 = require("./column-visibility-control");
+Object.defineProperty(exports, "ColumnVisibilityControl", { enumerable: true, get: function () { return column_visibility_control_1.ColumnVisibilityControl; } });
+var column_pinning_control_1 = require("./column-pinning-control");
+Object.defineProperty(exports, "ColumnPinningControl", { enumerable: true, get: function () { return column_pinning_control_1.ColumnPinningControl; } });
+var column_reset_control_1 = require("./column-reset-control");
+Object.defineProperty(exports, "ColumnResetControl", { enumerable: true, get: function () { return column_reset_control_1.ColumnResetControl; } });
+var table_export_control_1 = require("./table-export-control");
+Object.defineProperty(exports, "TableExportControl", { enumerable: true, get: function () { return table_export_control_1.TableExportControl; } });
+var table_size_control_1 = require("./table-size-control");
+Object.defineProperty(exports, "TableSizeControl", { enumerable: true, get: function () { return table_size_control_1.TableSizeControl; } });
+var bulk_actions_toolbar_1 = require("./bulk-actions-toolbar");
+Object.defineProperty(exports, "BulkActionsToolbar", { enumerable: true, get: function () { return bulk_actions_toolbar_1.BulkActionsToolbar; } });

package/src/lib/components/toolbar/table-export-control.d.ts

@@ -0,0 +1,25 @@
+import { TableFilters } from '../../types';
+import { SelectionState } from '../../features/custom-selection.feature';
+interface TableExportControlProps {
+    exportFilename?: string;
+    onServerExport?: (filters?: Partial<TableFilters>, selection?: SelectionState) => Promise<{
+        data: any[];
+        total: number;
+    }>;
+    onExportProgress?: (progress: {
+        processedRows: number;
+        totalRows: number;
+        percentage: number;
+    }) => void;
+    onExportComplete?: (result: {
+        success: boolean;
+        filename: string;
+        totalRows: number;
+    }) => void;
+    onExportError?: (error: {
+        message: string;
+        code: string;
+    }) => void;
+}
+export declare function TableExportControl({ exportFilename: propsExportFilename, onServerExport: propsOnServerExport, onExportProgress: propsOnExportProgress, onExportComplete: propsOnExportComplete, onExportError: propsOnExportError, }?: TableExportControlProps): import("react/jsx-runtime").JSX.Element;
+export {};