@ackplus/react-tanstack-data-table 1.0.19-beta-0.10 → 1.0.19-beta-0.13

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ColumnCustomFilterControl = ColumnCustomFilterControl;
+exports.ColumnFilterControl = ColumnFilterControl;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const icons_material_1 = require("@mui/icons-material");
 const material_1 = require("@mui/material");
@@ -12,51 +12,51 @@ 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() {
+function ColumnFilterControl() {
     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)) || {
+    const filterState = ((_a = table === null || table === void 0 ? void 0 : table.getColumnFilterState) === 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 filters = filterState.pendingFilters;
+    const filterLogic = filterState.pendingLogic;
+    const activeFiltersCount = ((_c = (_b = table === null || table === void 0 ? void 0 : 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));
+        return table === null || table === void 0 ? void 0 : 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 || '';
+        console.log('addFilter', columnId, operator, filterableColumns);
         if (columnId && !operator) {
-            const column = filterableColumns.find(col => col.id === columnId);
+            const column = filterableColumns === null || filterableColumns === void 0 ? void 0 : 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, '');
+        (_b = table === null || table === void 0 ? void 0 : 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);
+        (_a = table === null || table === void 0 ? void 0 : 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);
+        (_a = table === null || table === void 0 ? void 0 : 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);
+        (_a = table === null || table === void 0 ? void 0 : 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);
+            (_a = table === null || table === void 0 ? void 0 : table.applyPendingColumnFilters) === null || _a === void 0 ? void 0 : _a.call(table);
             if (closeDialog) {
                 closeDialog();
             }
@@ -64,24 +64,24 @@ function ColumnCustomFilterControl() {
     }, [table]);
     const handleLogicChange = (0, react_1.useCallback)((newLogic) => {
         var _a;
-        (_a = table.setPendingFilterLogic) === null || _a === void 0 ? void 0 : _a.call(table, newLogic);
+        (_a = table === null || table === void 0 ? void 0 : 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);
+        (_a = table === null || table === void 0 ? void 0 : 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 column = filterableColumns === null || filterableColumns === void 0 ? void 0 : 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 newColumn = filterableColumns === null || filterableColumns === void 0 ? void 0 : 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);
@@ -115,12 +115,14 @@ function ColumnCustomFilterControl() {
     const hasPendingChanges = pendingFiltersCount > 0 || (filters.length === 0 && hasAppliedFilters);
     (0, react_1.useEffect)(() => {
         var _a;
-        if (filters.length === 0 && filterableColumns.length > 0 && activeFiltersCount === 0) {
+        console.log('useEffect', filters.length, filterableColumns, { activeFiltersCount });
+        if (filters.length === 0 && filterableColumns && (filterableColumns === null || filterableColumns === void 0 ? void 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);
+            console.log('useEffect', firstColumn, columnType, operators, defaultOperator);
+            addFilter(firstColumn === null || firstColumn === void 0 ? void 0 : 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: {

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

@@ -3,7 +3,7 @@ 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_filter_control_1 = require("./column-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");
@@ -17,7 +17,7 @@ function DataTableToolbar({ extraFilter = null, enableGlobalFilter = true, title
     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 ColumnCustomFilterControlSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'columnCustomFilterControl', column_filter_control_1.ColumnFilterControl);
     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);

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

@@ -4,5 +4,6 @@ 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 { ColumnFilterControl } from './column-filter-control';
 export { BulkActionsToolbar } from './bulk-actions-toolbar';
 export type { BulkActionsToolbarProps } from './bulk-actions-toolbar';

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BulkActionsToolbar = exports.TableSizeControl = exports.TableExportControl = exports.ColumnResetControl = exports.ColumnPinningControl = exports.ColumnVisibilityControl = exports.DataTableToolbar = void 0;
+exports.BulkActionsToolbar = exports.ColumnFilterControl = 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");
@@ -13,5 +13,7 @@ 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 column_filter_control_1 = require("./column-filter-control");
+Object.defineProperty(exports, "ColumnFilterControl", { enumerable: true, get: function () { return column_filter_control_1.ColumnFilterControl; } });
 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

@@ -1,5 +1,5 @@
 import { TableFilters } from '../../types';
-import { SelectionState } from '../../features/custom-selection.feature';
+import { SelectionState } from '../../features';
 interface TableExportControlProps {
     exportFilename?: string;
     onServerExport?: (filters?: Partial<TableFilters>, selection?: SelectionState) => Promise<{
@@ -7,9 +7,9 @@ interface TableExportControlProps {
         total: number;
     }>;
     onExportProgress?: (progress: {
-        processedRows: number;
-        totalRows: number;
-        percentage: number;
+        processedRows?: number;
+        totalRows?: number;
+        percentage?: number;
     }) => void;
     onExportComplete?: (result: {
         success: boolean;

package/src/lib/contexts/data-table-context.d.ts

@@ -1,15 +1,15 @@
 import { Table } from '@tanstack/react-table';
 import { ReactNode, RefObject } from 'react';
-import { CustomColumnFilterState, TableSize } from '../types';
+import { ColumnFilterState, TableSize } from '../types';
 import { DataTableApi } from '../types/data-table-api';
 interface DataTableContextValue<T = any> {
     table?: Table<T>;
-    apiRef?: RefObject<DataTableApi<T>>;
+    apiRef?: RefObject<DataTableApi<T> | null>;
     dataMode?: 'client' | 'server';
     tableSize?: TableSize;
     onTableSizeChange?: (size: TableSize) => void;
-    customColumnsFilter?: CustomColumnFilterState;
-    onChangeCustomColumnsFilter?: (filter: CustomColumnFilterState) => void;
+    columnFilter?: ColumnFilterState;
+    onChangeColumnFilter?: (filter: ColumnFilterState) => void;
     slots?: Record<string, any>;
     slotProps?: Record<string, any>;
     isExporting?: boolean;
@@ -17,9 +17,9 @@ interface DataTableContextValue<T = any> {
     onCancelExport?: () => void;
     exportFilename?: string;
     onExportProgress?: (progress: {
-        processedRows: number;
-        totalRows: number;
-        percentage: number;
+        processedRows?: number;
+        totalRows?: number;
+        percentage?: number;
     }) => void;
     onExportComplete?: (result: {
         success: boolean;
@@ -38,6 +38,6 @@ interface DataTableContextValue<T = any> {
 interface DataTableProviderProps<T = any> extends DataTableContextValue<T> {
     children: ReactNode;
 }
-export declare function DataTableProvider<T = any>({ children, table, apiRef, dataMode, tableSize, onTableSizeChange, customColumnsFilter, onChangeCustomColumnsFilter, slots, slotProps, isExporting, exportController, onCancelExport, exportFilename, onExportProgress, onExportComplete, onExportError, onServerExport, }: DataTableProviderProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTableProvider<T = any>({ children, table, apiRef, dataMode, tableSize, onTableSizeChange, columnFilter, onChangeColumnFilter, slots, slotProps, isExporting, exportController, onCancelExport, exportFilename, onExportProgress, onExportComplete, onExportError, onServerExport, }: DataTableProviderProps<T>): import("react/jsx-runtime").JSX.Element;
 export declare function useDataTableContext<T = any>(): DataTableContextValue<T>;
 export {};

package/src/lib/contexts/data-table-context.js

@@ -5,15 +5,15 @@ exports.useDataTableContext = useDataTableContext;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const DataTableContext = (0, react_1.createContext)(null);
-function DataTableProvider({ children, table, apiRef, dataMode, tableSize, onTableSizeChange, customColumnsFilter, onChangeCustomColumnsFilter, slots = {}, slotProps = {}, isExporting, exportController, onCancelExport, exportFilename, onExportProgress, onExportComplete, onExportError, onServerExport, }) {
+function DataTableProvider({ children, table, apiRef, dataMode, tableSize, onTableSizeChange, columnFilter, onChangeColumnFilter, slots = {}, slotProps = {}, isExporting, exportController, onCancelExport, exportFilename, onExportProgress, onExportComplete, onExportError, onServerExport, }) {
     const value = (0, react_1.useMemo)(() => ({
         table,
         apiRef,
         dataMode,
         tableSize,
         onTableSizeChange,
-        customColumnsFilter,
-        onChangeCustomColumnsFilter,
+        columnFilter,
+        onChangeColumnFilter,
         slots,
         slotProps,
         isExporting,
@@ -30,8 +30,8 @@ function DataTableProvider({ children, table, apiRef, dataMode, tableSize, onTab
         dataMode,
         tableSize,
         onTableSizeChange,
-        customColumnsFilter,
-        onChangeCustomColumnsFilter,
+        columnFilter,
+        onChangeColumnFilter,
         slots,
         slotProps,
         isExporting,

package/src/lib/examples/server-side-fetching-example.js

@@ -30,10 +30,12 @@ function ServerSideFetchingExample() {
     const [selectionInfo, setSelectionInfo] = (0, react_1.useState)(null);
     const [lastFetchParams, setLastFetchParams] = (0, react_1.useState)(null);
     const [fetchCount, setFetchCount] = (0, react_1.useState)(0);
+    const [tab, setTab] = (0, react_1.useState)('all');
     const apiRef = (0, react_1.useRef)(null);
     const handleFetchData = (0, react_1.useCallback)((filters) => tslib_1.__awaiter(this, void 0, void 0, function* () {
         var _a, _b, _c;
         console.log('🔄 Fetching data with filters:', filters);
+        console.log('🔄 Tab:', { tab }, 'Current tab:');
         setLoading(true);
         setError(null);
         setLastFetchParams(filters);
@@ -48,9 +50,9 @@ function ServerSideFetchingExample() {
                     employee.department.toLowerCase().includes(searchTerm) ||
                     employee.role.toLowerCase().includes(searchTerm));
             }
-            if ((_b = (_a = filters.customColumnsFilter) === null || _a === void 0 ? void 0 : _a.filters) === null || _b === void 0 ? void 0 : _b.length) {
+            if ((_b = (_a = filters.columnFilter) === null || _a === void 0 ? void 0 : _a.filters) === null || _b === void 0 ? void 0 : _b.length) {
                 filteredData = filteredData.filter(employee => {
-                    return filters.customColumnsFilter.filters.every((filter) => {
+                    return filters.columnFilter.filters.every((filter) => {
                         const value = employee[filter.columnId];
                         const filterValue = filter.value;
                         switch (filter.operator) {
@@ -120,6 +122,13 @@ function ServerSideFetchingExample() {
         console.log('🔄 Selection changed:', selection);
         setSelectionInfo(selection);
     }, []);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        console.log('🔄 Tab changed:', tab);
+        if (tab && tab !== 'all') {
+            (_a = apiRef.current) === null || _a === void 0 ? void 0 : _a.data.refresh();
+        }
+    }, [tab]);
     const handleServerExport = (0, react_1.useCallback)((filters, selection) => tslib_1.__awaiter(this, void 0, void 0, function* () {
         console.log('📤 Exporting data with filters:', filters);
         console.log('📤 Export selection:', selection);
@@ -196,7 +205,7 @@ function ServerSideFetchingExample() {
             accessorFn: (row) => new Date(row.joinDate).toLocaleDateString(),
         },
     ];
-    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: "Server-Side Data Fetching Example" }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body1", color: "text.secondary", paragraph: true, children: "Demonstrates server-side data fetching with proper API ref state management and page-based selection. The Salary column has `hideInExport: true` so it will be excluded from exports." }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", spacing: 2, sx: { mb: 3 }, children: [(0, jsx_runtime_1.jsx)(material_1.Card, { variant: "outlined", children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, { sx: { pb: 2 }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", color: "primary", children: fetchCount }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", color: "text.secondary", children: "API Calls Made" })] }) }), (0, jsx_runtime_1.jsx)(material_1.Card, { variant: "outlined", children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, { sx: { pb: 2 }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", color: "secondary", children: (selectionInfo === null || selectionInfo === void 0 ? void 0 : selectionInfo.ids.length) || 0 }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", color: "text.secondary", children: "Selected Items" })] }) }), (0, jsx_runtime_1.jsx)(material_1.Card, { variant: "outlined", children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, { sx: { pb: 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: "h6", color: loading ? 'warning.main' : 'success.main', children: loading ? 'Loading...' : 'Ready' }), loading && (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 16 })] }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", color: "text.secondary", children: "Server Status" })] }) })] }), error && ((0, jsx_runtime_1.jsx)(material_1.Alert, { severity: "error", sx: { mb: 3 }, children: error })), (0, jsx_runtime_1.jsx)(material_1.Card, { sx: { mb: 3 }, children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", gutterBottom: true, children: "API Controls (via apiRef)" }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", spacing: 2, flexWrap: "wrap", children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", size: "small", onClick: () => {
+    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: "Server-Side Data Fetching Example" }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body1", color: "text.secondary", paragraph: true, children: "Demonstrates server-side data fetching with proper API ref state management and page-based selection. The Salary column has `hideInExport: true` so it will be excluded from exports." }), (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: () => setTab('all'), children: "All" }), (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: () => setTab('active'), children: "Active" }), (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: () => setTab('inactive'), children: "Inactive" }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", spacing: 2, sx: { mb: 3 }, children: [(0, jsx_runtime_1.jsx)(material_1.Card, { variant: "outlined", children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, { sx: { pb: 2 }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", color: "primary", children: fetchCount }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", color: "text.secondary", children: "API Calls Made" })] }) }), (0, jsx_runtime_1.jsx)(material_1.Card, { variant: "outlined", children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, { sx: { pb: 2 }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", color: "secondary", children: (selectionInfo === null || selectionInfo === void 0 ? void 0 : selectionInfo.ids.length) || 0 }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", color: "text.secondary", children: "Selected Items" })] }) }), (0, jsx_runtime_1.jsx)(material_1.Card, { variant: "outlined", children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, { sx: { pb: 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: "h6", color: loading ? 'warning.main' : 'success.main', children: loading ? 'Loading...' : 'Ready' }), loading && (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 16 })] }), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", color: "text.secondary", children: "Server Status" })] }) })] }), error && ((0, jsx_runtime_1.jsx)(material_1.Alert, { severity: "error", sx: { mb: 3 }, children: error })), (0, jsx_runtime_1.jsx)(material_1.Card, { sx: { mb: 3 }, children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", gutterBottom: true, children: "API Controls (via apiRef)" }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", spacing: 2, flexWrap: "wrap", children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "outlined", size: "small", onClick: () => {
                                         var _a;
                                         const state = (_a = apiRef.current) === null || _a === void 0 ? void 0 : _a.selection.getSelectionState();
                                         console.log('Current Selection State:', state);

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

@@ -1,5 +1,5 @@
 import { Table, TableFeature, RowData, Updater, RowModel } from '@tanstack/react-table';
-import type { CustomColumnFilterState } from '../types/table.types';
+import type { ColumnFilterState } from '../types/table.types';
 export interface ColumnFilterRule {
     id: string;
     columnId: string;
@@ -7,24 +7,24 @@ export interface ColumnFilterRule {
     value: any;
     columnType?: string;
 }
-export interface CustomColumnFilterOptions {
-    enableCustomColumnFilter?: boolean;
-    onCustomColumnFilterChange?: (updater: Updater<CustomColumnFilterState>) => void;
-    onCustomColumnFilterApply?: (state: CustomColumnFilterState) => void;
+export interface ColumnFilterOptions {
+    enableAdvanceColumnFilter?: boolean;
+    onColumnFilterChange?: (updater: Updater<ColumnFilterState>) => void;
+    onColumnFilterApply?: (state: ColumnFilterState) => void;
 }
-export interface CustomColumnFilterTableState {
-    customColumnFilter: CustomColumnFilterState;
+export interface ColumnFilterTableState {
+    columnFilter: ColumnFilterState;
 }
 declare module '@tanstack/table-core' {
-    interface TableState extends CustomColumnFilterTableState {
+    interface TableState extends ColumnFilterTableState {
     }
-    interface TableOptionsResolved<TData extends RowData> extends CustomColumnFilterOptions {
+    interface TableOptionsResolved<TData extends RowData> extends ColumnFilterOptions {
     }
-    interface Table<TData extends RowData> extends CustomColumnFilterInstance<TData> {
+    interface Table<TData extends RowData> extends ColumnFilterInstance<TData> {
     }
 }
-export interface CustomColumnFilterInstance<TData extends RowData> {
-    setCustomColumnFilter: (updater: Updater<CustomColumnFilterState>) => void;
+export interface ColumnFilterInstance<TData extends RowData> {
+    setColumnFilterState: (updater: Updater<ColumnFilterState>) => void;
     addPendingColumnFilter: (columnId: string, operator: string, value: any) => void;
     updatePendingColumnFilter: (filterId: string, updates: Partial<ColumnFilterRule>) => void;
     removePendingColumnFilter: (filterId: string) => void;
@@ -38,8 +38,8 @@ export interface CustomColumnFilterInstance<TData extends RowData> {
     setFilterLogic: (logic: 'AND' | 'OR') => void;
     getActiveColumnFilters: () => ColumnFilterRule[];
     getPendingColumnFilters: () => ColumnFilterRule[];
-    getCustomColumnFilterState: () => CustomColumnFilterState;
+    getColumnFilterState: () => ColumnFilterState;
 }
-export declare const CustomColumnFilterFeature: TableFeature<any>;
+export declare const ColumnFilterFeature: 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 → column-filter.feature.js}

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getCombinedFilteredRowModel = exports.CustomColumnFilterFeature = void 0;
+exports.getCombinedFilteredRowModel = exports.ColumnFilterFeature = 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 = {
+exports.ColumnFilterFeature = {
     getInitialState: (state) => {
-        return Object.assign({ customColumnFilter: {
+        return Object.assign({ columnFilter: {
                 filters: [],
                 logic: 'AND',
                 pendingFilters: [],
@@ -16,23 +16,28 @@ exports.CustomColumnFilterFeature = {
     },
     getDefaultOptions: (table) => {
         return {
-            enableCustomColumnFilter: true,
-            onCustomColumnFilterChange: (0, react_table_1.makeStateUpdater)('customColumnFilter', table),
-            onCustomColumnFilterApply: (state) => {
+            enableAdvanceColumnFilter: true,
+            onColumnFilterChange: (0, react_table_1.makeStateUpdater)('columnFilter', table),
+            onColumnFilterApply: (state) => {
             },
         };
     },
     createTable: (table) => {
-        table.setCustomColumnFilter = (updater) => {
+        table.setColumnFilterState = (updater) => {
             var _a, _b;
+            if (!table.options.enableAdvanceColumnFilter)
+                return;
             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);
+            return (_b = (_a = table.options).onColumnFilterChange) === null || _b === void 0 ? void 0 : _b.call(_a, safeUpdater);
         };
         table.addPendingColumnFilter = (columnId, operator, value) => {
-            table.setCustomColumnFilter((old) => {
+            if (!table.options.enableAdvanceColumnFilter)
+                return;
+            console.log('addPendingColumnFilter', columnId, operator, value);
+            table.setColumnFilterState((old) => {
                 const newFilter = {
                     id: `filter_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`,
                     columnId,
@@ -43,32 +48,44 @@ exports.CustomColumnFilterFeature = {
             });
         };
         table.updatePendingColumnFilter = (filterId, updates) => {
-            table.setCustomColumnFilter((old) => {
+            if (!table.options.enableAdvanceColumnFilter)
+                return;
+            table.setColumnFilterState((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) })));
+            if (!table.options.enableAdvanceColumnFilter)
+                return;
+            table.setColumnFilterState((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: [] })));
+            if (!table.options.enableAdvanceColumnFilter)
+                return;
+            table.setColumnFilterState((old) => (Object.assign(Object.assign({}, old), { pendingFilters: [] })));
         };
         table.setPendingFilterLogic = (logic) => {
-            table.setCustomColumnFilter((old) => (Object.assign(Object.assign({}, old), { pendingLogic: logic })));
+            if (!table.options.enableAdvanceColumnFilter)
+                return;
+            table.setColumnFilterState((old) => (Object.assign(Object.assign({}, old), { pendingLogic: logic })));
         };
         table.applyPendingColumnFilters = () => {
-            table.setCustomColumnFilter((old) => {
+            if (!table.options.enableAdvanceColumnFilter)
+                return;
+            table.setColumnFilterState((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);
+                    (_b = (_a = table.options).onColumnFilterApply) === null || _b === void 0 ? void 0 : _b.call(_a, newState);
                 }, 0);
                 return newState;
             });
         };
         table.addColumnFilter = (columnId, operator, value) => {
-            table.setCustomColumnFilter((old) => {
+            if (!table.options.enableAdvanceColumnFilter)
+                return;
+            table.setColumnFilterState((old) => {
                 const newFilter = {
                     id: `filter_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`,
                     columnId,
@@ -79,30 +96,38 @@ exports.CustomColumnFilterFeature = {
             });
         };
         table.updateColumnFilter = (filterId, updates) => {
-            table.setCustomColumnFilter((old) => {
+            if (!table.options.enableAdvanceColumnFilter)
+                return;
+            table.setColumnFilterState((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) })));
+            if (!table.options.enableAdvanceColumnFilter)
+                return;
+            table.setColumnFilterState((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: [] })));
+            if (!table.options.enableAdvanceColumnFilter)
+                return;
+            table.setColumnFilterState((old) => (Object.assign(Object.assign({}, old), { filters: [] })));
         };
         table.setFilterLogic = (logic) => {
-            table.setCustomColumnFilter((old) => (Object.assign(Object.assign({}, old), { logic })));
+            if (!table.options.enableAdvanceColumnFilter)
+                return;
+            table.setColumnFilterState((old) => (Object.assign(Object.assign({}, old), { logic })));
         };
         table.getActiveColumnFilters = () => {
-            const state = table.getState().customColumnFilter;
+            const state = table.getState().columnFilter;
             return state.filters.filter((f) => f.columnId && f.operator);
         };
         table.getPendingColumnFilters = () => {
-            const state = table.getState().customColumnFilter;
+            const state = table.getState().columnFilter;
             return state.pendingFilters.filter((f) => f.columnId && f.operator);
         };
-        table.getCustomColumnFilterState = () => {
-            return table.getState().customColumnFilter;
+        table.getColumnFilterState = () => {
+            return table.getState().columnFilter;
         };
     },
 };
@@ -137,11 +162,11 @@ 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 : {
+        const { filters, logic } = (_a = table.getState().columnFilter) !== null && _a !== void 0 ? _a : {
             filters: [],
             logic: 'AND',
         };
-        if (!filters.length)
+        if (!filters.length || !table.options.enableAdvanceColumnFilter)
             return baseFilteredModel;
         const filteredRows = baseFilteredModel.rows.filter(row => matchesCustomColumnFilters(row, filters, logic));
         const flatRows = [];

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

@@ -1,2 +1,2 @@
-export { CustomColumnFilterFeature, matchesCustomColumnFilters, type ColumnFilterRule, type CustomColumnFilterOptions, type CustomColumnFilterTableState, type CustomColumnFilterInstance, } from './custom-column-filter.feature';
-export { CustomSelectionFeature, type SelectionState, type SelectMode, type CustomSelectionOptions, type CustomSelectionTableState, type CustomSelectionInstance, } from './custom-selection.feature';
+export { ColumnFilterFeature, matchesCustomColumnFilters, type ColumnFilterRule, type ColumnFilterOptions, type ColumnFilterTableState, type ColumnFilterInstance, } from './column-filter.feature';
+export { SelectionFeature, type SelectionState, type SelectMode, type SelectionOptions, type SelectionTableState, type SelectionInstance, } from './selection.feature';

package/src/lib/features/index.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CustomSelectionFeature = exports.matchesCustomColumnFilters = exports.CustomColumnFilterFeature = void 0;
-var custom_column_filter_feature_1 = require("./custom-column-filter.feature");
-Object.defineProperty(exports, "CustomColumnFilterFeature", { enumerable: true, get: function () { return custom_column_filter_feature_1.CustomColumnFilterFeature; } });
-Object.defineProperty(exports, "matchesCustomColumnFilters", { enumerable: true, get: function () { return custom_column_filter_feature_1.matchesCustomColumnFilters; } });
-var custom_selection_feature_1 = require("./custom-selection.feature");
-Object.defineProperty(exports, "CustomSelectionFeature", { enumerable: true, get: function () { return custom_selection_feature_1.CustomSelectionFeature; } });
+exports.SelectionFeature = exports.matchesCustomColumnFilters = exports.ColumnFilterFeature = void 0;
+var column_filter_feature_1 = require("./column-filter.feature");
+Object.defineProperty(exports, "ColumnFilterFeature", { enumerable: true, get: function () { return column_filter_feature_1.ColumnFilterFeature; } });
+Object.defineProperty(exports, "matchesCustomColumnFilters", { enumerable: true, get: function () { return column_filter_feature_1.matchesCustomColumnFilters; } });
+var selection_feature_1 = require("./selection.feature");
+Object.defineProperty(exports, "SelectionFeature", { enumerable: true, get: function () { return selection_feature_1.SelectionFeature; } });

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

@@ -9,24 +9,24 @@ export type IsRowSelectableFunction<T = any> = (params: {
     id: string;
 }) => boolean;
 export type SelectMode = 'page' | 'all';
-export interface CustomSelectionOptions {
-    enableCustomSelection?: boolean;
+export interface SelectionOptions {
+    enableAdvanceSelection?: boolean;
     selectMode?: SelectMode;
     isRowSelectable?: IsRowSelectableFunction;
     onSelectionStateChange?: (updater: Updater<SelectionState>) => void;
 }
-export interface CustomSelectionTableState {
+export interface SelectionTableState {
     selectionState: SelectionState;
 }
 declare module '@tanstack/table-core' {
-    interface TableState extends CustomSelectionTableState {
+    interface TableState extends SelectionTableState {
     }
-    interface TableOptionsResolved<TData extends RowData> extends CustomSelectionOptions {
+    interface TableOptionsResolved<TData extends RowData> extends SelectionOptions {
     }
-    interface Table<TData extends RowData> extends CustomSelectionInstance<TData> {
+    interface Table<TData extends RowData> extends SelectionInstance<TData> {
     }
 }
-export interface CustomSelectionInstance<TData extends RowData> {
+export interface SelectionInstance<TData extends RowData> {
     setSelectionState: (updater: Updater<SelectionState>) => void;
     toggleAllRowsSelected: () => void;
     toggleRowSelected: (rowId: string) => void;
@@ -43,4 +43,4 @@ export interface CustomSelectionInstance<TData extends RowData> {
     getSelectedRowIds: () => string[];
     canSelectRow: (rowId: string) => boolean;
 }
-export declare const CustomSelectionFeature: TableFeature<any>;
+export declare const SelectionFeature: TableFeature<any>;