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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (30) hide show
  1. package/README.md +2 -2
  2. package/package.json +1 -1
  3. package/src/lib/components/table/data-table.d.ts +2 -1
  4. package/src/lib/components/table/data-table.js +127 -115
  5. package/src/lib/components/table/data-table.types.d.ts +9 -9
  6. package/src/lib/components/toolbar/bulk-actions-toolbar.d.ts +1 -1
  7. package/src/lib/components/toolbar/column-filter-control.d.ts +1 -0
  8. package/src/lib/components/toolbar/{column-custom-filter-control.js → column-filter-control.js} +22 -20
  9. package/src/lib/components/toolbar/data-table-toolbar.js +2 -2
  10. package/src/lib/components/toolbar/index.d.ts +1 -0
  11. package/src/lib/components/toolbar/index.js +3 -1
  12. package/src/lib/components/toolbar/table-export-control.d.ts +4 -4
  13. package/src/lib/contexts/data-table-context.d.ts +8 -8
  14. package/src/lib/contexts/data-table-context.js +5 -5
  15. package/src/lib/examples/server-side-fetching-example.js +12 -3
  16. package/src/lib/features/{custom-column-filter.feature.d.ts → column-filter.feature.d.ts} +14 -14
  17. package/src/lib/features/{custom-column-filter.feature.js → column-filter.feature.js} +51 -26
  18. package/src/lib/features/index.d.ts +2 -2
  19. package/src/lib/features/index.js +6 -6
  20. package/src/lib/features/{custom-selection.feature.d.ts → selection.feature.d.ts} +8 -8
  21. package/src/lib/features/{custom-selection.feature.js → selection.feature.js} +20 -8
  22. package/src/lib/hooks/use-data-table-api.d.ts +6 -6
  23. package/src/lib/hooks/use-data-table-api.js +20 -20
  24. package/src/lib/types/data-table-api.d.ts +4 -4
  25. package/src/lib/types/table.types.d.ts +4 -4
  26. package/src/lib/utils/column-helpers.d.ts +1 -2
  27. package/src/lib/utils/column-helpers.js +3 -2
  28. package/src/lib/utils/export-utils.d.ts +4 -4
  29. package/src/lib/utils/export-utils.js +32 -15
  30. package/src/lib/components/toolbar/column-custom-filter-control.d.ts +0 -1
package/README.md CHANGED
@@ -7,7 +7,7 @@ A powerful, feature-rich, and highly customizable React data table component bui
7
7
  - 🚀 **High Performance**: Built on TanStack Table for excellent performance with large datasets
8
8
  - 🎨 **Material Design**: Beautiful UI components using MUI with consistent design system
9
9
  - 📱 **Responsive**: Mobile-friendly responsive design with adaptive layouts
10
- - 🔍 **Advanced Filtering**: Global search, column filters, and custom filter components
10
+ - 🔍 **Advanced Filtering**: Global search, column filters, and filter components
11
11
  - 📊 **Multi-Column Sorting**: Powerful sorting with multiple columns support
12
12
  - 📄 **Flexible Pagination**: Client-side and server-side pagination options
13
13
  - 🎯 **Column Management**: Show/hide, resize, reorder, and pin columns
@@ -328,7 +328,7 @@ function SelectableTable() {
328
328
  }
329
329
  ```
330
330
 
331
- ### Custom Column Filters
331
+ ### Column Filters
332
332
 
333
333
  ```tsx
334
334
  const columns = [
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ackplus/react-tanstack-data-table",
3
3
  "type": "commonjs",
4
- "version": "1.0.19-beta-0.10",
4
+ "version": "1.0.19-beta-0.12",
5
5
  "description": "A powerful React data table component built with MUI and TanStack Table",
6
6
  "keywords": [
7
7
  "react",
package/src/lib/components/table/data-table.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import React from 'react';
1
2
  import { DataTableProps } from './data-table.types';
2
3
  import { DataTableApi } from '../../types/data-table-api';
3
- export declare const DataTable: import("react").ForwardRefExoticComponent<DataTableProps<any> & import("react").RefAttributes<DataTableApi<any>>>;
4
+ export declare const DataTable: React.ForwardRefExoticComponent<DataTableProps<any> & React.RefAttributes<DataTableApi<any>>>;
package/src/lib/components/table/data-table.js CHANGED
@@ -5,7 +5,7 @@ const tslib_1 = require("tslib");
5
5
  const jsx_runtime_1 = require("react/jsx-runtime");
6
6
  const material_1 = require("@mui/material");
7
7
  const react_table_1 = require("@tanstack/react-table");
8
- const custom_column_filter_feature_1 = require("../../features/custom-column-filter.feature");
8
+ const column_filter_feature_1 = require("../../features/column-filter.feature");
9
9
  const features_1 = require("../../features");
10
10
  const react_virtual_1 = require("@tanstack/react-virtual");
11
11
  const react_1 = require("react");
@@ -40,40 +40,108 @@ const DEFAULT_INITIAL_STATE = {
40
40
  pendingLogic: 'AND',
41
41
  },
42
42
  };
43
- 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) {
43
+ 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) {
44
44
  var _a;
45
45
  const isServerMode = dataMode === 'server';
46
46
  const isServerPagination = paginationMode === 'server' || isServerMode;
47
47
  const isServerFiltering = filterMode === 'server' || isServerMode;
48
48
  const isServerSorting = sortingMode === 'server' || isServerMode;
49
- const tableContainerRef = (0, react_1.useRef)(null);
50
- const initialStateConfig = (0, react_1.useMemo)(() => {
51
- return Object.assign(Object.assign({}, DEFAULT_INITIAL_STATE), initialState);
52
- }, [initialState]);
53
- const [sorting, setSorting] = (0, react_1.useState)(initialStateConfig.sorting);
54
- const [pagination, setPagination] = (0, react_1.useState)(initialStateConfig.pagination);
55
- const [globalFilter, setGlobalFilter] = (0, react_1.useState)(initialStateConfig.globalFilter);
49
+ const [sorting, setSorting] = (0, react_1.useState)(DEFAULT_INITIAL_STATE.sorting);
50
+ const [pagination, setPagination] = (0, react_1.useState)(DEFAULT_INITIAL_STATE.pagination);
51
+ const [globalFilter, setGlobalFilter] = (0, react_1.useState)(DEFAULT_INITIAL_STATE.globalFilter);
56
52
  const [selectionState, setSelectionState] = (0, react_1.useState)((initialState === null || initialState === void 0 ? void 0 : initialState.selectionState) || { ids: [], type: 'include' });
57
- const [customColumnsFilter, setCustomColumnsFilter] = (0, react_1.useState)({
53
+ const [columnFilter, setColumnFilter] = (0, react_1.useState)({
58
54
  filters: [],
59
55
  logic: 'AND',
60
56
  pendingFilters: [],
61
57
  pendingLogic: 'AND'
62
58
  });
63
- const [expanded, setExpanded] = (0, react_1.useState)(initialStateConfig.expanded);
59
+ const [expanded, setExpanded] = (0, react_1.useState)(DEFAULT_INITIAL_STATE.expanded);
64
60
  const [tableSize, setTableSize] = (0, react_1.useState)(initialTableSize);
65
- const [columnOrder, setColumnOrder] = (0, react_1.useState)(initialStateConfig.columnOrder);
66
- const [columnPinning, setColumnPinning] = (0, react_1.useState)(initialStateConfig.columnPinning);
67
- const internalApiRef = (0, react_1.useRef)(null);
68
- const { debouncedFetch, isLoading: fetchLoading } = (0, debounced_fetch_utils_1.useDebouncedFetch)(onFetchData);
61
+ const [columnOrder, setColumnOrder] = (0, react_1.useState)(DEFAULT_INITIAL_STATE.columnOrder);
62
+ const [columnPinning, setColumnPinning] = (0, react_1.useState)(DEFAULT_INITIAL_STATE.columnPinning);
69
63
  const [serverData, setServerData] = (0, react_1.useState)([]);
70
64
  const [serverTotal, setServerTotal] = (0, react_1.useState)(0);
65
+ const [exportController, setExportController] = (0, react_1.useState)(null);
66
+ const tableContainerRef = (0, react_1.useRef)(null);
67
+ const internalApiRef = (0, react_1.useRef)(null);
68
+ const initialStateConfig = (0, react_1.useMemo)(() => {
69
+ return Object.assign(Object.assign({}, DEFAULT_INITIAL_STATE), initialState);
70
+ }, [initialState]);
71
+ (0, react_1.useEffect)(() => {
72
+ setSorting(initialStateConfig.sorting);
73
+ setPagination(initialStateConfig.pagination);
74
+ setGlobalFilter(initialStateConfig.globalFilter);
75
+ setExpanded(initialStateConfig.expanded);
76
+ setColumnOrder(initialStateConfig.columnOrder);
77
+ setColumnPinning(initialStateConfig.columnPinning);
78
+ }, [initialStateConfig]);
79
+ const { debouncedFetch, isLoading: fetchLoading } = (0, debounced_fetch_utils_1.useDebouncedFetch)(onFetchData);
80
+ const tableData = (0, react_1.useMemo)(() => onFetchData ? serverData : data, [onFetchData, serverData, data]);
81
+ const tableTotalRow = (0, react_1.useMemo)(() => onFetchData ? serverTotal : totalRow, [onFetchData, serverTotal, totalRow]);
82
+ const tableLoading = (0, react_1.useMemo)(() => onFetchData ? (loading || fetchLoading) : loading, [onFetchData, loading, fetchLoading]);
83
+ const enhancedColumns = (0, react_1.useMemo)(() => {
84
+ let columnsMap = [...columns];
85
+ if (enableExpanding) {
86
+ const expandingColumnMap = (0, special_columns_utils_1.createExpandingColumn)(Object.assign({}, ((slotProps === null || slotProps === void 0 ? void 0 : slotProps.expandColumn) || {})));
87
+ columnsMap = [expandingColumnMap, ...columnsMap];
88
+ }
89
+ if (enableRowSelection) {
90
+ const selectionColumnMap = (0, special_columns_utils_1.createSelectionColumn)(Object.assign(Object.assign({}, ((slotProps === null || slotProps === void 0 ? void 0 : slotProps.selectionColumn) || {})), { multiSelect: enableMultiRowSelection }));
91
+ columnsMap = [selectionColumnMap, ...columnsMap];
92
+ }
93
+ return columnsMap;
94
+ }, [
95
+ columns,
96
+ slotProps === null || slotProps === void 0 ? void 0 : slotProps.selectionColumn,
97
+ slotProps === null || slotProps === void 0 ? void 0 : slotProps.expandColumn,
98
+ enableRowSelection,
99
+ enableExpanding,
100
+ enableMultiRowSelection,
101
+ ]);
102
+ const isExporting = (0, react_1.useMemo)(() => exportController !== null, [exportController]);
103
+ const isSomeRowsSelected = (0, react_1.useMemo)(() => {
104
+ if (!enableBulkActions || !enableRowSelection)
105
+ return false;
106
+ if (selectionState.type === 'exclude') {
107
+ return selectionState.ids.length < tableTotalRow;
108
+ }
109
+ else {
110
+ return selectionState.ids.length > 0;
111
+ }
112
+ }, [enableBulkActions, enableRowSelection, selectionState, tableTotalRow]);
113
+ const selectedRowCount = (0, react_1.useMemo)(() => {
114
+ if (!enableBulkActions || !enableRowSelection)
115
+ return 0;
116
+ if (selectionState.type === 'exclude') {
117
+ return tableTotalRow - selectionState.ids.length;
118
+ }
119
+ else {
120
+ return selectionState.ids.length;
121
+ }
122
+ }, [enableBulkActions, enableRowSelection, selectionState, tableTotalRow]);
123
+ const tableWidth = (0, react_1.useMemo)(() => {
124
+ if (fitToScreen) {
125
+ return '100%';
126
+ }
127
+ if (enableColumnResizing) {
128
+ return table.getCenterTotalSize();
129
+ }
130
+ return '100%';
131
+ }, [
132
+ fitToScreen,
133
+ enableColumnResizing,
134
+ ]);
135
+ const tableStyle = (0, react_1.useMemo)(() => ({
136
+ width: tableWidth,
137
+ minWidth: '100%',
138
+ }), [tableWidth]);
71
139
  const fetchData = (0, react_1.useCallback)((...args_1) => tslib_1.__awaiter(this, [...args_1], void 0, function* (overrides = {}) {
72
140
  if (!onFetchData)
73
141
  return;
74
142
  const filters = Object.assign({ globalFilter,
75
143
  pagination,
76
- customColumnsFilter,
144
+ columnFilter,
77
145
  sorting }, overrides);
78
146
  const result = yield debouncedFetch(filters);
79
147
  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
84
152
  onFetchData,
85
153
  globalFilter,
86
154
  pagination,
87
- customColumnsFilter,
155
+ columnFilter,
88
156
  sorting,
89
157
  debouncedFetch,
90
158
  ]);
91
159
  const fetchDataRef = (0, react_1.useRef)(fetchData);
92
160
  fetchDataRef.current = fetchData;
93
- const tableData = (0, react_1.useMemo)(() => onFetchData ? serverData : data, [onFetchData, serverData, data]);
94
- const tableTotalRow = (0, react_1.useMemo)(() => onFetchData ? serverTotal : totalRow, [onFetchData, serverTotal, totalRow]);
95
- const tableLoading = (0, react_1.useMemo)(() => onFetchData ? (loading || fetchLoading) : loading, [onFetchData, loading, fetchLoading]);
96
161
  const handleSelectionStateChange = (0, react_1.useCallback)((updaterOrValue) => {
97
162
  setSelectionState((prevState) => {
98
163
  const newSelectionState = typeof updaterOrValue === 'function'
99
164
  ? updaterOrValue(prevState)
100
165
  : updaterOrValue;
101
- if (onSelectionChange) {
102
- onSelectionChange(newSelectionState);
103
- }
166
+ setTimeout(() => {
167
+ if (onSelectionChange) {
168
+ onSelectionChange(newSelectionState);
169
+ }
170
+ }, 0);
104
171
  return newSelectionState;
105
172
  });
106
173
  }, [onSelectionChange]);
107
174
  const handleColumnFilterStateChange = (0, react_1.useCallback)((filterState) => {
108
175
  if (filterState && typeof filterState === 'object') {
109
- setCustomColumnsFilter(filterState);
110
- if (onColumnFiltersChange) {
111
- onColumnFiltersChange(filterState);
112
- }
113
- }
114
- }, [
115
- onColumnFiltersChange,
116
- ]);
117
- const enhancedColumns = (0, react_1.useMemo)(() => {
118
- let columnsMap = [...columns];
119
- if (enableExpanding) {
120
- const expandingColumnMap = (0, special_columns_utils_1.createExpandingColumn)(Object.assign({}, ((slotProps === null || slotProps === void 0 ? void 0 : slotProps.expandColumn) || {})));
121
- columnsMap = [expandingColumnMap, ...columnsMap];
122
- }
123
- if (enableRowSelection) {
124
- const selectionColumnMap = (0, special_columns_utils_1.createSelectionColumn)(Object.assign(Object.assign({}, ((slotProps === null || slotProps === void 0 ? void 0 : slotProps.selectionColumn) || {})), { multiSelect: enableMultiRowSelection }));
125
- columnsMap = [selectionColumnMap, ...columnsMap];
176
+ setColumnFilter(filterState);
177
+ setTimeout(() => {
178
+ if (onColumnFiltersChange) {
179
+ onColumnFiltersChange(filterState);
180
+ }
181
+ }, 0);
126
182
  }
127
- return columnsMap;
128
- }, [
129
- columns,
130
- slotProps === null || slotProps === void 0 ? void 0 : slotProps.selectionColumn,
131
- slotProps === null || slotProps === void 0 ? void 0 : slotProps.expandColumn,
132
- enableRowSelection,
133
- enableExpanding,
134
- enableMultiRowSelection,
135
- ]);
183
+ }, [onColumnFiltersChange]);
136
184
  const notifyDataStateChange = (0, react_1.useCallback)((overrides = {}) => {
137
185
  if (onDataStateChange) {
138
186
  const currentState = Object.assign({ globalFilter,
139
- customColumnsFilter,
187
+ columnFilter,
140
188
  sorting,
141
189
  pagination,
142
190
  columnOrder,
@@ -146,7 +194,7 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
146
194
  }, [
147
195
  onDataStateChange,
148
196
  globalFilter,
149
- customColumnsFilter,
197
+ columnFilter,
150
198
  sorting,
151
199
  pagination,
152
200
  columnOrder,
@@ -171,7 +219,9 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
171
219
  });
172
220
  }
173
221
  else if (onDataStateChange) {
174
- stateChangeRef.current({ sorting: newSorting });
222
+ setTimeout(() => {
223
+ stateChangeRef.current({ sorting: newSorting });
224
+ }, 0);
175
225
  }
176
226
  }, [
177
227
  sorting,
@@ -219,15 +269,19 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
219
269
  : updaterOrValue;
220
270
  setGlobalFilter(newFilter);
221
271
  if (isServerMode || isServerFiltering) {
222
- stateChangeRef.current({ globalFilter: newFilter });
223
- fetchDataRef === null || fetchDataRef === void 0 ? void 0 : fetchDataRef.current({ globalFilter: newFilter });
272
+ setTimeout(() => {
273
+ stateChangeRef.current({ globalFilter: newFilter });
274
+ fetchDataRef === null || fetchDataRef === void 0 ? void 0 : fetchDataRef.current({ globalFilter: newFilter });
275
+ }, 0);
224
276
  }
225
277
  else if (onDataStateChange) {
226
- stateChangeRef.current({ globalFilter: newFilter });
278
+ setTimeout(() => {
279
+ stateChangeRef.current({ globalFilter: newFilter });
280
+ }, 0);
227
281
  }
228
282
  }, [globalFilter, isServerMode, isServerFiltering, onDataStateChange]);
229
- const onCustomColumnFilterChangeHandler = (0, react_1.useCallback)((updater) => {
230
- const currentState = customColumnsFilter;
283
+ const onColumnFilterChangeHandler = (0, react_1.useCallback)((updater) => {
284
+ const currentState = columnFilter;
231
285
  const newState = typeof updater === 'function'
232
286
  ? updater(currentState)
233
287
  : updater;
@@ -238,8 +292,8 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
238
292
  pendingLogic: newState.pendingLogic
239
293
  };
240
294
  handleColumnFilterStateChange(legacyFilterState);
241
- }, [customColumnsFilter, handleColumnFilterStateChange]);
242
- const onCustomColumnFilterApplyHandler = (0, react_1.useCallback)((appliedState) => {
295
+ }, [columnFilter, handleColumnFilterStateChange]);
296
+ const onColumnFilterApplyHandler = (0, react_1.useCallback)((appliedState) => {
243
297
  if (isServerFiltering) {
244
298
  const serverFilterState = {
245
299
  filters: appliedState.filters,
@@ -248,23 +302,26 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
248
302
  pendingLogic: appliedState.pendingLogic,
249
303
  };
250
304
  stateChangeRef.current({
251
- customColumnsFilter: serverFilterState,
305
+ columnFilter: serverFilterState,
252
306
  });
253
307
  fetchDataRef === null || fetchDataRef === void 0 ? void 0 : fetchDataRef.current({
254
- customColumnsFilter: serverFilterState,
308
+ columnFilter: serverFilterState,
255
309
  });
256
310
  }
257
311
  }, [isServerFiltering]);
258
312
  const table = (0, react_table_1.useReactTable)({
259
- _features: [custom_column_filter_feature_1.CustomColumnFilterFeature, features_1.CustomSelectionFeature],
313
+ _features: [column_filter_feature_1.ColumnFilterFeature, features_1.SelectionFeature],
260
314
  data: tableData,
261
315
  columns: enhancedColumns,
262
316
  initialState: Object.assign({}, initialStateConfig),
263
- 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 } : {})),
317
+ 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 } : {})),
264
318
  selectMode: selectMode,
265
- enableCustomSelection: !!enableRowSelection,
319
+ enableAdvanceSelection: !!enableRowSelection,
266
320
  isRowSelectable: isRowSelectable,
267
321
  onSelectionStateChange: enableRowSelection ? handleSelectionStateChange : undefined,
322
+ enableAdvanceColumnFilter: enableColumnFilter,
323
+ onColumnFilterChange: onColumnFilterChangeHandler,
324
+ onColumnFilterApply: onColumnFilterApplyHandler,
268
325
  onSortingChange: enableSorting ? handleSortingChange : undefined,
269
326
  onPaginationChange: enablePagination ? handlePaginationChange : undefined,
270
327
  onRowSelectionChange: enableRowSelection ? handleSelectionStateChange : undefined,
@@ -272,11 +329,9 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
272
329
  onExpandedChange: enableExpanding ? setExpanded : undefined,
273
330
  onColumnOrderChange: enableColumnDragging ? handleColumnOrderChange : undefined,
274
331
  onColumnPinningChange: enableColumnPinning ? handleColumnPinningChange : undefined,
275
- onCustomColumnFilterChange: onCustomColumnFilterChangeHandler,
276
- onCustomColumnFilterApply: onCustomColumnFilterApplyHandler,
277
332
  getCoreRowModel: (0, react_table_1.getCoreRowModel)(),
278
333
  getSortedRowModel: (enableSorting && !isServerSorting) ? (0, react_table_1.getSortedRowModel)() : undefined,
279
- getFilteredRowModel: (enableColumnFilter && !isServerFiltering) ? (0, custom_column_filter_feature_1.getCombinedFilteredRowModel)() : undefined,
334
+ getFilteredRowModel: (enableColumnFilter && !isServerFiltering) ? (0, column_filter_feature_1.getCombinedFilteredRowModel)() : undefined,
280
335
  getPaginationRowModel: (enablePagination && !isServerPagination) ? (0, react_table_1.getPaginationRowModel)() : undefined,
281
336
  enableSorting: enableSorting,
282
337
  manualSorting: isServerSorting,
@@ -299,23 +354,6 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
299
354
  overscan: 10,
300
355
  enabled: enableVirtualization && !enablePagination && rows.length > 0,
301
356
  });
302
- const tableWidth = (0, react_1.useMemo)(() => {
303
- if (fitToScreen) {
304
- return '100%';
305
- }
306
- if (enableColumnResizing) {
307
- return table.getCenterTotalSize();
308
- }
309
- return '100%';
310
- }, [
311
- table,
312
- enableColumnResizing,
313
- fitToScreen,
314
- ]);
315
- const tableStyle = (0, react_1.useMemo)(() => ({
316
- width: tableWidth,
317
- minWidth: '100%',
318
- }), [tableWidth]);
319
357
  const handleColumnReorder = (0, react_1.useCallback)((draggedColumnId, targetColumnId) => {
320
358
  const currentOrder = columnOrder.length > 0 ? columnOrder : enhancedColumns.map((col, index) => {
321
359
  if (col.id)
@@ -339,7 +377,7 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
339
377
  if (initialLoadData && onFetchData) {
340
378
  fetchDataRef.current();
341
379
  }
342
- }, [initialLoadData]);
380
+ }, [initialLoadData, onFetchData]);
343
381
  (0, react_1.useEffect)(() => {
344
382
  if (enableColumnDragging && columnOrder.length === 0) {
345
383
  const initialOrder = enhancedColumns.map((col, index) => {
@@ -353,11 +391,7 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
353
391
  });
354
392
  setColumnOrder(initialOrder);
355
393
  }
356
- }, [
357
- enableColumnDragging,
358
- enhancedColumns,
359
- columnOrder.length,
360
- ]);
394
+ }, [enableColumnDragging, enhancedColumns, columnOrder.length]);
361
395
  const LoadingRowSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'loadingRow', rows_1.LoadingRows);
362
396
  const EmptyRowSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'emptyRow', rows_1.EmptyDataRow);
363
397
  const renderTableRows = (0, react_1.useCallback)(() => {
@@ -406,8 +440,6 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
406
440
  enableStickyHeaderOrFooter,
407
441
  slots,
408
442
  ]);
409
- const [exportController, setExportController] = (0, react_1.useState)(null);
410
- const isExporting = (0, react_1.useMemo)(() => exportController !== null, [exportController]);
411
443
  const handleCancelExport = (0, react_1.useCallback)(() => {
412
444
  if (exportController) {
413
445
  exportController.abort();
@@ -422,7 +454,7 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
422
454
  data: tableData,
423
455
  idKey,
424
456
  globalFilter,
425
- customColumnsFilter,
457
+ columnFilter,
426
458
  sorting,
427
459
  pagination,
428
460
  columnOrder,
@@ -437,7 +469,7 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
437
469
  onSelectionChange: handleSelectionStateChange,
438
470
  handleColumnFilterStateChange,
439
471
  onDataStateChange,
440
- onFetchData: onFetchData,
472
+ onFetchData: fetchData,
441
473
  onDataChange,
442
474
  exportFilename,
443
475
  onExportProgress,
@@ -450,26 +482,6 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
450
482
  dataMode,
451
483
  }, internalApiRef);
452
484
  (0, react_1.useImperativeHandle)(ref, () => internalApiRef.current, []);
453
- const isSomeRowsSelected = (0, react_1.useMemo)(() => {
454
- if (!enableBulkActions || !enableRowSelection)
455
- return false;
456
- if (selectionState.type === 'exclude') {
457
- return selectionState.ids.length < tableTotalRow;
458
- }
459
- else {
460
- return selectionState.ids.length > 0;
461
- }
462
- }, [enableBulkActions, enableRowSelection, selectionState, tableTotalRow]);
463
- const selectedRowCount = (0, react_1.useMemo)(() => {
464
- if (!enableBulkActions || !enableRowSelection)
465
- return 0;
466
- if (selectionState.type === 'exclude') {
467
- return tableTotalRow - selectionState.ids.length;
468
- }
469
- else {
470
- return selectionState.ids.length;
471
- }
472
- }, [enableBulkActions, enableRowSelection, selectionState, tableTotalRow]);
473
485
  const RootSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'root', material_1.Box);
474
486
  const ToolbarSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'toolbar', toolbar_1.DataTableToolbar);
475
487
  const BulkActionsSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'bulkActionsToolbar', toolbar_1.BulkActionsToolbar);
@@ -480,7 +492,7 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
480
492
  const PaginationSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'pagination', pagination_1.DataTablePagination);
481
493
  return ((0, jsx_runtime_1.jsx)(data_table_context_1.DataTableProvider, { table: table, apiRef: internalApiRef, dataMode: dataMode, tableSize: tableSize, onTableSizeChange: (size) => {
482
494
  setTableSize(size);
483
- }, customColumnsFilter: customColumnsFilter, onChangeCustomColumnsFilter: 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: {
495
+ }, 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: {
484
496
  position: 'relative',
485
497
  zIndex: 2,
486
498
  } }, 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 CHANGED
@@ -1,10 +1,10 @@
1
1
  import { Row, SortingState, ColumnResizeMode, ColumnPinningState, RowData } from '@tanstack/react-table';
2
2
  import { ReactNode } from 'react';
3
- import type { CustomColumnFilterState, TableFilters, TableState } from '../../types';
3
+ import type { ColumnFilterState, TableFilters, TableState } from '../../types';
4
4
  import { DataTableColumn } from '../../types';
5
5
  import { DataTableSlots, PartialSlotProps } from '../../types/slots.types';
6
6
  import { DataTableSize } from '../../utils/table-helpers';
7
- import { SelectionState } from '../../features/custom-selection.feature';
7
+ import { SelectionState } from '../../features';
8
8
  export type SelectMode = 'page' | 'all';
9
9
  declare module '@tanstack/table-core' {
10
10
  interface ColumnMeta<TData extends RowData, TValue> {
@@ -27,9 +27,9 @@ export interface DataTableProps<T> {
27
27
  }>;
28
28
  exportFilename?: string;
29
29
  onExportProgress?: (progress: {
30
- processedRows: number;
31
- totalRows: number;
32
- percentage: number;
30
+ processedRows?: number;
31
+ totalRows?: number;
32
+ percentage?: number;
33
33
  }) => void;
34
34
  onExportComplete?: (result: {
35
35
  success: boolean;
@@ -90,23 +90,23 @@ export interface DataTableProps<T> {
90
90
  loading?: boolean;
91
91
  emptyMessage?: string;
92
92
  skeletonRows?: number;
93
- onColumnFiltersChange?: (filterState: CustomColumnFilterState) => void;
93
+ onColumnFiltersChange?: (filterState: ColumnFilterState) => void;
94
94
  onDataChange?: (data: T[]) => void;
95
95
  selectionColumn?: {
96
96
  width?: number;
97
97
  pinLeft?: boolean;
98
- customColumn?: DataTableColumn<any>;
98
+ customColumn?: DataTableColumn<T>;
99
99
  id?: string;
100
100
  };
101
101
  actionColumn?: {
102
102
  pinRight?: boolean;
103
- customColumn?: DataTableColumn<any>;
103
+ customColumn?: DataTableColumn<T>;
104
104
  id?: string;
105
105
  };
106
106
  expandingColumn?: {
107
107
  width?: number;
108
108
  pinLeft?: boolean;
109
- customColumn?: DataTableColumn<any>;
109
+ customColumn?: DataTableColumn<T>;
110
110
  id?: string;
111
111
  };
112
112
  slots?: Partial<DataTableSlots<T>>;
package/src/lib/components/toolbar/bulk-actions-toolbar.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { ReactNode } from 'react';
2
- import { SelectionState } from '../../features/custom-selection.feature';
2
+ import { SelectionState } from '../../features';
3
3
  export interface BulkActionsToolbarProps<T = any> {
4
4
  selectionState: SelectionState;
5
5
  selectedRowCount: number;
package/src/lib/components/toolbar/column-filter-control.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare function ColumnFilterControl(): import("react/jsx-runtime").JSX.Element;
package/src/lib/components/toolbar/{column-custom-filter-control.js → column-filter-control.js} RENAMED
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.ColumnCustomFilterControl = ColumnCustomFilterControl;
3
+ exports.ColumnFilterControl = ColumnFilterControl;
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
5
  const icons_material_1 = require("@mui/icons-material");
6
6
  const material_1 = require("@mui/material");
@@ -12,51 +12,51 @@ const column_helpers_1 = require("../../utils/column-helpers");
12
12
  const slot_helpers_1 = require("../../utils/slot-helpers");
13
13
  const filters_1 = require("../filters");
14
14
  const filter_value_input_1 = require("../filters/filter-value-input");
15
- function ColumnCustomFilterControl() {
15
+ function ColumnFilterControl() {
16
16
  var _a, _b, _c;
17
17
  const { table, slots, slotProps } = (0, data_table_context_1.useDataTableContext)();
18
18
  const FilterIconSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'filterIcon', icons_material_1.FilterList);
19
- const customFilterState = ((_a = table.getCustomColumnFilterState) === null || _a === void 0 ? void 0 : _a.call(table)) || {
19
+ const filterState = ((_a = table === null || table === void 0 ? void 0 : table.getColumnFilterState) === null || _a === void 0 ? void 0 : _a.call(table)) || {
20
20
  filters: [],
21
21
  logic: 'AND',
22
22
  pendingFilters: [],
23
23
  pendingLogic: 'AND'
24
24
  };
25
- const filters = customFilterState.pendingFilters;
26
- const filterLogic = customFilterState.pendingLogic;
27
- const activeFiltersCount = ((_c = (_b = table.getActiveColumnFilters) === null || _b === void 0 ? void 0 : _b.call(table)) === null || _c === void 0 ? void 0 : _c.length) || 0;
25
+ const filters = filterState.pendingFilters;
26
+ const filterLogic = filterState.pendingLogic;
27
+ 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;
28
28
  const filterableColumns = (0, react_1.useMemo)(() => {
29
- return table.getAllLeafColumns()
30
- .filter(column => (0, column_helpers_1.isColumnFilterable)(column));
29
+ return table === null || table === void 0 ? void 0 : table.getAllLeafColumns().filter(column => (0, column_helpers_1.isColumnFilterable)(column));
31
30
  }, [table]);
32
31
  const addFilter = (0, react_1.useCallback)((columnId, operator) => {
33
32
  var _a, _b;
34
33
  let defaultOperator = operator || '';
34
+ console.log('addFilter', columnId, operator, filterableColumns);
35
35
  if (columnId && !operator) {
36
- const column = filterableColumns.find(col => col.id === columnId);
36
+ const column = filterableColumns === null || filterableColumns === void 0 ? void 0 : filterableColumns.find(col => col.id === columnId);
37
37
  const columnType = (0, column_helpers_1.getColumnType)(column);
38
38
  const operators = filters_1.FILTER_OPERATORS[columnType] || filters_1.FILTER_OPERATORS.text;
39
39
  defaultOperator = ((_a = operators[0]) === null || _a === void 0 ? void 0 : _a.value) || 'contains';
40
40
  }
41
- (_b = table.addPendingColumnFilter) === null || _b === void 0 ? void 0 : _b.call(table, columnId || '', defaultOperator, '');
41
+ (_b = table === null || table === void 0 ? void 0 : table.addPendingColumnFilter) === null || _b === void 0 ? void 0 : _b.call(table, columnId || '', defaultOperator, '');
42
42
  }, [table, filterableColumns]);
43
43
  const handleAddFilter = (0, react_1.useCallback)(() => {
44
44
  addFilter();
45
45
  }, [addFilter]);
46
46
  const updateFilter = (0, react_1.useCallback)((filterId, updates) => {
47
47
  var _a;
48
- (_a = table.updatePendingColumnFilter) === null || _a === void 0 ? void 0 : _a.call(table, filterId, updates);
48
+ (_a = table === null || table === void 0 ? void 0 : table.updatePendingColumnFilter) === null || _a === void 0 ? void 0 : _a.call(table, filterId, updates);
49
49
  }, [table]);
50
50
  const removeFilter = (0, react_1.useCallback)((filterId) => {
51
51
  var _a;
52
- (_a = table.removePendingColumnFilter) === null || _a === void 0 ? void 0 : _a.call(table, filterId);
52
+ (_a = table === null || table === void 0 ? void 0 : table.removePendingColumnFilter) === null || _a === void 0 ? void 0 : _a.call(table, filterId);
53
53
  }, [table]);
54
54
  const clearAllFilters = (0, react_1.useCallback)((closeDialog) => {
55
55
  var _a;
56
- (_a = table.clearAllPendingColumnFilters) === null || _a === void 0 ? void 0 : _a.call(table);
56
+ (_a = table === null || table === void 0 ? void 0 : table.clearAllPendingColumnFilters) === null || _a === void 0 ? void 0 : _a.call(table);
57
57
  setTimeout(() => {
58
58
  var _a;
59
- (_a = table.applyPendingColumnFilters) === null || _a === void 0 ? void 0 : _a.call(table);
59
+ (_a = table === null || table === void 0 ? void 0 : table.applyPendingColumnFilters) === null || _a === void 0 ? void 0 : _a.call(table);
60
60
  if (closeDialog) {
61
61
  closeDialog();
62
62
  }
@@ -64,24 +64,24 @@ function ColumnCustomFilterControl() {
64
64
  }, [table]);
65
65
  const handleLogicChange = (0, react_1.useCallback)((newLogic) => {
66
66
  var _a;
67
- (_a = table.setPendingFilterLogic) === null || _a === void 0 ? void 0 : _a.call(table, newLogic);
67
+ (_a = table === null || table === void 0 ? void 0 : table.setPendingFilterLogic) === null || _a === void 0 ? void 0 : _a.call(table, newLogic);
68
68
  }, [table]);
69
69
  const applyFilters = (0, react_1.useCallback)(() => {
70
70
  var _a;
71
- (_a = table.applyPendingColumnFilters) === null || _a === void 0 ? void 0 : _a.call(table);
71
+ (_a = table === null || table === void 0 ? void 0 : table.applyPendingColumnFilters) === null || _a === void 0 ? void 0 : _a.call(table);
72
72
  }, [table]);
73
73
  const handleApplyFilters = (0, react_1.useCallback)((closeDialog) => {
74
74
  applyFilters();
75
75
  closeDialog();
76
76
  }, [applyFilters]);
77
77
  const getOperatorsForColumn = (0, react_1.useCallback)((columnId) => {
78
- const column = filterableColumns.find(col => col.id === columnId);
78
+ const column = filterableColumns === null || filterableColumns === void 0 ? void 0 : filterableColumns.find(col => col.id === columnId);
79
79
  const type = (0, column_helpers_1.getColumnType)(column);
80
80
  return filters_1.FILTER_OPERATORS[type] || filters_1.FILTER_OPERATORS.text;
81
81
  }, [filterableColumns]);
82
82
  const handleColumnChange = (0, react_1.useCallback)((filterId, newColumnId, currentFilter) => {
83
83
  var _a;
84
- const newColumn = filterableColumns.find(col => col.id === newColumnId);
84
+ const newColumn = filterableColumns === null || filterableColumns === void 0 ? void 0 : filterableColumns.find(col => col.id === newColumnId);
85
85
  const columnType = (0, column_helpers_1.getColumnType)(newColumn);
86
86
  const operators = filters_1.FILTER_OPERATORS[columnType] || filters_1.FILTER_OPERATORS.text;
87
87
  const currentOperatorValid = operators.some(op => op.value === currentFilter.operator);
@@ -115,12 +115,14 @@ function ColumnCustomFilterControl() {
115
115
  const hasPendingChanges = pendingFiltersCount > 0 || (filters.length === 0 && hasAppliedFilters);
116
116
  (0, react_1.useEffect)(() => {
117
117
  var _a;
118
- if (filters.length === 0 && filterableColumns.length > 0 && activeFiltersCount === 0) {
118
+ console.log('useEffect', filters.length, filterableColumns, { activeFiltersCount });
119
+ if (filters.length === 0 && filterableColumns && (filterableColumns === null || filterableColumns === void 0 ? void 0 : filterableColumns.length) > 0 && activeFiltersCount === 0) {
119
120
  const firstColumn = filterableColumns[0];
120
121
  const columnType = (0, column_helpers_1.getColumnType)(firstColumn);
121
122
  const operators = filters_1.FILTER_OPERATORS[columnType] || filters_1.FILTER_OPERATORS.text;
122
123
  const defaultOperator = ((_a = operators[0]) === null || _a === void 0 ? void 0 : _a.value) || 'contains';
123
- addFilter(firstColumn.id, defaultOperator);
124
+ console.log('useEffect', firstColumn, columnType, operators, defaultOperator);
125
+ addFilter(firstColumn === null || firstColumn === void 0 ? void 0 : firstColumn.id, defaultOperator);
124
126
  }
125
127
  }, [filters.length, filterableColumns, addFilter, activeFiltersCount]);
126
128
  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: {