tabler-react-2 0.1.156 → 0.1.157

package/dist/index.js

@@ -156,7 +156,7 @@ Object.keys(_index15).forEach(function (key) {
     }
   });
 });
-var _index16 = require("./timeline/index");
+var _index16 = require("./table-v2/index");
 Object.keys(_index16).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
@@ -168,7 +168,7 @@ Object.keys(_index16).forEach(function (key) {
     }
   });
 });
-var _index17 = require("./input/index");
+var _index17 = require("./timeline/index");
 Object.keys(_index17).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
@@ -180,7 +180,7 @@ Object.keys(_index17).forEach(function (key) {
     }
   });
 });
-var _index18 = require("./navbar/index");
+var _index18 = require("./input/index");
 Object.keys(_index18).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
@@ -192,7 +192,7 @@ Object.keys(_index18).forEach(function (key) {
     }
   });
 });
-var _index19 = require("./segmentedControl/index");
+var _index19 = require("./navbar/index");
 Object.keys(_index19).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
@@ -204,7 +204,7 @@ Object.keys(_index19).forEach(function (key) {
     }
   });
 });
-var _index20 = require("./offcanvas/index");
+var _index20 = require("./segmentedControl/index");
 Object.keys(_index20).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
@@ -216,5 +216,17 @@ Object.keys(_index20).forEach(function (key) {
     }
   });
 });
+var _index21 = require("./offcanvas/index");
+Object.keys(_index21).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _index21[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _index21[key];
+    }
+  });
+});
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }

package/dist/input/checkbox.js

@@ -6,21 +6,29 @@ Object.defineProperty(exports, "__esModule", {
 exports.Checkbox = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _excluded = ["value", "onChange", "label", "required", "className"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
 var Checkbox = exports.Checkbox = function Checkbox(_ref) {
-  var value = _ref.value,
+  var _ref$value = _ref.value,
+    value = _ref$value === void 0 ? false : _ref$value,
     _onChange = _ref.onChange,
     label = _ref.label,
     _ref$required = _ref.required,
-    required = _ref$required === void 0 ? false : _ref$required;
-  return /*#__PURE__*/_react["default"].createElement("label", {
-    className: "form-check",
+    required = _ref$required === void 0 ? false : _ref$required,
+    className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_react["default"].createElement("label", _extends({
+    className: (0, _classnames["default"])("form-check", className),
     style: {
       display: "flex",
       alignItems: "center",
       gap: 8
     }
-  }, /*#__PURE__*/_react["default"].createElement("input", {
+  }, props), /*#__PURE__*/_react["default"].createElement("input", {
     className: "form-check-input",
     type: "checkbox",
     checked: value,

package/dist/input/input.js

@@ -9,7 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _spinner = require("../spinner");
 var _classnames = _interopRequireDefault(require("classnames"));
-var _excluded = ["type", "label", "placeholder", "value", "onChange", "onRawChange", "onInput", "icon", "iconPos", "loader", "separated", "prependedText", "appendedText", "appendedLinkText", "appendedLinkHref", "appendedLinkOnClick", "datalistItems", "variant", "size", "noMargin", "inputProps", "helpText", "helpTextPlacement", "helpPrompt", "required", "hint", "labelDescription", "autocomplete", "useTextarea", "invalid"];
+var _excluded = ["type", "label", "placeholder", "value", "onChange", "onRawChange", "onInput", "onKeyDown", "icon", "iconPos", "loader", "separated", "prependedText", "appendedText", "appendedLinkText", "appendedLinkHref", "appendedLinkOnClick", "datalistItems", "variant", "size", "noMargin", "inputProps", "helpText", "helpTextPlacement", "helpPrompt", "required", "hint", "labelDescription", "autocomplete", "useTextarea", "invalid", "invalidText", "autoFocus"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
@@ -32,6 +32,7 @@ var Input = exports.Input = function Input(_ref) {
     onChange = _ref.onChange,
     onRawChange = _ref.onRawChange,
     onInput = _ref.onInput,
+    _onKeyDown = _ref.onKeyDown,
     icon = _ref.icon,
     _ref$iconPos = _ref.iconPos,
     iconPos = _ref$iconPos === void 0 ? "leading" : _ref$iconPos,
@@ -59,6 +60,8 @@ var Input = exports.Input = function Input(_ref) {
     _ref$useTextarea = _ref.useTextarea,
     useTextarea = _ref$useTextarea === void 0 ? false : _ref$useTextarea,
     invalid = _ref.invalid,
+    invalidText = _ref.invalidText,
+    autoFocus = _ref.autoFocus,
     props = _objectWithoutProperties(_ref, _excluded);
   // State for managing uncontrolled input value
   var _useState = (0, _react.useState)(controlledValue),
@@ -88,6 +91,12 @@ var Input = exports.Input = function Input(_ref) {
       onRawChange(e);
     }
   };
+  var inputRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    if (autoFocus && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [autoFocus]);
   var renderInput = function renderInput() {
     return useTextarea ? /*#__PURE__*/_react["default"].createElement("textarea", _extends({
       className: (0, _classnames["default"])("form-control", variant && "border-".concat(variant), variant && "text-".concat(variant), variant && "bg-".concat(variant, "-lt"), size && "form-control-".concat(size), invalid && "is-invalid"),
@@ -96,7 +105,8 @@ var Input = exports.Input = function Input(_ref) {
       ,
       onChange: handleInputChange,
       list: datalistItems.length > 0 ? "datalist-options" : undefined,
-      autoComplete: autocomplete
+      autoComplete: autocomplete,
+      ref: inputRef
     }, inputProps)) : /*#__PURE__*/_react["default"].createElement("input", _extends({
       type: type,
       className: (0, _classnames["default"])("form-control", variant && "border-".concat(variant), variant && "text-".concat(variant), variant && "bg-".concat(variant, "-lt"), size && "form-control-".concat(size), invalid && "is-invalid", props.inputClassName),
@@ -104,8 +114,12 @@ var Input = exports.Input = function Input(_ref) {
       value: value !== null && value !== void 0 ? value : "" // Always ensure value is a string
       ,
       onChange: handleInputChange,
+      onKeyDown: function onKeyDown(e) {
+        return _onKeyDown === null || _onKeyDown === void 0 ? void 0 : _onKeyDown(e);
+      },
       list: datalistItems.length > 0 ? "datalist-options" : undefined,
-      autoComplete: autocomplete
+      autoComplete: autocomplete,
+      ref: inputRef
     }, inputProps));
   };
   return /*#__PURE__*/_react["default"].createElement("div", _extends({
@@ -148,13 +162,13 @@ var Input = exports.Input = function Input(_ref) {
   }, /*#__PURE__*/_react["default"].createElement(_spinner.Spinner, {
     size: "sm"
   }))) : prependedText || appendedText ? /*#__PURE__*/_react["default"].createElement("div", {
-    className: "input-group input-group-flat ".concat(noMargin ? "" : "mb-3")
+    className: "input-group input-group-flat ".concat(invalid && "is-invalid")
   }, prependedText && /*#__PURE__*/_react["default"].createElement("span", {
     className: "input-group-text"
   }, prependedText), renderInput(), appendedText && /*#__PURE__*/_react["default"].createElement("span", {
     className: "input-group-text"
   }, appendedText)) : appendedLinkText ? /*#__PURE__*/_react["default"].createElement("div", {
-    className: "input-group input-group-flat"
+    className: "input-group input-group-flat  ".concat(invalid && "is-invalid")
   }, renderInput(), /*#__PURE__*/_react["default"].createElement("span", {
     className: "input-group-text"
   }, /*#__PURE__*/_react["default"].createElement("a", _extends({}, appendedLinkHref ? {
@@ -174,7 +188,9 @@ var Input = exports.Input = function Input(_ref) {
     }, item);
   }))), hint && /*#__PURE__*/_react["default"].createElement("div", {
     className: "form-hint"
-  }, hint));
+  }, hint), invalidText && invalid && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "invalid-feedback"
+  }, invalidText));
 };
 Input.propTypes = {
   type: _propTypes["default"].string,
@@ -192,5 +208,18 @@ Input.propTypes = {
   appendedLinkText: _propTypes["default"].string,
   appendedLinkHref: _propTypes["default"].string,
   appendedLinkOnClick: _propTypes["default"].func,
-  datalistItems: _propTypes["default"].arrayOf(_propTypes["default"].string)
+  datalistItems: _propTypes["default"].arrayOf(_propTypes["default"].string),
+  autoFocus: _propTypes["default"].bool,
+  onKeyDown: _propTypes["default"].func,
+  inputProps: _propTypes["default"].object,
+  helpText: _propTypes["default"].string,
+  helpTextPlacement: _propTypes["default"].string,
+  helpPrompt: _propTypes["default"].string,
+  required: _propTypes["default"].bool,
+  hint: _propTypes["default"].string,
+  labelDescription: _propTypes["default"].string,
+  autocomplete: _propTypes["default"].string,
+  useTextarea: _propTypes["default"].bool,
+  invalid: _propTypes["default"].bool,
+  invalidText: _propTypes["default"].string
 };

package/dist/steps/index.js

@@ -6,8 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.Steps = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _excluded = ["steps", "color", "variant", "numbered", "hideText", "vertical", "className"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
 var Steps = exports.Steps = function Steps(_ref) {
   var steps = _ref.steps,
     passedColor = _ref.color,
@@ -17,12 +21,14 @@ var Steps = exports.Steps = function Steps(_ref) {
     _ref$hideText = _ref.hideText,
     hideText = _ref$hideText === void 0 ? false : _ref$hideText,
     _ref$vertical = _ref.vertical,
-    vertical = _ref$vertical === void 0 ? false : _ref$vertical;
+    vertical = _ref$vertical === void 0 ? false : _ref$vertical,
+    className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
   var color = passedColor || passedVariant;
   var stepClass = "steps ".concat(color ? "steps-".concat(color) : "", " ").concat(numbered ? "steps-counter" : "", " ").concat(vertical ? "steps-vertical" : "");
-  return /*#__PURE__*/_react["default"].createElement("ul", {
-    className: stepClass
-  }, steps.map(function (step, index) {
+  return /*#__PURE__*/_react["default"].createElement("ul", _extends({
+    className: (0, _classnames["default"])(stepClass, className)
+  }, props), steps.map(function (step, index) {
     var stepClasses = "step-item ".concat(step.active ? "active" : "");
     var stepContent = hideText ? "" : step.text;
     var tooltip = step.tooltip ? {

package/dist/table/index.js

@@ -5,9 +5,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Table = exports.IconSortDescending = exports.IconSortAscending = exports.IconArrowsSort = void 0;
+Object.defineProperty(exports, "useTable", {
+  enumerable: true,
+  get: function get() {
+    return _useTable.useTable;
+  }
+});
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _index = require("../index");
+var _useTable = require("./useTable");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
@@ -120,6 +127,21 @@ var Table = exports.Table = function Table(_ref4) {
     showPagination = _ref4$showPagination === void 0 ? false : _ref4$showPagination,
     _ref4$defaultRowsPerP = _ref4.defaultRowsPerPage,
     defaultRowsPerPage = _ref4$defaultRowsPerP === void 0 ? 10 : _ref4$defaultRowsPerP,
+    page = _ref4.page,
+    rowsPerPage = _ref4.rowsPerPage,
+    size = _ref4.size,
+    totalRows = _ref4.totalRows,
+    onPageChange = _ref4.onPageChange,
+    onRowsPerPageChange = _ref4.onRowsPerPageChange,
+    onSetPage = _ref4.onSetPage,
+    onSetSize = _ref4.onSetSize,
+    orderBy = _ref4.orderBy,
+    order = _ref4.order,
+    onSetOrder = _ref4.onSetOrder,
+    _ref4$loading = _ref4.loading,
+    loading = _ref4$loading === void 0 ? false : _ref4$loading,
+    _ref4$pageSizeOptions = _ref4.pageSizeOptions,
+    pageSizeOptions = _ref4$pageSizeOptions === void 0 ? [10, 25, 50, 100] : _ref4$pageSizeOptions,
     _ref4$tableClassName = _ref4.tableClassName,
     tableClassName = _ref4$tableClassName === void 0 ? "" : _ref4$tableClassName,
     _ref4$paginationClass = _ref4.paginationClassName,
@@ -141,22 +163,55 @@ var Table = exports.Table = function Table(_ref4) {
     _useState6 = _slicedToArray(_useState5, 2),
     pageSize = _useState6[0],
     setPageSize = _useState6[1];
+
+  // Determine controlled vs uncontrolled values
+  var isPageControlled = typeof page === "number" && page > 0;
+  var isPageSizeControlled = typeof size === "number" && size > 0 || typeof rowsPerPage === "number" && rowsPerPage > 0;
+  var useExternalPagination = isPageControlled || isPageSizeControlled || typeof totalRows === "number" || typeof onSetPage === "function" || typeof onSetSize === "function" || typeof onPageChange === "function" || typeof onRowsPerPageChange === "function";
+  var effectivePage = isPageControlled ? page : currentPage;
+  var effectivePageSize = isPageSizeControlled ? typeof size === "number" && size > 0 ? size : rowsPerPage : pageSize;
   var defaultSortFn = function defaultSortFn(a, b) {
     if (a === b) return 0;
     return a > b ? 1 : -1;
   };
   var handleSort = function handleSort(accessor, sortFn) {
-    var direction = "asc";
-    if (sortConfig.key === accessor && sortConfig.direction === "asc") {
-      direction = "desc";
+    var isSortControlled = typeof orderBy === "string" || typeof onSetOrder === "function";
+    if (isSortControlled) {
+      var currentKey = typeof orderBy === "string" ? orderBy : null;
+      var currentDir = order === "desc" ? "desc" : "asc";
+      var nextDir = "asc";
+      if (currentKey === accessor) {
+        nextDir = currentDir === "asc" ? "desc" : "asc";
+      }
+      if (typeof onSetOrder === "function") {
+        onSetOrder(accessor, nextDir);
+      }
+    } else {
+      var direction = "asc";
+      if (sortConfig.key === accessor && sortConfig.direction === "asc") {
+        direction = "desc";
+      }
+      setSortConfig({
+        key: accessor,
+        direction: direction
+      });
+    }
+    if (useExternalPagination) {
+      if (typeof onSetPage === "function") {
+        onSetPage(1);
+      } else if (typeof onPageChange === "function") {
+        onPageChange(1);
+      } else {
+        setCurrentPage(1);
+      }
+    } else {
+      setCurrentPage(1);
     }
-    setSortConfig({
-      key: accessor,
-      direction: direction
-    });
-    setCurrentPage(1);
   };
   var sortedData = (0, _react.useMemo)(function () {
+    // If sorting is controlled externally, do not sort here
+    var isSortControlled = typeof orderBy === "string" || typeof onSetOrder === "function";
+    if (isSortControlled) return data;
     if (!sortConfig.key) return data;
     var key = sortConfig.key,
       direction = sortConfig.direction;
@@ -170,27 +225,44 @@ var Table = exports.Table = function Table(_ref4) {
       var bValue = getValueByAccessor(b, key);
       return sortFunction(aValue, bValue) * order;
     });
-  }, [data, sortConfig, columns]);
-  var pageSizeOptions = [10, 25, 50, 100];
+  }, [data, sortConfig, columns, orderBy, order, onSetOrder]);
+  var totalRowCount = (0, _react.useMemo)(function () {
+    return useExternalPagination ? totalRows !== null && totalRows !== void 0 ? totalRows : data.length : sortedData.length;
+  }, [useExternalPagination, totalRows, data.length, sortedData]);
   var totalPages = (0, _react.useMemo)(function () {
-    return Math.max(1, Math.ceil(sortedData.length / pageSize));
-  }, [sortedData, pageSize]);
+    return Math.max(1, Math.ceil((totalRowCount || 0) / (effectivePageSize || 1)));
+  }, [totalRowCount, effectivePageSize]);
   var paginatedData = (0, _react.useMemo)(function () {
     if (!showPagination) return sortedData;
-    var start = (currentPage - 1) * pageSize;
-    return sortedData.slice(start, start + pageSize);
-  }, [sortedData, currentPage, pageSize, showPagination]);
+    if (useExternalPagination) return sortedData; // data is already paginated externally
+    var start = (effectivePage - 1) * effectivePageSize;
+    return sortedData.slice(start, start + effectivePageSize);
+  }, [sortedData, effectivePage, effectivePageSize, showPagination, useExternalPagination]);
   var getSortIcon = function getSortIcon(column) {
-    if (sortConfig.key === column.accessor) {
-      return sortConfig.direction === "asc" ? /*#__PURE__*/_react["default"].createElement(IconSortAscending, {
+    var isSortControlled = typeof orderBy === "string" || typeof onSetOrder === "function";
+    if (isSortControlled) {
+      if (orderBy === column.accessor) {
+        return order === "desc" ? /*#__PURE__*/_react["default"].createElement(IconSortDescending, {
+          size: 16
+        }) : /*#__PURE__*/_react["default"].createElement(IconSortAscending, {
+          size: 16
+        });
+      }
+      return /*#__PURE__*/_react["default"].createElement(IconArrowsSort, {
         size: 16
-      }) : /*#__PURE__*/_react["default"].createElement(IconSortDescending, {
+      });
+    } else {
+      if (sortConfig.key === column.accessor) {
+        return sortConfig.direction === "asc" ? /*#__PURE__*/_react["default"].createElement(IconSortAscending, {
+          size: 16
+        }) : /*#__PURE__*/_react["default"].createElement(IconSortDescending, {
+          size: 16
+        });
+      }
+      return /*#__PURE__*/_react["default"].createElement(IconArrowsSort, {
         size: 16
       });
     }
-    return /*#__PURE__*/_react["default"].createElement(IconArrowsSort, {
-      size: 16
-    });
   };
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: parentClassName
@@ -202,11 +274,11 @@ var Table = exports.Table = function Table(_ref4) {
     return /*#__PURE__*/_react["default"].createElement("th", {
       key: idx,
       className: "".concat(column.className || "", " ").concat(column.sortable ? "sortable" : ""),
-      onClick: column.sortable ? function () {
+      onClick: column.sortable && !loading ? function () {
         return handleSort(column.accessor, column.sortFn);
       } : undefined,
       style: {
-        cursor: column.sortable ? "pointer" : "default"
+        cursor: column.sortable && !loading ? "pointer" : "default"
       }
     }, column.icon && /*#__PURE__*/_react["default"].createElement("span", {
       style: {
@@ -217,7 +289,10 @@ var Table = exports.Table = function Table(_ref4) {
         marginRight: 8
       }
     }, column.label), column.sortable && getSortIcon(column));
-  }))), /*#__PURE__*/_react["default"].createElement("tbody", null, paginatedData.map(function (row, rowIndex) {
+  }))), /*#__PURE__*/_react["default"].createElement("tbody", null, loading && /*#__PURE__*/_react["default"].createElement("tr", null, /*#__PURE__*/_react["default"].createElement("td", {
+    colSpan: columns.length,
+    className: "text-center py-3"
+  }, /*#__PURE__*/_react["default"].createElement(_index.Spinner, null))), paginatedData.map(function (row, rowIndex) {
     return /*#__PURE__*/_react["default"].createElement("tr", {
       key: rowIndex
     }, columns.map(function (column, colIndex) {
@@ -230,18 +305,24 @@ var Table = exports.Table = function Table(_ref4) {
     className: "d-flex justify-content-between align-items-center mt-2 ".concat(paginationClassName)
   }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_index.Button, {
     onClick: function onClick() {
-      return setCurrentPage(function (p) {
-        return Math.max(p - 1, 1);
-      });
+      var prev = Math.max(effectivePage - 1, 1);
+      if (useExternalPagination) {
+        if (typeof onSetPage === "function") return onSetPage(prev);
+        if (typeof onPageChange === "function") return onPageChange(prev);
+      }
+      setCurrentPage(prev);
     },
-    disabled: currentPage === 1
+    disabled: loading || effectivePage === 1
   }, "Previous"), /*#__PURE__*/_react["default"].createElement(_index.Button, {
     onClick: function onClick() {
-      return setCurrentPage(function (p) {
-        return Math.min(p + 1, totalPages);
-      });
+      var next = Math.min(effectivePage + 1, totalPages);
+      if (useExternalPagination) {
+        if (typeof onSetPage === "function") return onSetPage(next);
+        if (typeof onPageChange === "function") return onPageChange(next);
+      }
+      setCurrentPage(next);
     },
-    disabled: currentPage === totalPages,
+    disabled: loading || effectivePage === totalPages,
     style: {
       marginLeft: 8
     }
@@ -249,11 +330,16 @@ var Table = exports.Table = function Table(_ref4) {
     style: {
       marginLeft: 16
     }
-  }, "Page ", currentPage, " of ", totalPages), /*#__PURE__*/_react["default"].createElement("span", {
+  }, "Page ", effectivePage, " of ", totalPages), /*#__PURE__*/_react["default"].createElement("span", {
     style: {
       marginLeft: 16
     }
-  }, "Showing ", (currentPage - 1) * pageSize + 1, " to", " ", Math.min(currentPage * pageSize, sortedData.length), " of", " ", sortedData.length, " rows")), /*#__PURE__*/_react["default"].createElement(_index.DropdownInput, {
+  }, function () {
+    var hasData = paginatedData.length > 0;
+    var startIndex = hasData ? (effectivePage - 1) * effectivePageSize + 1 : 0;
+    var endIndex = hasData ? startIndex + paginatedData.length - 1 : 0;
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, "Showing ", startIndex, " to ", endIndex, " of ", totalRowCount || 0, " rows");
+  }())), /*#__PURE__*/_react["default"].createElement(_index.DropdownInput, {
     prompt: "Rows per page",
     items: pageSizeOptions.map(function (size) {
       return {
@@ -261,7 +347,13 @@ var Table = exports.Table = function Table(_ref4) {
         label: size
       };
     }),
+    value: effectivePageSize,
+    disabled: loading,
     onChange: function onChange(selected) {
+      if (useExternalPagination) {
+        if (typeof onSetSize === "function") return onSetSize(selected.id);
+        if (typeof onRowsPerPageChange === "function") return onRowsPerPageChange(selected.id);
+      }
       setPageSize(selected.id);
       setCurrentPage(1);
     }
@@ -282,5 +374,21 @@ Table.propTypes = {
   stickyHeader: _propTypes["default"].bool,
   className: _propTypes["default"].string,
   showPagination: _propTypes["default"].bool,
-  defaultRowsPerPage: _propTypes["default"].number
+  defaultRowsPerPage: _propTypes["default"].number,
+  // external pagination
+  page: _propTypes["default"].number,
+  rowsPerPage: _propTypes["default"].number,
+  size: _propTypes["default"].number,
+  totalRows: _propTypes["default"].number,
+  onPageChange: _propTypes["default"].func,
+  onRowsPerPageChange: _propTypes["default"].func,
+  onSetPage: _propTypes["default"].func,
+  onSetSize: _propTypes["default"].func,
+  pageSizeOptions: _propTypes["default"].arrayOf(_propTypes["default"].number),
+  // external ordering
+  orderBy: _propTypes["default"].string,
+  order: _propTypes["default"].oneOf(["asc", "desc"]),
+  onSetOrder: _propTypes["default"].func,
+  // loading
+  loading: _propTypes["default"].bool
 };