@ackplus/react-tanstack-data-table 1.0.25 → 1.0.27

package/package.json

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

package/src/lib/components/rows/empty-data-row.d.ts

@@ -1,7 +1,8 @@
 import { TableRowProps, TableCellProps, SxProps } from '@mui/material';
+import { ReactNode } from 'react';
 export interface EmptyDataRowProps {
     colSpan: number;
-    message: string;
+    message: string | ReactNode;
     rowProps?: TableRowProps;
     cellProps?: TableCellProps;
     containerSx?: SxProps;

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, onPaginationChange, onGlobalFilterChange, slots = {}, slotProps = {}, logging, }, 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 = 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) {
     var _a;
     const isServerMode = dataMode === 'server';
     const isServerPagination = paginationMode === 'server' || isServerMode;
@@ -74,7 +74,7 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
     const [selectionState, setSelectionState] = (0, react_1.useState)((initialState === null || initialState === void 0 ? void 0 : initialState.selectionState) || DEFAULT_INITIAL_STATE.selectionState);
     const [columnFilter, setColumnFilter] = (0, react_1.useState)((initialState === null || initialState === void 0 ? void 0 : initialState.columnFilter) || DEFAULT_INITIAL_STATE.columnFilter);
     const [expanded, setExpanded] = (0, react_1.useState)({});
-    const [tableSize, setTableSize] = (0, react_1.useState)();
+    const [tableSize, setTableSize] = (0, react_1.useState)(initialTableSize || 'medium');
     const [columnOrder, setColumnOrder] = (0, react_1.useState)((initialState === null || initialState === void 0 ? void 0 : initialState.columnOrder) || DEFAULT_INITIAL_STATE.columnOrder);
     const [columnPinning, setColumnPinning] = (0, react_1.useState)((initialState === null || initialState === void 0 ? void 0 : initialState.columnPinning) || DEFAULT_INITIAL_STATE.columnPinning);
     const [serverData, setServerData] = (0, react_1.useState)(null);
@@ -96,15 +96,8 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
             const selectionColumnMap = (0, special_columns_utils_1.createSelectionColumn)(Object.assign(Object.assign({}, ((slotProps === null || slotProps === void 0 ? void 0 : slotProps.selectionColumn) && typeof slotProps.selectionColumn === 'object' ? 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,
-    ]);
+        return (0, utils_1.withIdsDeep)(columnsMap);
+    }, [columns, enableExpanding, enableRowSelection, enableMultiRowSelection, slotProps === null || slotProps === void 0 ? void 0 : slotProps.expandColumn, slotProps === null || slotProps === void 0 ? void 0 : slotProps.selectionColumn]);
     const isExporting = (0, react_1.useMemo)(() => exportController !== null, [exportController]);
     const isSomeRowsSelected = (0, react_1.useMemo)(() => {
         if (!enableBulkActions || !enableRowSelection)
@@ -561,7 +554,7 @@ exports.DataTable = (0, react_1.forwardRef)(function DataTable({ initialState, c
                 table.setColumnPinning(pinning);
             },
             resetColumnPinning: () => {
-                table.setColumnPinning(table.initialState.columnPinning);
+                table.setColumnPinning(initialStateConfig.columnPinning || { left: [], right: [] });
             },
         },
         columnResizing: {

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

@@ -87,7 +87,7 @@ export interface DataTableProps<T> {
     enableExport?: boolean;
     enableReset?: boolean;
     loading?: boolean;
-    emptyMessage?: string;
+    emptyMessage?: string | ReactNode;
     skeletonRows?: number;
     onColumnFiltersChange?: (filterState: ColumnFilterState) => void;
     onPaginationChange?: (pagination: PaginationState) => void;

package/src/lib/components/toolbar/column-reset-control.js

@@ -13,6 +13,7 @@ function ColumnResetControl(props = {}) {
     const handleResetLayout = () => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
         const actions = props.resetActions || ['columnOrder', 'columnPinning', 'columnSizing'];
+        console.log('actions', actions);
         if (!(apiRef === null || apiRef === void 0 ? void 0 : apiRef.current))
             return;
         if (actions.includes('columnOrder')) {

package/src/lib/utils/column-helpers.d.ts

@@ -1,6 +1,7 @@
-import { Column } from "@tanstack/react-table";
+import { Column, ColumnDef } from "@tanstack/react-table";
 export type ColumnType = 'text' | 'number' | 'date' | 'boolean' | 'select' | 'actions';
 export declare function getColumnType(column: Column<any, unknown>): ColumnType;
 export declare function getCustomFilterComponent(column: Column<any, unknown>): any;
 export declare function getColumnOptions(column: Column<any, unknown>): any[];
+export declare function withIdsDeep<T>(cols: ColumnDef<T, any>[]): ColumnDef<T, any>[];
 export declare function isColumnFilterable(column: Column<any, unknown>): boolean;

package/src/lib/utils/column-helpers.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getColumnType = getColumnType;
 exports.getCustomFilterComponent = getCustomFilterComponent;
 exports.getColumnOptions = getColumnOptions;
+exports.withIdsDeep = withIdsDeep;
 exports.isColumnFilterable = isColumnFilterable;
 function getColumnType(column) {
     var _a;
@@ -35,6 +36,14 @@ function getColumnOptions(column) {
     }
     return [];
 }
+function withIdsDeep(cols) {
+    return cols.map((c, i) => {
+        var _a, _b;
+        return (Object.assign(Object.assign(Object.assign({}, c), { id: (_b = (_a = c.id) !== null && _a !== void 0 ? _a : c.accessorKey) !== null && _b !== void 0 ? _b : `col_${i}` }), (Array.isArray(c.columns) && {
+            columns: withIdsDeep(c.columns)
+        })));
+    });
+}
 function isColumnFilterable(column) {
     var _a, _b;
     if (((_a = column === null || column === void 0 ? void 0 : column.columnDef) === null || _a === void 0 ? void 0 : _a.filterable) !== undefined) {