@ackplus/react-tanstack-data-table 1.0.19-beta-0.14 → 1.0.19-beta-0.15

package/package.json

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

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

@@ -40,7 +40,7 @@ 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, 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, 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, onPaginationChange, onGlobalFilterChange, slots = {}, slotProps = {}, }, ref) {
     var _a;
     const isServerMode = dataMode === 'server';
     const isServerPagination = paginationMode === 'server' || isServerMode;
@@ -164,11 +164,6 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
     const handleColumnFilterStateChange = (0, react_1.useCallback)((filterState) => {
         if (filterState && typeof filterState === 'object') {
             setColumnFilter(filterState);
-            setTimeout(() => {
-                if (onColumnFiltersChange) {
-                    onColumnFiltersChange(filterState);
-                }
-            }, 0);
         }
     }, [onColumnFiltersChange]);
     const tableStateChange = (0, react_1.useCallback)((overrides = {}) => {
@@ -196,18 +191,19 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
             : updaterOrValue;
         newSorting = newSorting.filter((sort) => sort.id);
         setSorting(newSorting);
-        if (onSortingChange) {
-            onSortingChange(newSorting);
-        }
+        onSortingChange === null || onSortingChange === void 0 ? void 0 : onSortingChange(newSorting);
         if (isServerMode || isServerSorting) {
-            tableStateChange({ sorting: newSorting });
+            const pagination = resetPageToFirst();
+            tableStateChange({ sorting: newSorting, pagination });
             fetchData({
                 sorting: newSorting,
+                pagination,
             });
         }
         else if (onDataStateChange) {
+            const pagination = resetPageToFirst();
             setTimeout(() => {
-                tableStateChange({ sorting: newSorting });
+                tableStateChange({ sorting: newSorting, pagination });
             }, 0);
         }
     }, [
@@ -251,6 +247,8 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
                 tableStateChange({ pagination: newPagination });
             }, 0);
         }
+        setPagination(newPagination);
+        onPaginationChange === null || onPaginationChange === void 0 ? void 0 : onPaginationChange(newPagination);
     }, [pagination, isServerMode, isServerPagination, onDataStateChange, fetchData, tableStateChange]);
     const handleGlobalFilterChange = (0, react_1.useCallback)((updaterOrValue) => {
         const newFilter = typeof updaterOrValue === 'function'
@@ -258,16 +256,19 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
             : updaterOrValue;
         setGlobalFilter(newFilter);
         if (isServerMode || isServerFiltering) {
+            const pagination = resetPageToFirst();
             setTimeout(() => {
-                tableStateChange({ globalFilter: newFilter });
-                fetchData({ globalFilter: newFilter });
+                tableStateChange({ globalFilter: newFilter, pagination });
+                fetchData({ globalFilter: newFilter, pagination });
             }, 0);
         }
         else if (onDataStateChange) {
+            const pagination = resetPageToFirst();
             setTimeout(() => {
-                tableStateChange({ globalFilter: newFilter });
+                tableStateChange({ globalFilter: newFilter, pagination });
             }, 0);
         }
+        onGlobalFilterChange === null || onGlobalFilterChange === void 0 ? void 0 : onGlobalFilterChange(newFilter);
     }, [globalFilter, isServerMode, isServerFiltering, onDataStateChange, fetchData, tableStateChange]);
     const onColumnFilterChangeHandler = (0, react_1.useCallback)((updater) => {
         const currentState = columnFilter;
@@ -283,6 +284,7 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
         handleColumnFilterStateChange(legacyFilterState);
     }, [columnFilter, handleColumnFilterStateChange]);
     const onColumnFilterApplyHandler = (0, react_1.useCallback)((appliedState) => {
+        const pagination = resetPageToFirst();
         if (isServerFiltering) {
             const serverFilterState = {
                 filters: appliedState.filters,
@@ -292,11 +294,18 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
             };
             tableStateChange({
                 columnFilter: serverFilterState,
+                pagination,
             });
             fetchData({
                 columnFilter: serverFilterState,
+                pagination,
             });
         }
+        setTimeout(() => {
+            if (onColumnFiltersChange) {
+                onColumnFiltersChange(appliedState);
+            }
+        }, 0);
     }, [isServerFiltering, fetchData, tableStateChange]);
     const table = (0, react_table_1.useReactTable)(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ _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(Object.assign({}, (enableSorting ? { sorting } : {})), (enablePagination ? { pagination } : {})), (enableGlobalFilter ? { globalFilter } : {})), (enableExpanding ? { expanded } : {})), (enableColumnDragging ? { columnOrder } : {})), (enableColumnPinning ? { columnPinning } : {})), (enableColumnFilter ? { columnFilter } : {})), (enableRowSelection ? { selectionState } : {})), selectMode: selectMode, enableAdvanceSelection: !!enableRowSelection, isRowSelectable: isRowSelectable }, (enableRowSelection ? { onSelectionStateChange: handleSelectionStateChange } : {})), { enableAdvanceColumnFilter: enableColumnFilter, onColumnFilterChange: onColumnFilterChangeHandler, onColumnFilterApply: onColumnFilterApplyHandler }), (enableSorting ? { onSortingChange: handleSortingChange } : {})), (enablePagination ? { onPaginationChange: handlePaginationChange } : {})), (enableRowSelection ? { onRowSelectionChange: handleSelectionStateChange } : {})), (enableGlobalFilter ? { onGlobalFilterChange: handleGlobalFilterChange } : {})), (enableExpanding ? { onExpandedChange: setExpanded } : {})), (enableColumnDragging ? { onColumnOrderChange: handleColumnOrderChange } : {})), (enableColumnPinning ? { onColumnPinningChange: handleColumnPinningChange } : {})), { getCoreRowModel: (0, react_table_1.getCoreRowModel)() }), (enableSorting ? { getSortedRowModel: (0, react_table_1.getSortedRowModel)() } : {})), (enableColumnFilter ? { getFilteredRowModel: (0, column_filter_feature_1.getCombinedFilteredRowModel)() } : {})), (enablePagination ? { getPaginationRowModel: (0, react_table_1.getPaginationRowModel)() } : {})), { enableSorting: enableSorting, manualSorting: isServerSorting, manualFiltering: isServerFiltering, enableColumnResizing: enableColumnResizing, columnResizeMode: columnResizeMode, enableColumnPinning: enableColumnPinning }), (enableExpanding ? { getRowCanExpand: getRowCanExpand } : {})), { manualPagination: isServerPagination, autoResetPageIndex: false, rowCount: tableTotalRow, getRowId: (row, index) => (0, utils_1.generateRowId)(row, index, idKey), debugAll: false }));
     const rows = ((_a = table.getRowModel()) === null || _a === void 0 ? void 0 : _a.rows) || [];
@@ -307,6 +316,12 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
         overscan: 10,
         enabled: enableVirtualization && !enablePagination && rows.length > 0,
     });
+    const resetPageToFirst = () => {
+        const newPagination = { pageIndex: 0, pageSize: pagination.pageSize };
+        setPagination(newPagination);
+        onPaginationChange === null || onPaginationChange === void 0 ? void 0 : onPaginationChange(newPagination);
+        return newPagination;
+    };
     const handleColumnReorder = (0, react_1.useCallback)((draggedColumnId, targetColumnId) => {
         const currentOrder = columnOrder.length > 0 ? columnOrder : enhancedColumns.map((col, index) => {
             if (col.id)

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

@@ -1,4 +1,4 @@
-import { Row, SortingState, ColumnResizeMode, ColumnPinningState, RowData } from '@tanstack/react-table';
+import { Row, SortingState, ColumnResizeMode, ColumnPinningState, RowData, PaginationState } from '@tanstack/react-table';
 import { ReactNode } from 'react';
 import type { ColumnFilterState, TableFilters, TableState } from '../../types';
 import { DataTableColumn } from '../../types';
@@ -91,7 +91,9 @@ export interface DataTableProps<T> {
     emptyMessage?: string;
     skeletonRows?: number;
     onColumnFiltersChange?: (filterState: ColumnFilterState) => void;
-    onDataChange?: (data: T[]) => void;
+    onPaginationChange?: (pagination: PaginationState) => void;
+    onGlobalFilterChange?: (globalFilter: string) => void;
+    onColumnFilterChange?: (columnFilter: ColumnFilterState) => void;
     selectionColumn?: {
         width?: number;
         pinLeft?: boolean;