@dreamtree-org/twreact-ui 2.0.1 → 2.0.3

package/README.md

@@ -385,6 +385,7 @@ actions, and expandable row details.
 - `onSave`: ({ updatedRows, newRows, allData, tableData }) => void | Promise<allData | { data: allData } | void>
 - `onEdit`: ({ rowKey, colKey, newValue, row, action, isNew }) => void
 - `showSerial`: boolean (default: true)
+- `paginationPosition`: 'top' | 'bottom' | 'both' (default: 'both') — which pager renders with `pagination`: the toolbar's compact pager, the footer, or both. `'bottom'` keeps the toolbar (search, reload, page size) without the second pager
 - `showToolbar`: boolean (default: true) — `false` hides the toolbar (reload, page size, result count, pager header) and the column picker; interactive save controls still render
 - `showColumnPicker`: boolean (default: true) — hide just the column-picker button and its column
 - `wrapCells`: boolean (default: false) — let every cell wrap; a column's own `wrap` wins
@@ -885,6 +886,8 @@ fetchApi('getUser', 7);
 fetchApiWith('updateUser', [7, { name: 'Ada' }]);
 ```
 
+- `onUnauthorized(error, { apiKey, url, method })` runs once per failing request that `isUnauthorized(error)` matches (default: HTTP 401), before the promise rejects; the promise still rejects. Use it to clear the session and redirect to sign-in — see the "redirect only once" recipe in the doc.
+
 See [doc/useApi.md](doc/useApi.md).
 
 #### useHaptics

package/ai-skills/dreamtree-ui.md

@@ -142,7 +142,7 @@ The library exports four kinds of things from `@dreamtree-org/twreact-ui`:
 | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
 | `useTheme`      | Read/write the current theme (`light | dark`); pairs with `<ThemeProvider>`. Throws if used outside the provider.                              |
 | `ThemeProvider` | Provider that persists theme to `localStorage` (`dreamtree-theme`) and toggles `data-theme` and the `.dark` class on `<html>`.                                       |
-| `useApi`        | Thin axios wrapper. Returns `{data, error, loading, lastRequest, fetchData, fetchApi, fetchApiWith}`. Accepts `BASE_URL`, `DEFAULT_HEADERS`, `apiMap`. |
+| `useApi`        | Thin axios wrapper. Returns `{data, error, loading, lastRequest, fetchData, fetchApi, fetchApiWith}`. Accepts `BASE_URL`, `DEFAULT_HEADERS`, `apiMap`, `onUnauthorized(error, { apiKey, url, method })`, `isUnauthorized(error)` (default: 401). |
 | `useHaptics`    | Opt-in `navigator.vibrate` wrapper. Returns `{trigger(pattern), supported, reducedMotion}`; patterns `selection` / `success` / `warning` / `error`. No-op on iOS Safari, the server and under reduced motion. |
 | `useMixins`     | Bridge between component state, Redux store, and an in-memory cache. Power-user hook — prefer local React state for new code.                  |
 
@@ -385,6 +385,12 @@ fetchApiWith('updateUser', [7, { name: 'A' }]); // apiMap.updateUser(7, {...})
 `fetchApi(key, data)` always passes the map entry exactly one argument; use
 `fetchApiWith(key, [a, b])` for multi-argument entries.
 
+For session expiry pass `onUnauthorized: (error, { apiKey, url, method }) => …`.
+It runs once per request that fails with a 401 (override with `isUnauthorized`),
+before the promise rejects; the promise still rejects. Several requests can fail
+together, so guard the redirect with a module-level `redirecting` flag and skip
+`apiKey === 'login'`. Don't hand-roll an axios interceptor for this.
+
 Treat `useApi` as a thin axios wrapper, not a caching/dedup layer. For
 cache, the consumer brings their own (React Query, SWR, etc.).
 

package/dist/ai-schema.json

@@ -3455,6 +3455,16 @@
         "required": false,
         "default": "false"
       },
+      "paginationPosition": {
+        "type": "enum",
+        "required": false,
+        "values": [
+          "top",
+          "bottom",
+          "both"
+        ],
+        "default": "'bottom'"
+      },
       "pageSize": {
         "type": "number",
         "required": false,

package/dist/components/core/Table/Table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/components/core/Table/Table.jsx"],"names":[],"mappings":";AAgDA,+EA+kDG;kBAtnDI,OAAO"}
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../src/components/core/Table/Table.jsx"],"names":[],"mappings":";AAgDA,+EA0lDG;kBAjoDI,OAAO"}

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

@@ -18,7 +18,7 @@ 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", "actionMenuPresentation", "defaultMobileView", "mobileFiltersPresentation", "swipeActions", "stickyHeader"],
+var _excluded = ["data", "columns", "sortable", "filterable", "selectable", "pagination", "paginationPosition", "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", "actionMenuPresentation", "defaultMobileView", "mobileFiltersPresentation", "swipeActions", "stickyHeader"],
   _excluded2 = ["_key", "_isNew"];
 var DEFAULT_DATA = [];
 var DEFAULT_COLUMNS = [];
@@ -43,6 +43,8 @@ var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
     selectable = _ref$selectable === void 0 ? false : _ref$selectable,
     _ref$pagination = _ref.pagination,
     pagination = _ref$pagination === void 0 ? false : _ref$pagination,
+    _ref$paginationPositi = _ref.paginationPosition,
+    paginationPosition = _ref$paginationPositi === void 0 ? "both" : _ref$paginationPositi,
     _ref$pageSize = _ref.pageSize,
     pageSize = _ref$pageSize === void 0 ? 25 : _ref$pageSize,
     onSort = _ref.onSort,
@@ -1179,6 +1181,12 @@ var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
     openSwipe: openSwipe,
     setOpenSwipe: setOpenSwipe
   };
+  // Which pager(s) render when `pagination` is on: the toolbar's compact
+  // PaginationHeader ("top"), the PaginationFooter ("bottom"), or both
+  // (default). Unknown values fall back to "both" (#135).
+  var pagerPosition = paginationPosition === "top" || paginationPosition === "bottom" ? paginationPosition : "both";
+  var showHeaderPager = pagination && pagerPosition !== "bottom";
+  var showFooterPager = pagination && pagerPosition !== "top";
   var showToolbarBar = showToolbar || interactive && (isDirty || !!renderAddRowButton || !!renderExternalAddRow);
   var renderAddRowClickableRow = useCallback(function () {
     return jsx("tr", {
@@ -1295,7 +1303,7 @@ var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
         }), showToolbar && jsxs("div", {
           className: "text-sm whitespace-nowrap",
           children: [resultRange.start, " - ", resultRange.end, " of ", resultRange.total, " ", "results"]
-        }), showToolbar && pagination && jsx(PaginationHeader, {
+        }), showToolbar && showHeaderPager && jsx(PaginationHeader, {
           currentPage: pageIndex,
           totalPages: totalPages,
           onPageChange: handlePageChange,
@@ -1576,7 +1584,7 @@ var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
     }), TfootComponent && typeof TfootComponent === "function" ? jsx(TfootComponent, {
       columns: columnsState,
       data: filteredData
-    }) : TfootComponent, pagination && jsx(PaginationFooter, {
+    }) : TfootComponent, showFooterPager && jsx(PaginationFooter, {
       currentPage: pageIndex,
       totalPages: totalPages,
       onPageChange: handlePageChange,

package/dist/esm/hooks/useApi.js

@@ -3,6 +3,10 @@ import { slicedToArray as _slicedToArray, asyncToGenerator as _asyncToGenerator,
 import { useState } from 'react';
 import axios from 'axios';
 
+var defaultIsUnauthorized = function defaultIsUnauthorized(error) {
+  var _error$response;
+  return (error === null || error === void 0 || (_error$response = error.response) === null || _error$response === void 0 ? void 0 : _error$response.status) === 401;
+};
 var useApi = function useApi() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var _props$BASE_URL = props.BASE_URL,
@@ -37,7 +41,10 @@ var useApi = function useApi() {
           headers: headers
         });
       }
-    } : _props$sendRequest;
+    } : _props$sendRequest,
+    onUnauthorized = props.onUnauthorized,
+    _props$isUnauthorized = props.isUnauthorized,
+    isUnauthorized = _props$isUnauthorized === void 0 ? defaultIsUnauthorized : _props$isUnauthorized;
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     data = _useState2[0],
@@ -54,20 +61,25 @@ var useApi = function useApi() {
     _useState8 = _slicedToArray(_useState7, 2),
     lastRequest = _useState8[0],
     setLastRequest = _useState8[1];
-  var fetchData = /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(url, method, data, headers) {
-      var options,
-        _options$needLoading,
-        needLoading,
-        requestInstance,
-        response,
-        _error,
-        _args = arguments,
-        _t;
+  // Runs `onUnauthorized` for a failed request. Never throws: a failing
+  // predicate or handler must not replace the request's own error.
+  var notifyUnauthorized = function notifyUnauthorized(error, request) {
+    if (!onUnauthorized) return;
+    try {
+      if (isUnauthorized(error)) onUnauthorized(error, request);
+    } catch (handlerError) {
+      // eslint-disable-next-line no-console
+      console.error('useApi: onUnauthorized / isUnauthorized threw', handlerError);
+    }
+  };
+  // Single send path for fetchData and callApi, so `onUnauthorized` fires
+  // exactly once per failing request and sees the `apiKey` when there is one.
+  var request = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(url, method, data, headers, options, apiKey) {
+      var _options$needLoading, needLoading, requestInstance, response, _error, _t;
       return _regenerator().w(function (_context) {
         while (1) switch (_context.p = _context.n) {
           case 0:
-            options = _args.length > 4 && _args[4] !== undefined ? _args[4] : {};
             _options$needLoading = options.needLoading, needLoading = _options$needLoading === void 0 ? true : _options$needLoading;
             requestInstance = createRequestInstance(BASE_URL, DEFAULT_HEADERS);
             if (needLoading) setLoading(true);
@@ -83,6 +95,11 @@ var useApi = function useApi() {
             _t = _context.v;
             _error = _t;
             setError(_error);
+            notifyUnauthorized(_error, {
+              apiKey: apiKey,
+              url: url,
+              method: String(method).toUpperCase()
+            });
             throw _error;
           case 4:
             _context.p = 4;
@@ -93,10 +110,14 @@ var useApi = function useApi() {
         }
       }, _callee, null, [[1, 3, 4, 5]]);
     }));
-    return function fetchData(_x, _x2, _x3, _x4) {
+    return function request(_x, _x2, _x3, _x4, _x5, _x6) {
       return _ref.apply(this, arguments);
     };
   }();
+  var fetchData = function fetchData(url, method, data, headers) {
+    var options = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
+    return request(url, method, data, headers, options);
+  };
   var callApi = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(apiKey, args, needLoading) {
       var apiResolve, _apiResolve, url, method, headers, payload;
@@ -113,9 +134,9 @@ var useApi = function useApi() {
             _apiResolve = apiResolve.apply(void 0, _toConsumableArray(args)), url = _apiResolve.url, method = _apiResolve.method, headers = _apiResolve.headers, payload = _apiResolve.data;
             _context2.p = 2;
             _context2.n = 3;
-            return fetchData(url, method, payload, headers, {
+            return request(url, method, payload, headers, {
               needLoading: needLoading
-            });
+            }, apiKey);
           case 3:
             return _context2.a(2, _context2.v);
           case 4:
@@ -127,7 +148,7 @@ var useApi = function useApi() {
         }
       }, _callee2, null, [[2,, 4, 5]]);
     }));
-    return function callApi(_x5, _x6, _x7) {
+    return function callApi(_x7, _x8, _x9) {
       return _ref2.apply(this, arguments);
     };
   }();

package/dist/hooks/useApi.d.ts

@@ -1,10 +1,27 @@
 import { AxiosInstance, AxiosResponse, Method } from "axios";
-interface UseApiProps {
+/** The request that failed, passed to `onUnauthorized`. */
+export interface UseApiUnauthorizedRequest {
+    /** `apiMap` key for `fetchApi` / `fetchApiWith`; `undefined` for `fetchData`. */
+    apiKey?: string;
+    url: string;
+    /** Upper-cased HTTP method, e.g. `"GET"`. */
+    method: string;
+}
+export interface UseApiProps {
     BASE_URL?: string | null;
     DEFAULT_HEADERS?: Record<string, string>;
     apiMap?: Record<string, (...args: any[]) => ApiConfig>;
     createRequestInstance?: (baseURL?: string | null, defaultHeaders?: Record<string, string>) => AxiosInstance;
     sendRequest?: (requestInstance: AxiosInstance, method: string, url: string, data?: any, headers?: Record<string, string>) => Promise<AxiosResponse>;
+    /**
+     * Called once per failing request that `isUnauthorized` matches (default:
+     * HTTP 401), before the returned promise rejects. The promise still
+     * rejects with the original error. Errors thrown here are caught and
+     * logged so they never replace the request's error.
+     */
+    onUnauthorized?: (error: any, request: UseApiUnauthorizedRequest) => void;
+    /** Decides which errors count as unauthorized. Default: `error?.response?.status === 401`. */
+    isUnauthorized?: (error: any) => boolean;
 }
 interface ApiConfig {
     url: string;

package/dist/hooks/useApi.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useApi.d.ts","sourceRoot":"","sources":["../../src/hooks/useApi.ts"],"names":[],"mappings":"AACA,OAAc,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEpE,UAAU,WAAW;IACjB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzC,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,SAAS,CAAC,CAAC;IACvD,qBAAqB,CAAC,EAAE,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,EAAE,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,aAAa,CAAC;IAC5G,WAAW,CAAC,EAAE,CACV,eAAe,EAAE,aAAa,EAC9B,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,MAAM,EACX,IAAI,CAAC,EAAE,GAAG,EACV,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAC/B,OAAO,CAAC,aAAa,CAAC,CAAC;CAC/B;AAED,UAAU,SAAS;IACf,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACjC,IAAI,CAAC,EAAE,GAAG,CAAC;CACd;AAED,UAAU,YAAY;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,UAAU,YAAY,CAAC,CAAC,GAAG,GAAG;IAC1B,IAAI,EAAE,CAAC,GAAG,IAAI,CAAC;IACf,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,SAAS,EAAE,CACP,GAAG,EAAE,MAAM,EACX,MAAM,EAAE,MAAM,EACd,IAAI,CAAC,EAAE,GAAG,EACV,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAChC,OAAO,CAAC,EAAE,YAAY,KACrB,OAAO,CAAC,CAAC,CAAC,CAAC;IAChB,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,GAAG,EAAE,WAAW,CAAC,EAAE,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC;IAC5E,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,GAAG,EAAE,EAAE,OAAO,CAAC,EAAE,YAAY,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC;CACtF;AAED,eAAO,MAAM,MAAM,GAAI,CAAC,GAAG,GAAG,EAAE,QAAO,WAAgB,KAAG,YAAY,CAAC,CAAC,CAiHvE,CAAC"}
+{"version":3,"file":"useApi.d.ts","sourceRoot":"","sources":["../../src/hooks/useApi.ts"],"names":[],"mappings":"AACA,OAAc,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEpE,2DAA2D;AAC3D,MAAM,WAAW,yBAAyB;IACtC,iFAAiF;IACjF,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,EAAE,MAAM,CAAC;IACZ,6CAA6C;IAC7C,MAAM,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,WAAW;IACxB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzC,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,SAAS,CAAC,CAAC;IACvD,qBAAqB,CAAC,EAAE,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,EAAE,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,aAAa,CAAC;IAC5G,WAAW,CAAC,EAAE,CACV,eAAe,EAAE,aAAa,EAC9B,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,MAAM,EACX,IAAI,CAAC,EAAE,GAAG,EACV,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAC/B,OAAO,CAAC,aAAa,CAAC,CAAC;IAC5B;;;;;OAKG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,OAAO,EAAE,yBAAyB,KAAK,IAAI,CAAC;IAC1E,8FAA8F;IAC9F,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,OAAO,CAAC;CAC5C;AAID,UAAU,SAAS;IACf,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACjC,IAAI,CAAC,EAAE,GAAG,CAAC;CACd;AAED,UAAU,YAAY;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,UAAU,YAAY,CAAC,CAAC,GAAG,GAAG;IAC1B,IAAI,EAAE,CAAC,GAAG,IAAI,CAAC;IACf,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,SAAS,EAAE,CACP,GAAG,EAAE,MAAM,EACX,MAAM,EAAE,MAAM,EACd,IAAI,CAAC,EAAE,GAAG,EACV,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAChC,OAAO,CAAC,EAAE,YAAY,KACrB,OAAO,CAAC,CAAC,CAAC,CAAC;IAChB,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,GAAG,EAAE,WAAW,CAAC,EAAE,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC;IAC5E,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,GAAG,EAAE,EAAE,OAAO,CAAC,EAAE,YAAY,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC;CACtF;AAED,eAAO,MAAM,MAAM,GAAI,CAAC,GAAG,GAAG,EAAE,QAAO,WAAgB,KAAG,YAAY,CAAC,CAAC,CA2IvE,CAAC"}

package/dist/index.esm.js

@@ -10646,7 +10646,7 @@ function FieldInput(_ref) {
   });
 }
 
-var _excluded$U = ["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", "actionMenuPresentation", "defaultMobileView", "mobileFiltersPresentation", "swipeActions", "stickyHeader"],
+var _excluded$U = ["data", "columns", "sortable", "filterable", "selectable", "pagination", "paginationPosition", "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", "actionMenuPresentation", "defaultMobileView", "mobileFiltersPresentation", "swipeActions", "stickyHeader"],
   _excluded2$8 = ["_key", "_isNew"];
 function ownKeys$_(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$_(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$_(Object(t), true).forEach(function (r) { _defineProperty$4(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$_(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -10673,6 +10673,8 @@ var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
     selectable = _ref$selectable === void 0 ? false : _ref$selectable,
     _ref$pagination = _ref.pagination,
     pagination = _ref$pagination === void 0 ? false : _ref$pagination,
+    _ref$paginationPositi = _ref.paginationPosition,
+    paginationPosition = _ref$paginationPositi === void 0 ? "both" : _ref$paginationPositi,
     _ref$pageSize = _ref.pageSize,
     pageSize = _ref$pageSize === void 0 ? 25 : _ref$pageSize,
     onSort = _ref.onSort,
@@ -11810,6 +11812,12 @@ var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
     openSwipe: openSwipe,
     setOpenSwipe: setOpenSwipe
   };
+  // Which pager(s) render when `pagination` is on: the toolbar's compact
+  // PaginationHeader ("top"), the PaginationFooter ("bottom"), or both
+  // (default). Unknown values fall back to "both" (#135).
+  var pagerPosition = paginationPosition === "top" || paginationPosition === "bottom" ? paginationPosition : "both";
+  var showHeaderPager = pagination && pagerPosition !== "bottom";
+  var showFooterPager = pagination && pagerPosition !== "top";
   var showToolbarBar = showToolbar || interactive && (isDirty || !!renderAddRowButton || !!renderExternalAddRow);
   var renderAddRowClickableRow = useCallback(function () {
     return jsx("tr", {
@@ -11926,7 +11934,7 @@ var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
         }), showToolbar && jsxs("div", {
           className: "text-sm whitespace-nowrap",
           children: [resultRange.start, " - ", resultRange.end, " of ", resultRange.total, " ", "results"]
-        }), showToolbar && pagination && jsx(PaginationHeader, {
+        }), showToolbar && showHeaderPager && jsx(PaginationHeader, {
           currentPage: pageIndex,
           totalPages: totalPages,
           onPageChange: handlePageChange,
@@ -12207,7 +12215,7 @@ var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
     }), TfootComponent && typeof TfootComponent === "function" ? jsx(TfootComponent, {
       columns: columnsState,
       data: filteredData
-    }) : TfootComponent, pagination && jsx(PaginationFooter, {
+    }) : TfootComponent, showFooterPager && jsx(PaginationFooter, {
       currentPage: pageIndex,
       totalPages: totalPages,
       onPageChange: handlePageChange,
@@ -38858,6 +38866,10 @@ const {
   mergeConfig
 } = axios;
 
+var defaultIsUnauthorized = function defaultIsUnauthorized(error) {
+  var _error$response;
+  return (error === null || error === void 0 || (_error$response = error.response) === null || _error$response === void 0 ? void 0 : _error$response.status) === 401;
+};
 var useApi = function useApi() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var _props$BASE_URL = props.BASE_URL,
@@ -38892,7 +38904,10 @@ var useApi = function useApi() {
           headers: headers
         });
       }
-    } : _props$sendRequest;
+    } : _props$sendRequest,
+    onUnauthorized = props.onUnauthorized,
+    _props$isUnauthorized = props.isUnauthorized,
+    isUnauthorized = _props$isUnauthorized === void 0 ? defaultIsUnauthorized : _props$isUnauthorized;
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     data = _useState2[0],
@@ -38909,20 +38924,25 @@ var useApi = function useApi() {
     _useState8 = _slicedToArray(_useState7, 2),
     lastRequest = _useState8[0],
     setLastRequest = _useState8[1];
-  var fetchData = /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(url, method, data, headers) {
-      var options,
-        _options$needLoading,
-        needLoading,
-        requestInstance,
-        response,
-        _error,
-        _args = arguments,
-        _t;
+  // Runs `onUnauthorized` for a failed request. Never throws: a failing
+  // predicate or handler must not replace the request's own error.
+  var notifyUnauthorized = function notifyUnauthorized(error, request) {
+    if (!onUnauthorized) return;
+    try {
+      if (isUnauthorized(error)) onUnauthorized(error, request);
+    } catch (handlerError) {
+      // eslint-disable-next-line no-console
+      console.error('useApi: onUnauthorized / isUnauthorized threw', handlerError);
+    }
+  };
+  // Single send path for fetchData and callApi, so `onUnauthorized` fires
+  // exactly once per failing request and sees the `apiKey` when there is one.
+  var request = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(url, method, data, headers, options, apiKey) {
+      var _options$needLoading, needLoading, requestInstance, response, _error, _t;
       return _regeneratorRuntime.wrap(function (_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
-            options = _args.length > 4 && _args[4] !== undefined ? _args[4] : {};
             _options$needLoading = options.needLoading, needLoading = _options$needLoading === void 0 ? true : _options$needLoading;
             requestInstance = createRequestInstance(BASE_URL, DEFAULT_HEADERS);
             if (needLoading) setLoading(true);
@@ -38938,6 +38958,11 @@ var useApi = function useApi() {
             _t = _context["catch"](1);
             _error = _t;
             setError(_error);
+            notifyUnauthorized(_error, {
+              apiKey: apiKey,
+              url: url,
+              method: String(method).toUpperCase()
+            });
             throw _error;
           case 4:
             _context.prev = 4;
@@ -38949,10 +38974,14 @@ var useApi = function useApi() {
         }
       }, _callee, null, [[1, 3, 4, 5]]);
     }));
-    return function fetchData(_x, _x2, _x3, _x4) {
+    return function request(_x, _x2, _x3, _x4, _x5, _x6) {
       return _ref.apply(this, arguments);
     };
   }();
+  var fetchData = function fetchData(url, method, data, headers) {
+    var options = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
+    return request(url, method, data, headers, options);
+  };
   var callApi = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(apiKey, args, needLoading) {
       var apiResolve, _apiResolve, url, method, headers, payload;
@@ -38969,9 +38998,9 @@ var useApi = function useApi() {
             _apiResolve = apiResolve.apply(void 0, _toConsumableArray$1(args)), url = _apiResolve.url, method = _apiResolve.method, headers = _apiResolve.headers, payload = _apiResolve.data;
             _context2.prev = 2;
             _context2.next = 3;
-            return fetchData(url, method, payload, headers, {
+            return request(url, method, payload, headers, {
               needLoading: needLoading
-            });
+            }, apiKey);
           case 3:
             return _context2.abrupt("return", _context2.sent);
           case 4:
@@ -38984,7 +39013,7 @@ var useApi = function useApi() {
         }
       }, _callee2, null, [[2,, 4, 5]]);
     }));
-    return function callApi(_x5, _x6, _x7) {
+    return function callApi(_x7, _x8, _x9) {
       return _ref2.apply(this, arguments);
     };
   }();

package/dist/index.js

@@ -10666,7 +10666,7 @@ function FieldInput(_ref) {
   });
 }
 
-var _excluded$U = ["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", "actionMenuPresentation", "defaultMobileView", "mobileFiltersPresentation", "swipeActions", "stickyHeader"],
+var _excluded$U = ["data", "columns", "sortable", "filterable", "selectable", "pagination", "paginationPosition", "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", "actionMenuPresentation", "defaultMobileView", "mobileFiltersPresentation", "swipeActions", "stickyHeader"],
   _excluded2$8 = ["_key", "_isNew"];
 function ownKeys$_(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$_(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$_(Object(t), true).forEach(function (r) { _defineProperty$4(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$_(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -10693,6 +10693,8 @@ var Table = /*#__PURE__*/React.forwardRef(function Table(_ref, ref) {
     selectable = _ref$selectable === void 0 ? false : _ref$selectable,
     _ref$pagination = _ref.pagination,
     pagination = _ref$pagination === void 0 ? false : _ref$pagination,
+    _ref$paginationPositi = _ref.paginationPosition,
+    paginationPosition = _ref$paginationPositi === void 0 ? "both" : _ref$paginationPositi,
     _ref$pageSize = _ref.pageSize,
     pageSize = _ref$pageSize === void 0 ? 25 : _ref$pageSize,
     onSort = _ref.onSort,
@@ -11830,6 +11832,12 @@ var Table = /*#__PURE__*/React.forwardRef(function Table(_ref, ref) {
     openSwipe: openSwipe,
     setOpenSwipe: setOpenSwipe
   };
+  // Which pager(s) render when `pagination` is on: the toolbar's compact
+  // PaginationHeader ("top"), the PaginationFooter ("bottom"), or both
+  // (default). Unknown values fall back to "both" (#135).
+  var pagerPosition = paginationPosition === "top" || paginationPosition === "bottom" ? paginationPosition : "both";
+  var showHeaderPager = pagination && pagerPosition !== "bottom";
+  var showFooterPager = pagination && pagerPosition !== "top";
   var showToolbarBar = showToolbar || interactive && (isDirty || !!renderAddRowButton || !!renderExternalAddRow);
   var renderAddRowClickableRow = React.useCallback(function () {
     return jsxRuntime.jsx("tr", {
@@ -11946,7 +11954,7 @@ var Table = /*#__PURE__*/React.forwardRef(function Table(_ref, ref) {
         }), showToolbar && jsxRuntime.jsxs("div", {
           className: "text-sm whitespace-nowrap",
           children: [resultRange.start, " - ", resultRange.end, " of ", resultRange.total, " ", "results"]
-        }), showToolbar && pagination && jsxRuntime.jsx(PaginationHeader, {
+        }), showToolbar && showHeaderPager && jsxRuntime.jsx(PaginationHeader, {
           currentPage: pageIndex,
           totalPages: totalPages,
           onPageChange: handlePageChange,
@@ -12227,7 +12235,7 @@ var Table = /*#__PURE__*/React.forwardRef(function Table(_ref, ref) {
     }), TfootComponent && typeof TfootComponent === "function" ? jsxRuntime.jsx(TfootComponent, {
       columns: columnsState,
       data: filteredData
-    }) : TfootComponent, pagination && jsxRuntime.jsx(PaginationFooter, {
+    }) : TfootComponent, showFooterPager && jsxRuntime.jsx(PaginationFooter, {
       currentPage: pageIndex,
       totalPages: totalPages,
       onPageChange: handlePageChange,
@@ -38878,6 +38886,10 @@ const {
   mergeConfig
 } = axios;
 
+var defaultIsUnauthorized = function defaultIsUnauthorized(error) {
+  var _error$response;
+  return (error === null || error === void 0 || (_error$response = error.response) === null || _error$response === void 0 ? void 0 : _error$response.status) === 401;
+};
 var useApi = function useApi() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var _props$BASE_URL = props.BASE_URL,
@@ -38912,7 +38924,10 @@ var useApi = function useApi() {
           headers: headers
         });
       }
-    } : _props$sendRequest;
+    } : _props$sendRequest,
+    onUnauthorized = props.onUnauthorized,
+    _props$isUnauthorized = props.isUnauthorized,
+    isUnauthorized = _props$isUnauthorized === void 0 ? defaultIsUnauthorized : _props$isUnauthorized;
   var _useState = React.useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     data = _useState2[0],
@@ -38929,20 +38944,25 @@ var useApi = function useApi() {
     _useState8 = _slicedToArray(_useState7, 2),
     lastRequest = _useState8[0],
     setLastRequest = _useState8[1];
-  var fetchData = /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(url, method, data, headers) {
-      var options,
-        _options$needLoading,
-        needLoading,
-        requestInstance,
-        response,
-        _error,
-        _args = arguments,
-        _t;
+  // Runs `onUnauthorized` for a failed request. Never throws: a failing
+  // predicate or handler must not replace the request's own error.
+  var notifyUnauthorized = function notifyUnauthorized(error, request) {
+    if (!onUnauthorized) return;
+    try {
+      if (isUnauthorized(error)) onUnauthorized(error, request);
+    } catch (handlerError) {
+      // eslint-disable-next-line no-console
+      console.error('useApi: onUnauthorized / isUnauthorized threw', handlerError);
+    }
+  };
+  // Single send path for fetchData and callApi, so `onUnauthorized` fires
+  // exactly once per failing request and sees the `apiKey` when there is one.
+  var request = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(url, method, data, headers, options, apiKey) {
+      var _options$needLoading, needLoading, requestInstance, response, _error, _t;
       return _regeneratorRuntime.wrap(function (_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
-            options = _args.length > 4 && _args[4] !== undefined ? _args[4] : {};
             _options$needLoading = options.needLoading, needLoading = _options$needLoading === void 0 ? true : _options$needLoading;
             requestInstance = createRequestInstance(BASE_URL, DEFAULT_HEADERS);
             if (needLoading) setLoading(true);
@@ -38958,6 +38978,11 @@ var useApi = function useApi() {
             _t = _context["catch"](1);
             _error = _t;
             setError(_error);
+            notifyUnauthorized(_error, {
+              apiKey: apiKey,
+              url: url,
+              method: String(method).toUpperCase()
+            });
             throw _error;
           case 4:
             _context.prev = 4;
@@ -38969,10 +38994,14 @@ var useApi = function useApi() {
         }
       }, _callee, null, [[1, 3, 4, 5]]);
     }));
-    return function fetchData(_x, _x2, _x3, _x4) {
+    return function request(_x, _x2, _x3, _x4, _x5, _x6) {
       return _ref.apply(this, arguments);
     };
   }();
+  var fetchData = function fetchData(url, method, data, headers) {
+    var options = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
+    return request(url, method, data, headers, options);
+  };
   var callApi = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(apiKey, args, needLoading) {
       var apiResolve, _apiResolve, url, method, headers, payload;
@@ -38989,9 +39018,9 @@ var useApi = function useApi() {
             _apiResolve = apiResolve.apply(void 0, _toConsumableArray$1(args)), url = _apiResolve.url, method = _apiResolve.method, headers = _apiResolve.headers, payload = _apiResolve.data;
             _context2.prev = 2;
             _context2.next = 3;
-            return fetchData(url, method, payload, headers, {
+            return request(url, method, payload, headers, {
               needLoading: needLoading
-            });
+            }, apiKey);
           case 3:
             return _context2.abrupt("return", _context2.sent);
           case 4:
@@ -39004,7 +39033,7 @@ var useApi = function useApi() {
         }
       }, _callee2, null, [[2,, 4, 5]]);
     }));
-    return function callApi(_x5, _x6, _x7) {
+    return function callApi(_x7, _x8, _x9) {
       return _ref2.apply(this, arguments);
     };
   }();

package/dist/types/index.d.ts

@@ -366,6 +366,7 @@ export interface TableProps<T = any> extends BaseComponentProps {
     filterable?: boolean;
     selectable?: boolean;
     pagination?: boolean;
+    paginationPosition?: 'top' | 'bottom' | 'both';
     pageSize?: number;
     onSort?: (key: string, direction: 'asc' | 'desc') => void;
     onFilter?: (filters: Record<string, any>) => void;