tabler-react-2 0.1.126 → 0.1.128

package/dist/input/dropdown.js

@@ -113,7 +113,7 @@ var DropdownInput = exports.DropdownInput = function DropdownInput(_ref) {
   var dropdownContent = /*#__PURE__*/_react["default"].createElement("div", _extends({
     className: "dropdown"
   }, props), /*#__PURE__*/_react["default"].createElement("a", _extends({
-    href: "#",
+    href: "javascript:void(0)",
     className: "btn dropdown-toggle ".concat(props.disabled ? "disabled" : "", " ").concat(color ? "btn-".concat(outline ? "outline-" : "").concat(color) : ""),
     "data-bs-toggle": "dropdown"
   }, aprops), selectedValue ? selectedValue.label : prompt), /*#__PURE__*/_react["default"].createElement("div", {
@@ -156,7 +156,7 @@ var DropdownInput = exports.DropdownInput = function DropdownInput(_ref) {
       style: {
         cursor: isItemDisabled ? "not-allowed" : "pointer"
       },
-      href: v.href || "#"
+      href: v.href || "javascript:void(0)"
     }, v.icon && /*#__PURE__*/_react["default"].createElement("span", {
       className: "dropdown-item-icon"
     }, v.icon), (_v$dropdownText = v.dropdownText) !== null && _v$dropdownText !== void 0 ? _v$dropdownText : v.label);

package/dist/table/index.js

@@ -4,9 +4,10 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Table = void 0;
+exports.Table = exports.IconSortDescending = exports.IconSortAscending = exports.IconArrowsSort = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _index = require("../index");
 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; }
@@ -20,7 +21,7 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
-var IconSortDescending = function IconSortDescending(_ref) {
+var IconSortDescending = exports.IconSortDescending = function IconSortDescending(_ref) {
   var size = _ref.size;
   return /*#__PURE__*/_react["default"].createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -49,7 +50,7 @@ var IconSortDescending = function IconSortDescending(_ref) {
     d: "M18 6l0 12"
   }));
 };
-var IconSortAscending = function IconSortAscending(_ref2) {
+var IconSortAscending = exports.IconSortAscending = function IconSortAscending(_ref2) {
   var size = _ref2.size;
   return /*#__PURE__*/_react["default"].createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -78,7 +79,7 @@ var IconSortAscending = function IconSortAscending(_ref2) {
     d: "M18 6l0 12"
   }));
 };
-var IconArrowsSort = function IconArrowsSort(_ref3) {
+var IconArrowsSort = exports.IconArrowsSort = function IconArrowsSort(_ref3) {
   var size = _ref3.size;
   return /*#__PURE__*/_react["default"].createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -109,9 +110,18 @@ var getValueByAccessor = function getValueByAccessor(object, accessor) {
 var Table = exports.Table = function Table(_ref4) {
   var columns = _ref4.columns,
     data = _ref4.data,
-    nowrap = _ref4.nowrap,
-    stickyHeader = _ref4.stickyHeader,
-    className = _ref4.className;
+    _ref4$nowrap = _ref4.nowrap,
+    nowrap = _ref4$nowrap === void 0 ? false : _ref4$nowrap,
+    _ref4$stickyHeader = _ref4.stickyHeader,
+    stickyHeader = _ref4$stickyHeader === void 0 ? false : _ref4$stickyHeader,
+    _ref4$className = _ref4.className,
+    className = _ref4$className === void 0 ? "" : _ref4$className,
+    _ref4$showPagination = _ref4.showPagination,
+    showPagination = _ref4$showPagination === void 0 ? false : _ref4$showPagination,
+    _ref4$defaultRowsPerP = _ref4.defaultRowsPerPage,
+    defaultRowsPerPage = _ref4$defaultRowsPerP === void 0 ? 10 : _ref4$defaultRowsPerP,
+    _ref4$tableClassName = _ref4.tableClassName,
+    tableClassName = _ref4$tableClassName === void 0 ? "" : _ref4$tableClassName;
   var _useState = (0, _react.useState)({
       key: null,
       direction: "asc"
@@ -119,6 +129,14 @@ var Table = exports.Table = function Table(_ref4) {
     _useState2 = _slicedToArray(_useState, 2),
     sortConfig = _useState2[0],
     setSortConfig = _useState2[1];
+  var _useState3 = (0, _react.useState)(1),
+    _useState4 = _slicedToArray(_useState3, 2),
+    currentPage = _useState4[0],
+    setCurrentPage = _useState4[1];
+  var _useState5 = (0, _react.useState)(defaultRowsPerPage),
+    _useState6 = _slicedToArray(_useState5, 2),
+    pageSize = _useState6[0],
+    setPageSize = _useState6[1];
   var defaultSortFn = function defaultSortFn(a, b) {
     if (a === b) return 0;
     return a > b ? 1 : -1;
@@ -132,24 +150,32 @@ var Table = exports.Table = function Table(_ref4) {
       key: accessor,
       direction: direction
     });
+    setCurrentPage(1);
   };
-  var sortedData = _react["default"].useMemo(function () {
-    if (sortConfig.key) {
-      var key = sortConfig.key,
-        direction = sortConfig.direction;
-      var sortColumn = columns.find(function (col) {
-        return col.accessor === key;
-      });
-      var sortFunction = (sortColumn === null || sortColumn === void 0 ? void 0 : sortColumn.sortFn) || defaultSortFn;
-      return _toConsumableArray(data).sort(function (a, b) {
-        var aValue = getValueByAccessor(a, key);
-        var bValue = getValueByAccessor(b, key);
-        var order = direction === "asc" ? 1 : -1;
-        return sortFunction(aValue, bValue) * order;
-      });
-    }
-    return data;
+  var sortedData = (0, _react.useMemo)(function () {
+    if (!sortConfig.key) return data;
+    var key = sortConfig.key,
+      direction = sortConfig.direction;
+    var sortColumn = columns.find(function (col) {
+      return col.accessor === key;
+    });
+    var sortFunction = (sortColumn === null || sortColumn === void 0 ? void 0 : sortColumn.sortFn) || defaultSortFn;
+    var order = direction === "asc" ? 1 : -1;
+    return _toConsumableArray(data).sort(function (a, b) {
+      var aValue = getValueByAccessor(a, key);
+      var bValue = getValueByAccessor(b, key);
+      return sortFunction(aValue, bValue) * order;
+    });
   }, [data, sortConfig, columns]);
+  var pageSizeOptions = [10, 25, 50, 100];
+  var totalPages = (0, _react.useMemo)(function () {
+    return Math.max(1, Math.ceil(sortedData.length / pageSize));
+  }, [sortedData, pageSize]);
+  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]);
   var getSortIcon = function getSortIcon(column) {
     if (sortConfig.key === column.accessor) {
       return sortConfig.direction === "asc" ? /*#__PURE__*/_react["default"].createElement(IconSortAscending, {
@@ -165,27 +191,27 @@ var Table = exports.Table = function Table(_ref4) {
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: "table-responsive ".concat(nowrap ? "table-nowrap" : "", " ").concat(className)
   }, /*#__PURE__*/_react["default"].createElement("table", {
-    className: "table table-vcenter ".concat(stickyHeader ? "sticky-top" : "")
-  }, /*#__PURE__*/_react["default"].createElement("thead", null, /*#__PURE__*/_react["default"].createElement("tr", null, columns.map(function (column, index) {
+    className: "table table-vcenter ".concat(stickyHeader ? "sticky-top" : "", " ").concat(tableClassName)
+  }, /*#__PURE__*/_react["default"].createElement("thead", null, /*#__PURE__*/_react["default"].createElement("tr", null, columns.map(function (column, idx) {
     return /*#__PURE__*/_react["default"].createElement("th", {
-      key: index,
+      key: idx,
       className: "".concat(column.className || "", " ").concat(column.sortable ? "sortable" : ""),
       onClick: column.sortable ? function () {
-        return handleSort(column.accessor, column === null || column === void 0 ? void 0 : column.sortFn);
+        return handleSort(column.accessor, column.sortFn);
       } : undefined,
       style: {
         cursor: column.sortable ? "pointer" : "default"
       }
     }, column.icon && /*#__PURE__*/_react["default"].createElement("span", {
       style: {
-        marginRight: "8px"
+        marginRight: 8
       }
     }, column.icon), /*#__PURE__*/_react["default"].createElement("span", {
       style: {
-        marginRight: "8px"
+        marginRight: 8
       }
     }, column.label), column.sortable && getSortIcon(column));
-  }))), /*#__PURE__*/_react["default"].createElement("tbody", null, sortedData.map(function (row, rowIndex) {
+  }))), /*#__PURE__*/_react["default"].createElement("tbody", null, paginatedData.map(function (row, rowIndex) {
     return /*#__PURE__*/_react["default"].createElement("tr", {
       key: rowIndex
     }, columns.map(function (column, colIndex) {
@@ -194,21 +220,57 @@ var Table = exports.Table = function Table(_ref4) {
         className: column.className || ""
       }, column.render ? column.render(getValueByAccessor(row, column.accessor), row) : getValueByAccessor(row, column.accessor));
     }));
-  }))));
+  }))), showPagination && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "d-flex justify-content-between align-items-center mt-2"
+  }, /*#__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);
+      });
+    },
+    disabled: currentPage === 1
+  }, "Previous"), /*#__PURE__*/_react["default"].createElement(_index.Button, {
+    onClick: function onClick() {
+      return setCurrentPage(function (p) {
+        return Math.min(p + 1, totalPages);
+      });
+    },
+    disabled: currentPage === totalPages,
+    style: {
+      marginLeft: 8
+    }
+  }, "Next"), /*#__PURE__*/_react["default"].createElement("span", {
+    style: {
+      marginLeft: 16
+    }
+  }, "Page ", currentPage, " of ", totalPages)), /*#__PURE__*/_react["default"].createElement(_index.DropdownInput, {
+    prompt: "Rows per page",
+    items: pageSizeOptions.map(function (size) {
+      return {
+        id: size,
+        label: size
+      };
+    }),
+    onChange: function onChange(selected) {
+      setPageSize(selected.id);
+      setCurrentPage(1);
+    }
+  })));
 };
 Table.propTypes = {
   columns: _propTypes["default"].arrayOf(_propTypes["default"].shape({
     label: _propTypes["default"].string.isRequired,
     accessor: _propTypes["default"].string.isRequired,
     className: _propTypes["default"].string,
-    // Optional: For adding specific CSS classes
     render: _propTypes["default"].func,
-    // Optional: Custom render function for the cell content
     sortable: _propTypes["default"].bool,
-    // Optional: Determines if the column is sortable
-    sortFn: _propTypes["default"].func // Optional: Custom sorting function
+    sortFn: _propTypes["default"].func,
+    icon: _propTypes["default"].node
   })).isRequired,
   data: _propTypes["default"].arrayOf(_propTypes["default"].object).isRequired,
   nowrap: _propTypes["default"].bool,
-  stickyHeader: _propTypes["default"].bool
+  stickyHeader: _propTypes["default"].bool,
+  className: _propTypes["default"].string,
+  showPagination: _propTypes["default"].bool,
+  defaultRowsPerPage: _propTypes["default"].number
 };

package/docs/src/docs/changelog.mdx

@@ -2,7 +2,11 @@
 title: Changelog
 ---
 
-# 0.1.125
+# 0.1.127
+
+- Added support for `showPagination` and `defaultRowsPerPage` in the `Table` component.
+
+# 0.1.126
 
 - Added support for `disabled` in the `DropdownInput` component.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tabler-react-2",
-  "version": "0.1.126",
+  "version": "0.1.128",
   "description": "A react implementation of Tabler ui",
   "main": "dist/index.js",
   "scripts": {