@ackplus/react-tanstack-data-table 1.0.19-beta-0.9 → 1.0.19-beta-0.12

package/README.md

@@ -7,7 +7,7 @@ A powerful, feature-rich, and highly customizable React data table component bui
 - 🚀 **High Performance**: Built on TanStack Table for excellent performance with large datasets
 - 🎨 **Material Design**: Beautiful UI components using MUI with consistent design system
 - 📱 **Responsive**: Mobile-friendly responsive design with adaptive layouts
-- 🔍 **Advanced Filtering**: Global search, column filters, and custom filter components
+- 🔍 **Advanced Filtering**: Global search, column filters, and filter components
 - 📊 **Multi-Column Sorting**: Powerful sorting with multiple columns support
 - 📄 **Flexible Pagination**: Client-side and server-side pagination options
 - 🎯 **Column Management**: Show/hide, resize, reorder, and pin columns
@@ -328,7 +328,7 @@ function SelectableTable() {
 }
 ```
 
-### Custom Column Filters
+### Column Filters
 
 ```tsx
 const columns = [
@@ -573,10 +573,10 @@ If you find this package helpful and want to support its development, consider m
 
 <div align="center">
 
-[![PayPal](https://img.shields.io/badge/PayPal-00457C?style=for-the-badge&logo=paypal&logoColor=white)](https://www.paypal.com/paypalme/my/profile)
+[![PayPal](https://img.shields.io/badge/PayPal-00457C?style=for-the-badge&logo=paypal&logoColor=white)](https://www.paypal.com/paypalme/ckhandla94)
 [![Razorpay](https://img.shields.io/badge/Razorpay-02042B?style=for-the-badge&logo=razorpay&logoColor=white)](https://razorpay.me/@ackplus)
 
-**[💳 PayPal](https://www.paypal.com/paypalme/my/profile)** • **[💳 Razorpay](https://razorpay.me/@ackplus)**
+**[💳 PayPal](https://www.paypal.com/paypalme/ckhandla94)** • **[💳 Razorpay](https://razorpay.me/@ackplus)**
 
 </div>
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ackplus/react-tanstack-data-table",
   "type": "commonjs",
-  "version": "1.0.19-beta-0.9",
+  "version": "1.0.19-beta-0.12",
   "description": "A powerful React data table component built with MUI and TanStack Table",
   "keywords": [
     "react",

package/src/index.d.ts

@@ -14,6 +14,7 @@ export * from './lib/hooks';
 export * from './lib/types';
 export type { Column, ColumnDef, Row, Table, Header, Cell, SortingState, ColumnFiltersState, VisibilityState, ColumnOrderState, ColumnPinningState, PaginationState, } from '@tanstack/react-table';
 export * from './lib/features';
+export { ServerSideTest } from './lib/examples/server-side-test';
 export { CustomColumnFilterExample } from './lib/examples/custom-column-filter-example';
 export { SimpleLocalExample } from './lib/examples/simple-local-example';
 export { AdvancedFeaturesExample } from './lib/examples/advanced-features-example';

package/src/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AdvancedFeaturesExample = exports.SimpleLocalExample = exports.CustomColumnFilterExample = exports.DataTableToolbar = exports.BulkActionsToolbar = exports.TableSizeControl = exports.TableExportControl = exports.ColumnResetControl = exports.ColumnPinningControl = exports.ColumnVisibilityControl = exports.DataTable = void 0;
+exports.AdvancedFeaturesExample = exports.SimpleLocalExample = exports.CustomColumnFilterExample = exports.ServerSideTest = exports.DataTableToolbar = exports.BulkActionsToolbar = exports.TableSizeControl = exports.TableExportControl = exports.ColumnResetControl = exports.ColumnPinningControl = exports.ColumnVisibilityControl = exports.DataTable = void 0;
 const tslib_1 = require("tslib");
 var table_1 = require("./lib/components/table");
 Object.defineProperty(exports, "DataTable", { enumerable: true, get: function () { return table_1.DataTable; } });
@@ -23,6 +23,8 @@ tslib_1.__exportStar(require("./lib/utils/table-helpers"), exports);
 tslib_1.__exportStar(require("./lib/hooks"), exports);
 tslib_1.__exportStar(require("./lib/types"), exports);
 tslib_1.__exportStar(require("./lib/features"), exports);
+var server_side_test_1 = require("./lib/examples/server-side-test");
+Object.defineProperty(exports, "ServerSideTest", { enumerable: true, get: function () { return server_side_test_1.ServerSideTest; } });
 var custom_column_filter_example_1 = require("./lib/examples/custom-column-filter-example");
 Object.defineProperty(exports, "CustomColumnFilterExample", { enumerable: true, get: function () { return custom_column_filter_example_1.CustomColumnFilterExample; } });
 var simple_local_example_1 = require("./lib/examples/simple-local-example");

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import { DataTableProps } from './data-table.types';
 import { DataTableApi } from '../../types/data-table-api';
-export declare const DataTable: import("react").ForwardRefExoticComponent<DataTableProps<any> & import("react").RefAttributes<DataTableApi<any>>>;
+export declare const DataTable: React.ForwardRefExoticComponent<DataTableProps<any> & React.RefAttributes<DataTableApi<any>>>;

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

@@ -5,7 +5,7 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const react_table_1 = require("@tanstack/react-table");
-const custom_column_filter_feature_1 = require("../../features/custom-column-filter.feature");
+const column_filter_feature_1 = require("../../features/column-filter.feature");
 const features_1 = require("../../features");
 const react_virtual_1 = require("@tanstack/react-virtual");
 const react_1 = require("react");
@@ -40,40 +40,108 @@ const DEFAULT_INITIAL_STATE = {
         pendingLogic: 'AND',
     },
 };
-exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, columns, data = [], totalRow = 0, idKey = 'id', extraFilter = null, footerFilter = null, dataMode = 'client', initialLoadData = true, onFetchData, onDataStateChange, enableRowSelection = false, enableMultiRowSelection = true, selectMode = 'page', isRowSelectable, onSelectionChange, enableBulkActions = false, bulkActions = null, enableColumnResizing = false, columnResizeMode = 'onChange', enableColumnDragging = false, onColumnDragEnd, enableColumnPinning = false, onColumnPinningChange, enableExpanding = false, getRowCanExpand, renderSubComponent, enablePagination = true, paginationMode = 'client', enableGlobalFilter = true, enableColumnFilter = false, filterMode = 'client', enableSorting = true, sortingMode = 'client', onSortingChange, exportFilename = 'export', onExportProgress, onExportComplete, onExportError, onServerExport, onExportCancel, enableHover = true, enableStripes = false, tableContainerProps = {}, tableProps = {}, fitToScreen = true, tableSize: initialTableSize = 'medium', enableStickyHeaderOrFooter = false, maxHeight = '400px', enableVirtualization = false, estimateRowHeight = 52, enableColumnVisibility = true, enableTableSizeControl = true, enableExport = true, enableReset = true, loading = false, emptyMessage = 'No data available', skeletonRows = 5, onColumnFiltersChange, onDataChange, slots = {}, slotProps = {}, }, ref) {
+exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, columns, data = [], totalRow = 0, idKey = 'id', extraFilter = null, footerFilter = null, dataMode = 'client', initialLoadData = true, onFetchData, onDataStateChange, enableRowSelection = false, enableMultiRowSelection = true, selectMode = 'page', isRowSelectable, onSelectionChange, enableBulkActions = false, bulkActions, enableColumnResizing = false, columnResizeMode = 'onChange', enableColumnDragging = false, onColumnDragEnd, enableColumnPinning = false, onColumnPinningChange, enableExpanding = false, getRowCanExpand, renderSubComponent, enablePagination = true, paginationMode = 'client', enableGlobalFilter = true, enableColumnFilter = false, filterMode = 'client', enableSorting = true, sortingMode = 'client', onSortingChange, exportFilename = 'export', onExportProgress, onExportComplete, onExportError, onServerExport, onExportCancel, enableHover = true, enableStripes = false, tableContainerProps = {}, tableProps = {}, fitToScreen = true, tableSize: initialTableSize = 'medium', enableStickyHeaderOrFooter = false, maxHeight = '400px', enableVirtualization = false, estimateRowHeight = 52, enableColumnVisibility = true, enableTableSizeControl = true, enableExport = true, enableReset = true, loading = false, emptyMessage = 'No data available', skeletonRows = 5, onColumnFiltersChange, onDataChange, slots = {}, slotProps = {}, }, ref) {
     var _a;
     const isServerMode = dataMode === 'server';
     const isServerPagination = paginationMode === 'server' || isServerMode;
     const isServerFiltering = filterMode === 'server' || isServerMode;
     const isServerSorting = sortingMode === 'server' || isServerMode;
-    const tableContainerRef = (0, react_1.useRef)(null);
-    const initialStateConfig = (0, react_1.useMemo)(() => {
-        return Object.assign(Object.assign({}, DEFAULT_INITIAL_STATE), initialState);
-    }, [initialState]);
-    const [sorting, setSorting] = (0, react_1.useState)(initialStateConfig.sorting);
-    const [pagination, setPagination] = (0, react_1.useState)(initialStateConfig.pagination);
-    const [globalFilter, setGlobalFilter] = (0, react_1.useState)(initialStateConfig.globalFilter);
+    const [sorting, setSorting] = (0, react_1.useState)(DEFAULT_INITIAL_STATE.sorting);
+    const [pagination, setPagination] = (0, react_1.useState)(DEFAULT_INITIAL_STATE.pagination);
+    const [globalFilter, setGlobalFilter] = (0, react_1.useState)(DEFAULT_INITIAL_STATE.globalFilter);
     const [selectionState, setSelectionState] = (0, react_1.useState)((initialState === null || initialState === void 0 ? void 0 : initialState.selectionState) || { ids: [], type: 'include' });
-    const [customColumnsFilter, setCustomColumnsFilter] = (0, react_1.useState)({
+    const [columnFilter, setColumnFilter] = (0, react_1.useState)({
         filters: [],
         logic: 'AND',
         pendingFilters: [],
         pendingLogic: 'AND'
     });
-    const [expanded, setExpanded] = (0, react_1.useState)(initialStateConfig.expanded);
+    const [expanded, setExpanded] = (0, react_1.useState)(DEFAULT_INITIAL_STATE.expanded);
     const [tableSize, setTableSize] = (0, react_1.useState)(initialTableSize);
-    const [columnOrder, setColumnOrder] = (0, react_1.useState)(initialStateConfig.columnOrder);
-    const [columnPinning, setColumnPinning] = (0, react_1.useState)(initialStateConfig.columnPinning);
-    const internalApiRef = (0, react_1.useRef)(null);
-    const { debouncedFetch, isLoading: fetchLoading } = (0, debounced_fetch_utils_1.useDebouncedFetch)(onFetchData);
+    const [columnOrder, setColumnOrder] = (0, react_1.useState)(DEFAULT_INITIAL_STATE.columnOrder);
+    const [columnPinning, setColumnPinning] = (0, react_1.useState)(DEFAULT_INITIAL_STATE.columnPinning);
     const [serverData, setServerData] = (0, react_1.useState)([]);
     const [serverTotal, setServerTotal] = (0, react_1.useState)(0);
+    const [exportController, setExportController] = (0, react_1.useState)(null);
+    const tableContainerRef = (0, react_1.useRef)(null);
+    const internalApiRef = (0, react_1.useRef)(null);
+    const initialStateConfig = (0, react_1.useMemo)(() => {
+        return Object.assign(Object.assign({}, DEFAULT_INITIAL_STATE), initialState);
+    }, [initialState]);
+    (0, react_1.useEffect)(() => {
+        setSorting(initialStateConfig.sorting);
+        setPagination(initialStateConfig.pagination);
+        setGlobalFilter(initialStateConfig.globalFilter);
+        setExpanded(initialStateConfig.expanded);
+        setColumnOrder(initialStateConfig.columnOrder);
+        setColumnPinning(initialStateConfig.columnPinning);
+    }, [initialStateConfig]);
+    const { debouncedFetch, isLoading: fetchLoading } = (0, debounced_fetch_utils_1.useDebouncedFetch)(onFetchData);
+    const tableData = (0, react_1.useMemo)(() => onFetchData ? serverData : data, [onFetchData, serverData, data]);
+    const tableTotalRow = (0, react_1.useMemo)(() => onFetchData ? serverTotal : totalRow, [onFetchData, serverTotal, totalRow]);
+    const tableLoading = (0, react_1.useMemo)(() => onFetchData ? (loading || fetchLoading) : loading, [onFetchData, loading, fetchLoading]);
+    const enhancedColumns = (0, react_1.useMemo)(() => {
+        let columnsMap = [...columns];
+        if (enableExpanding) {
+            const expandingColumnMap = (0, special_columns_utils_1.createExpandingColumn)(Object.assign({}, ((slotProps === null || slotProps === void 0 ? void 0 : slotProps.expandColumn) || {})));
+            columnsMap = [expandingColumnMap, ...columnsMap];
+        }
+        if (enableRowSelection) {
+            const selectionColumnMap = (0, special_columns_utils_1.createSelectionColumn)(Object.assign(Object.assign({}, ((slotProps === null || slotProps === void 0 ? void 0 : slotProps.selectionColumn) || {})), { multiSelect: enableMultiRowSelection }));
+            columnsMap = [selectionColumnMap, ...columnsMap];
+        }
+        return columnsMap;
+    }, [
+        columns,
+        slotProps === null || slotProps === void 0 ? void 0 : slotProps.selectionColumn,
+        slotProps === null || slotProps === void 0 ? void 0 : slotProps.expandColumn,
+        enableRowSelection,
+        enableExpanding,
+        enableMultiRowSelection,
+    ]);
+    const isExporting = (0, react_1.useMemo)(() => exportController !== null, [exportController]);
+    const isSomeRowsSelected = (0, react_1.useMemo)(() => {
+        if (!enableBulkActions || !enableRowSelection)
+            return false;
+        if (selectionState.type === 'exclude') {
+            return selectionState.ids.length < tableTotalRow;
+        }
+        else {
+            return selectionState.ids.length > 0;
+        }
+    }, [enableBulkActions, enableRowSelection, selectionState, tableTotalRow]);
+    const selectedRowCount = (0, react_1.useMemo)(() => {
+        if (!enableBulkActions || !enableRowSelection)
+            return 0;
+        if (selectionState.type === 'exclude') {
+            return tableTotalRow - selectionState.ids.length;
+        }
+        else {
+            return selectionState.ids.length;
+        }
+    }, [enableBulkActions, enableRowSelection, selectionState, tableTotalRow]);
+    const tableWidth = (0, react_1.useMemo)(() => {
+        if (fitToScreen) {
+            return '100%';
+        }
+        if (enableColumnResizing) {
+            return table.getCenterTotalSize();
+        }
+        return '100%';
+    }, [
+        fitToScreen,
+        enableColumnResizing,
+    ]);
+    const tableStyle = (0, react_1.useMemo)(() => ({
+        width: tableWidth,
+        minWidth: '100%',
+    }), [tableWidth]);
     const fetchData = (0, react_1.useCallback)((...args_1) => tslib_1.__awaiter(this, [...args_1], void 0, function* (overrides = {}) {
         if (!onFetchData)
             return;
         const filters = Object.assign({ globalFilter,
             pagination,
-            customColumnsFilter,
+            columnFilter,
             sorting }, overrides);
         const result = yield debouncedFetch(filters);
         if ((result === null || result === void 0 ? void 0 : result.data) && (result === null || result === void 0 ? void 0 : result.total) !== undefined) {
@@ -84,59 +152,39 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
         onFetchData,
         globalFilter,
         pagination,
-        customColumnsFilter,
+        columnFilter,
         sorting,
         debouncedFetch,
     ]);
     const fetchDataRef = (0, react_1.useRef)(fetchData);
     fetchDataRef.current = fetchData;
-    const tableData = (0, react_1.useMemo)(() => onFetchData ? serverData : data, [onFetchData, serverData, data]);
-    const tableTotalRow = (0, react_1.useMemo)(() => onFetchData ? serverTotal : totalRow, [onFetchData, serverTotal, totalRow]);
-    const tableLoading = (0, react_1.useMemo)(() => onFetchData ? (loading || fetchLoading) : loading, [onFetchData, loading, fetchLoading]);
     const handleSelectionStateChange = (0, react_1.useCallback)((updaterOrValue) => {
         setSelectionState((prevState) => {
             const newSelectionState = typeof updaterOrValue === 'function'
                 ? updaterOrValue(prevState)
                 : updaterOrValue;
-            if (onSelectionChange) {
-                onSelectionChange(newSelectionState);
-            }
+            setTimeout(() => {
+                if (onSelectionChange) {
+                    onSelectionChange(newSelectionState);
+                }
+            }, 0);
             return newSelectionState;
         });
     }, [onSelectionChange]);
     const handleColumnFilterStateChange = (0, react_1.useCallback)((filterState) => {
         if (filterState && typeof filterState === 'object') {
-            setCustomColumnsFilter(filterState);
-            if (onColumnFiltersChange) {
-                onColumnFiltersChange(filterState);
-            }
-        }
-    }, [
-        onColumnFiltersChange,
-    ]);
-    const enhancedColumns = (0, react_1.useMemo)(() => {
-        let columnsMap = [...columns];
-        if (enableExpanding) {
-            const expandingColumnMap = (0, special_columns_utils_1.createExpandingColumn)(Object.assign({}, ((slotProps === null || slotProps === void 0 ? void 0 : slotProps.expandColumn) || {})));
-            columnsMap = [expandingColumnMap, ...columnsMap];
-        }
-        if (enableRowSelection) {
-            const selectionColumnMap = (0, special_columns_utils_1.createSelectionColumn)(Object.assign(Object.assign({}, ((slotProps === null || slotProps === void 0 ? void 0 : slotProps.selectionColumn) || {})), { multiSelect: enableMultiRowSelection }));
-            columnsMap = [selectionColumnMap, ...columnsMap];
+            setColumnFilter(filterState);
+            setTimeout(() => {
+                if (onColumnFiltersChange) {
+                    onColumnFiltersChange(filterState);
+                }
+            }, 0);
         }
-        return columnsMap;
-    }, [
-        columns,
-        slotProps === null || slotProps === void 0 ? void 0 : slotProps.selectionColumn,
-        slotProps === null || slotProps === void 0 ? void 0 : slotProps.expandColumn,
-        enableRowSelection,
-        enableExpanding,
-        enableMultiRowSelection,
-    ]);
+    }, [onColumnFiltersChange]);
     const notifyDataStateChange = (0, react_1.useCallback)((overrides = {}) => {
         if (onDataStateChange) {
             const currentState = Object.assign({ globalFilter,
-                customColumnsFilter,
+                columnFilter,
                 sorting,
                 pagination,
                 columnOrder,
@@ -146,7 +194,7 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
     }, [
         onDataStateChange,
         globalFilter,
-        customColumnsFilter,
+        columnFilter,
         sorting,
         pagination,
         columnOrder,
@@ -171,7 +219,9 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
             });
         }
         else if (onDataStateChange) {
-            stateChangeRef.current({ sorting: newSorting });
+            setTimeout(() => {
+                stateChangeRef.current({ sorting: newSorting });
+            }, 0);
         }
     }, [
         sorting,
@@ -181,17 +231,23 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
         onDataStateChange,
     ]);
     const handleColumnOrderChange = (0, react_1.useCallback)((updatedColumnOrder) => {
-        setColumnOrder(updatedColumnOrder);
+        const newColumnOrder = typeof updatedColumnOrder === 'function'
+            ? updatedColumnOrder(columnOrder)
+            : updatedColumnOrder;
+        setColumnOrder(newColumnOrder);
         if (onColumnDragEnd) {
-            onColumnDragEnd(updatedColumnOrder);
+            onColumnDragEnd(newColumnOrder);
         }
-    }, [onColumnDragEnd]);
+    }, [onColumnDragEnd, columnOrder]);
     const handleColumnPinningChange = (0, react_1.useCallback)((updatedColumnPinning) => {
-        setColumnPinning(updatedColumnPinning);
+        const newColumnPinning = typeof updatedColumnPinning === 'function'
+            ? updatedColumnPinning(columnPinning)
+            : updatedColumnPinning;
+        setColumnPinning(newColumnPinning);
         if (onColumnPinningChange) {
-            onColumnPinningChange(updatedColumnPinning);
+            onColumnPinningChange(newColumnPinning);
         }
-    }, [onColumnPinningChange]);
+    }, [onColumnPinningChange, columnPinning]);
     const handlePaginationChange = (0, react_1.useCallback)((updater) => {
         setPagination(updater);
         const newPagination = typeof updater === 'function' ? updater(pagination) : updater;
@@ -213,15 +269,19 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
             : updaterOrValue;
         setGlobalFilter(newFilter);
         if (isServerMode || isServerFiltering) {
-            stateChangeRef.current({ globalFilter: newFilter });
-            fetchDataRef === null || fetchDataRef === void 0 ? void 0 : fetchDataRef.current({ globalFilter: newFilter });
+            setTimeout(() => {
+                stateChangeRef.current({ globalFilter: newFilter });
+                fetchDataRef === null || fetchDataRef === void 0 ? void 0 : fetchDataRef.current({ globalFilter: newFilter });
+            }, 0);
         }
         else if (onDataStateChange) {
-            stateChangeRef.current({ globalFilter: newFilter });
+            setTimeout(() => {
+                stateChangeRef.current({ globalFilter: newFilter });
+            }, 0);
         }
     }, [globalFilter, isServerMode, isServerFiltering, onDataStateChange]);
-    const onCustomColumnFilterChangeHandler = (0, react_1.useCallback)((updater) => {
-        const currentState = customColumnsFilter;
+    const onColumnFilterChangeHandler = (0, react_1.useCallback)((updater) => {
+        const currentState = columnFilter;
         const newState = typeof updater === 'function'
             ? updater(currentState)
             : updater;
@@ -232,8 +292,8 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
             pendingLogic: newState.pendingLogic
         };
         handleColumnFilterStateChange(legacyFilterState);
-    }, [customColumnsFilter, handleColumnFilterStateChange]);
-    const onCustomColumnFilterApplyHandler = (0, react_1.useCallback)((appliedState) => {
+    }, [columnFilter, handleColumnFilterStateChange]);
+    const onColumnFilterApplyHandler = (0, react_1.useCallback)((appliedState) => {
         if (isServerFiltering) {
             const serverFilterState = {
                 filters: appliedState.filters,
@@ -242,23 +302,26 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
                 pendingLogic: appliedState.pendingLogic,
             };
             stateChangeRef.current({
-                customColumnsFilter: serverFilterState,
+                columnFilter: serverFilterState,
             });
             fetchDataRef === null || fetchDataRef === void 0 ? void 0 : fetchDataRef.current({
-                customColumnsFilter: serverFilterState,
+                columnFilter: serverFilterState,
             });
         }
     }, [isServerFiltering]);
     const table = (0, react_table_1.useReactTable)({
-        _features: [custom_column_filter_feature_1.CustomColumnFilterFeature, features_1.CustomSelectionFeature],
+        _features: [column_filter_feature_1.ColumnFilterFeature, features_1.SelectionFeature],
         data: tableData,
         columns: enhancedColumns,
         initialState: Object.assign({}, initialStateConfig),
-        state: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ sorting }, (enablePagination ? { pagination } : {})), (enableGlobalFilter ? { globalFilter } : {})), (enableExpanding ? { expanded } : {})), (enableColumnDragging ? { columnOrder } : {})), (enableColumnPinning ? { columnPinning } : {})), (enableColumnFilter ? { customColumnFilter: customColumnsFilter } : {})), (enableRowSelection ? { selectionState } : {})),
+        state: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ sorting }, (enablePagination ? { pagination } : {})), (enableGlobalFilter ? { globalFilter } : {})), (enableExpanding ? { expanded } : {})), (enableColumnDragging ? { columnOrder } : {})), (enableColumnPinning ? { columnPinning } : {})), (enableColumnFilter ? { columnFilter } : {})), (enableRowSelection ? { selectionState } : {})),
         selectMode: selectMode,
-        enableCustomSelection: !!enableRowSelection,
+        enableAdvanceSelection: !!enableRowSelection,
         isRowSelectable: isRowSelectable,
         onSelectionStateChange: enableRowSelection ? handleSelectionStateChange : undefined,
+        enableAdvanceColumnFilter: enableColumnFilter,
+        onColumnFilterChange: onColumnFilterChangeHandler,
+        onColumnFilterApply: onColumnFilterApplyHandler,
         onSortingChange: enableSorting ? handleSortingChange : undefined,
         onPaginationChange: enablePagination ? handlePaginationChange : undefined,
         onRowSelectionChange: enableRowSelection ? handleSelectionStateChange : undefined,
@@ -266,11 +329,9 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
         onExpandedChange: enableExpanding ? setExpanded : undefined,
         onColumnOrderChange: enableColumnDragging ? handleColumnOrderChange : undefined,
         onColumnPinningChange: enableColumnPinning ? handleColumnPinningChange : undefined,
-        onCustomColumnFilterChange: onCustomColumnFilterChangeHandler,
-        onCustomColumnFilterApply: onCustomColumnFilterApplyHandler,
         getCoreRowModel: (0, react_table_1.getCoreRowModel)(),
         getSortedRowModel: (enableSorting && !isServerSorting) ? (0, react_table_1.getSortedRowModel)() : undefined,
-        getFilteredRowModel: (enableColumnFilter && !isServerFiltering) ? (0, custom_column_filter_feature_1.getCombinedFilteredRowModel)() : undefined,
+        getFilteredRowModel: (enableColumnFilter && !isServerFiltering) ? (0, column_filter_feature_1.getCombinedFilteredRowModel)() : undefined,
         getPaginationRowModel: (enablePagination && !isServerPagination) ? (0, react_table_1.getPaginationRowModel)() : undefined,
         enableSorting: enableSorting,
         manualSorting: isServerSorting,
@@ -293,23 +354,6 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
         overscan: 10,
         enabled: enableVirtualization && !enablePagination && rows.length > 0,
     });
-    const tableWidth = (0, react_1.useMemo)(() => {
-        if (fitToScreen) {
-            return '100%';
-        }
-        if (enableColumnResizing) {
-            return table.getCenterTotalSize();
-        }
-        return '100%';
-    }, [
-        table,
-        enableColumnResizing,
-        fitToScreen,
-    ]);
-    const tableStyle = (0, react_1.useMemo)(() => ({
-        width: tableWidth,
-        minWidth: '100%',
-    }), [tableWidth]);
     const handleColumnReorder = (0, react_1.useCallback)((draggedColumnId, targetColumnId) => {
         const currentOrder = columnOrder.length > 0 ? columnOrder : enhancedColumns.map((col, index) => {
             if (col.id)
@@ -333,7 +377,7 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
         if (initialLoadData && onFetchData) {
             fetchDataRef.current();
         }
-    }, [initialLoadData]);
+    }, [initialLoadData, onFetchData]);
     (0, react_1.useEffect)(() => {
         if (enableColumnDragging && columnOrder.length === 0) {
             const initialOrder = enhancedColumns.map((col, index) => {
@@ -347,11 +391,7 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
             });
             setColumnOrder(initialOrder);
         }
-    }, [
-        enableColumnDragging,
-        enhancedColumns,
-        columnOrder.length,
-    ]);
+    }, [enableColumnDragging, enhancedColumns, columnOrder.length]);
     const LoadingRowSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'loadingRow', rows_1.LoadingRows);
     const EmptyRowSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'emptyRow', rows_1.EmptyDataRow);
     const renderTableRows = (0, react_1.useCallback)(() => {
@@ -400,8 +440,6 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
         enableStickyHeaderOrFooter,
         slots,
     ]);
-    const [exportController, setExportController] = (0, react_1.useState)(null);
-    const isExporting = (0, react_1.useMemo)(() => exportController !== null, [exportController]);
     const handleCancelExport = (0, react_1.useCallback)(() => {
         if (exportController) {
             exportController.abort();
@@ -416,7 +454,7 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
         data: tableData,
         idKey,
         globalFilter,
-        customColumnsFilter,
+        columnFilter,
         sorting,
         pagination,
         columnOrder,
@@ -431,7 +469,7 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
         onSelectionChange: handleSelectionStateChange,
         handleColumnFilterStateChange,
         onDataStateChange,
-        onFetchData: onFetchData,
+        onFetchData: fetchData,
         onDataChange,
         exportFilename,
         onExportProgress,
@@ -444,26 +482,6 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
         dataMode,
     }, internalApiRef);
     (0, react_1.useImperativeHandle)(ref, () => internalApiRef.current, []);
-    const isSomeRowsSelected = (0, react_1.useMemo)(() => {
-        if (!enableBulkActions || !enableRowSelection)
-            return false;
-        if (selectionState.type === 'exclude') {
-            return selectionState.ids.length < tableTotalRow;
-        }
-        else {
-            return selectionState.ids.length > 0;
-        }
-    }, [enableBulkActions, enableRowSelection, selectionState, tableTotalRow]);
-    const selectedRowCount = (0, react_1.useMemo)(() => {
-        if (!enableBulkActions || !enableRowSelection)
-            return 0;
-        if (selectionState.type === 'exclude') {
-            return tableTotalRow - selectionState.ids.length;
-        }
-        else {
-            return selectionState.ids.length;
-        }
-    }, [enableBulkActions, enableRowSelection, selectionState, tableTotalRow]);
     const RootSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'root', material_1.Box);
     const ToolbarSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'toolbar', toolbar_1.DataTableToolbar);
     const BulkActionsSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'bulkActionsToolbar', toolbar_1.BulkActionsToolbar);
@@ -472,7 +490,9 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
     const BodySlot = (0, slot_helpers_1.getSlotComponent)(slots, 'body', material_1.TableBody);
     const FooterSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'footer', material_1.Box);
     const PaginationSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'pagination', pagination_1.DataTablePagination);
-    return ((0, jsx_runtime_1.jsx)(data_table_context_1.DataTableProvider, { table: table, children: (0, jsx_runtime_1.jsxs)(RootSlot, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.root, { children: [(enableGlobalFilter || extraFilter) ? ((0, jsx_runtime_1.jsx)(ToolbarSlot, Object.assign({ extraFilter: extraFilter, enableGlobalFilter: enableGlobalFilter, enableColumnVisibility: enableColumnVisibility, enableColumnFilter: enableColumnFilter, enableExport: enableExport, enableReset: enableReset, enableTableSizeControl: enableTableSizeControl, enableColumnPinning: enableColumnPinning }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.toolbar))) : null, enableBulkActions && enableRowSelection && isSomeRowsSelected ? ((0, jsx_runtime_1.jsx)(BulkActionsSlot, Object.assign({ selectionState: selectionState, selectedRowCount: selectedRowCount, bulkActions: bulkActions, sx: {
+    return ((0, jsx_runtime_1.jsx)(data_table_context_1.DataTableProvider, { table: table, apiRef: internalApiRef, dataMode: dataMode, tableSize: tableSize, onTableSizeChange: (size) => {
+            setTableSize(size);
+        }, columnFilter: columnFilter, onChangeColumnFilter: handleColumnFilterStateChange, slots: slots, slotProps: slotProps, isExporting: isExporting, exportController: exportController, onCancelExport: handleCancelExport, exportFilename: exportFilename, onExportProgress: onExportProgress, onExportComplete: onExportComplete, onExportError: onExportError, onServerExport: onServerExport, children: (0, jsx_runtime_1.jsxs)(RootSlot, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.root, { children: [(enableGlobalFilter || extraFilter) ? ((0, jsx_runtime_1.jsx)(ToolbarSlot, Object.assign({ extraFilter: extraFilter, enableGlobalFilter: enableGlobalFilter, enableColumnVisibility: enableColumnVisibility, enableColumnFilter: enableColumnFilter, enableExport: enableExport, enableReset: enableReset, enableTableSizeControl: enableTableSizeControl, enableColumnPinning: enableColumnPinning }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.toolbar))) : null, enableBulkActions && enableRowSelection && isSomeRowsSelected ? ((0, jsx_runtime_1.jsx)(BulkActionsSlot, Object.assign({ selectionState: selectionState, selectedRowCount: selectedRowCount, bulkActions: bulkActions, sx: {
                         position: 'relative',
                         zIndex: 2,
                     } }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.bulkActionsToolbar))) : null, (0, jsx_runtime_1.jsx)(TableContainerSlot, Object.assign({ component: material_1.Paper, ref: tableContainerRef, sx: Object.assign(Object.assign(Object.assign({ width: '100%', overflowX: 'auto' }, (enableStickyHeaderOrFooter && {

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

@@ -1,10 +1,10 @@
 import { Row, SortingState, ColumnResizeMode, ColumnPinningState, RowData } from '@tanstack/react-table';
 import { ReactNode } from 'react';
-import type { CustomColumnFilterState, TableFilters, TableState } from '../../types';
+import type { ColumnFilterState, 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';
+import { SelectionState } from '../../features';
 export type SelectMode = 'page' | 'all';
 declare module '@tanstack/table-core' {
     interface ColumnMeta<TData extends RowData, TValue> {
@@ -27,9 +27,9 @@ export interface DataTableProps<T> {
     }>;
     exportFilename?: string;
     onExportProgress?: (progress: {
-        processedRows: number;
-        totalRows: number;
-        percentage: number;
+        processedRows?: number;
+        totalRows?: number;
+        percentage?: number;
     }) => void;
     onExportComplete?: (result: {
         success: boolean;
@@ -90,23 +90,23 @@ export interface DataTableProps<T> {
     loading?: boolean;
     emptyMessage?: string;
     skeletonRows?: number;
-    onColumnFiltersChange?: (filterState: CustomColumnFilterState) => void;
+    onColumnFiltersChange?: (filterState: ColumnFilterState) => void;
     onDataChange?: (data: T[]) => void;
     selectionColumn?: {
         width?: number;
         pinLeft?: boolean;
-        customColumn?: DataTableColumn<any>;
+        customColumn?: DataTableColumn<T>;
         id?: string;
     };
     actionColumn?: {
         pinRight?: boolean;
-        customColumn?: DataTableColumn<any>;
+        customColumn?: DataTableColumn<T>;
         id?: string;
     };
     expandingColumn?: {
         width?: number;
         pinLeft?: boolean;
-        customColumn?: DataTableColumn<any>;
+        customColumn?: DataTableColumn<T>;
         id?: string;
     };
     slots?: Partial<DataTableSlots<T>>;

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

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { SelectionState } from '../../features/custom-selection.feature';
+import { SelectionState } from '../../features';
 export interface BulkActionsToolbarProps<T = any> {
     selectionState: SelectionState;
     selectedRowCount: number;

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

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