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

package/dist/table/index.js

@@ -122,9 +122,12 @@ var Table = exports.Table = function Table(_ref4) {
     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,
@@ -151,10 +154,10 @@ var Table = exports.Table = function Table(_ref4) {
 
   // Determine controlled vs uncontrolled values
   var isPageControlled = typeof page === "number" && page > 0;
-  var isPageSizeControlled = typeof rowsPerPage === "number" && rowsPerPage > 0;
-  var useExternalPagination = isPageControlled || isPageSizeControlled || typeof totalRows === "number" || typeof onPageChange === "function" || typeof onRowsPerPageChange === "function";
+  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 ? rowsPerPage : pageSize;
+  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;
@@ -168,8 +171,14 @@ var Table = exports.Table = function Table(_ref4) {
       key: accessor,
       direction: direction
     });
-    if (useExternalPagination && typeof onPageChange === "function") {
-      onPageChange(1);
+    if (useExternalPagination) {
+      if (typeof onSetPage === "function") {
+        onSetPage(1);
+      } else if (typeof onPageChange === "function") {
+        onPageChange(1);
+      } else {
+        setCurrentPage(1);
+      }
     } else {
       setCurrentPage(1);
     }
@@ -252,21 +261,21 @@ var Table = exports.Table = function Table(_ref4) {
   }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_index.Button, {
     onClick: function onClick() {
       var prev = Math.max(effectivePage - 1, 1);
-      if (useExternalPagination && typeof onPageChange === "function") {
-        onPageChange(prev);
-      } else {
-        setCurrentPage(prev);
+      if (useExternalPagination) {
+        if (typeof onSetPage === "function") return onSetPage(prev);
+        if (typeof onPageChange === "function") return onPageChange(prev);
       }
+      setCurrentPage(prev);
     },
     disabled: effectivePage === 1
   }, "Previous"), /*#__PURE__*/_react["default"].createElement(_index.Button, {
     onClick: function onClick() {
       var next = Math.min(effectivePage + 1, totalPages);
-      if (useExternalPagination && typeof onPageChange === "function") {
-        onPageChange(next);
-      } else {
-        setCurrentPage(next);
+      if (useExternalPagination) {
+        if (typeof onSetPage === "function") return onSetPage(next);
+        if (typeof onPageChange === "function") return onPageChange(next);
       }
+      setCurrentPage(next);
     },
     disabled: effectivePage === totalPages,
     style: {
@@ -295,12 +304,12 @@ var Table = exports.Table = function Table(_ref4) {
     }),
     value: effectivePageSize,
     onChange: function onChange(selected) {
-      if (useExternalPagination && typeof onRowsPerPageChange === "function") {
-        onRowsPerPageChange(selected.id);
-      } else {
-        setPageSize(selected.id);
-        setCurrentPage(1);
+      if (useExternalPagination) {
+        if (typeof onSetSize === "function") return onSetSize(selected.id);
+        if (typeof onRowsPerPageChange === "function") return onRowsPerPageChange(selected.id);
       }
+      setPageSize(selected.id);
+      setCurrentPage(1);
     }
   })));
 };
@@ -323,8 +332,11 @@ Table.propTypes = {
   // 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/components/tables.mdx

@@ -491,17 +491,19 @@ The `Table` supports built-in pagination UI. Enable it with `showPagination`.
 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)
-- rowsPerPage: current page size
+- size: current page size
 - totalRows: total available row count used for page count and the “Showing … of …” text
-- onPageChange: called with next page (1-based)
-- onRowsPerPageChange: called with next page size
+- 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(10);
+    const [rpp, setRpp] = React.useState(4);
     const total = congressPeople.length;
     const start = (page - 1) * rpp;
     const pageData = congressPeople.slice(start, start + rpp);
@@ -515,10 +517,10 @@ You can also fully control pagination from the parent (e.g., server-side paging)
         data={pageData}
         showPagination
         page={page}
-        rowsPerPage={rpp}
+        size={rpp}
         totalRows={total}
-        onPageChange={setPage}
-        onRowsPerPageChange={(n) => {
+        onSetPage={setPage}
+        onSetSize={(n) => {
           setPage(1);
           setRpp(n);
         }}
@@ -542,10 +544,10 @@ const currentData = allRows.slice(start, start + rowsPerPage);
   data={currentData}
   showPagination
   page={page}
-  rowsPerPage={rowsPerPage}
+  size={rowsPerPage}
   totalRows={totalRows}
-  onPageChange={setPage}
-  onRowsPerPageChange={(n) => { setPage(1); setRowsPerPage(n); }}
+  onSetPage={setPage}
+  onSetSize={(n) => { setPage(1); setRowsPerPage(n); }}
 />;
 ```
 

package/package.json

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