@dreamtree-org/twreact-ui 1.3.0 → 1.3.2

package/dist/esm/components/core/Table/Table.js

@@ -0,0 +1,1533 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2, slicedToArray as _slicedToArray, toConsumableArray as _toConsumableArray, defineProperty as _defineProperty, asyncToGenerator as _asyncToGenerator, regenerator as _regenerator } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { forwardRef, useState, useRef, useId, useMemo, useCallback, useImperativeHandle, useEffect } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { useLatestRef } from '../../../hooks/useLatestRef.js';
+import { Plus, RefreshCcw, Save, X, AlertCircle, Search, ChevronUp, ChevronDown, MoreVertical, List } from 'lucide-react';
+import Select from '../Select.js';
+import { DEFAULT_ACTIONS } from './constants.js';
+import { getRowKey, mergeDefaultActions } from './helpers.js';
+import { useClickOutside } from './useClickOutside.js';
+import { PaginationHeader, PaginationFooter } from './Pagination.js';
+import ColumnMenu from './ColumnMenu.js';
+import MobileFilters from './MobileFilters.js';
+import TableRow from './TableRow.js';
+import MobileCard from './MobileCard.js';
+import FieldInput from './FieldInput.js';
+
+var _excluded = ["data", "columns", "sortable", "filterable", "selectable", "pagination", "pageSize", "onSort", "onFilter", "onFetch", "onFilterChange", "onSelectionChange", "onRowClick", "hasDetails", "DetailsComponent", "className", "withAction", "onAction", "actions", "replaceDefaultActions", "showSerial", "cellClass", "rowClass", "globalSearch", "limitOptions", "showLimitSelector", "onLimitChange", "showReloadButton", "renderReloadButton", "onReload", "stripedRows", "theme", "responsiveBreakpoint", "showToolbar", "showColumnPicker", "wrapCells", "mobileMaxFields", "serverSide", "totalRecords", "pageNumber", "onPageChange", "TheadComponent", "TfootComponent", "interactive", "onSave", "onEdit", "onRowAdd", "onRowDelete", "editKeyBinding", "newRowPosition", "addRowRef", "onInitAddRow", "renderAddRowButton", "renderExternalAddRow"],
+  _excluded2 = ["_key", "_isNew"];
+var DEFAULT_DATA = [];
+var DEFAULT_COLUMNS = [];
+var DEFAULT_THEME = {
+  stripedColors: ["bg-[#ffffff]", "bg-[#f7fafc]"],
+  rowHover: "bg-gray-50",
+  accentColor: "bg-gray-50",
+  menuBg: "bg-white",
+  menuItemHover: "hover:bg-gray-50"
+};
+var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
+  var _validationErrors$;
+  var _ref$data = _ref.data,
+    initialData = _ref$data === void 0 ? DEFAULT_DATA : _ref$data,
+    _ref$columns = _ref.columns,
+    initialColumns = _ref$columns === void 0 ? DEFAULT_COLUMNS : _ref$columns,
+    _ref$sortable = _ref.sortable,
+    sortable = _ref$sortable === void 0 ? true : _ref$sortable,
+    _ref$filterable = _ref.filterable,
+    filterable = _ref$filterable === void 0 ? false : _ref$filterable,
+    _ref$selectable = _ref.selectable,
+    selectable = _ref$selectable === void 0 ? false : _ref$selectable,
+    _ref$pagination = _ref.pagination,
+    pagination = _ref$pagination === void 0 ? false : _ref$pagination,
+    _ref$pageSize = _ref.pageSize,
+    pageSize = _ref$pageSize === void 0 ? 25 : _ref$pageSize,
+    onSort = _ref.onSort,
+    onFilter = _ref.onFilter,
+    onFetch = _ref.onFetch,
+    onFilterChange = _ref.onFilterChange,
+    onSelectionChange = _ref.onSelectionChange,
+    onRowClick = _ref.onRowClick,
+    _ref$hasDetails = _ref.hasDetails,
+    hasDetails = _ref$hasDetails === void 0 ? false : _ref$hasDetails,
+    _ref$DetailsComponent = _ref.DetailsComponent,
+    DetailsComponent = _ref$DetailsComponent === void 0 ? null : _ref$DetailsComponent,
+    className = _ref.className,
+    _ref$withAction = _ref.withAction,
+    withAction = _ref$withAction === void 0 ? true : _ref$withAction,
+    onAction = _ref.onAction,
+    actions = _ref.actions,
+    _ref$replaceDefaultAc = _ref.replaceDefaultActions,
+    replaceDefaultActions = _ref$replaceDefaultAc === void 0 ? false : _ref$replaceDefaultAc,
+    _ref$showSerial = _ref.showSerial,
+    showSerial = _ref$showSerial === void 0 ? true : _ref$showSerial,
+    cellClass = _ref.cellClass,
+    rowClass = _ref.rowClass,
+    _ref$globalSearch = _ref.globalSearch,
+    globalSearch = _ref$globalSearch === void 0 ? false : _ref$globalSearch,
+    _ref$limitOptions = _ref.limitOptions,
+    limitOptions = _ref$limitOptions === void 0 ? [10, 25, 50, 100] : _ref$limitOptions,
+    _ref$showLimitSelecto = _ref.showLimitSelector,
+    showLimitSelector = _ref$showLimitSelecto === void 0 ? true : _ref$showLimitSelecto,
+    onLimitChange = _ref.onLimitChange,
+    _ref$showReloadButton = _ref.showReloadButton,
+    showReloadButton = _ref$showReloadButton === void 0 ? true : _ref$showReloadButton,
+    renderReloadButton = _ref.renderReloadButton,
+    onReload = _ref.onReload,
+    _ref$stripedRows = _ref.stripedRows,
+    stripedRows = _ref$stripedRows === void 0 ? true : _ref$stripedRows,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? DEFAULT_THEME : _ref$theme,
+    _ref$responsiveBreakp = _ref.responsiveBreakpoint,
+    responsiveBreakpoint = _ref$responsiveBreakp === void 0 ? 768 : _ref$responsiveBreakp,
+    _ref$showToolbar = _ref.showToolbar,
+    showToolbar = _ref$showToolbar === void 0 ? true : _ref$showToolbar,
+    _ref$showColumnPicker = _ref.showColumnPicker,
+    showColumnPicker = _ref$showColumnPicker === void 0 ? true : _ref$showColumnPicker,
+    _ref$wrapCells = _ref.wrapCells,
+    wrapCells = _ref$wrapCells === void 0 ? false : _ref$wrapCells,
+    mobileMaxFields = _ref.mobileMaxFields,
+    _ref$serverSide = _ref.serverSide,
+    serverSide = _ref$serverSide === void 0 ? false : _ref$serverSide,
+    _ref$totalRecords = _ref.totalRecords,
+    totalRecords = _ref$totalRecords === void 0 ? 0 : _ref$totalRecords,
+    pageNumber = _ref.pageNumber,
+    onPageChange = _ref.onPageChange,
+    _ref$TheadComponent = _ref.TheadComponent,
+    TheadComponent = _ref$TheadComponent === void 0 ? null : _ref$TheadComponent,
+    _ref$TfootComponent = _ref.TfootComponent,
+    TfootComponent = _ref$TfootComponent === void 0 ? null : _ref$TfootComponent,
+    _ref$interactive = _ref.interactive,
+    interactive = _ref$interactive === void 0 ? false : _ref$interactive,
+    onSave = _ref.onSave,
+    onEdit = _ref.onEdit,
+    onRowAdd = _ref.onRowAdd,
+    onRowDelete = _ref.onRowDelete,
+    _ref$editKeyBinding = _ref.editKeyBinding,
+    editKeyBinding = _ref$editKeyBinding === void 0 ? "e" : _ref$editKeyBinding,
+    _ref$newRowPosition = _ref.newRowPosition,
+    newRowPosition = _ref$newRowPosition === void 0 ? "bottom" : _ref$newRowPosition,
+    addRowRef = _ref.addRowRef,
+    onInitAddRow = _ref.onInitAddRow,
+    renderAddRowButton = _ref.renderAddRowButton,
+    renderExternalAddRow = _ref.renderExternalAddRow,
+    props = _objectWithoutProperties(_ref, _excluded);
+  theme = _objectSpread2(_objectSpread2({}, DEFAULT_THEME), theme);
+  // State
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isMobileView = _useState2[0],
+    setIsMobileView = _useState2[1];
+  var _useState3 = useState(function () {
+      return Array.isArray(initialData) ? initialData : [];
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    tableData = _useState4[0],
+    setTableData = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    loading = _useState6[0],
+    _setLoading = _useState6[1];
+  var _useState7 = useState(pageSize),
+    _useState8 = _slicedToArray(_useState7, 2),
+    limit = _useState8[0],
+    setLimit = _useState8[1];
+  var _useState9 = useState(function () {
+      return typeof pageNumber === "number" ? pageNumber : 1;
+    }),
+    _useState0 = _slicedToArray(_useState9, 2),
+    currentPage = _useState0[0],
+    setCurrentPage = _useState0[1];
+  var _useState1 = useState(function () {
+      return Array.isArray(initialColumns) ? initialColumns.map(function (c) {
+        return _objectSpread2({}, c);
+      }) : [];
+    }),
+    _useState10 = _slicedToArray(_useState1, 2),
+    columnsState = _useState10[0],
+    setColumnsState = _useState10[1];
+  var _useState11 = useState(false),
+    _useState12 = _slicedToArray(_useState11, 2),
+    showColumnMenu = _useState12[0],
+    setShowColumnMenu = _useState12[1];
+  var _useState13 = useState({
+      key: null,
+      direction: "asc"
+    }),
+    _useState14 = _slicedToArray(_useState13, 2),
+    sortConfig = _useState14[0],
+    setSortConfig = _useState14[1];
+  var _useState15 = useState({}),
+    _useState16 = _slicedToArray(_useState15, 2),
+    filters = _useState16[0],
+    setFilters = _useState16[1];
+  var _useState17 = useState(""),
+    _useState18 = _slicedToArray(_useState17, 2),
+    searchInput = _useState18[0],
+    setSearchInput = _useState18[1];
+  var _useState19 = useState(function () {
+      return new Set();
+    }),
+    _useState20 = _slicedToArray(_useState19, 2),
+    selectedRows = _useState20[0],
+    setSelectedRows = _useState20[1];
+  var _useState21 = useState(function () {
+      return new Set();
+    }),
+    _useState22 = _slicedToArray(_useState21, 2),
+    expandedRows = _useState22[0],
+    setExpandedRows = _useState22[1];
+  var _useState23 = useState(null),
+    _useState24 = _slicedToArray(_useState23, 2),
+    activeActionRowKey = _useState24[0],
+    setActiveActionRowKey = _useState24[1];
+  var _useState25 = useState(false),
+    _useState26 = _slicedToArray(_useState25, 2),
+    showMobileFilters = _useState26[0],
+    setShowMobileFilters = _useState26[1];
+  // Interactive Mode State
+  var _useState27 = useState({}),
+    _useState28 = _slicedToArray(_useState27, 2),
+    pendingEdits = _useState28[0],
+    setPendingEdits = _useState28[1];
+  var _useState29 = useState([]),
+    _useState30 = _slicedToArray(_useState29, 2),
+    newRows = _useState30[0],
+    setNewRows = _useState30[1];
+  var _useState31 = useState(null),
+    _useState32 = _slicedToArray(_useState31, 2),
+    activeCell = _useState32[0],
+    setActiveCell = _useState32[1];
+  var _useState33 = useState(null),
+    _useState34 = _slicedToArray(_useState33, 2),
+    editingCell = _useState34[0],
+    setEditingCell = _useState34[1];
+  var _useState35 = useState(false),
+    _useState36 = _slicedToArray(_useState35, 2),
+    isSaving = _useState36[0],
+    setIsSaving = _useState36[1];
+  var tableContainerRef = useRef(null);
+  // Refs
+  var columnMenuRef = useRef(null);
+  var columnToggleBtnRef = useRef(null);
+  var columnMenuId = "table-column-menu-".concat(useId());
+  var actionMenuRef = useRef(null);
+  // Calculate pending changes & dirty state
+  var _useMemo = useMemo(function () {
+      if (!interactive) return {
+        dirtyEdits: {},
+        pendingCount: 0
+      };
+      var dirtyMap = {};
+      var count = 0;
+      Object.keys(pendingEdits).forEach(function (rowKey) {
+        var rowEdits = pendingEdits[rowKey];
+        if (!rowEdits) return;
+        var originalRow = tableData.find(function (r, i) {
+          return getRowKey(r, i) === rowKey;
+        });
+        Object.keys(rowEdits).forEach(function (colKey) {
+          var newVal = rowEdits[colKey];
+          var origVal = originalRow === null || originalRow === void 0 ? void 0 : originalRow[colKey];
+          if (newVal !== origVal) {
+            if (!dirtyMap[rowKey]) dirtyMap[rowKey] = {};
+            dirtyMap[rowKey][colKey] = newVal;
+            count++;
+          }
+        });
+      });
+      count += newRows.length;
+      return {
+        dirtyEdits: dirtyMap,
+        pendingCount: count
+      };
+    }, [interactive, pendingEdits, newRows, tableData]),
+    dirtyEdits = _useMemo.dirtyEdits,
+    pendingCount = _useMemo.pendingCount;
+  var isDirty = pendingCount > 0;
+  // Calculate validation errors for pending edits and new rows
+  var validationErrors = useMemo(function () {
+    if (!interactive) return [];
+    var errors = [];
+    var isEmpty = function isEmpty(val) {
+      return val === null || val === undefined || String(val).trim() === "";
+    };
+    // 1. Validate pending edits on existing rows
+    Object.keys(dirtyEdits).forEach(function (rowKey) {
+      var origRow = tableData.find(function (r, i) {
+        return getRowKey(r, i) === rowKey;
+      });
+      if (!origRow) return;
+      var effectiveRow = _objectSpread2(_objectSpread2({}, origRow), pendingEdits[rowKey] || {});
+      columnsState.forEach(function (col) {
+        var _col$rules;
+        if (col.isVisible === false) return;
+        var val = effectiveRow[col.key];
+        var isReq = col.required || ((_col$rules = col.rules) === null || _col$rules === void 0 ? void 0 : _col$rules.required);
+        if (isReq && isEmpty(val)) {
+          errors.push({
+            rowKey: rowKey,
+            colKey: col.key,
+            message: "\"".concat(col.label || col.key, "\" is required")
+          });
+        } else if (typeof col.validate === "function") {
+          var res = col.validate(val, effectiveRow);
+          if (res === false || typeof res === "string") {
+            errors.push({
+              rowKey: rowKey,
+              colKey: col.key,
+              message: typeof res === "string" ? res : "\"".concat(col.label || col.key, "\" is invalid")
+            });
+          }
+        }
+      });
+    });
+    // 2. Validate newly added rows
+    newRows.forEach(function (newRow) {
+      var rowKey = newRow._key;
+      columnsState.forEach(function (col) {
+        var _col$rules2;
+        if (col.isVisible === false) return;
+        var val = newRow[col.key];
+        var isReq = col.required || ((_col$rules2 = col.rules) === null || _col$rules2 === void 0 ? void 0 : _col$rules2.required);
+        if (isReq && isEmpty(val)) {
+          errors.push({
+            rowKey: rowKey,
+            colKey: col.key,
+            message: "\"".concat(col.label || col.key, "\" is required")
+          });
+        } else if (typeof col.validate === "function") {
+          var res = col.validate(val, newRow);
+          if (res === false || typeof res === "string") {
+            errors.push({
+              rowKey: rowKey,
+              colKey: col.key,
+              message: typeof res === "string" ? res : "\"".concat(col.label || col.key, "\" is invalid")
+            });
+          }
+        }
+      });
+    });
+    return errors;
+  }, [interactive, dirtyEdits, pendingEdits, newRows, tableData, columnsState]);
+  var isValid = validationErrors.length === 0;
+  var invalidCellSet = useMemo(function () {
+    var set = new Set();
+    validationErrors.forEach(function (err) {
+      set.add("".concat(err.rowKey, ":").concat(err.colKey));
+    });
+    return set;
+  }, [validationErrors]);
+  var handleCellValueChange = useCallback(function (rowKey, colKey, newValue) {
+    var newRowIdx = newRows.findIndex(function (r) {
+      return r._key === rowKey;
+    });
+    if (newRowIdx !== -1) {
+      setNewRows(function (prev) {
+        var next = _toConsumableArray(prev);
+        next[newRowIdx] = _objectSpread2(_objectSpread2({}, next[newRowIdx]), {}, _defineProperty({}, colKey, newValue));
+        onEdit === null || onEdit === void 0 || onEdit({
+          rowKey: rowKey,
+          colKey: colKey,
+          newValue: newValue,
+          row: next[newRowIdx],
+          isNew: true
+        });
+        return next;
+      });
+      return;
+    }
+    setPendingEdits(function (prev) {
+      var nextRowEdits = _objectSpread2(_objectSpread2({}, prev[rowKey] || {}), {}, _defineProperty({}, colKey, newValue));
+      var origRow = tableData.find(function (r, i) {
+        return getRowKey(r, i) === rowKey;
+      });
+      var updatedRow = _objectSpread2(_objectSpread2({}, origRow), nextRowEdits);
+      onEdit === null || onEdit === void 0 || onEdit({
+        rowKey: rowKey,
+        colKey: colKey,
+        newValue: newValue,
+        row: updatedRow,
+        isNew: false
+      });
+      return _objectSpread2(_objectSpread2({}, prev), {}, _defineProperty({}, rowKey, nextRowEdits));
+    });
+  }, [newRows, tableData, onEdit]);
+  var _handleAddRow = useCallback(function (positionOverride) {
+    var _columnsState$find, _columnsState$;
+    var targetPos = typeof positionOverride === "string" && (positionOverride === "top" || positionOverride === "bottom") ? positionOverride : newRowPosition || "bottom";
+    var newKey = "new-".concat(Date.now(), "-").concat(Math.random().toString(36).substring(2, 6));
+    var newRowObj = {
+      _key: newKey,
+      _isNew: true
+    };
+    columnsState.forEach(function (col) {
+      var _col$defaultValue;
+      newRowObj[col.key] = (_col$defaultValue = col.defaultValue) !== null && _col$defaultValue !== void 0 ? _col$defaultValue : "";
+    });
+    setNewRows(function (prev) {
+      if (targetPos === "top") {
+        return [newRowObj].concat(_toConsumableArray(prev));
+      }
+      return [].concat(_toConsumableArray(prev), [newRowObj]);
+    });
+    var firstColKey = ((_columnsState$find = columnsState.find(function (c) {
+      return c.isVisible !== false;
+    })) === null || _columnsState$find === void 0 ? void 0 : _columnsState$find.key) || ((_columnsState$ = columnsState[0]) === null || _columnsState$ === void 0 ? void 0 : _columnsState$.key);
+    var initialRowIndex = targetPos === "top" ? 0 : tableData.length + newRows.length;
+    setActiveCell({
+      rowKey: newKey,
+      colKey: firstColKey,
+      rowIndex: initialRowIndex
+    });
+    setEditingCell({
+      rowKey: newKey,
+      colKey: firstColKey,
+      rowIndex: initialRowIndex
+    });
+    onRowAdd === null || onRowAdd === void 0 || onRowAdd(newRowObj, targetPos);
+  }, [columnsState, tableData.length, newRows.length, onRowAdd, newRowPosition]);
+  useImperativeHandle(ref, function () {
+    return {
+      addRow: function addRow(pos) {
+        return _handleAddRow(pos);
+      },
+      addNewRow: function addNewRow(pos) {
+        return _handleAddRow(pos);
+      },
+      handleAddRow: function handleAddRow(pos) {
+        return _handleAddRow(pos);
+      },
+      tableContainerRef: tableContainerRef.current
+    };
+  }, [_handleAddRow]);
+  useEffect(function () {
+    if (addRowRef) {
+      addRowRef.current = function (pos) {
+        return _handleAddRow(pos);
+      };
+    }
+    onInitAddRow === null || onInitAddRow === void 0 || onInitAddRow(function (pos) {
+      return _handleAddRow(pos);
+    });
+  }, [addRowRef, onInitAddRow, _handleAddRow]);
+  var handleDeleteNewRow = useCallback(function (rowKey) {
+    setNewRows(function (prev) {
+      return prev.filter(function (r) {
+        return r._key !== rowKey;
+      });
+    });
+    setPendingEdits(function (prev) {
+      var next = _objectSpread2({}, prev);
+      delete next[rowKey];
+      return next;
+    });
+    if ((activeCell === null || activeCell === void 0 ? void 0 : activeCell.rowKey) === rowKey) {
+      setActiveCell(null);
+      setEditingCell(null);
+    }
+    onRowDelete === null || onRowDelete === void 0 || onRowDelete(rowKey);
+  }, [activeCell, onRowDelete]);
+  var handleSave = useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+    var _customSaveResult, _customSaveResult2, updatedTableData, finalNewRows, finalData, customSaveResult, nextData, _t;
+    return _regenerator().w(function (_context) {
+      while (1) switch (_context.p = _context.n) {
+        case 0:
+          if (!(!isDirty || isSaving)) {
+            _context.n = 1;
+            break;
+          }
+          return _context.a(2);
+        case 1:
+          setIsSaving(true);
+          _context.p = 2;
+          updatedTableData = tableData.map(function (row, i) {
+            var rKey = getRowKey(row, i);
+            if (dirtyEdits[rKey]) {
+              return _objectSpread2(_objectSpread2({}, row), dirtyEdits[rKey]);
+            }
+            return row;
+          });
+          finalNewRows = newRows.map(function (_ref3) {
+            _ref3._key;
+              _ref3._isNew;
+              var rest = _objectWithoutProperties(_ref3, _excluded2);
+            return rest;
+          });
+          finalData = [].concat(_toConsumableArray(updatedTableData), _toConsumableArray(finalNewRows));
+          if (!onSave) {
+            _context.n = 4;
+            break;
+          }
+          _context.n = 3;
+          return onSave({
+            updatedRows: dirtyEdits,
+            newRows: finalNewRows,
+            allData: finalData,
+            tableData: updatedTableData
+          });
+        case 3:
+          customSaveResult = _context.v;
+        case 4:
+          nextData = Array.isArray(customSaveResult) ? customSaveResult : ((_customSaveResult = customSaveResult) === null || _customSaveResult === void 0 ? void 0 : _customSaveResult.data) || ((_customSaveResult2 = customSaveResult) === null || _customSaveResult2 === void 0 ? void 0 : _customSaveResult2.allData) || finalData;
+          setTableData(nextData);
+          initialDataRef.current = nextData;
+          setPendingEdits({});
+          setNewRows([]);
+          setEditingCell(null);
+          _context.n = 6;
+          break;
+        case 5:
+          _context.p = 5;
+          _t = _context.v;
+          console.error("Save error:", _t);
+        case 6:
+          _context.p = 6;
+          setIsSaving(false);
+          return _context.f(6);
+        case 7:
+          return _context.a(2);
+      }
+    }, _callee, null, [[2, 5, 6, 7]]);
+  })), [isDirty, isSaving, tableData, dirtyEdits, newRows, onSave]);
+  var handleClearChanges = useCallback(function () {
+    setPendingEdits({});
+    setNewRows([]);
+    setEditingCell(null);
+    setActiveCell(null);
+  }, []);
+  var handleCellClick = useCallback(function (rowKey, colKey, row, column, globalIndex) {
+    setActiveCell({
+      rowKey: rowKey,
+      colKey: colKey,
+      rowIndex: globalIndex
+    });
+    setEditingCell(function (prev) {
+      if (prev && prev.rowKey === rowKey && prev.colKey === colKey) {
+        return prev;
+      }
+      return null;
+    });
+  }, []);
+  var handleCellDoubleClick = useCallback(function (rowKey, colKey, row, column, globalIndex) {
+    setActiveCell({
+      rowKey: rowKey,
+      colKey: colKey,
+      rowIndex: globalIndex
+    });
+    if (column.editable !== false) {
+      setEditingCell({
+        rowKey: rowKey,
+        colKey: colKey,
+        rowIndex: globalIndex
+      });
+    }
+  }, []);
+  useClickOutside([tableContainerRef], interactive && Boolean(editingCell), function () {
+    setEditingCell(null);
+  });
+  var actionButtonRefs = useRef({});
+  // Row components register their kebab buttons through this callback rather
+  // than mutating `actionButtonRefs` directly (props must stay immutable).
+  var registerActionButton = useCallback(function (key, el) {
+    if (el) actionButtonRefs.current[key] = el;
+  }, []);
+  // Memoized values
+  //
+  // Supplied actions PATCH the built-in set by `name` (so `{ name: "edit",
+  // onClick }` keeps the default label + icon) unless `replaceDefaultActions`
+  // is set. Stays either an array or a `(row, index) => array` producer, and
+  // keeps a stable identity so the per-row memo in TableRow/MobileCard pays off.
+  var actionsToUse = useMemo(function () {
+    if (actions === undefined) return DEFAULT_ACTIONS;
+    if (replaceDefaultActions) return actions;
+    if (typeof actions === "function") {
+      return function (row, index) {
+        return mergeDefaultActions(actions(row, index), DEFAULT_ACTIONS);
+      };
+    }
+    return mergeDefaultActions(actions, DEFAULT_ACTIONS);
+  }, [actions, replaceDefaultActions]);
+  // `hasDetails` may be a predicate. The expand COLUMN exists whenever the prop
+  // is truthy at all; whether a given row gets a toggle is decided per row.
+  var hasDetailsColumn = useMemo(function () {
+    return typeof hasDetails === "function" || !!hasDetails;
+  }, [hasDetails]);
+  // Refs for stable initial values
+  var initialColumnsRef = useRef(initialColumns);
+  var initialDataRef = useRef(initialData);
+  useEffect(function () {
+    setLimit(pageSize);
+  }, [pageSize]);
+  // Follow an external `pageNumber` change (adjust-during-render pattern);
+  // internal page navigation is left alone while the prop is unchanged.
+  var _useState37 = useState(pageNumber),
+    _useState38 = _slicedToArray(_useState37, 2),
+    prevPageNumber = _useState38[0],
+    setPrevPageNumber = _useState38[1];
+  if (pageNumber !== prevPageNumber) {
+    setPrevPageNumber(pageNumber);
+    if (typeof pageNumber === "number" && pageNumber !== currentPage) {
+      setCurrentPage(pageNumber);
+    }
+  }
+  useEffect(function () {
+    if (initialColumns !== initialColumnsRef.current) {
+      setColumnsState(Array.isArray(initialColumns) ? initialColumns.map(function (c) {
+        return _objectSpread2({}, c);
+      }) : []);
+      initialColumnsRef.current = initialColumns;
+    }
+  }, [initialColumns]);
+  useEffect(function () {
+    if (initialData !== initialDataRef.current && Array.isArray(initialData)) {
+      setTableData(initialData);
+      initialDataRef.current = initialData;
+    }
+  }, [initialData]);
+  useEffect(function () {
+    var checkMobile = function checkMobile() {
+      return setIsMobileView(window.innerWidth < responsiveBreakpoint);
+    };
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+    return function () {
+      return window.removeEventListener("resize", checkMobile);
+    };
+  }, [responsiveBreakpoint]);
+  // Click-outside handlers
+  var closeColumnMenu = useCallback(function () {
+    return setShowColumnMenu(false);
+  }, []);
+  var closeActionMenu = useCallback(function () {
+    return setActiveActionRowKey(null);
+  }, []);
+  useClickOutside([columnMenuRef, columnToggleBtnRef], showColumnMenu, closeColumnMenu);
+  useClickOutside([actionMenuRef], activeActionRowKey !== null, closeActionMenu);
+  // Computed values
+  var activeAnchorEl = useMemo(function () {
+    if (activeActionRowKey === null) return null;
+    return actionButtonRefs.current[activeActionRowKey];
+  }, [activeActionRowKey]);
+  var visibleColumns = useMemo(function () {
+    return columnsState.filter(function (col) {
+      return col.isVisible !== false;
+    });
+  }, [columnsState]);
+  // The column picker lives in the toolbar's sense of "table chrome": hiding
+  // the toolbar hides it too, and it can also be hidden on its own.
+  var columnPickerVisible = showToolbar && showColumnPicker;
+  // Mobile cards show only the columns that earn a line on a phone: columns
+  // flagged `hideOnMobile` are dropped, then `mobileMaxFields` caps the rest
+  // in column order. Defaults keep every visible column.
+  var mobileColumns = useMemo(function () {
+    var cols = visibleColumns.filter(function (col) {
+      return !col.hideOnMobile;
+    });
+    var max = Number(mobileMaxFields);
+    return Number.isInteger(max) && max >= 0 ? cols.slice(0, max) : cols;
+  }, [visibleColumns, mobileMaxFields]);
+  // Columns that opt out of the global search with `searchable: false`.
+  var unsearchableKeys = useMemo(function () {
+    return new Set(columnsState.filter(function (col) {
+      return col.searchable === false;
+    }).map(function (col) {
+      return col.key;
+    }));
+  }, [columnsState]);
+  var sortedData = useMemo(function () {
+    var data = Array.isArray(tableData) ? tableData : [];
+    if (serverSide || !sortConfig.key) return data;
+    var key = sortConfig.key,
+      direction = sortConfig.direction;
+    return _toConsumableArray(data).sort(function (a, b) {
+      var av = a === null || a === void 0 ? void 0 : a[key];
+      var bv = b === null || b === void 0 ? void 0 : b[key];
+      if (av == null || bv == null) return 0;
+      if (typeof av === "number") {
+        return direction === "asc" ? av - bv : bv - av;
+      }
+      return direction === "asc" ? String(av).localeCompare(String(bv)) : String(bv).localeCompare(String(av));
+    });
+  }, [tableData, sortConfig, serverSide]);
+  // Client-side filtering. `filters.global` (the global search box) matches a
+  // row when any value outside a `searchable: false` column contains the
+  // term; every other non-empty `filters[columnKey]` (the per-column filter
+  // inputs) must match that column's raw value. All matches are
+  // case-insensitive substring tests. In `serverSide` mode the table never
+  // filters locally — filters are delegated to `onFetch` / `onFilter` /
+  // `onFilterChange`.
+  var filteredData = useMemo(function () {
+    var data = Array.isArray(sortedData) ? sortedData : [];
+    if (serverSide) return data;
+    var toText = function toText(v) {
+      return v == null ? "" : String(v).toLowerCase();
+    };
+    var globalTerm = toText(filters.global).trim();
+    var columnTerms = Object.entries(filters || {}).filter(function (_ref4) {
+      var _ref5 = _slicedToArray(_ref4, 2),
+        key = _ref5[0],
+        value = _ref5[1];
+      return key !== "global" && toText(value).trim() !== "";
+    }).map(function (_ref6) {
+      var _ref7 = _slicedToArray(_ref6, 2),
+        key = _ref7[0],
+        value = _ref7[1];
+      return [key, toText(value).trim()];
+    });
+    if (!globalTerm && columnTerms.length === 0) return data;
+    return data.filter(function (row) {
+      var r = row || {};
+      if (globalTerm && !Object.entries(r).some(function (_ref8) {
+        var _ref9 = _slicedToArray(_ref8, 2),
+          k = _ref9[0],
+          v = _ref9[1];
+        return !unsearchableKeys.has(k) && toText(v).includes(globalTerm);
+      })) {
+        return false;
+      }
+      return columnTerms.every(function (_ref0) {
+        var _ref1 = _slicedToArray(_ref0, 2),
+          key = _ref1[0],
+          term = _ref1[1];
+        return toText(r[key]).includes(term);
+      });
+    });
+  }, [sortedData, filters, serverSide, unsearchableKeys]);
+  // Client-side pages that no longer exist (the data shrank through
+  // filtering, deletion or a new `data` prop) are clamped to the last valid
+  // page. `pageIndex` is what this render shows; an effect below commits it.
+  var clientTotalPages = Math.max(1, Math.ceil(filteredData.length / limit));
+  var pageIndex = pagination && !serverSide && currentPage > clientTotalPages ? clientTotalPages : currentPage;
+  var _useMemo2 = useMemo(function () {
+      var data = Array.isArray(filteredData) ? filteredData : [];
+      var start = pagination ? (pageIndex - 1) * limit : 0;
+      var end = pagination ? start + limit : data.length;
+      var paginated = !pagination || serverSide ? data : data.slice(start, start + limit);
+      var pages = !pagination ? 1 : serverSide ? Math.max(1, Math.ceil((totalRecords || 0) / limit)) : Math.max(1, Math.ceil(data.length / limit));
+      return {
+        startIndex: start,
+        endIndex: end,
+        paginatedData: paginated,
+        totalPages: pages
+      };
+    }, [filteredData, pagination, serverSide, pageIndex, limit, totalRecords]),
+    startIndex = _useMemo2.startIndex,
+    endIndex = _useMemo2.endIndex,
+    paginatedData = _useMemo2.paginatedData,
+    totalPages = _useMemo2.totalPages;
+  var visibleCount = useMemo(function () {
+    return (showSerial ? 1 : 0) + visibleColumns.length + (selectable ? 1 : 0) + (hasDetailsColumn ? 1 : 0) + (withAction ? 1 : 0) + (columnPickerVisible ? 1 : 0);
+  }, [showSerial, visibleColumns.length, selectable, hasDetailsColumn, withAction, columnPickerVisible]);
+  // "start – end of total" for the toolbar. In serverSide mode `filteredData`
+  // is only the current page, so the total comes from `totalRecords` (falling
+  // back to the rows seen so far when the consumer does not supply it).
+  var resultRange = useMemo(function () {
+    if (serverSide) {
+      var pageRows = filteredData.length;
+      var _total = Number(totalRecords) > 0 ? Number(totalRecords) : startIndex + pageRows;
+      return {
+        start: pageRows === 0 ? 0 : startIndex + 1,
+        end: startIndex + pageRows,
+        total: _total
+      };
+    }
+    var total = filteredData.length;
+    return {
+      start: total === 0 ? 0 : startIndex + 1,
+      end: Math.min(endIndex, total),
+      total: total
+    };
+  }, [serverSide, filteredData.length, totalRecords, startIndex, endIndex]);
+  var rowKeyMap = useMemo(function () {
+    return new Map(filteredData.map(function (r, i) {
+      return [getRowKey(r, i), r];
+    }));
+  }, [filteredData]);
+  var allPageSelected = useMemo(function () {
+    if (paginatedData.length === 0) return false;
+    return paginatedData.every(function (r, i) {
+      return selectedRows.has(getRowKey(r, startIndex + i));
+    });
+  }, [paginatedData, selectedRows, startIndex]);
+  var limitOptionsForSelect = useMemo(function () {
+    var opts = Array.isArray(limitOptions) && limitOptions.length > 0 ? limitOptions : [25, 50, 100];
+    return opts.map(function (opt) {
+      return {
+        label: String(opt),
+        value: opt
+      };
+    });
+  }, [limitOptions]);
+  var isEditKey = useCallback(function (key, e) {
+    if (typeof editKeyBinding === "function") {
+      return editKeyBinding(e);
+    }
+    if (typeof editKeyBinding === "string" && editKeyBinding.trim() !== "") {
+      return key.toLowerCase() === editKeyBinding.toLowerCase();
+    }
+    return key.toLowerCase() === "e" || key === "Insert";
+  }, [editKeyBinding]);
+  var handleTableKeyDown = useCallback(function (e) {
+    if (!interactive) return;
+    var key = e.key,
+      shiftKey = e.shiftKey;
+    // Escape: stop editing
+    if (key === "Escape") {
+      if (editingCell) {
+        e.preventDefault();
+        setEditingCell(null);
+      }
+      return;
+    }
+    // Enter: Save changes when there are modified changes (isDirty)
+    if (key === "Enter" && isDirty) {
+      var _e$target;
+      if (((_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.tagName) === "TEXTAREA" && shiftKey) {
+        return;
+      }
+      e.preventDefault();
+      setEditingCell(null);
+      if (isValid && !isSaving) {
+        handleSave();
+      }
+      return;
+    }
+    // Standard Edit Key ('e' or custom editKeyBinding) when focused on active cell and not editing: enter edit mode
+    if (isEditKey(key, e) && activeCell && !editingCell) {
+      var col = visibleColumns.find(function (c) {
+        return c.key === activeCell.colKey;
+      });
+      if (col && col.editable !== false) {
+        e.preventDefault();
+        setEditingCell(activeCell);
+        return;
+      }
+    }
+    var currentCell = activeCell || editingCell;
+    if (!currentCell) return;
+    var allRows = newRowPosition === "top" ? [].concat(_toConsumableArray(newRows), _toConsumableArray(paginatedData)) : [].concat(_toConsumableArray(paginatedData), _toConsumableArray(newRows));
+    if (allRows.length === 0 || visibleColumns.length === 0) return;
+    var rIdx = allRows.findIndex(function (r, idx) {
+      var rKey = r._key || getRowKey(r, startIndex + idx);
+      return rKey === currentCell.rowKey;
+    });
+    var cIdx = visibleColumns.findIndex(function (c) {
+      return c.key === currentCell.colKey;
+    });
+    if (rIdx === -1 || cIdx === -1) return;
+    var nextRIdx = rIdx;
+    var nextCIdx = cIdx;
+    if (key === "Tab") {
+      e.preventDefault();
+      if (shiftKey) {
+        if (cIdx > 0) {
+          nextCIdx = cIdx - 1;
+        } else if (rIdx > 0) {
+          nextRIdx = rIdx - 1;
+          nextCIdx = visibleColumns.length - 1;
+        }
+      } else {
+        if (cIdx < visibleColumns.length - 1) {
+          nextCIdx = cIdx + 1;
+        } else if (rIdx < allRows.length - 1) {
+          nextRIdx = rIdx + 1;
+          nextCIdx = 0;
+        }
+      }
+    } else if (key === "ArrowRight") {
+      var _e$target2, _e$target$value;
+      if (editingCell && ((_e$target2 = e.target) === null || _e$target2 === void 0 ? void 0 : _e$target2.selectionStart) !== undefined && e.target.selectionStart < String((_e$target$value = e.target.value) !== null && _e$target$value !== void 0 ? _e$target$value : "").length) {
+        return;
+      }
+      if (cIdx < visibleColumns.length - 1) {
+        e.preventDefault();
+        nextCIdx = cIdx + 1;
+      }
+    } else if (key === "ArrowLeft") {
+      var _e$target3;
+      if (editingCell && ((_e$target3 = e.target) === null || _e$target3 === void 0 ? void 0 : _e$target3.selectionStart) !== undefined && e.target.selectionStart > 0) {
+        return;
+      }
+      if (cIdx > 0) {
+        e.preventDefault();
+        nextCIdx = cIdx - 1;
+      }
+    } else if (key === "ArrowDown") {
+      var _e$target4;
+      if (((_e$target4 = e.target) === null || _e$target4 === void 0 ? void 0 : _e$target4.tagName) === "SELECT") return;
+      if (rIdx < allRows.length - 1) {
+        e.preventDefault();
+        nextRIdx = rIdx + 1;
+      }
+    } else if (key === "ArrowUp") {
+      var _e$target5;
+      if (((_e$target5 = e.target) === null || _e$target5 === void 0 ? void 0 : _e$target5.tagName) === "SELECT") return;
+      if (rIdx > 0) {
+        e.preventDefault();
+        nextRIdx = rIdx - 1;
+      }
+    } else {
+      return;
+    }
+    var targetRow = allRows[nextRIdx];
+    var targetCol = visibleColumns[nextCIdx];
+    if (!targetRow || !targetCol) return;
+    var targetRowKey = targetRow._key || getRowKey(targetRow, startIndex + nextRIdx);
+    var nextCellObj = {
+      rowKey: targetRowKey,
+      colKey: targetCol.key,
+      rowIndex: startIndex + nextRIdx
+    };
+    setActiveCell(nextCellObj);
+    if (editingCell && targetCol.editable !== false) {
+      setEditingCell(nextCellObj);
+    }
+  }, [interactive, editingCell, activeCell, isDirty, isValid, isSaving, handleSave, paginatedData, newRows, visibleColumns, startIndex, isEditKey, newRowPosition]);
+  var renderInteractiveCellInput = useCallback(function (column, row, globalIndex, rowKey) {
+    var _row$column$key;
+    var value = pendingEdits[rowKey] && pendingEdits[rowKey][column.key] !== undefined ? pendingEdits[rowKey][column.key] : (_row$column$key = row[column.key]) !== null && _row$column$key !== void 0 ? _row$column$key : "";
+    return jsx(FieldInput, {
+      column: column,
+      value: value,
+      onChange: function onChange(newVal) {
+        return handleCellValueChange(rowKey, column.key, newVal);
+      },
+      onKeyDown: handleTableKeyDown,
+      isEditing: true,
+      row: row,
+      rowIndex: globalIndex,
+      autoFocus: (editingCell === null || editingCell === void 0 ? void 0 : editingCell.rowKey) === rowKey && (editingCell === null || editingCell === void 0 ? void 0 : editingCell.colKey) === column.key
+    });
+  }, [pendingEdits, handleCellValueChange, handleTableKeyDown, editingCell]);
+  // Callbacks
+  var toggleColumnVisibility = useCallback(function (key) {
+    setColumnsState(function (prev) {
+      return prev.map(function (c) {
+        return c.key === key ? _objectSpread2(_objectSpread2({}, c), {}, {
+          isVisible: !(c.isVisible !== false)
+        }) : c;
+      });
+    });
+  }, []);
+  var handleSort = useCallback(function (key) {
+    if (!sortable) return;
+    setSortConfig(function (prev) {
+      var direction = prev.key === key && prev.direction === "asc" ? "desc" : "asc";
+      onSort === null || onSort === void 0 || onSort(key, direction);
+      return {
+        key: key,
+        direction: direction
+      };
+    });
+  }, [sortable, onSort]);
+  var handleFilter = useCallback(function (key, value) {
+    setFilters(function (prev) {
+      var newFilters = _objectSpread2(_objectSpread2({}, prev), {}, _defineProperty({}, key, value));
+      onFilter === null || onFilter === void 0 || onFilter(newFilters);
+      onFilterChange === null || onFilterChange === void 0 || onFilterChange(newFilters);
+      return newFilters;
+    });
+    setCurrentPage(1);
+  }, [onFilter, onFilterChange]);
+  var handleSelectAll = useCallback(function () {
+    setSelectedRows(function (prev) {
+      var newSelection = new Set(prev);
+      var pageRowKeys = paginatedData.map(function (r, i) {
+        return getRowKey(r, startIndex + i);
+      });
+      var allSelected = pageRowKeys.every(function (k) {
+        return newSelection.has(k);
+      });
+      if (allSelected) {
+        pageRowKeys.forEach(function (k) {
+          return newSelection["delete"](k);
+        });
+      } else {
+        pageRowKeys.forEach(function (k) {
+          return newSelection.add(k);
+        });
+      }
+      var selectedData = Array.from(newSelection).map(function (k) {
+        return rowKeyMap.get(k);
+      }).filter(Boolean);
+      onSelectionChange === null || onSelectionChange === void 0 || onSelectionChange(selectedData);
+      return newSelection;
+    });
+  }, [paginatedData, startIndex, rowKeyMap, onSelectionChange]);
+  var handleSelectRow = useCallback(function (row, rowIndexInPage) {
+    var globalIndex = startIndex + rowIndexInPage;
+    var key = getRowKey(row, globalIndex);
+    setSelectedRows(function (prev) {
+      var newSelection = new Set(prev);
+      if (newSelection.has(key)) {
+        newSelection["delete"](key);
+      } else {
+        newSelection.add(key);
+      }
+      var selectedData = Array.from(newSelection).map(function (k) {
+        return rowKeyMap.get(k);
+      }).filter(Boolean);
+      onSelectionChange === null || onSelectionChange === void 0 || onSelectionChange(selectedData);
+      return newSelection;
+    });
+  }, [startIndex, rowKeyMap, onSelectionChange]);
+  var toggleExpandRow = useCallback(function (row, rowIndexInPage) {
+    var globalIndex = startIndex + rowIndexInPage;
+    var key = getRowKey(row, globalIndex);
+    setExpandedRows(function (prev) {
+      var newExpanded = new Set(prev);
+      if (newExpanded.has(key)) {
+        newExpanded["delete"](key);
+      } else {
+        newExpanded.add(key);
+      }
+      return newExpanded;
+    });
+  }, [startIndex]);
+  var toggleActions = useCallback(function (e, actionCellKey) {
+    e.stopPropagation();
+    e.preventDefault();
+    if (e.currentTarget) {
+      actionButtonRefs.current[actionCellKey] = e.currentTarget;
+    }
+    setActiveActionRowKey(function (prev) {
+      if (prev === actionCellKey) {
+        return null;
+      }
+      return actionCellKey;
+    });
+  }, []);
+  var handleOnAction = useCallback(function (action, row) {
+    var _action$onClick;
+    (_action$onClick = action.onClick) === null || _action$onClick === void 0 || _action$onClick.call(action, {
+      action: action,
+      row: row
+    });
+    if ((action === null || action === void 0 ? void 0 : action.name) === "edit" || (action === null || action === void 0 ? void 0 : action.name) === "Edit") {
+      if (interactive) {
+        var _columnsState$find2, _columnsState$2;
+        var firstColKey = ((_columnsState$find2 = columnsState.find(function (c) {
+          return c.isVisible !== false && c.editable !== false;
+        })) === null || _columnsState$find2 === void 0 ? void 0 : _columnsState$find2.key) || ((_columnsState$2 = columnsState[0]) === null || _columnsState$2 === void 0 ? void 0 : _columnsState$2.key);
+        var globalIndex = tableData.findIndex(function (r, i) {
+          return getRowKey(r, i) === getRowKey(row);
+        });
+        if (firstColKey && globalIndex !== -1) {
+          var rKey = getRowKey(row, globalIndex);
+          setActiveCell({
+            rowKey: rKey,
+            colKey: firstColKey,
+            rowIndex: globalIndex
+          });
+          setEditingCell({
+            rowKey: rKey,
+            colKey: firstColKey,
+            rowIndex: globalIndex
+          });
+        }
+      }
+      onEdit === null || onEdit === void 0 || onEdit({
+        action: action,
+        row: row
+      });
+    }
+    onAction === null || onAction === void 0 || onAction({
+      action: action,
+      row: row
+    });
+    setActiveActionRowKey(null);
+  }, [onAction, onEdit, interactive, columnsState, tableData]);
+  var handleLimitChange = useCallback(function (nextLimit) {
+    var parsed = Number(nextLimit);
+    if (!Number.isFinite(parsed) || parsed <= 0) return;
+    setLimit(parsed);
+    setCurrentPage(1);
+    onLimitChange === null || onLimitChange === void 0 || onLimitChange(parsed);
+  }, [onLimitChange]);
+  var applyGlobalSearch = useCallback(function () {
+    handleFilter("global", searchInput);
+  }, [handleFilter, searchInput]);
+  var onGlobalKeyDown = useCallback(function (e) {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      applyGlobalSearch();
+    }
+  }, [applyGlobalSearch]);
+  var handlePageChange = useCallback(function (newPage) {
+    setCurrentPage(newPage);
+    onPageChange === null || onPageChange === void 0 || onPageChange(newPage);
+  }, [onPageChange]);
+  // Commit a clamped page and report it through `onPageChange`, so a parent
+  // driving `pageNumber` stays in sync. Skipped while loading or while there
+  // are no rows (e.g. data not fetched yet), so a restored page survives
+  // until the rows arrive.
+  var onPageChangeRef = useLatestRef(onPageChange);
+  var hasRows = filteredData.length > 0;
+  useEffect(function () {
+    var _onPageChangeRef$curr;
+    if (loading || !hasRows || pageIndex === currentPage) return;
+    setCurrentPage(pageIndex);
+    (_onPageChangeRef$curr = onPageChangeRef.current) === null || _onPageChangeRef$curr === void 0 || _onPageChangeRef$curr.call(onPageChangeRef, pageIndex);
+  }, [pageIndex, currentPage, loading, hasRows, onPageChangeRef]);
+  var renderCell = useCallback(function (column, row, globalIndex) {
+    if (column.render) return column.render(row, globalIndex);
+    return row === null || row === void 0 ? void 0 : row[column.key];
+  }, []);
+  // Data fetching effect. Reads the latest onFetch through a ref so an inline
+  // consumer callback does not refetch on every render.
+  var onFetchRef = useLatestRef(onFetch);
+  useEffect(function () {
+    var fetchRows = onFetchRef.current;
+    if (!fetchRows) return;
+    var mounted = true;
+    fetchRows({
+      setData: function setData(rows) {
+        if (mounted) setTableData(Array.isArray(rows) ? rows : []);
+      },
+      setLoading: function setLoading(v) {
+        if (mounted) _setLoading(v);
+      },
+      filters: filters,
+      page: currentPage,
+      limit: limit,
+      sort: sortConfig
+    });
+    return function () {
+      mounted = false;
+    };
+  }, [filters, currentPage, limit, sortConfig, onFetchRef]);
+  useEffect(function () {
+    setSearchInput(filters.global || "");
+  }, [filters.global]);
+  // Shared props for row components (MobileCard expects stripedColors array)
+  var safeTheme = theme || DEFAULT_THEME;
+  var stripedColorsArray = Array.isArray(safeTheme.stripedColors) ? safeTheme.stripedColors : DEFAULT_THEME.stripedColors;
+  var rowSharedProps = {
+    selectedRows: selectedRows,
+    expandedRows: expandedRows,
+    rowClass: rowClass,
+    stripedRows: stripedRows,
+    theme: safeTheme,
+    stripedColors: stripedColorsArray,
+    onRowClick: onRowClick,
+    hasDetails: hasDetails,
+    hasDetailsColumn: hasDetailsColumn,
+    showSerial: showSerial,
+    selectable: selectable,
+    visibleColumns: Array.isArray(visibleColumns) ? visibleColumns : [],
+    showColumnPicker: columnPickerVisible,
+    wrapCells: wrapCells,
+    cellClass: cellClass,
+    withAction: withAction,
+    DetailsComponent: DetailsComponent,
+    actionsToUse: actionsToUse,
+    activeActionRowKey: activeActionRowKey,
+    activeAnchorEl: activeAnchorEl,
+    registerActionButton: registerActionButton,
+    actionMenuRef: actionMenuRef,
+    toggleExpandRow: toggleExpandRow,
+    handleSelectRow: handleSelectRow,
+    toggleActions: toggleActions,
+    handleOnAction: handleOnAction,
+    closeActionMenu: closeActionMenu,
+    renderCell: renderCell,
+    className: className,
+    interactive: interactive,
+    activeCell: activeCell,
+    editingCell: editingCell,
+    onCellClick: handleCellClick,
+    onCellDoubleClick: handleCellDoubleClick,
+    renderInteractiveCellInput: renderInteractiveCellInput,
+    invalidCellSet: invalidCellSet,
+    pendingEdits: pendingEdits
+  };
+  var showToolbarBar = showToolbar || interactive && (isDirty || !!renderAddRowButton || !!renderExternalAddRow);
+  var renderAddRowClickableRow = useCallback(function () {
+    return jsx("tr", {
+      onClick: function onClick() {
+        return _handleAddRow(newRowPosition);
+      },
+      className: "bg-primary-50/40 hover:bg-primary-100/70 active:bg-primary-100 transition-colors border-t-2 border-b-2 border-dashed border-primary-300 cursor-pointer group",
+      children: jsx("td", {
+        colSpan: visibleCount,
+        className: "px-6 py-3.5 text-left text-sm font-semibold text-primary-700 group-hover:text-primary-800",
+        children: jsxs("div", {
+          className: "flex items-center justify-start gap-2",
+          children: [jsx(Plus, {
+            className: "w-4 h-4 text-primary-600 group-hover:scale-110 transition-transform"
+          }), jsx("span", {
+            children: "Click here to add new record instantly...."
+          })]
+        })
+      })
+    });
+  }, [_handleAddRow, newRowPosition, visibleCount]);
+  return jsxs("div", {
+    ref: tableContainerRef,
+    tabIndex: interactive ? 0 : undefined,
+    onKeyDown: handleTableKeyDown,
+    className: cn("w-full border rounded-lg md:rounded-md outline-none focus:ring-1 focus:ring-primary-400", className),
+    children: [TheadComponent && typeof TheadComponent === "function" ? jsx(TheadComponent, {
+      columns: columnsState,
+      data: filteredData
+    }) : TheadComponent, showToolbarBar && jsxs("div", {
+      className: "flex flex-col md:flex-row justify-between items-start md:items-center gap-3 p-4 border-b",
+      children: [showToolbar && jsxs("div", {
+        className: "flex flex-col sm:flex-row items-start sm:items-center gap-3 w-full md:w-auto",
+        children: [showReloadButton && jsx(Fragment, {
+          children: renderReloadButton ? typeof renderReloadButton === "function" ? renderReloadButton() : renderReloadButton : jsxs("button", {
+            type: "button",
+            className: "px-4 py-2 bg-primary-100 flex items-center gap-2 rounded-lg md:rounded text-primary-700 hover:bg-primary-200 transition-colors",
+            onClick: onReload,
+            children: [jsx(RefreshCcw, {
+              className: "size-4"
+            }), jsx("span", {
+              className: "hidden sm:inline",
+              children: "Reload"
+            })]
+          })
+        }), showLimitSelector && jsxs("div", {
+          className: "flex items-center gap-2",
+          children: [jsx("label", {
+            htmlFor: "pagination-limit",
+            className: "text-sm whitespace-nowrap",
+            children: "Show"
+          }), jsx(Select, {
+            options: limitOptionsForSelect,
+            value: limit,
+            allowClear: false,
+            placeholder: "",
+            onChange: handleLimitChange,
+            className: "w-20 md:w-30"
+          }), jsx("p", {
+            className: "text-sm whitespace-nowrap",
+            children: "entries"
+          })]
+        })]
+      }), jsxs("div", {
+        className: "flex flex-col sm:flex-row items-start sm:items-center gap-3 w-full md:w-auto",
+        children: [interactive && (renderAddRowButton || renderExternalAddRow) && jsx("div", {
+          className: "flex items-center gap-2",
+          children: typeof (renderAddRowButton || renderExternalAddRow) === "function" ? (renderAddRowButton || renderExternalAddRow)({
+            addRow: _handleAddRow,
+            handleAddRow: _handleAddRow,
+            newRowPosition: newRowPosition
+          }) : renderAddRowButton || renderExternalAddRow
+        }), interactive && isDirty && jsxs("div", {
+          className: "flex items-center gap-2 flex-wrap",
+          children: [jsxs("button", {
+            type: "button",
+            onClick: handleSave,
+            disabled: !isValid || isSaving,
+            title: !isValid ? "Cannot save: ".concat(((_validationErrors$ = validationErrors[0]) === null || _validationErrors$ === void 0 ? void 0 : _validationErrors$.message) || "Validation failed") : "Save changes",
+            className: cn("px-4 py-2 font-medium rounded-lg text-sm flex items-center gap-2 transition-all shadow-sm", isValid ? "bg-primary-600 hover:bg-primary-700 active:bg-primary-800 text-white cursor-pointer" : "bg-gray-200 text-gray-400 border border-gray-300 cursor-not-allowed opacity-75"),
+            children: [jsx(Save, {
+              className: "w-4 h-4"
+            }), jsx("span", {
+              children: isSaving ? "Saving..." : "Save Changes"
+            }), pendingCount > 0 && jsx("span", {
+              className: cn("ml-1 px-2 py-0.5 text-xs rounded-full font-bold", isValid ? "bg-primary-700 text-white" : "bg-gray-300 text-gray-600"),
+              children: pendingCount
+            })]
+          }), jsxs("button", {
+            type: "button",
+            onClick: handleClearChanges,
+            disabled: isSaving,
+            title: "Discard all pending modifications",
+            className: "px-4 py-2 font-medium rounded-lg text-sm flex items-center gap-2 transition-all border border-primary-300 text-primary-700 bg-white hover:bg-primary-50 active:bg-primary-100 cursor-pointer shadow-sm disabled:opacity-50",
+            children: [jsx(X, {
+              className: "w-4 h-4 text-primary-600"
+            }), jsx("span", {
+              children: "Clear Changes"
+            })]
+          }), !isValid && validationErrors.length > 0 && jsxs("div", {
+            className: "flex items-center gap-1.5 px-3 py-1.5 bg-warning-50 border border-warning-200 text-warning-800 rounded-md text-xs font-medium",
+            children: [jsx(AlertCircle, {
+              className: "w-4 h-4 text-warning-600 flex-shrink-0"
+            }), jsx("span", {
+              children: validationErrors[0].message
+            }), validationErrors.length > 1 && jsxs("span", {
+              className: "text-warning-600 font-bold ml-1",
+              children: ["(+", validationErrors.length - 1, " more)"]
+            })]
+          })]
+        }), showToolbar && jsxs("div", {
+          className: "text-sm whitespace-nowrap",
+          children: [resultRange.start, " - ", resultRange.end, " of ", resultRange.total, " ", "results"]
+        }), showToolbar && pagination && jsx(PaginationHeader, {
+          currentPage: pageIndex,
+          totalPages: totalPages,
+          onPageChange: handlePageChange,
+          theme: safeTheme
+        })]
+      })]
+    }), globalSearch && jsx("div", {
+      className: "p-4 border-b",
+      children: jsxs("div", {
+        className: "flex flex-col sm:flex-row items-start sm:items-center gap-2",
+        children: [jsxs("div", {
+          className: "relative w-full",
+          children: [jsx("input", {
+            type: "text",
+            placeholder: "Search...",
+            className: "w-full rounded-lg md:rounded-md border border-gray-300 px-4 py-3 md:py-2 text-sm flex-1 outline-none pr-12",
+            value: searchInput,
+            onChange: function onChange(e) {
+              return setSearchInput(e.target.value);
+            },
+            onKeyDown: onGlobalKeyDown
+          }), jsx("button", {
+            onClick: applyGlobalSearch,
+            className: "absolute right-2 top-1/2 transform -translate-y-1/2 p-2 rounded-lg hover:bg-gray-100",
+            title: "Search",
+            children: jsx(Search, {
+              className: "h-4 w-4 text-primary-400"
+            })
+          })]
+        }), jsx("button", {
+          onClick: function onClick() {
+            setSearchInput("");
+            handleFilter("global", "");
+          },
+          className: "whitespace-nowrap rounded-lg md:rounded-md border border-gray-300 px-4 py-3 md:py-2 text-sm hover:bg-gray-100 w-full sm:w-auto",
+          children: "Clear"
+        })]
+      })
+    }), filterable && isMobileView && jsx(MobileFilters, {
+      showMobileFilters: showMobileFilters,
+      setShowMobileFilters: setShowMobileFilters,
+      globalSearch: globalSearch,
+      searchInput: searchInput,
+      setSearchInput: setSearchInput,
+      onGlobalKeyDown: onGlobalKeyDown,
+      filterable: filterable,
+      visibleColumns: visibleColumns,
+      filters: filters,
+      handleFilter: handleFilter
+    }), columnPickerVisible && showColumnMenu && jsx(ColumnMenu, {
+      id: columnMenuId,
+      columns: columnsState,
+      onToggle: toggleColumnVisibility,
+      menuRef: columnMenuRef,
+      theme: safeTheme
+    }), !isMobileView && jsx("div", {
+      className: "overflow-x-auto overflow-y-visible",
+      children: jsxs("table", _objectSpread2(_objectSpread2({
+        className: cn("min-w-full divide-y divide-gray-200", className)
+      }, props), {}, {
+        children: [jsxs("thead", {
+          className: safeTheme.accentColor,
+          children: [jsxs("tr", {
+            children: [hasDetailsColumn && jsx("th", {
+              className: "w-8 px-4 py-3"
+            }), showSerial && jsx("th", {
+              className: "w-8 px-4 py-3 text-left text-xs font-medium text-primary-500 uppercase tracking-wider",
+              children: "#"
+            }), selectable && jsx("th", {
+              className: "w-12 px-6 py-3",
+              children: jsx("input", {
+                type: "checkbox",
+                className: "rounded border-gray-300",
+                checked: allPageSelected,
+                onChange: handleSelectAll
+              })
+            }), visibleColumns.map(function (column) {
+              var _column$rules;
+              return jsx("th", {
+                className: cn("px-6 py-3 text-left text-xs font-medium text-primary-500 uppercase tracking-wider", {
+                  "cursor-pointer hover:bg-gray-100": sortable && column.sortable !== false
+                }),
+                onClick: function onClick() {
+                  return column.sortable !== false && handleSort(column.key);
+                },
+                children: jsxs("div", {
+                  className: "flex items-center gap-1",
+                  children: [jsx("span", {
+                    children: column.label
+                  }), (column.required || ((_column$rules = column.rules) === null || _column$rules === void 0 ? void 0 : _column$rules.required)) && jsx("span", {
+                    className: "text-error-500 font-bold ml-0.5",
+                    title: "Required field",
+                    children: "*"
+                  }), sortable && column.sortable !== false && jsxs("div", {
+                    className: "flex flex-col",
+                    children: [jsx(ChevronUp, {
+                      className: cn("h-3 w-3", {
+                        "text-primary-600": sortConfig.key === column.key && sortConfig.direction === "asc"
+                      })
+                    }), jsx(ChevronDown, {
+                      className: cn("h-3 w-3 -mt-1", {
+                        "text-primary-600": sortConfig.key === column.key && sortConfig.direction === "desc"
+                      })
+                    })]
+                  })]
+                })
+              }, column.key);
+            }), columnPickerVisible && jsx("th", {
+              className: "w-12 px-4 py-3",
+              children: jsx("div", {
+                className: "relative inline-block",
+                children: jsx("button", {
+                  type: "button",
+                  ref: columnToggleBtnRef,
+                  title: "Choose columns",
+                  "aria-label": "Choose columns",
+                  "aria-expanded": showColumnMenu,
+                  "aria-controls": showColumnMenu ? columnMenuId : undefined,
+                  onClick: function onClick(e) {
+                    e.stopPropagation();
+                    setShowColumnMenu(function (s) {
+                      return !s;
+                    });
+                  },
+                  className: "p-1 rounded hover:bg-gray-100",
+                  children: jsx(MoreVertical, {
+                    className: "h-4 w-4"
+                  })
+                })
+              })
+            }), withAction && jsx("th", {
+              className: "w-12 px-4 py-3"
+            })]
+          }), filterable && jsxs("tr", {
+            children: [hasDetailsColumn && jsx("th", {
+              className: "pb-4"
+            }), showSerial && jsx("th", {
+              className: "pb-4"
+            }), selectable && jsx("th", {
+              className: "pb-4"
+            }), visibleColumns.map(function (column) {
+              return jsx("th", {
+                className: "px-6 pb-4",
+                children: jsx("input", {
+                  type: "text",
+                  placeholder: "Filter ".concat(column.label),
+                  className: "w-full rounded-md border border-gray-300 px-3 py-1.5 text-sm font-normal",
+                  value: filters[column.key] || "",
+                  onChange: function onChange(e) {
+                    return handleFilter(column.key, e.target.value);
+                  }
+                })
+              }, column.key);
+            }), columnPickerVisible && jsx("th", {
+              className: "pb-4"
+            }), withAction && jsx("th", {
+              className: "pb-4"
+            })]
+          })]
+        }), jsx("tbody", {
+          className: "divide-y divide-gray-200",
+          children: loading ? jsx("tr", {
+            children: jsx("td", {
+              colSpan: visibleCount,
+              className: "px-6 py-8 text-center",
+              children: jsxs("div", {
+                className: "flex flex-col items-center gap-2",
+                children: [jsx("div", {
+                  className: "h-6 w-6 animate-spin rounded-full border-2 border-primary-600 border-t-transparent"
+                }), jsx("span", {
+                  className: "text-sm text-primary-500",
+                  children: "Loading..."
+                })]
+              })
+            })
+          }) : paginatedData.length === 0 && newRows.length === 0 ? jsxs(Fragment, {
+            children: [interactive && newRowPosition === "top" && renderAddRowClickableRow(), jsx("tr", {
+              children: jsx("td", {
+                colSpan: visibleCount,
+                className: "px-6 py-8 text-center",
+                children: jsxs("div", {
+                  className: "flex flex-col items-center gap-2",
+                  children: [jsx("div", {
+                    className: "text-primary-400",
+                    children: jsx(List, {
+                      className: "h-8 w-8"
+                    })
+                  }), jsx("span", {
+                    className: "text-sm text-primary-500",
+                    children: "No results found."
+                  })]
+                })
+              })
+            }), interactive && newRowPosition !== "top" && renderAddRowClickableRow()]
+          }) : jsxs(Fragment, {
+            children: [interactive && newRowPosition === "top" && renderAddRowClickableRow(), interactive && newRowPosition === "top" && newRows.map(function (newRow, newIdx) {
+              return jsx(TableRow, _objectSpread2({
+                row: newRow,
+                rowIndexInPage: newIdx,
+                startIndex: 0,
+                visibleCount: visibleCount,
+                isNewRow: true,
+                onDeleteNewRow: handleDeleteNewRow
+              }, rowSharedProps), newRow._key);
+            }), paginatedData.map(function (row, rowIndexInPage) {
+              return jsx(TableRow, _objectSpread2({
+                row: row,
+                rowIndexInPage: rowIndexInPage,
+                startIndex: startIndex,
+                visibleCount: visibleCount
+              }, rowSharedProps), getRowKey(row, startIndex + rowIndexInPage));
+            }), interactive && newRowPosition !== "top" && newRows.map(function (newRow, newIdx) {
+              return jsx(TableRow, _objectSpread2({
+                row: newRow,
+                rowIndexInPage: paginatedData.length + newIdx,
+                startIndex: 0,
+                visibleCount: visibleCount,
+                isNewRow: true,
+                onDeleteNewRow: handleDeleteNewRow
+              }, rowSharedProps), newRow._key);
+            }), interactive && newRowPosition !== "top" && renderAddRowClickableRow()]
+          })
+        })]
+      }))
+    }), isMobileView && jsx("div", {
+      className: "p-4",
+      children: loading ? jsx("div", {
+        className: "py-8 text-center",
+        children: jsxs("div", {
+          className: "flex flex-col items-center gap-2",
+          children: [jsx("div", {
+            className: "h-6 w-6 animate-spin rounded-full border-2 border-primary-600 border-t-transparent"
+          }), jsx("span", {
+            className: "text-sm text-primary-500",
+            children: "Loading..."
+          })]
+        })
+      }) : paginatedData.length === 0 ? jsx("div", {
+        className: "py-8 text-center",
+        children: jsxs("div", {
+          className: "flex flex-col items-center gap-2",
+          children: [jsx("div", {
+            className: "text-primary-400",
+            children: jsx(List, {
+              className: "h-8 w-8"
+            })
+          }), jsx("span", {
+            className: "text-sm text-primary-500",
+            children: "No results found."
+          })]
+        })
+      }) : paginatedData.map(function (row, rowIndexInPage) {
+        return jsx(MobileCard, _objectSpread2(_objectSpread2({
+          row: row,
+          rowIndexInPage: rowIndexInPage,
+          startIndex: startIndex
+        }, rowSharedProps), {}, {
+          visibleColumns: mobileColumns
+        }), getRowKey(row, startIndex + rowIndexInPage));
+      })
+    }), TfootComponent && typeof TfootComponent === "function" ? jsx(TfootComponent, {
+      columns: columnsState,
+      data: filteredData
+    }) : TfootComponent, pagination && jsx(PaginationFooter, {
+      currentPage: pageIndex,
+      totalPages: totalPages,
+      onPageChange: handlePageChange,
+      isMobileView: isMobileView,
+      theme: safeTheme
+    })]
+  });
+});
+
+export { Table as default };