tabler-react-2 0.1.152 → 0.1.153-alpha.1

package/dist/input/checkbox.js

@@ -6,22 +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 _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/table/index.js

@@ -120,6 +120,16 @@ 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,
+    _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,6 +151,13 @@ 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;
@@ -154,7 +171,17 @@ var Table = exports.Table = function Table(_ref4) {
       key: accessor,
       direction: direction
     });
-    setCurrentPage(1);
+    if (useExternalPagination) {
+      if (typeof onSetPage === "function") {
+        onSetPage(1);
+      } else if (typeof onPageChange === "function") {
+        onPageChange(1);
+      } else {
+        setCurrentPage(1);
+      }
+    } else {
+      setCurrentPage(1);
+    }
   };
   var sortedData = (0, _react.useMemo)(function () {
     if (!sortConfig.key) return data;
@@ -171,15 +198,18 @@ var Table = exports.Table = function Table(_ref4) {
       return sortFunction(aValue, bValue) * order;
     });
   }, [data, sortConfig, columns]);
-  var pageSizeOptions = [10, 25, 50, 100];
+  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, {
@@ -230,18 +260,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: 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: effectivePage === totalPages,
     style: {
       marginLeft: 8
     }
@@ -249,11 +285,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 +302,12 @@ var Table = exports.Table = function Table(_ref4) {
         label: size
       };
     }),
+    value: effectivePageSize,
     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 +328,15 @@ 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)
 };

package/docs/package.json

@@ -22,7 +22,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "styled-components": "^6.1.15",
-    "tabler-react-2": "^0.1.140"
+    "tabler-react-2": "0.1.153-alpha.0"
   },
   "devDependencies": {},
   "keywords": [

package/docs/src/docs/changelog.mdx

@@ -2,6 +2,14 @@
 title: Changelog
 ---
 
+# 0.1.153
+
+- Support className and arbitrary props on the `Checkbox` component.
+
+# 0.1.152
+
+- Fix rendering of `invalid` prop on `Input` components with `prependedText` or `appendedText`.
+
 # 0.1.151
 
 - Add `invalidText` prop to the `Input` component.

package/docs/src/docs/components/tables.mdx

@@ -454,3 +454,101 @@ const customSortFn = (a, b) => {
 ```
 
 > **Note**: Sorting only works for the data in the table. If, for example, you have thousands of rows and are only rendering a few, you will need to handle the sorting yourself, outside of the table. Incorporating internal pagination that supports sorting is a planned feature but not yet implemented.
+
+## Pagination
+
+The `Table` supports built-in pagination UI. Enable it with `showPagination`.
+
+- showPagination: toggles the pagination controls
+- defaultRowsPerPage: initial rows per page for internal mode
+- pageSizeOptions: selectable page sizes (default `[10, 25, 50, 100]`)
+
+<Excerpt>
+  <Table
+    columns={[
+      { label: "Name", accessor: "name" },
+      { label: "Party", accessor: "party" },
+      { label: "State", accessor: "region.state" },
+    ]}
+    data={congressPeople}
+    showPagination
+    defaultRowsPerPage={10}
+  />
+</Excerpt>
+
+```jsx
+<Table
+  columns={columns}
+  data={rows}
+  showPagination
+  defaultRowsPerPage={10}
+  pageSizeOptions={[10, 25, 50, 100]}
+/>
+```
+
+### External pagination
+
+You can also fully control pagination from the parent (e.g., server-side paging) while keeping the same UI. Provide the controlled props and callbacks below. When any controlled pagination prop is provided, the table does not slice your `data` and instead assumes `data` already contains the current page.
+
+- page: current page (1-based)
+- size: current page size
+- totalRows: total available row count used for page count and the “Showing … of …” text
+- onSetPage: called with next page (1-based)
+- onSetSize: called with next page size
+
+Aliases are supported for compatibility: `rowsPerPage`, `onPageChange`, `onRowsPerPageChange`.
+
+<Excerpt>
+  {(() => {
+    // Simulated external pagination
+    const React = require("react");
+    const [page, setPage] = React.useState(1);
+    const [rpp, setRpp] = React.useState(4);
+    const total = congressPeople.length;
+    const start = (page - 1) * rpp;
+    const pageData = congressPeople.slice(start, start + rpp);
+    return (
+      <Table
+        columns={[
+          { label: "Name", accessor: "name" },
+          { label: "Party", accessor: "party" },
+          { label: "State", accessor: "region.state" },
+        ]}
+        data={pageData}
+        showPagination
+        page={page}
+        size={rpp}
+        totalRows={total}
+        onSetPage={setPage}
+        onSetSize={(n) => {
+          setPage(1);
+          setRpp(n);
+        }}
+      />
+    );
+  })()}
+</Excerpt>
+
+```jsx
+// Parent controls the table
+const [page, setPage] = useState(1);
+const [rowsPerPage, setRowsPerPage] = useState(10);
+const totalRows = allRows.length; // from your API
+
+// Only pass the current slice to the table
+const start = (page - 1) * rowsPerPage;
+const currentData = allRows.slice(start, start + rowsPerPage);
+
+<Table
+  columns={columns}
+  data={currentData}
+  showPagination
+  page={page}
+  size={rowsPerPage}
+  totalRows={totalRows}
+  onSetPage={setPage}
+  onSetSize={(n) => { setPage(1); setRowsPerPage(n); }}
+/>;
+```
+
+If you don’t supply these controlled props, the table falls back to its internal pagination state, preserving backwards compatibility.

package/package.json

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