@wavemaker/react-runtime 11.14.1-rc.236

package/components/data/table/hooks/useCellState.js

@@ -0,0 +1,117 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCellState = exports.setSelectedRowIds = exports.setSelectedRowId = exports.setCellValue = exports.getSelectedRowIds = exports.getSelectedRowId = exports.getCellValue = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _lodashEs = require("lodash-es");
+var _react = require("react");
+/**
+ * Generic hook to manage table state
+ * @param tableId - Unique identifier for the table instance (e.g., table name)
+ */
+var useCellState = exports.useCellState = function useCellState(tableId) {
+  // Store state with initial structure
+  var stateRef = (0, _react.useRef)({
+    cells: {},
+    selection: {
+      selectedRowId: null,
+      selectedRowIds: []
+    }
+  });
+
+  // Get a value from the state using lodash path
+  var getValue = (0, _react.useCallback)(function (path, defaultValue) {
+    return (0, _lodashEs.get)(stateRef.current, path, defaultValue);
+  }, []);
+
+  // Set a value in the state using lodash path
+  var setValue = (0, _react.useCallback)(function (path, value) {
+    var existingValue = (0, _lodashEs.get)(stateRef.current, path);
+
+    // Only set if different
+    if (!(0, _lodashEs.isEqual)(existingValue, value)) {
+      (0, _lodashEs.set)(stateRef.current, path, value);
+    }
+  }, []);
+
+  // Update multiple fields at once
+  var updateState = (0, _react.useCallback)(function (updates) {
+    if (typeof updates === "function") {
+      stateRef.current = updates((0, _lodashEs.cloneDeep)(stateRef.current));
+    } else {
+      Object.entries(updates).forEach(function (_ref) {
+        var _ref2 = (0, _slicedToArray2["default"])(_ref, 2),
+          path = _ref2[0],
+          value = _ref2[1];
+        (0, _lodashEs.set)(stateRef.current, path, value);
+      });
+    }
+  }, []);
+
+  // Check if a path exists
+  var hasValue = (0, _react.useCallback)(function (path) {
+    return (0, _lodashEs.has)(stateRef.current, path);
+  }, []);
+
+  // Remove a value
+  var removeValue = (0, _react.useCallback)(function (path) {
+    (0, _lodashEs.unset)(stateRef.current, path);
+  }, []);
+
+  // Clear all state
+  var clearState = (0, _react.useCallback)(function () {
+    stateRef.current = {
+      cells: {},
+      selection: {
+        selectedRowId: null,
+        selectedRowIds: []
+      }
+    };
+  }, []);
+
+  // Get the entire state
+  var getState = (0, _react.useCallback)(function () {
+    return (0, _lodashEs.cloneDeep)(stateRef.current);
+  }, []);
+
+  // Set the entire state
+  var setState = (0, _react.useCallback)(function (state) {
+    stateRef.current = (0, _lodashEs.cloneDeep)(state);
+  }, []);
+  return {
+    getValue: getValue,
+    setValue: setValue,
+    updateState: updateState,
+    hasValue: hasValue,
+    removeValue: removeValue,
+    clearState: clearState,
+    getState: getState,
+    setState: setState,
+    tableId: tableId
+  };
+};
+
+// Helper functions for common operations
+var getCellValue = exports.getCellValue = function getCellValue(state, rowId, fieldName, defaultValue) {
+  return state.getValue(["cells", rowId, fieldName], defaultValue);
+};
+var setCellValue = exports.setCellValue = function setCellValue(state, rowId, fieldName, value) {
+  state.setValue(["cells", rowId, fieldName], value);
+};
+var getSelectedRowId = exports.getSelectedRowId = function getSelectedRowId(state) {
+  var _state$getValue;
+  return (_state$getValue = state.getValue("selection.selectedRowId", null)) !== null && _state$getValue !== void 0 ? _state$getValue : null;
+};
+var setSelectedRowId = exports.setSelectedRowId = function setSelectedRowId(state, rowId) {
+  state.setValue("selection.selectedRowId", rowId);
+};
+var getSelectedRowIds = exports.getSelectedRowIds = function getSelectedRowIds(state) {
+  var _state$getValue2;
+  return (_state$getValue2 = state.getValue("selection.selectedRowIds", [])) !== null && _state$getValue2 !== void 0 ? _state$getValue2 : [];
+};
+var setSelectedRowIds = exports.setSelectedRowIds = function setSelectedRowIds(state, rowIds) {
+  state.setValue("selection.selectedRowIds", rowIds);
+};

package/components/data/table/hooks/useDynamicColumns.js

@@ -0,0 +1,85 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDynamicColumns = exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _dynamicColumns = require("../utils/dynamic-columns");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * Props for useDynamicColumns hook
+ */
+
+/**
+ * Return type for useDynamicColumns hook
+ */
+
+/**
+ * Hook to generate dynamic table columns when no wmTableColumns children are provided
+ *
+ * This hook automatically detects when:
+ * - No children columns are provided (React.Children.count(children) === 0)
+ * - Dataset contains valid data
+ *
+ * When both conditions are met, it generates column definitions from the data,
+ * similar to Angular's dynamic table behavior.
+ *
+ * @param dataset - Array of data objects
+ * @param children - React children (wmTableColumns)
+ * @param listener - Component listener for event handling
+ * @returns Object containing dynamicColumns and isDynamicTable flag
+ */
+var useDynamicColumns = exports.useDynamicColumns = function useDynamicColumns(_ref) {
+  var dataset = _ref.dataset,
+    children = _ref.children,
+    listener = _ref.listener;
+  var _useMemo = (0, _react.useMemo)(function () {
+      // Check if children are provided (static columns exist)
+      var hasChildren = _react["default"].Children.count(children) > 0;
+
+      // If children exist, don't generate dynamic columns
+      if (hasChildren) {
+        return {
+          dynamicColumns: [],
+          isDynamicTable: false
+        };
+      }
+
+      // Check if data is valid for column generation
+      if (!(0, _dynamicColumns.isValidDataForColumns)(dataset)) {
+        // For dynamic tables, return an empty state but mark as dynamic
+        // This prevents falling back to static columns when data is just loading
+        return {
+          dynamicColumns: [],
+          isDynamicTable: hasChildren === false // Only true if explicitly no children
+        };
+      }
+
+      // Generate columns from data
+      var generatedColumns = (0, _dynamicColumns.generateColumnsFromData)(dataset);
+
+      // Set listener on all generated columns
+      var columnsWithListener = generatedColumns.map(function (col) {
+        return _objectSpread(_objectSpread({}, col), {}, {
+          listener: listener
+        });
+      });
+      return {
+        dynamicColumns: columnsWithListener,
+        isDynamicTable: true
+      };
+    }, [dataset, children, listener]),
+    dynamicColumns = _useMemo.dynamicColumns,
+    isDynamicTable = _useMemo.isDynamicTable;
+  return {
+    dynamicColumns: dynamicColumns,
+    isDynamicTable: isDynamicTable
+  };
+};
+var _default = exports["default"] = useDynamicColumns;

package/components/data/table/hooks/useEditingState.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useEditingState = void 0;
+var _react = require("react");
+/**
+ * Hook to manage editing state for table rows
+ */
+var useEditingState = exports.useEditingState = function useEditingState() {
+  var _useState = (0, _react.useState)(null),
+    editingRowId = _useState[0],
+    setEditingRowId = _useState[1];
+  var _useState2 = (0, _react.useState)(false),
+    isAddingNewRow = _useState2[0],
+    setIsAddingNewRow = _useState2[1];
+  var _useState3 = (0, _react.useState)(0),
+    sessionKey = _useState3[0],
+    setSessionKey = _useState3[1];
+  var editingRowDataRef = (0, _react.useRef)({});
+  var newRowDataRef = (0, _react.useRef)({});
+  var incrementSessionKey = (0, _react.useCallback)(function () {
+    setSessionKey(function (prev) {
+      return prev + 1;
+    });
+  }, []);
+  var resetEditingData = (0, _react.useCallback)(function () {
+    editingRowDataRef.current = {};
+    newRowDataRef.current = {};
+  }, []);
+  var isRowEditing = (0, _react.useCallback)(function (rowId) {
+    return editingRowId === rowId;
+  }, [editingRowId]);
+  return {
+    editingRowId: editingRowId,
+    isAddingNewRow: isAddingNewRow,
+    sessionKey: sessionKey,
+    editingRowDataRef: editingRowDataRef,
+    newRowDataRef: newRowDataRef,
+    setEditingRowId: setEditingRowId,
+    setIsAddingNewRow: setIsAddingNewRow,
+    incrementSessionKey: incrementSessionKey,
+    resetEditingData: resetEditingData,
+    isRowEditing: isRowEditing
+  };
+};

package/components/data/table/hooks/useFormWidget.js

@@ -0,0 +1,184 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFormWidget = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _utils = require("../utils");
+var _text = _interopRequireDefault(require("../../../input/text"));
+var _textarea = _interopRequireDefault(require("../../../input/textarea"));
+var _number = _interopRequireDefault(require("../../../input/number"));
+var _currency = _interopRequireDefault(require("../../../input/currency"));
+var _datetime = _interopRequireDefault(require("../../../input/epoch/datetime"));
+var _time = _interopRequireDefault(require("../../../input/epoch/time"));
+var _date = _interopRequireDefault(require("../../../input/epoch/date"));
+var _select = _interopRequireDefault(require("../../../input/select"));
+var _slider = _interopRequireDefault(require("../../../input/slider"));
+var _rating = _interopRequireDefault(require("../../../input/rating"));
+var _colorPicker = _interopRequireDefault(require("../../../input/color-picker"));
+var _fileupload = _interopRequireDefault(require("../../../input/fileupload"));
+var _chips = _interopRequireDefault(require("../../../input/chips"));
+var _richtexteditor = _interopRequireDefault(require("../../../basic/richtexteditor"));
+var _search = _interopRequireDefault(require("../../../basic/search"));
+var _checkbox = _interopRequireDefault(require("../../../input/default/checkbox"));
+var _switch = _interopRequireDefault(require("../../../input/default/switch"));
+var _checkboxset = _interopRequireDefault(require("../../../input/default/checkboxset"));
+var _radioset = _interopRequireDefault(require("../../../input/default/radioset"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
+var __jsx = _react["default"].createElement; // Import form widgets
+var useFormWidget = exports.useFormWidget = function useFormWidget(_ref) {
+  var listener = _ref.listener;
+  // Function to render the appropriate form widget based on editWidgetType
+  var renderFormWidget = (0, _react.useCallback)(function (fieldName, widgetType, value, fieldChangeCallback, widgetProps) {
+    // Use defaultvalue if value is null/undefined and defaultvalue is provided
+    var effectiveValue = value !== undefined && value !== null ? value : (widgetProps === null || widgetProps === void 0 ? void 0 : widgetProps.defaultvalue) || "";
+    var sessionSuffix = widgetProps !== null && widgetProps !== void 0 && widgetProps.sessionKey ? "_".concat(widgetProps.sessionKey) : "";
+    var uniqueName = "edit_".concat(fieldName).concat(sessionSuffix);
+    var commonProps = {
+      key: uniqueName,
+      // Add key to force component recreation
+      name: uniqueName,
+      datavalue: effectiveValue,
+      required: (widgetProps === null || widgetProps === void 0 ? void 0 : widgetProps.required) || false,
+      disabled: (widgetProps === null || widgetProps === void 0 ? void 0 : widgetProps.disabled) || false,
+      placeholder: (widgetProps === null || widgetProps === void 0 ? void 0 : widgetProps.placeholder) || "Enter ".concat(fieldName),
+      onChange: function onChange(event, widget, newVal) {
+        var _widgetProps$column;
+        if (fieldChangeCallback) {
+          fieldChangeCallback(newVal);
+        }
+        // Call the custom onChange handler from column if provided
+        if (widgetProps !== null && widgetProps !== void 0 && (_widgetProps$column = widgetProps.column) !== null && _widgetProps$column !== void 0 && _widgetProps$column.onChange) {
+          widgetProps.column.onChange(event, {}, widgetProps === null || widgetProps === void 0 ? void 0 : widgetProps.rowData);
+        }
+      },
+      listener: listener,
+      rowData: widgetProps === null || widgetProps === void 0 ? void 0 : widgetProps.rowData,
+      column: widgetProps === null || widgetProps === void 0 ? void 0 : widgetProps.column
+    };
+
+    // Helper function to wrap event handlers with the correct parameters
+    var wrapEventHandler = function wrapEventHandler(handler) {
+      return function (event) {
+        // Pass event, widget (empty for now), and rowData
+        handler(event, {}, widgetProps === null || widgetProps === void 0 ? void 0 : widgetProps.rowData);
+      };
+    };
+
+    // Extract event handlers from column if they exist and wrap them
+    var column = widgetProps === null || widgetProps === void 0 ? void 0 : widgetProps.column;
+    if (column) {
+      if (column.onClick) {
+        commonProps.onClick = wrapEventHandler(column.onClick);
+      }
+      if (column.onFocus) {
+        commonProps.onFocus = wrapEventHandler(column.onFocus);
+      }
+      if (column.onBlur) {
+        commonProps.onBlur = wrapEventHandler(column.onBlur);
+      }
+      if (column.onKeypress) {
+        commonProps.onKeypress = wrapEventHandler(column.onKeypress);
+      }
+      if (column.onKeydown) {
+        commonProps.onKeydown = wrapEventHandler(column.onKeydown);
+      }
+      if (column.onKeyup) {
+        commonProps.onKeyup = wrapEventHandler(column.onKeyup);
+      }
+      if (column.onMouseEnter) {
+        commonProps.onMouseEnter = wrapEventHandler(column.onMouseEnter);
+      }
+      if (column.onMouseLeave) {
+        commonProps.onMouseLeave = wrapEventHandler(column.onMouseLeave);
+      }
+    }
+    var mappedWidgetType = (0, _utils.getWidgetMappingForType)(widgetType);
+
+    // Widget mapping with proper components
+    switch (mappedWidgetType) {
+      case "WmText":
+        // Check if column has editinputtype property
+        var editInputType = (column === null || column === void 0 ? void 0 : column.editinputtype) || "text";
+        return __jsx(_text["default"], (0, _extends2["default"])({}, commonProps, {
+          type: editInputType,
+          updateon: "keypress"
+        }));
+      case "WmPassword":
+        return __jsx(_text["default"], (0, _extends2["default"])({}, commonProps, {
+          type: "password",
+          updateon: "keypress"
+        }));
+      case "WmTextarea":
+        return __jsx(_textarea["default"], (0, _extends2["default"])({}, commonProps, {
+          updateon: "keypress"
+        }));
+      case "WmCheckbox":
+        var checkboxDataset = (0, _utils.getBooleanDataset)();
+        return __jsx(_checkbox["default"], (0, _extends2["default"])({}, commonProps, {
+          dataset: checkboxDataset
+        }));
+      case "WmToggle":
+      case "WmSwitch":
+        var switchDataset = (0, _utils.getBooleanDataset)();
+        return __jsx(_switch["default"], (0, _extends2["default"])({}, commonProps, {
+          dataset: switchDataset
+        }));
+      case "WmNumber":
+        return __jsx(_number["default"], commonProps);
+      case "WmCurrency":
+        return __jsx(_currency["default"], commonProps);
+      case "WmSlider":
+        return __jsx(_slider["default"], commonProps);
+      case "WmRichtext":
+      case "WmRichtexteditor":
+        return __jsx(_richtexteditor["default"], commonProps);
+      case "WmSelect":
+        return __jsx(_select["default"], (0, _extends2["default"])({}, commonProps, {
+          dataset: []
+        }));
+      case "WmCheckboxset":
+        return __jsx(_checkboxset["default"], (0, _extends2["default"])({}, commonProps, {
+          dataset: []
+        }));
+      case "WmRadioset":
+        return __jsx(_radioset["default"], (0, _extends2["default"])({}, commonProps, {
+          dataset: []
+        }));
+      case "WmDate":
+        return __jsx(_date["default"], commonProps);
+      case "WmTime":
+        return __jsx(_time["default"], commonProps);
+      case "WmTimestamp":
+      case "WmDatetime":
+      case "WmDateTime":
+        return __jsx(_datetime["default"], commonProps);
+      case "WmRating":
+        return __jsx(_rating["default"], commonProps);
+      case "WmAutocomplete":
+        return __jsx(_search["default"], (0, _extends2["default"])({}, commonProps, {
+          dataset: []
+        }));
+      case "WmChips":
+        return __jsx(_chips["default"], (0, _extends2["default"])({}, commonProps, {
+          dataset: []
+        }));
+      case "WmColorpicker":
+      case "WmColorPicker":
+        return __jsx(_colorPicker["default"], commonProps);
+      case "WmFileupload":
+        return __jsx(_fileupload["default"], commonProps);
+      default:
+        // Unknown widget types fallback to text input
+        console.warn("Unknown widget type: ".concat(widgetType, ", falling back to WmText"));
+        return __jsx(_text["default"], commonProps);
+    }
+  }, []);
+  return {
+    renderFormWidget: renderFormWidget
+  };
+};

package/components/data/table/hooks/usePaginationState.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePaginationState = void 0;
+var _react = require("react");
+/**
+ * Hook to manage pagination state and behavior
+ */
+var usePaginationState = exports.usePaginationState = function usePaginationState(_ref) {
+  var table = _ref.table,
+    editmode = _ref.editmode,
+    internalDataset = _ref.internalDataset,
+    isAddingNewRow = _ref.isAddingNewRow,
+    cancelEditing = _ref.cancelEditing,
+    datasource = _ref.datasource,
+    isServerSidePagination = _ref.isServerSidePagination;
+  var prevPageRef = (0, _react.useRef)(table.getState().pagination.pageIndex);
+
+  // Hide add new row when page changes
+  (0, _react.useEffect)(function () {
+    var currentPage = table.getState().pagination.pageIndex;
+    if (currentPage !== prevPageRef.current && isAddingNewRow) {
+      cancelEditing();
+    }
+    prevPageRef.current = currentPage;
+  }, [table, isAddingNewRow, cancelEditing]);
+  var handlePaginationChange = (0, _react.useCallback)(function (event, widget, index) {
+    if (editmode === "quickedit" && !isServerSidePagination) {
+      var newPageIndex = index - 1; // Convert to 0-based index
+      var pageSize = table.getState().pagination.pageSize;
+      var dataLength = internalDataset.length;
+      var startIdx = newPageIndex * pageSize;
+
+      // If this would be an empty page (no data on it), prevent navigation
+      if (startIdx >= dataLength && dataLength > 0) {
+        // Calculate the correct page to navigate to
+        var correctPage = Math.ceil(dataLength / pageSize);
+        if (correctPage > 0) {
+          table.setPageIndex(correctPage - 1); // Convert to 0-based index
+          return;
+        }
+      }
+    }
+    table.setPageIndex(index - 1);
+  }, [editmode, internalDataset, table, isServerSidePagination]);
+  var handlePageSizeChange = (0, _react.useCallback)(function (newPageSize) {
+    // Update datasource maxResults if datasource has paging capability
+    if (isServerSidePagination && datasource && datasource.maxResults !== undefined) {
+      datasource.maxResults = newPageSize;
+    }
+    table.setPageSize(newPageSize);
+    table.setPageIndex(0); // Reset to first page
+  }, [table, isServerSidePagination, datasource]);
+  return {
+    handlePaginationChange: handlePaginationChange,
+    handlePageSizeChange: handlePageSizeChange
+  };
+};

package/components/data/table/hooks/usePanelStructure.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePanelStructure = void 0;
+var _react = require("react");
+var _utils = require("../utils");
+var usePanelStructure = exports.usePanelStructure = function usePanelStructure(_ref) {
+  var title = _ref.title,
+    subheading = _ref.subheading,
+    iconclass = _ref.iconclass,
+    _ref$exportOptions = _ref.exportOptions,
+    exportOptions = _ref$exportOptions === void 0 ? [] : _ref$exportOptions,
+    headerActions = _ref.headerActions,
+    footerActions = _ref.footerActions,
+    shownavigation = _ref.shownavigation,
+    onDemandLoad = _ref.onDemandLoad,
+    internalDataset = _ref.internalDataset,
+    pagesize = _ref.pagesize,
+    allowpagesizechange = _ref.allowpagesizechange,
+    datasource = _ref.datasource;
+  var showPanelHeading = (0, _react.useMemo)(function () {
+    return (0, _utils.shouldShowPanelHeading)(title, subheading, iconclass, exportOptions, headerActions);
+  }, [title, subheading, iconclass, exportOptions, headerActions]);
+  var showPagination = (0, _react.useMemo)(function () {
+    return (0, _utils.shouldShowPagination)({
+      shownavigation: shownavigation,
+      onDemandLoad: onDemandLoad,
+      internalDataset: internalDataset,
+      pagesize: pagesize,
+      allowpagesizechange: allowpagesizechange,
+      datasource: datasource
+    });
+  }, [shownavigation, onDemandLoad, internalDataset, pagesize, allowpagesizechange, datasource]);
+  return {
+    showPanelHeading: showPanelHeading,
+    showPagination: showPagination
+  };
+};

package/components/data/table/hooks/useResponsiveColumns.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useResponsiveColumns = void 0;
+var _react = require("react");
+var _utils = require("../utils");
+var useResponsiveColumns = exports.useResponsiveColumns = function useResponsiveColumns(columns) {
+  // Get viewport width once at initialization
+  var viewportWidth = (0, _react.useMemo)(function () {
+    if (typeof window !== "undefined") {
+      return window.innerWidth;
+    }
+    return 1024; // Default desktop width for SSR
+  }, []); // Empty dependency array - only calculated once
+
+  // Filter columns based on initial viewport
+  var visibleColumns = (0, _react.useMemo)(function () {
+    if (!columns || !Array.isArray(columns)) {
+      return [];
+    }
+    try {
+      return columns.filter(function (column) {
+        if (!column) return false;
+        return (0, _utils.isColumnVisibleForViewport)(column, viewportWidth);
+      });
+    } catch (error) {
+      console.error("Error filtering columns:", error);
+      return columns; // Return all columns if filtering fails
+    }
+  }, [columns, viewportWidth]);
+  return visibleColumns;
+};

package/components/data/table/hooks/useRowExpansion.js

@@ -0,0 +1,110 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useRowExpansion = void 0;
+var _react = require("react");
+var _utils = require("../utils");
+/**
+ * Hook to manage row expansion state
+ */
+var useRowExpansion = exports.useRowExpansion = function useRowExpansion(_ref) {
+  var rowExpansionConfig = _ref.rowExpansionConfig,
+    internalDataset = _ref.internalDataset;
+  var _useState = (0, _react.useState)(new Set()),
+    expandedRows = _useState[0],
+    setExpandedRows = _useState[1];
+  var expandedRowsRef = (0, _react.useRef)(expandedRows);
+
+  // Keep ref in sync with state
+  (0, _react.useEffect)(function () {
+    expandedRowsRef.current = expandedRows;
+  }, [expandedRows]);
+  var toggleRowExpansion = (0, _react.useCallback)(function (rowId, rowData) {
+    if (!rowExpansionConfig || !rowExpansionConfig.show) return;
+    var isCurrentlyExpanded = expandedRowsRef.current.has(rowId);
+
+    // Handle before expand/collapse events
+    if (!isCurrentlyExpanded) {
+      // Before expand event
+      if (rowExpansionConfig.onBeforerowexpand) {
+        var _rowExpansionConfig$o;
+        var defaultPrevented = false;
+        var event = {
+          preventDefault: function preventDefault() {
+            defaultPrevented = true;
+          },
+          get defaultPrevented() {
+            return defaultPrevented;
+          }
+        };
+        (_rowExpansionConfig$o = rowExpansionConfig.onBeforerowexpand) === null || _rowExpansionConfig$o === void 0 || _rowExpansionConfig$o.call(rowExpansionConfig, event, {}, (0, _utils.cleanRowData)(rowData), (0, _utils.cleanRowData)(internalDataset));
+        if (defaultPrevented) return;
+      }
+    } else {
+      // Before collapse event
+      if (rowExpansionConfig.onBeforerowcollapse) {
+        var _rowExpansionConfig$o2;
+        var _defaultPrevented = false;
+        var _event = {
+          preventDefault: function preventDefault() {
+            _defaultPrevented = true;
+          },
+          get defaultPrevented() {
+            return _defaultPrevented;
+          }
+        };
+        (_rowExpansionConfig$o2 = rowExpansionConfig.onBeforerowcollapse) === null || _rowExpansionConfig$o2 === void 0 || _rowExpansionConfig$o2.call(rowExpansionConfig, _event, {}, (0, _utils.cleanRowData)(rowData), (0, _utils.cleanRowData)(internalDataset));
+        if (_defaultPrevented) return;
+      }
+    }
+    setExpandedRows(function (prev) {
+      var newExpandedRows = new Set(prev);
+      if (isCurrentlyExpanded) {
+        // Collapse the row
+        newExpandedRows["delete"](rowId);
+
+        // Fire collapse event
+        if (rowExpansionConfig.onRowcollapse) {
+          setTimeout(function () {
+            var _rowExpansionConfig$o3;
+            (_rowExpansionConfig$o3 = rowExpansionConfig.onRowcollapse) === null || _rowExpansionConfig$o3 === void 0 || _rowExpansionConfig$o3.call(rowExpansionConfig, {}, {}, (0, _utils.cleanRowData)(rowData));
+          }, 0);
+        }
+      } else {
+        // If closeothers is true, clear all other expanded rows
+        if (rowExpansionConfig.closeothers) {
+          newExpandedRows.clear();
+        }
+
+        // Expand the row
+        newExpandedRows.add(rowId);
+
+        // Fire expand event
+        if (rowExpansionConfig.onRowexpand) {
+          setTimeout(function () {
+            var _rowExpansionConfig$o4;
+            (_rowExpansionConfig$o4 = rowExpansionConfig.onRowexpand) === null || _rowExpansionConfig$o4 === void 0 || _rowExpansionConfig$o4.call(rowExpansionConfig, {}, {
+              rowExpansionConfig: rowExpansionConfig
+            }, (0, _utils.cleanRowData)(rowData), (0, _utils.cleanRowData)(internalDataset));
+          }, 0);
+        }
+      }
+      return newExpandedRows;
+    });
+  }, [rowExpansionConfig, internalDataset]);
+  var isRowExpanded = (0, _react.useCallback)(function (rowId) {
+    return expandedRows.has(rowId);
+  }, [expandedRows]);
+  var collapseAllRows = (0, _react.useCallback)(function () {
+    setExpandedRows(new Set());
+  }, []);
+  return {
+    expandedRows: expandedRows,
+    toggleRowExpansion: toggleRowExpansion,
+    isRowExpanded: isRowExpanded,
+    collapseAllRows: collapseAllRows,
+    rowExpansionConfig: rowExpansionConfig
+  };
+};