@ackplus/react-tanstack-data-table 1.0.30 → 1.0.31

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 (5) hide show
  1. package/package.json +1 -1
  2. package/src/lib/components/table/data-table.js +22 -3
  3. package/src/lib/components/table/data-table.types.d.ts +2 -1
  4. package/src/lib/components/toolbar/column-pinning-control.js +6 -6
  5. package/src/lib/components/toolbar/column-visibility-control.js +4 -4
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.30",
4
+ "version": "1.0.31",
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.js CHANGED
@@ -32,6 +32,7 @@ const DEFAULT_INITIAL_STATE = {
32
32
  left: [],
33
33
  right: [],
34
34
  },
35
+ columnVisibility: {},
35
36
  columnFilter: {
36
37
  filters: [],
37
38
  logic: 'AND',
@@ -39,7 +40,7 @@ const DEFAULT_INITIAL_STATE = {
39
40
  pendingLogic: 'AND',
40
41
  },
41
42
  };
42
- 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 = false, paginationMode = 'client', enableGlobalFilter = true, enableColumnFilter = false, filterMode = 'client', enableSorting = true, sortingMode = 'client', onSortingChange, exportFilename = 'export', onExportProgress, onExportComplete, onExportError, onServerExport, onExportCancel, enableHover = true, enableStripes = false, tableProps = {}, fitToScreen = true, tableSize: initialTableSize = 'medium', enableStickyHeaderOrFooter = false, maxHeight = '400px', enableVirtualization = false, estimateRowHeight = 52, enableColumnVisibility = true, enableTableSizeControl = true, enableExport = false, enableReset = true, loading = false, emptyMessage = 'No data available', skeletonRows = 5, onColumnFiltersChange, onPaginationChange, onGlobalFilterChange, slots = {}, slotProps = {}, logging, }, 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, onColumnVisibilityChange, enableColumnVisibility = true, enableExpanding = false, getRowCanExpand, renderSubComponent, enablePagination = false, paginationMode = 'client', enableGlobalFilter = true, enableColumnFilter = false, filterMode = 'client', enableSorting = true, sortingMode = 'client', onSortingChange, exportFilename = 'export', onExportProgress, onExportComplete, onExportError, onServerExport, onExportCancel, enableHover = true, enableStripes = false, tableProps = {}, fitToScreen = true, tableSize: initialTableSize = 'medium', enableStickyHeaderOrFooter = false, maxHeight = '400px', enableVirtualization = false, estimateRowHeight = 52, enableTableSizeControl = true, enableExport = false, enableReset = true, loading = false, emptyMessage = 'No data available', skeletonRows = 5, onColumnFiltersChange, onPaginationChange, onGlobalFilterChange, slots = {}, slotProps = {}, logging, }, ref) {
43
44
  var _a;
44
45
  const isServerMode = dataMode === 'server';
45
46
  const isServerPagination = paginationMode === 'server' || isServerMode;
@@ -220,7 +221,7 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
220
221
  if (logger.isLevelEnabled('debug')) {
221
222
  logger.debug('Emitting tableStateChange', currentState);
222
223
  }
223
- onDataStateChange(currentState);
224
+ onDataStateChange === null || onDataStateChange === void 0 ? void 0 : onDataStateChange(currentState);
224
225
  }, [
225
226
  onDataStateChange,
226
227
  globalFilter,
@@ -293,6 +294,24 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
293
294
  onColumnPinningChange(newColumnPinning);
294
295
  }
295
296
  }, [onColumnPinningChange, columnPinning]);
297
+ const handleColumnVisibilityChange = (0, react_1.useCallback)((updater) => {
298
+ var _a, _b;
299
+ const tableInstance = (_b = (_a = internalApiRef.current) === null || _a === void 0 ? void 0 : _a.table) === null || _b === void 0 ? void 0 : _b.getTable();
300
+ if (!tableInstance)
301
+ return;
302
+ const currentVisibility = tableInstance.getState().columnVisibility;
303
+ const newVisibility = typeof updater === 'function' ? updater(currentVisibility) : updater;
304
+ if (onColumnVisibilityChange) {
305
+ setTimeout(() => {
306
+ onColumnVisibilityChange(newVisibility);
307
+ }, 0);
308
+ }
309
+ if (onDataStateChange) {
310
+ setTimeout(() => {
311
+ tableStateChange({ columnVisibility: newVisibility });
312
+ }, 0);
313
+ }
314
+ }, [onColumnVisibilityChange, onDataStateChange, tableStateChange]);
296
315
  const handlePaginationChange = (0, react_1.useCallback)((updater) => {
297
316
  const newPagination = typeof updater === 'function' ? updater(pagination) : updater;
298
317
  if (logger.isLevelEnabled('debug')) {
@@ -411,7 +430,7 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
411
430
  }
412
431
  }, 0);
413
432
  }, [isServerFiltering, fetchData, tableStateChange]);
414
- 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({}, DEFAULT_INITIAL_STATE), 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 }));
433
+ 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(Object.assign({ _features: [column_filter_feature_1.ColumnFilterFeature, features_1.SelectionFeature], data: tableData, columns: enhancedColumns, initialState: Object.assign({}, DEFAULT_INITIAL_STATE), 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 } : {})), (enableColumnVisibility ? { onColumnVisibilityChange: handleColumnVisibilityChange } : {})), { 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 }));
415
434
  const rows = ((_a = table.getRowModel()) === null || _a === void 0 ? void 0 : _a.rows) || [];
416
435
  const rowVirtualizer = (0, react_virtual_1.useVirtualizer)({
417
436
  count: rows.length,
package/src/lib/components/table/data-table.types.d.ts CHANGED
@@ -61,6 +61,8 @@ export interface DataTableProps<T> {
61
61
  onColumnDragEnd?: (columnOrder: string[]) => void;
62
62
  enableColumnPinning?: boolean;
63
63
  onColumnPinningChange?: (pinning: ColumnPinningState) => void;
64
+ enableColumnVisibility?: boolean;
65
+ onColumnVisibilityChange?: (visibility: Record<string, boolean>) => void;
64
66
  enableExpanding?: boolean;
65
67
  getRowCanExpand?: (row: Row<T>) => boolean;
66
68
  renderSubComponent?: (row: Row<T>) => ReactNode;
@@ -82,7 +84,6 @@ export interface DataTableProps<T> {
82
84
  maxHeight?: string | number;
83
85
  enableVirtualization?: boolean;
84
86
  estimateRowHeight?: number;
85
- enableColumnVisibility?: boolean;
86
87
  enableTableSizeControl?: boolean;
87
88
  enableExport?: boolean;
88
89
  enableReset?: boolean;
package/src/lib/components/toolbar/column-pinning-control.js CHANGED
@@ -20,16 +20,16 @@ function ColumnPinningControl(props = {}) {
20
20
  const UnpinIconSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'unpinIcon', icons_1.UnpinIcon);
21
21
  const LeftIconSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'leftIcon', icons_material_1.ArrowLeftOutlined);
22
22
  const RightIconSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'rightIcon', icons_material_1.ArrowRightOutlined);
23
- const columnPinning = table.getState().columnPinning;
23
+ const columnPinning = (table === null || table === void 0 ? void 0 : table.getState().columnPinning) || {};
24
24
  const allColumns = (0, react_1.useMemo)(() => {
25
- var _a, _b;
25
+ var _a, _b, _c;
26
26
  if ((_a = slotProps === null || slotProps === void 0 ? void 0 : slotProps.columnsPanel) === null || _a === void 0 ? void 0 : _a.getPinnableColumns) {
27
- return (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.columnsPanel) === null || _b === void 0 ? void 0 : _b.getPinnableColumns(table.getAllLeafColumns());
27
+ return (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.columnsPanel) === null || _b === void 0 ? void 0 : _b.getPinnableColumns((table === null || table === void 0 ? void 0 : table.getAllLeafColumns()) || []);
28
28
  }
29
- return table.getAllLeafColumns().filter(column => column.getCanPin());
29
+ return ((_c = table === null || table === void 0 ? void 0 : table.getAllLeafColumns()) === null || _c === void 0 ? void 0 : _c.filter(column => column.getCanPin())) || [];
30
30
  }, [slotProps === null || slotProps === void 0 ? void 0 : slotProps.columnsPanel, table]);
31
31
  const handlePinColumn = (columnId, position) => {
32
- const currentPinning = table.getState().columnPinning;
32
+ const currentPinning = (table === null || table === void 0 ? void 0 : table.getState().columnPinning) || {};
33
33
  const newPinning = Object.assign({}, currentPinning);
34
34
  newPinning.left = (newPinning.left || []).filter(id => id !== columnId);
35
35
  newPinning.right = (newPinning.right || []).filter(id => id !== columnId);
@@ -39,7 +39,7 @@ function ColumnPinningControl(props = {}) {
39
39
  else if (position === 'right') {
40
40
  newPinning.right = [...(newPinning.right || []), columnId];
41
41
  }
42
- table.setColumnPinning(newPinning);
42
+ table === null || table === void 0 ? void 0 : table.setColumnPinning(newPinning);
43
43
  };
44
44
  const getColumnPinStatus = (columnId) => {
45
45
  var _a, _b;
package/src/lib/components/toolbar/column-visibility-control.js CHANGED
@@ -13,15 +13,15 @@ function ColumnVisibilityControl(props = {}) {
13
13
  const iconSlotProps = (0, slot_helpers_1.extractSlotProps)(slotProps, 'columnIcon');
14
14
  const ColumnIconSlot = (0, slot_helpers_1.getSlotComponent)(slots, 'columnIcon', icons_material_1.ViewColumnOutlined);
15
15
  const columns = (0, react_1.useMemo)(() => {
16
- var _a, _b;
16
+ var _a, _b, _c;
17
17
  if ((_a = slotProps === null || slotProps === void 0 ? void 0 : slotProps.columnsPanel) === null || _a === void 0 ? void 0 : _a.getTogglableColumns) {
18
- return (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.columnsPanel) === null || _b === void 0 ? void 0 : _b.getTogglableColumns(table.getAllLeafColumns());
18
+ return (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.columnsPanel) === null || _b === void 0 ? void 0 : _b.getTogglableColumns((table === null || table === void 0 ? void 0 : table.getAllLeafColumns()) || []);
19
19
  }
20
- return table.getAllLeafColumns().filter(column => column.getCanHide());
20
+ return ((_c = table === null || table === void 0 ? void 0 : table.getAllLeafColumns()) === null || _c === void 0 ? void 0 : _c.filter(column => column.getCanHide())) || [];
21
21
  }, [slotProps === null || slotProps === void 0 ? void 0 : slotProps.columnsPanel, table]);
22
22
  const handleColumnVisibilityChange = ((columnId, visible) => {
23
23
  var _a;
24
- (_a = table.getColumn(columnId)) === null || _a === void 0 ? void 0 : _a.toggleVisibility(visible);
24
+ (_a = table === null || table === void 0 ? void 0 : table.getColumn(columnId)) === null || _a === void 0 ? void 0 : _a.toggleVisibility(visible);
25
25
  });
26
26
  const mergedProps = (0, slot_helpers_1.mergeSlotProps)({
27
27
  size: 'small',