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

package/src/lib/examples/custom-column-filter-example.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomColumnFilterExample = CustomColumnFilterExample;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const material_1 = require("@mui/material");
+const data_table_1 = require("../components/table/data-table");
+const sampleData = [
+    { id: 1, name: 'John Doe', age: 30, department: 'Engineering', salary: 75000, isActive: true },
+    { id: 2, name: 'Jane Smith', age: 25, department: 'Marketing', salary: 60000, isActive: true },
+    { id: 3, name: 'Bob Johnson', age: 35, department: 'Engineering', salary: 85000, isActive: false },
+    { id: 4, name: 'Alice Brown', age: 28, department: 'HR', salary: 55000, isActive: true },
+    { id: 5, name: 'Charlie Wilson', age: 42, department: 'Sales', salary: 70000, isActive: true },
+];
+const columns = [
+    {
+        accessorKey: 'name',
+        header: 'Name',
+        type: 'text',
+    },
+    {
+        accessorKey: 'age',
+        header: 'Age',
+        type: 'number',
+    },
+    {
+        accessorKey: 'department',
+        header: 'Department',
+        type: 'select',
+        options: [
+            { label: 'Engineering', value: 'Engineering' },
+            { label: 'Marketing', value: 'Marketing' },
+            { label: 'HR', value: 'HR' },
+            { label: 'Sales', value: 'Sales' },
+        ],
+    },
+    {
+        accessorKey: 'salary',
+        header: 'Salary',
+        type: 'number',
+        cell: ({ getValue }) => {
+            const value = getValue();
+            return new Intl.NumberFormat('en-US', {
+                style: 'currency',
+                currency: 'USD',
+            }).format(value);
+        },
+    },
+    {
+        accessorKey: 'isActive',
+        header: 'Active',
+        type: 'boolean',
+    },
+];
+function CustomColumnFilterExample() {
+    const [data] = (0, react_1.useState)(sampleData);
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { p: 3 }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h4", gutterBottom: true, children: "Custom Column Filter Feature Example" }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body1", sx: { mb: 3 }, children: "Click the filter icon in the toolbar to test the custom column filter feature." }), (0, jsx_runtime_1.jsx)(data_table_1.DataTable, { data: data, columns: columns, enableColumnFilter: true, enableGlobalFilter: true, enablePagination: true, enableSorting: true, onColumnFiltersChange: (filterState) => {
+                    console.log('Custom Column Filter State Changed:', filterState);
+                } })] }));
+}

package/src/lib/examples/index.d.ts

@@ -0,0 +1,5 @@
+export { CustomColumnFilterExample } from './custom-column-filter-example';
+export { SelectionTestExample } from './selection-test-example';
+export { AdvancedFeaturesExample } from './advanced-features-example';
+export { SimpleLocalExample } from './simple-local-example';
+export { BulkActionsTest } from './bulk-actions-test';

package/src/lib/examples/index.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BulkActionsTest = exports.SimpleLocalExample = exports.AdvancedFeaturesExample = exports.SelectionTestExample = exports.CustomColumnFilterExample = void 0;
+var custom_column_filter_example_1 = require("./custom-column-filter-example");
+Object.defineProperty(exports, "CustomColumnFilterExample", { enumerable: true, get: function () { return custom_column_filter_example_1.CustomColumnFilterExample; } });
+var selection_test_example_1 = require("./selection-test-example");
+Object.defineProperty(exports, "SelectionTestExample", { enumerable: true, get: function () { return selection_test_example_1.SelectionTestExample; } });
+var advanced_features_example_1 = require("./advanced-features-example");
+Object.defineProperty(exports, "AdvancedFeaturesExample", { enumerable: true, get: function () { return advanced_features_example_1.AdvancedFeaturesExample; } });
+var simple_local_example_1 = require("./simple-local-example");
+Object.defineProperty(exports, "SimpleLocalExample", { enumerable: true, get: function () { return simple_local_example_1.SimpleLocalExample; } });
+var bulk_actions_test_1 = require("./bulk-actions-test");
+Object.defineProperty(exports, "BulkActionsTest", { enumerable: true, get: function () { return bulk_actions_test_1.BulkActionsTest; } });

package/src/lib/examples/selection-test-example.d.ts

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

package/src/lib/examples/selection-test-example.js

@@ -0,0 +1,101 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectionTestExample = SelectionTestExample;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const material_1 = require("@mui/material");
+const components_1 = require("../components");
+const generateSampleData = () => {
+    const departments = ['Engineering', 'Marketing', 'Sales', 'HR', 'Finance'];
+    const firstNames = ['John', 'Jane', 'Bob', 'Alice', 'Charlie', 'Diana', 'Eva', 'Frank', 'Grace', 'Henry'];
+    const lastNames = ['Smith', 'Johnson', 'Williams', 'Brown', 'Jones', 'Garcia', 'Miller', 'Davis', 'Rodriguez', 'Martinez'];
+    return Array.from({ length: 25 }, (_, index) => ({
+        id: index + 1,
+        name: `${firstNames[index % firstNames.length]} ${lastNames[index % lastNames.length]}`,
+        email: `user${index + 1}@example.com`,
+        department: departments[index % departments.length],
+        salary: 50000 + (index * 5000),
+        isActive: Math.random() > 0.3,
+    }));
+};
+const sampleData = generateSampleData();
+const columns = [
+    {
+        accessorKey: 'name',
+        header: 'Name',
+        size: 150,
+    },
+    {
+        accessorKey: 'email',
+        header: 'Email',
+        size: 200,
+    },
+    {
+        accessorKey: 'department',
+        header: 'Department',
+        size: 120,
+    },
+    {
+        accessorKey: 'salary',
+        header: 'Salary',
+        size: 100,
+        cell: ({ getValue }) => `$${getValue().toLocaleString()}`,
+    },
+    {
+        accessorKey: 'isActive',
+        header: 'Status',
+        size: 100,
+        cell: ({ getValue }) => ((0, jsx_runtime_1.jsx)(material_1.Chip, { label: getValue() ? 'Active' : 'Inactive', color: getValue() ? 'success' : 'default', size: "small" })),
+    },
+];
+function SelectionTestExample() {
+    const [selectMode, setSelectMode] = (0, react_1.useState)('page');
+    const [selectionState, setSelectionState] = (0, react_1.useState)({
+        ids: [],
+        type: 'include',
+    });
+    const tableRef = (0, react_1.useRef)(null);
+    const handleSelectionChange = (0, react_1.useCallback)((newSelectionState) => {
+        setSelectionState(newSelectionState);
+    }, []);
+    const handleSelectAll = (0, react_1.useCallback)(() => {
+        var _a;
+        (_a = tableRef.current) === null || _a === void 0 ? void 0 : _a.selection.selectAll();
+    }, []);
+    const handleDeselectAll = (0, react_1.useCallback)(() => {
+        var _a;
+        (_a = tableRef.current) === null || _a === void 0 ? void 0 : _a.selection.deselectAll();
+    }, []);
+    const handleSelectFirst5 = (0, react_1.useCallback)(() => {
+        const firstFiveIds = sampleData.slice(0, 5).map(user => user.id.toString());
+        firstFiveIds.forEach(id => {
+            var _a;
+            (_a = tableRef.current) === null || _a === void 0 ? void 0 : _a.selection.selectRow(id);
+        });
+    }, []);
+    const handleToggleRow = (0, react_1.useCallback)(() => {
+        var _a;
+        (_a = tableRef.current) === null || _a === void 0 ? void 0 : _a.selection.toggleRowSelection('3');
+    }, []);
+    const isRowSelectable = (0, react_1.useCallback)(({ row }) => {
+        return row.salary <= 100000;
+    }, []);
+    const selectedCount = selectionState.ids.length;
+    const selectedType = selectionState.type;
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { p: 3 }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h4", gutterBottom: true, children: "Selection Test Example" }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body1", color: "text.secondary", sx: { mb: 3 }, children: "Test the custom selection feature with different modes and operations. Users with salary > $100,000 are disabled for selection." }), (0, jsx_runtime_1.jsx)(material_1.Paper, { sx: { p: 2, mb: 3 }, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex', gap: 2, flexWrap: 'wrap', alignItems: 'center' }, children: [(0, jsx_runtime_1.jsxs)(material_1.FormControl, { size: "small", sx: { minWidth: 120 }, children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { children: "Selection Mode" }), (0, jsx_runtime_1.jsxs)(material_1.Select, { value: selectMode, label: "Selection Mode", onChange: (e) => setSelectMode(e.target.value), children: [(0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: "page", children: "Page Mode" }), (0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: "all", children: "All Mode" })] })] }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", onClick: handleSelectAll, children: "Select All" }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", onClick: handleDeselectAll, children: "Deselect All" }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", onClick: handleSelectFirst5, children: "Select First 5" }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", onClick: handleToggleRow, children: "Toggle User #3" })] }) }), (0, jsx_runtime_1.jsxs)(material_1.Paper, { sx: { p: 2, mb: 3 }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", gutterBottom: true, children: "Current Selection State" }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: 2 }, children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "body2", children: [(0, jsx_runtime_1.jsx)("strong", { children: "Mode:" }), " ", selectMode] }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "body2", children: [(0, jsx_runtime_1.jsx)("strong", { children: "Type:" }), " ", selectedType] }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "body2", children: [(0, jsx_runtime_1.jsx)("strong", { children: "Count:" }), " ", selectedCount] }), (0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "body2", sx: { gridColumn: '1 / -1' }, children: [(0, jsx_runtime_1.jsx)("strong", { children: "IDs:" }), " ", selectionState.ids.join(', ') || 'None'] })] })] }), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: { my: 2 } }), (0, jsx_runtime_1.jsx)(components_1.DataTable, { ref: tableRef, data: sampleData, totalRow: sampleData.length, columns: columns, enableRowSelection: true, enableMultiRowSelection: true, selectMode: selectMode, isRowSelectable: isRowSelectable, onSelectionChange: handleSelectionChange, enablePagination: true, initialState: {
+                    pagination: {
+                        pageIndex: 0,
+                        pageSize: 10,
+                    },
+                }, enableBulkActions: true, bulkActions: (selectionState) => ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex', gap: 1 }, children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", size: "small", onClick: () => {
+                                const count = selectionState.type === 'include'
+                                    ? selectionState.ids.length
+                                    : sampleData.length - selectionState.ids.length;
+                                alert(`Exporting ${count} selected users (${selectionState.type} mode)`);
+                            }, children: "\uD83D\uDCE4 Export Selected" }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", size: "small", color: "error", onClick: () => {
+                                const count = selectionState.type === 'include'
+                                    ? selectionState.ids.length
+                                    : sampleData.length - selectionState.ids.length;
+                                alert(`Would delete ${count} selected users (${selectionState.type} mode)`);
+                            }, children: "\uD83D\uDDD1\uFE0F Delete Selected" })] })), enableSorting: true, enableGlobalFilter: true, fitToScreen: true }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { mt: 2 }, children: (0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "body2", color: "text.secondary", children: ["\uD83D\uDCA1 ", (0, jsx_runtime_1.jsx)("strong", { children: "Test Instructions:" }), (0, jsx_runtime_1.jsx)("br", {}), "1. Try selecting rows in \"Page\" mode, then switch pages - selections should be page-specific", (0, jsx_runtime_1.jsx)("br", {}), "2. Try \"All\" mode and select rows - this works across all pages", (0, jsx_runtime_1.jsx)("br", {}), "3. Note that users with salary > $100k are disabled (grayed out checkboxes)", (0, jsx_runtime_1.jsx)("br", {}), "4. Use the control buttons to test programmatic selection", (0, jsx_runtime_1.jsx)("br", {}), "5. Watch the \"Current Selection State\" panel to see how the selection data changes"] }) })] }));
+}

package/src/lib/examples/simple-local-example.d.ts

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

package/src/lib/examples/simple-local-example.js

@@ -0,0 +1,97 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SimpleLocalExample = SimpleLocalExample;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const material_1 = require("@mui/material");
+const components_1 = require("../components");
+const products = [
+    { id: 1, name: 'Laptop Pro', category: 'Electronics', price: 1299, inStock: true, rating: 4.5 },
+    { id: 2, name: 'Wireless Mouse', category: 'Electronics', price: 29, inStock: true, rating: 4.2 },
+    { id: 3, name: 'Coffee Mug', category: 'Kitchen', price: 12, inStock: false, rating: 4.8 },
+    { id: 4, name: 'Desk Chair', category: 'Furniture', price: 189, inStock: true, rating: 4.0 },
+    { id: 5, name: 'Notebook Set', category: 'Office', price: 15, inStock: true, rating: 4.3 },
+    { id: 6, name: 'Water Bottle', category: 'Kitchen', price: 22, inStock: true, rating: 4.7 },
+    { id: 7, name: 'Monitor Stand', category: 'Electronics', price: 45, inStock: false, rating: 4.1 },
+    { id: 8, name: 'Pen Set', category: 'Office', price: 8, inStock: true, rating: 3.9 },
+    { id: 9, name: 'Table Lamp', category: 'Furniture', price: 67, inStock: true, rating: 4.4 },
+    { id: 10, name: 'Phone Case', category: 'Electronics', price: 25, inStock: true, rating: 4.6 },
+    { id: 11, name: 'Phone Case', category: 'Electronics', price: 25, inStock: true, rating: 4.6 },
+    { id: 12, name: 'Phone Case', category: 'Electronics', price: 25, inStock: true, rating: 4.6 },
+    { id: 13, name: 'Phone Case', category: 'Electronics', price: 25, inStock: true, rating: 4.6 },
+    { id: 14, name: 'Phone Case', category: 'Electronics', price: 25, inStock: true, rating: 4.6 },
+    { id: 15, name: 'Phone Case', category: 'Electronics', price: 25, inStock: true, rating: 4.6 },
+    { id: 16, name: 'Phone Case', category: 'Electronics', price: 25, inStock: true, rating: 4.6 },
+    { id: 17, name: 'Phone Case', category: 'Electronics', price: 25, inStock: true, rating: 4.6 },
+];
+const columns = [
+    {
+        accessorKey: 'name',
+        header: 'Product Name',
+        size: 180,
+    },
+    {
+        accessorKey: 'category',
+        header: 'Category',
+        size: 120,
+        cell: ({ getValue }) => ((0, jsx_runtime_1.jsx)(material_1.Chip, { label: getValue(), size: "small", variant: "outlined", color: "primary" })),
+    },
+    {
+        accessorKey: 'price',
+        header: 'Price',
+        size: 100,
+        cell: ({ getValue }) => `$${getValue().toFixed(2)}`,
+    },
+    {
+        accessorKey: 'inStock',
+        header: 'In Stock',
+        size: 100,
+        cell: ({ getValue }) => ((0, jsx_runtime_1.jsx)(material_1.Chip, { label: getValue() ? 'Yes' : 'No', color: getValue() ? 'success' : 'error', size: "small" })),
+    },
+    {
+        accessorKey: 'rating',
+        header: 'Rating',
+        size: 100,
+        cell: ({ getValue }) => `⭐ ${getValue().toFixed(1)}`,
+    },
+];
+function SimpleLocalExample() {
+    const bulkActions = (0, react_1.useCallback)((selectionState) => ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex', gap: 1 }, children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => {
+                    const count = selectionState.type === 'include'
+                        ? selectionState.ids.length
+                        : products.length - selectionState.ids.length;
+                    alert(`Selected ${count} products (${selectionState.type} mode)`);
+                }, style: {
+                    padding: '8px 16px',
+                    borderRadius: '4px',
+                    border: '1px solid #ccc',
+                    background: '#f5f5f5',
+                    cursor: 'pointer'
+                }, children: "\uD83D\uDCCA Show Count" }), (0, jsx_runtime_1.jsx)("button", { onClick: () => {
+                    let selectedProducts;
+                    if (selectionState.type === 'include') {
+                        selectedProducts = products.filter(p => selectionState.ids.includes(p.id.toString()));
+                    }
+                    else {
+                        selectedProducts = products.filter(p => !selectionState.ids.includes(p.id.toString()));
+                    }
+                    const total = selectedProducts.reduce((sum, product) => sum + product.price, 0);
+                    alert(`Total value: $${total.toFixed(2)}`);
+                }, style: {
+                    padding: '8px 16px',
+                    borderRadius: '4px',
+                    border: '1px solid #ccc',
+                    background: '#f5f5f5',
+                    cursor: 'pointer'
+                }, children: "\uD83D\uDCB0 Calculate Total" })] })), []);
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { p: 3 }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h4", gutterBottom: true, children: "Simple Local Data Example" }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body1", color: "text.secondary", sx: { mb: 3 }, children: "A basic example using static local data with no API calls. Demonstrates essential DataTable features with minimal setup." }), (0, jsx_runtime_1.jsx)(components_1.DataTable, { data: products, totalRow: products.length, columns: columns, enableSorting: true, enableGlobalFilter: true, enableColumnFilter: true, enableColumnResizing: true, enableRowSelection: true, enableBulkActions: true, bulkActions: bulkActions, fitToScreen: true, initialState: {
+                    pagination: {
+                        pageIndex: 0,
+                        pageSize: 5,
+                    },
+                }, slotProps: {
+                    pagination: {
+                        rowsPerPageOptions: [5, 10, 20, 30, 40, 50],
+                    },
+                } }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { mt: 2, p: 2, backgroundColor: 'grey.50', borderRadius: 1 }, children: (0, jsx_runtime_1.jsxs)(material_1.Typography, { variant: "body2", color: "text.secondary", children: ["\uD83D\uDCA1 ", (0, jsx_runtime_1.jsx)("strong", { children: "This example demonstrates:" }), (0, jsx_runtime_1.jsx)("br", {}), "\u2022 Basic table with static local data", (0, jsx_runtime_1.jsx)("br", {}), "\u2022 Simple column definitions with custom cell renderers", (0, jsx_runtime_1.jsx)("br", {}), "\u2022 Sorting, filtering, and pagination", (0, jsx_runtime_1.jsx)("br", {}), "\u2022 Row selection with bulk actions", (0, jsx_runtime_1.jsx)("br", {}), "\u2022 Minimal setup - perfect for getting started"] }) })] }));
+}

package/src/lib/features/custom-column-filter.feature.d.ts

@@ -0,0 +1,45 @@
+import { Table, TableFeature, RowData, Updater, RowModel } from '@tanstack/react-table';
+import type { CustomColumnFilterState } from '../types/table.types';
+export interface ColumnFilterRule {
+    id: string;
+    columnId: string;
+    operator: string;
+    value: any;
+    columnType?: string;
+}
+export interface CustomColumnFilterOptions {
+    enableCustomColumnFilter?: boolean;
+    onCustomColumnFilterChange?: (updater: Updater<CustomColumnFilterState>) => void;
+    onCustomColumnFilterApply?: (state: CustomColumnFilterState) => void;
+}
+export interface CustomColumnFilterTableState {
+    customColumnFilter: CustomColumnFilterState;
+}
+declare module '@tanstack/table-core' {
+    interface TableState extends CustomColumnFilterTableState {
+    }
+    interface TableOptionsResolved<TData extends RowData> extends CustomColumnFilterOptions {
+    }
+    interface Table<TData extends RowData> extends CustomColumnFilterInstance<TData> {
+    }
+}
+export interface CustomColumnFilterInstance<TData extends RowData> {
+    setCustomColumnFilter: (updater: Updater<CustomColumnFilterState>) => void;
+    addPendingColumnFilter: (columnId: string, operator: string, value: any) => void;
+    updatePendingColumnFilter: (filterId: string, updates: Partial<ColumnFilterRule>) => void;
+    removePendingColumnFilter: (filterId: string) => void;
+    clearAllPendingColumnFilters: () => void;
+    setPendingFilterLogic: (logic: 'AND' | 'OR') => void;
+    applyPendingColumnFilters: () => void;
+    addColumnFilter: (columnId: string, operator: string, value: any) => void;
+    updateColumnFilter: (filterId: string, updates: Partial<ColumnFilterRule>) => void;
+    removeColumnFilter: (filterId: string) => void;
+    clearAllColumnFilters: () => void;
+    setFilterLogic: (logic: 'AND' | 'OR') => void;
+    getActiveColumnFilters: () => ColumnFilterRule[];
+    getPendingColumnFilters: () => ColumnFilterRule[];
+    getCustomColumnFilterState: () => CustomColumnFilterState;
+}
+export declare const CustomColumnFilterFeature: TableFeature<any>;
+export declare function matchesCustomColumnFilters<TData extends RowData>(row: any, filters: ColumnFilterRule[], logic?: 'AND' | 'OR'): boolean;
+export declare const getCombinedFilteredRowModel: <TData>() => (table: Table<TData>) => () => RowModel<TData>;

package/src/lib/features/custom-column-filter.feature.js

@@ -0,0 +1,247 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCombinedFilteredRowModel = exports.CustomColumnFilterFeature = void 0;
+exports.matchesCustomColumnFilters = matchesCustomColumnFilters;
+const tslib_1 = require("tslib");
+const react_table_1 = require("@tanstack/react-table");
+const moment_1 = tslib_1.__importDefault(require("moment"));
+exports.CustomColumnFilterFeature = {
+    getInitialState: (state) => {
+        return Object.assign({ customColumnFilter: {
+                filters: [],
+                logic: 'AND',
+                pendingFilters: [],
+                pendingLogic: 'AND',
+            } }, state);
+    },
+    getDefaultOptions: (table) => {
+        return {
+            enableCustomColumnFilter: true,
+            onCustomColumnFilterChange: (0, react_table_1.makeStateUpdater)('customColumnFilter', table),
+            onCustomColumnFilterApply: (state) => {
+            },
+        };
+    },
+    createTable: (table) => {
+        table.setCustomColumnFilter = (updater) => {
+            var _a, _b;
+            const safeUpdater = (old) => {
+                const newState = (0, react_table_1.functionalUpdate)(updater, old);
+                return newState;
+            };
+            return (_b = (_a = table.options).onCustomColumnFilterChange) === null || _b === void 0 ? void 0 : _b.call(_a, safeUpdater);
+        };
+        table.addPendingColumnFilter = (columnId, operator, value) => {
+            table.setCustomColumnFilter((old) => {
+                const newFilter = {
+                    id: `filter_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`,
+                    columnId,
+                    operator,
+                    value,
+                };
+                return Object.assign(Object.assign({}, old), { pendingFilters: [...old.pendingFilters, newFilter] });
+            });
+        };
+        table.updatePendingColumnFilter = (filterId, updates) => {
+            table.setCustomColumnFilter((old) => {
+                const updatedFilters = old.pendingFilters.map((filter) => filter.id === filterId ? Object.assign(Object.assign({}, filter), updates) : filter);
+                return Object.assign(Object.assign({}, old), { pendingFilters: updatedFilters });
+            });
+        };
+        table.removePendingColumnFilter = (filterId) => {
+            table.setCustomColumnFilter((old) => (Object.assign(Object.assign({}, old), { pendingFilters: old.pendingFilters.filter((filter) => filter.id !== filterId) })));
+        };
+        table.clearAllPendingColumnFilters = () => {
+            table.setCustomColumnFilter((old) => (Object.assign(Object.assign({}, old), { pendingFilters: [] })));
+        };
+        table.setPendingFilterLogic = (logic) => {
+            table.setCustomColumnFilter((old) => (Object.assign(Object.assign({}, old), { pendingLogic: logic })));
+        };
+        table.applyPendingColumnFilters = () => {
+            table.setCustomColumnFilter((old) => {
+                const newState = Object.assign(Object.assign({}, old), { filters: [...old.pendingFilters], logic: old.pendingLogic });
+                setTimeout(() => {
+                    var _a, _b;
+                    (_b = (_a = table.options).onCustomColumnFilterApply) === null || _b === void 0 ? void 0 : _b.call(_a, newState);
+                }, 0);
+                return newState;
+            });
+        };
+        table.addColumnFilter = (columnId, operator, value) => {
+            table.setCustomColumnFilter((old) => {
+                const newFilter = {
+                    id: `filter_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`,
+                    columnId,
+                    operator,
+                    value,
+                };
+                return Object.assign(Object.assign({}, old), { filters: [...old.filters, newFilter] });
+            });
+        };
+        table.updateColumnFilter = (filterId, updates) => {
+            table.setCustomColumnFilter((old) => {
+                const updatedFilters = old.filters.map((filter) => filter.id === filterId ? Object.assign(Object.assign({}, filter), updates) : filter);
+                return Object.assign(Object.assign({}, old), { filters: updatedFilters });
+            });
+        };
+        table.removeColumnFilter = (filterId) => {
+            table.setCustomColumnFilter((old) => (Object.assign(Object.assign({}, old), { filters: old.filters.filter((filter) => filter.id !== filterId) })));
+        };
+        table.clearAllColumnFilters = () => {
+            table.setCustomColumnFilter((old) => (Object.assign(Object.assign({}, old), { filters: [] })));
+        };
+        table.setFilterLogic = (logic) => {
+            table.setCustomColumnFilter((old) => (Object.assign(Object.assign({}, old), { logic })));
+        };
+        table.getActiveColumnFilters = () => {
+            const state = table.getState().customColumnFilter;
+            return state.filters.filter((f) => f.columnId && f.operator);
+        };
+        table.getPendingColumnFilters = () => {
+            const state = table.getState().customColumnFilter;
+            return state.pendingFilters.filter((f) => f.columnId && f.operator);
+        };
+        table.getCustomColumnFilterState = () => {
+            return table.getState().customColumnFilter;
+        };
+    },
+};
+function matchesCustomColumnFilters(row, filters, logic = 'AND') {
+    if (filters.length === 0)
+        return true;
+    const activeFilters = filters.filter((f) => f.columnId && f.operator);
+    if (activeFilters.length === 0)
+        return true;
+    const results = activeFilters.map((filter) => {
+        var _a;
+        let columnValue;
+        let columnType = filter.columnType || 'text';
+        try {
+            const column = row.getAllCells().find((cell) => cell.column.id === filter.columnId);
+            if (column) {
+                columnValue = column.getValue();
+                if (!filter.columnType && column.column.columnDef && column.column.columnDef.type) {
+                    columnType = column.column.columnDef.type;
+                }
+            }
+        }
+        catch (error) {
+            console.warn(`Error getting value for column ${filter.columnId}:`, error);
+            columnValue = ((_a = row.original) === null || _a === void 0 ? void 0 : _a[filter.columnId]) || '';
+        }
+        return evaluateFilterCondition(columnValue, filter.operator, filter.value, columnType);
+    });
+    return logic === 'AND' ? results.every(Boolean) : results.some(Boolean);
+}
+const getCombinedFilteredRowModel = () => {
+    return (table) => () => {
+        var _a;
+        const baseFilteredModel = (0, react_table_1.getFilteredRowModel)()(table)();
+        const { filters, logic } = (_a = table.getState().customColumnFilter) !== null && _a !== void 0 ? _a : {
+            filters: [],
+            logic: 'AND',
+        };
+        if (!filters.length)
+            return baseFilteredModel;
+        const filteredRows = baseFilteredModel.rows.filter(row => matchesCustomColumnFilters(row, filters, logic));
+        const flatRows = [];
+        const rowsById = {};
+        const addRow = (row) => {
+            var _a;
+            flatRows.push(row);
+            rowsById[row.id] = row;
+            (_a = row.subRows) === null || _a === void 0 ? void 0 : _a.forEach(addRow);
+        };
+        filteredRows.forEach(addRow);
+        return {
+            rows: filteredRows,
+            flatRows,
+            rowsById,
+        };
+    };
+};
+exports.getCombinedFilteredRowModel = getCombinedFilteredRowModel;
+function evaluateFilterCondition(columnValue, operator, filterValue, type = 'text') {
+    function toMoment(val) {
+        if (!val)
+            return null;
+        const m = (0, moment_1.default)(val);
+        return m.isValid() ? m : null;
+    }
+    if (type === 'date') {
+        const mCol = toMoment(columnValue);
+        const mFilter = toMoment(filterValue);
+        if (!mCol || !mFilter)
+            return false;
+        switch (operator) {
+            case 'equals':
+                return mCol.isSame(mFilter, 'day');
+            case 'notEquals':
+                return !mCol.isSame(mFilter, 'day');
+            case 'after':
+                return mCol.isAfter(mFilter, 'day');
+            case 'before':
+                return mCol.isBefore(mFilter, 'day');
+            case 'isEmpty':
+                return !columnValue;
+            case 'isNotEmpty':
+                return !!columnValue;
+            default:
+                return true;
+        }
+    }
+    if (type === 'boolean') {
+        switch (operator) {
+            case 'is':
+                if (filterValue === 'any')
+                    return true;
+                if (filterValue === 'true')
+                    return (columnValue === true || columnValue === 'true' || columnValue === 1 || columnValue === '1' || columnValue === 'Yes' || columnValue === 'yes');
+                if (filterValue === 'false')
+                    return (columnValue === false || columnValue === 'false' || columnValue === 0 || columnValue === '0' || columnValue === 'No' || columnValue === 'no');
+                return false;
+            default:
+                return true;
+        }
+    }
+    if (type === 'select') {
+        if (operator === 'in' || operator === 'notIn') {
+            if (Array.isArray(filterValue)) {
+                if (operator === 'in')
+                    return filterValue.includes(columnValue);
+                if (operator === 'notIn')
+                    return !filterValue.includes(columnValue);
+            }
+            return false;
+        }
+        if (operator === 'equals' || operator === 'notEquals') {
+            return operator === 'equals'
+                ? columnValue === filterValue
+                : columnValue !== filterValue;
+        }
+    }
+    switch (operator) {
+        case 'contains':
+            return String(columnValue).toLowerCase().includes(String(filterValue).toLowerCase());
+        case 'notContains':
+            return !String(columnValue).toLowerCase().includes(String(filterValue).toLowerCase());
+        case 'startsWith':
+            return String(columnValue).toLowerCase().startsWith(String(filterValue).toLowerCase());
+        case 'endsWith':
+            return String(columnValue).toLowerCase().endsWith(String(filterValue).toLowerCase());
+        case 'isEmpty':
+            return columnValue === null || columnValue === undefined || columnValue === '';
+        case 'isNotEmpty':
+            return columnValue !== null && columnValue !== undefined && columnValue !== '';
+        case 'greaterThan':
+            return Number(columnValue) > Number(filterValue);
+        case 'greaterThanOrEqual':
+            return Number(columnValue) >= Number(filterValue);
+        case 'lessThan':
+            return Number(columnValue) < Number(filterValue);
+        case 'lessThanOrEqual':
+            return Number(columnValue) <= Number(filterValue);
+        default:
+            return true;
+    }
+}

package/src/lib/features/custom-selection.feature.d.ts

@@ -0,0 +1,46 @@
+import { TableFeature, RowData, Updater, Row } from '@tanstack/react-table';
+export interface SelectionState {
+    ids: string[];
+    type: 'include' | 'exclude';
+    selectMode?: 'page' | 'all';
+}
+export type IsRowSelectableFunction<T = any> = (params: {
+    row: T;
+    id: string;
+}) => boolean;
+export type SelectMode = 'page' | 'all';
+export interface CustomSelectionOptions {
+    enableCustomSelection?: boolean;
+    selectMode?: SelectMode;
+    isRowSelectable?: IsRowSelectableFunction;
+    onSelectionStateChange?: (updater: Updater<SelectionState>) => void;
+}
+export interface CustomSelectionTableState {
+    selectionState: SelectionState;
+}
+declare module '@tanstack/table-core' {
+    interface TableState extends CustomSelectionTableState {
+    }
+    interface TableOptionsResolved<TData extends RowData> extends CustomSelectionOptions {
+    }
+    interface Table<TData extends RowData> extends CustomSelectionInstance<TData> {
+    }
+}
+export interface CustomSelectionInstance<TData extends RowData> {
+    setSelectionState: (updater: Updater<SelectionState>) => void;
+    toggleAllRowsSelected: () => void;
+    toggleRowSelected: (rowId: string) => void;
+    selectRow: (rowId: string) => void;
+    deselectRow: (rowId: string) => void;
+    selectAll: () => void;
+    deselectAll: () => void;
+    getIsAllRowsSelected: () => boolean;
+    getIsSomeRowsSelected: () => boolean;
+    getIsRowSelected: (rowId: string) => boolean;
+    getSelectionState: () => SelectionState;
+    getSelectedCount: () => number;
+    getSelectedRows: () => Row<TData>[];
+    getSelectedRowIds: () => string[];
+    canSelectRow: (rowId: string) => boolean;
+}
+export declare const CustomSelectionFeature: TableFeature<any>;