najm-kit 2.2.8 → 2.4.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 2.3.0
+
+- `NTablePagination` renders numbered page buttons instead of `Page X of Y`. The window shows the first and last page, the current page, and one page either side, collapsing the rest into at most two gaps. The slot count is constant for any result longer than the window, so the bar does not change width as the reader pages through it, and a gap never stands in for a single page — that slot goes to the page instead.
+- Added `paginationVariant`, defaulting to `"numbered"`. Pass `"compact"` to keep the previous position text with first/previous/next/last controls. **This changes the default appearance of every paginated `NTable`.**
+- The numbered variant drops the first/last double chevrons, because page 1 and page N are now single-click targets of their own. Previous and next remain. The compact variant is unchanged.
+- Numbered pages fall back to compact on their own when the page count is not trustworthy — that is, under `manualPagination` with no `pageCount` supplied, where TanStack infers a count from the rows it happens to hold rather than from a result total. Numbering that would invite clicks on pages that may not exist is not rendered.
+- Below the `sm` breakpoint the numbers give way to the position text; seven page buttons plus the rows-per-page select do not fit a phone.
+- Added `paginationLabels` so the bar can be localized: `rowsPerPage`, `pagination`, `goToPage`, `currentPage`, `firstPage`, `previousPage`, `nextPage`, `lastPage`, `pageOf`, and `rowsSelected`. All optional, all falling back to the previous English strings.
+- Pagination chevrons now mirror under `dir="rtl"`. They previously pointed against the reading direction in right-to-left layouts.
+- The page controls are wrapped in a labelled `nav`, and the current page carries `aria-current="page"`.
+- Exported `buildPageItems` and `NTablePageItem` for consumers that need the same windowing outside the table.
+
 ## 2.2.1
 
 - Fixed a regression in 2.2.0: the dynamic page size reported under `manualPagination` could oscillate. Card row height is measured from rendered cards, so it grows as images decode; feeding that back into the page size refetched, re-rendered, re-measured, and refetched again. A list visibly settled from one page size to another with the loading skeleton flashing twice. The report is now allowed once per container geometry, which does not depend on the rows inside it, so it terminates. A resize still re-arms it, and the debounce still waits for the measurement to settle before reporting.

package/dist/index.d.ts

@@ -2771,6 +2771,42 @@ type StepSubmitResult = {
 };
 declare function useFormSubmission({ steps, schema, defaultValues, onSubmit, currentStep, isLastStep, handleNext, markStepCompleted, reset, }: UseFormSubmissionOptions): FormSubmissionState;
 
+/**
+ * How the page controls present position within the result.
+ *
+ * `numbered` renders a windowed list of page buttons. `compact` renders the
+ * `Page X of Y` text with first/previous/next/last controls.
+ *
+ * `numbered` needs a trustworthy page count. Under `manualPagination` that
+ * means the application must pass a `pageCount` derived from a real result
+ * total; without one, the bar falls back to `compact` on its own rather than
+ * inviting clicks on pages that may not exist.
+ */
+type NTablePaginationVariant = "numbered" | "compact";
+/**
+ * Accessible names and visible copy for the page controls.
+ *
+ * Every field is optional and falls back to English. Supply them to localize —
+ * the numbered variant is mostly digits, but its controls still need names.
+ */
+interface NTablePaginationLabels {
+    /** Labels the rows-per-page select. Defaults to `"Rows/page"`. */
+    rowsPerPage?: string;
+    /** Accessible name of the whole page control group. Defaults to `"Pagination"`. */
+    pagination?: string;
+    /** Accessible name for one page button, given a 1-based page. */
+    goToPage?: (page: number) => string;
+    /** Accessible name of the current page button, given a 1-based page. */
+    currentPage?: (page: number) => string;
+    firstPage?: string;
+    previousPage?: string;
+    nextPage?: string;
+    lastPage?: string;
+    /** The `compact` variant's position text, given 1-based values. */
+    pageOf?: (page: number, pageCount: number) => string;
+    /** The selection summary, given selected and total row counts. */
+    rowsSelected?: (selected: number, total: number) => string;
+}
 interface NTableLoadMorePagination {
     /** Render the supplied rows as one card list with an explicit continuation control. */
     mode: "load-more";
@@ -2933,6 +2969,8 @@ interface TableState {
     availableModes: readonly ViewMode[];
     setViewMode: (mode: ViewMode) => void;
     hasSyncedFromProps: boolean;
+    paginationVariant: NTablePaginationVariant;
+    paginationLabels: NTablePaginationLabels;
     manualPagination: boolean;
     pageCount: number | undefined;
     rowCount: number | undefined;
@@ -3071,6 +3109,8 @@ declare const createTableStore: (seed?: Partial<TableState>) => {
         availableModes: () => readonly ViewMode[];
         setViewMode: () => (mode: ViewMode) => void;
         hasSyncedFromProps: () => boolean;
+        paginationVariant: () => NTablePaginationVariant;
+        paginationLabels: () => NTablePaginationLabels;
         manualPagination: () => boolean;
         pageCount: () => number;
         rowCount: () => number;
@@ -3262,6 +3302,14 @@ interface NTableProps<T = any, M extends ViewMode = ViewMode> {
     }) => void;
     /** Pagination presentation used whenever NTable is actually rendering cards. */
     cardPagination?: NTableCardPagination;
+    /**
+     * How the page controls present position. Defaults to `"numbered"`, which
+     * falls back to `"compact"` on its own when the page count is not
+     * trustworthy. Pass `"compact"` for the `Page X of Y` text everywhere.
+     */
+    paginationVariant?: NTablePaginationVariant;
+    /** Accessible names and visible copy for the page controls. */
+    paginationLabels?: NTablePaginationLabels;
     rowSelection?: RowSelectionState;
     defaultRowSelection?: RowSelectionState;
     onRowSelectionChange?: (state: RowSelectionState) => void;
@@ -3519,6 +3567,8 @@ declare const TableStoreContext: React$1.Context<{
         availableModes: () => readonly ViewMode[];
         setViewMode: () => (mode: ViewMode) => void;
         hasSyncedFromProps: () => boolean;
+        paginationVariant: () => NTablePaginationVariant;
+        paginationLabels: () => NTablePaginationLabels;
         manualPagination: () => boolean;
         pageCount: () => number;
         rowCount: () => number;
@@ -3652,6 +3702,8 @@ declare function useStoreSync(props: any): {
         availableModes: () => readonly ViewMode[];
         setViewMode: () => (mode: ViewMode) => void;
         hasSyncedFromProps: () => boolean;
+        paginationVariant: () => NTablePaginationVariant;
+        paginationLabels: () => NTablePaginationLabels;
         manualPagination: () => boolean;
         pageCount: () => number;
         rowCount: () => number;

package/dist/index.mjs

@@ -12222,6 +12222,8 @@ var createTableStore = (seed) => {
       hasMeasuredLayout: false,
       skeletonRowCount: 6,
       maxHeight: null,
+      paginationVariant: "numbered",
+      paginationLabels: {},
       bodyWidth: 0,
       bodyHeight: 0,
       tableHeaderHeight: 48,
@@ -12507,9 +12509,9 @@ function useDynamicPageSize(containerRef, effectiveViewMode) {
     const calculatePageSize = () => {
       const container2 = containerRef.current;
       if (!container2) return;
+      if (error || hasNoData && !isFilteredEmpty && !isLoading) return;
       const bodyEl = container2.querySelector("[data-ntable-body]");
       const tableHeaderEl = container2.querySelector("[data-ntable-table-header]");
-      const loadingHeaderEl = container2.querySelector("[data-ntable-loading-header]");
       const cardsGridEl = Array.from(
         container2.querySelectorAll(
           "[data-ntable-loading-cards-grid], [data-ntable-cards-grid]"
@@ -12525,11 +12527,6 @@ function useDynamicPageSize(containerRef, effectiveViewMode) {
         const gap = Number.parseFloat(rootStyles.rowGap || rootStyles.gap || "0") || 0;
         bodyHeight = rootHeight - headerHeight - paginationHeight - gap * ROOT_SECTION_GAP_COUNT;
       }
-      if (loadingHeaderEl && bodyEl) {
-        const bodyStyles = window.getComputedStyle(bodyEl);
-        const bodyGap = Number.parseFloat(bodyStyles.rowGap || bodyStyles.gap || "0") || 0;
-        bodyHeight = Math.max(0, bodyHeight - loadingHeaderEl.offsetHeight - bodyGap);
-      }
       const tableHeaderHeight = tableHeaderEl?.offsetHeight ?? DEFAULT_TABLE_HEADER_HEIGHT;
       const newPageSize = calculateDynamicPageSize({ bodyHeight, tableHeaderHeight });
       const calculatedMaxHeight = tableHeaderHeight + newPageSize * ROW_HEIGHT;
@@ -12578,7 +12575,7 @@ function useDynamicPageSize(containerRef, effectiveViewMode) {
       "[data-ntable-header], [data-ntable-body], [data-ntable-pagination], [data-ntable-table-header]"
     ).forEach((el) => resizeObserver.observe(el));
     container.querySelectorAll(
-      "[data-ntable-loading-header], [data-ntable-loading-cards-grid], [data-ntable-loading-card], [data-ntable-cards-grid]"
+      "[data-ntable-loading-cards-grid], [data-ntable-loading-card], [data-ntable-cards-grid]"
     ).forEach((el) => resizeObserver.observe(el));
     if (container.parentElement) resizeObserver.observe(container.parentElement);
     return () => resizeObserver.disconnect();
@@ -12612,6 +12609,7 @@ function useTable(effectiveViewModeOverride) {
   const onStateChange = useTableStore.use.onStateChange();
   const getRowId = useTableStore.use.getRowId();
   const manualPagination = useTableStore.use.manualPagination();
+  const hasDataRows = useTableStore.use.hasData();
   const pageCount = useTableStore.use.pageCount();
   const rowCount = useTableStore.use.rowCount();
   const storePagination = useTableStore.use.pagination();
@@ -12725,6 +12723,11 @@ function useTable(effectiveViewModeOverride) {
     tableConfig.getRowCanExpand = userGetRowCanExpand ? (row) => userGetRowCanExpand(row.original) : () => true;
   }
   const table = useReactTable(tableConfig);
+  const hasSeededTableRef = useRef(false);
+  if (!hasSeededTableRef.current) {
+    hasSeededTableRef.current = true;
+    syncWithProps({ table });
+  }
   useLayoutEffect(() => {
     syncWithProps({ table });
   }, [table]);
@@ -12745,12 +12748,17 @@ function useTable(effectiveViewModeOverride) {
     if (!dynamicPageSizeTarget || dynamicPageSizeTarget < 1) return;
     if (dynamicPageSizeTarget === storePagination.pageSize) return;
     const reported = reportedGeometryRef.current;
+    if (reported?.key === geometryKey && reported.target === dynamicPageSizeTarget) return;
     if (reported?.key === geometryKey && reported.count >= MAX_PAGE_SIZE_REPORTS_PER_GEOMETRY) return;
     const commit = () => {
       const current = reportedGeometryRef.current;
-      reportedGeometryRef.current = current?.key === geometryKey ? { key: geometryKey, count: current.count + 1 } : { key: geometryKey, count: 1 };
+      reportedGeometryRef.current = current?.key === geometryKey ? { key: geometryKey, count: current.count + 1, target: dynamicPageSizeTarget } : { key: geometryKey, count: 1, target: dynamicPageSizeTarget };
       setPagination({ pageIndex: storePagination.pageIndex, pageSize: dynamicPageSizeTarget });
     };
+    if (!hasDataRows) {
+      commit();
+      return;
+    }
     if (!reported) {
       commit();
       return;
@@ -12767,6 +12775,7 @@ function useTable(effectiveViewModeOverride) {
     dynamicPageSizeTarget,
     storePagination.pageIndex,
     storePagination.pageSize,
+    hasDataRows,
     setPagination
   ]);
   return { table, finalColumns, sorting, setSorting, columnFilters, setColumnFilters, columnVisibility, setColumnVisibility, globalFilter, setGlobalFilter };
@@ -12960,6 +12969,11 @@ function NTableContent({ effectiveMode }) {
   const onCellEdit = useTableStore.use.onCellEdit();
   useTableStore.use.isLoading();
   const error = useTableStore.use.error();
+  const contentDynamicHeight = useTableStore.use.dynamicHeight();
+  const contentManualPagination = useTableStore.use.manualPagination();
+  const contentCardPagination = useTableStore.use.cardPagination();
+  const contentCalculatedPageSize = useTableStore.use.calculatedPageSize();
+  const contentHasMeasuredLayout = useTableStore.use.hasMeasuredLayout();
   const hasNoData = useTableStore.use.hasNoData();
   const showContent = useTableStore.use.showContent();
   const classNames = useTableStore.use.classNames();
@@ -12981,6 +12995,9 @@ function NTableContent({ effectiveMode }) {
   if (error || hasNoData || !showContent || !table) return null;
   const isTableView = effectiveMode ? effectiveMode === "table" : storeIsTableView;
   if (!isTableView) return null;
+  const allRows = table.getRowModel().rows ?? [];
+  const clampRowsToMeasuredPage = contentDynamicHeight && contentManualPagination && contentCardPagination.mode === "paged" && contentHasMeasuredLayout && contentCalculatedPageSize > 0;
+  const visibleRows = clampRowsToMeasuredPage ? allRows.slice(0, contentCalculatedPageSize) : allRows;
   const getSortIcon = (column) => {
     const dir = column.getIsSorted();
     if (dir === "asc") return /* @__PURE__ */ jsx(ArrowUp, { className: "h-4 w-4" });
@@ -12993,13 +13010,22 @@ function NTableContent({ effectiveMode }) {
       axis: "both",
       "data-bordered": bordered === false ? "false" : bordered ? "true" : void 0,
       className: cn(
-        "min-h-0 flex-1 overflow-hidden rounded-md",
+        "min-h-0 overflow-hidden rounded-md",
+        // Under `dynamicHeight` the page size is the largest row count that
+        // fits, so the rows are always a little shorter than the space they
+        // were measured against — up to one row's worth. Growing into that
+        // remainder leaves the container's bottom edge floating below the last
+        // row. Sizing to content instead ends the border on the last row; the
+        // leftover belongs to the page, not to the table. Without
+        // `dynamicHeight` the row count is the caller's, so the container has
+        // to keep filling its height to stay a scroll viewport.
+        contentDynamicHeight ? "max-h-full shrink" : "flex-1",
         surface.className,
         classNames?.content
       ),
       style: surface.style,
       onContextMenu: handleBackgroundContextMenu,
-      children: /* @__PURE__ */ jsxs(Table, { children: [
+      children: /* @__PURE__ */ jsxs(Table, { className: "table-fixed", children: [
         /* @__PURE__ */ jsx(TableHeader, { "data-ntable-table-header": true, className: cn("bg-card sticky top-0 z-10", headerClassName, bordered === true && "[&_tr]:border-border", classNames?.tableHeader), children: table.getHeaderGroups().map((hg) => /* @__PURE__ */ jsxs(TableRow, { style: rowBorderStyle, className: cn("hover:bg-transparent", bordered === true && "border-border"), children: [
           showCheckbox && /* @__PURE__ */ jsx(
             TableHead,
@@ -13030,7 +13056,7 @@ function NTableContent({ effectiveMode }) {
             return /* @__PURE__ */ jsx(
               TableHead,
               {
-                className: cn("text-foreground h-12", responsiveClass),
+                className: cn("text-foreground h-12 overflow-hidden text-ellipsis", responsiveClass),
                 style: headerCellStyle,
                 children: header.isPlaceholder ? null : /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", header.column.getCanSort() && showSorting && "cursor-pointer select-none"), onClick: header.column.getToggleSortingHandler(), children: [
                   flexRender(header.column.columnDef.header, header.getContext()),
@@ -13041,7 +13067,7 @@ function NTableContent({ effectiveMode }) {
             );
           })
         ] }, hg.id)) }),
-        /* @__PURE__ */ jsx(TableBody, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => {
+        /* @__PURE__ */ jsx(TableBody, { children: visibleRows.length ? visibleRows.map((row) => {
           const isSelectedByRowId = Boolean(selectedRowId && row.original?.id === selectedRowId);
           const canExpand = hasExpansion && row.getCanExpand();
           const isExpanded = canExpand && row.getIsExpanded();
@@ -13094,7 +13120,7 @@ function NTableContent({ effectiveMode }) {
                     const meta = columnDef.meta || {};
                     const isEditable = Boolean(onCellEdit) && Boolean(meta.editable);
                     const responsiveClass = resolveHiddenBelowClass(meta.hiddenBelow);
-                    return /* @__PURE__ */ jsx(TableCell, { className: cn("h-14", responsiveClass), children: isEditable ? /* @__PURE__ */ jsx(EditableCell, { cell, onCellEdit }) : flexRender(columnDef.cell, cell.getContext()) }, cell.id);
+                    return /* @__PURE__ */ jsx(TableCell, { title: typeof cell.getValue?.() === "string" ? cell.getValue() : void 0, className: cn("h-14 overflow-hidden text-ellipsis", responsiveClass), children: isEditable ? /* @__PURE__ */ jsx(EditableCell, { cell, onCellEdit }) : flexRender(columnDef.cell, cell.getContext()) }, cell.id);
                   })
                 ]
               }
@@ -13234,6 +13260,17 @@ function NDataCardShell({ row, onClick, onContextMenu, actions, children, classN
 var DEFAULT_ROWS2 = 6;
 var UNMEASURED_DYNAMIC_ROWS = 12;
 var DEFAULT_CARD_COUNT = 48;
+var VISUALLY_HIDDEN = {
+  position: "absolute",
+  width: 1,
+  height: 1,
+  margin: -1,
+  padding: 0,
+  overflow: "hidden",
+  clip: "rect(0,0,0,0)",
+  whiteSpace: "nowrap",
+  borderWidth: 0
+};
 function NTableCardSkeleton({ surface }) {
   return /* @__PURE__ */ jsx(
     "div",
@@ -13293,75 +13330,6 @@ function NTableCardSkeleton({ surface }) {
     }
   );
 }
-function NTableHeaderSkeleton() {
-  const filters = useTableStore.use.filters();
-  const showViewToggle = useTableStore.use.showViewToggle();
-  const showColumnVisibility = useTableStore.use.showColumnVisibility();
-  const showAddButton = useTableStore.use.showAddButton();
-  const hasHeaderSlot = Boolean(useTableStore.use.headerSlot());
-  const hasToolbar = Boolean(useTableStore.use.renderToolbar());
-  const filterCount = Math.min(Math.max(filters?.length ?? 0, 1), 3);
-  const hasActions = showViewToggle || showColumnVisibility || showAddButton || hasHeaderSlot || hasToolbar;
-  const hasSettings = showViewToggle || showColumnVisibility || hasHeaderSlot || hasToolbar;
-  if (!filters?.length && !hasActions) return null;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      "data-ntable-loading-header": true,
-      className: "flex shrink-0 flex-wrap items-center justify-between gap-2",
-      children: [
-        filters?.length ? /* @__PURE__ */ jsx(
-          "div",
-          {
-            "data-ntable-loading-desktop-filters": true,
-            className: "hidden min-w-0 flex-1 flex-wrap gap-2 md:flex",
-            children: Array.from({ length: filterCount }).map((_, index) => /* @__PURE__ */ jsx(
-              NSkeleton,
-              {
-                className: cn("h-10 w-full rounded-lg", index < 2 ? "max-w-64" : "max-w-48")
-              },
-              index
-            ))
-          }
-        ) : /* @__PURE__ */ jsx("span", { className: "hidden min-w-0 flex-1 md:block" }),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            "data-ntable-loading-mobile-toolbar": true,
-            className: "flex w-full min-w-0 items-center gap-2 md:hidden",
-            children: [
-              filters?.length ? /* @__PURE__ */ jsx(
-                NSkeleton,
-                {
-                  "data-ntable-loading-mobile-primary": true,
-                  className: "h-10 min-w-0 flex-1 rounded-lg"
-                }
-              ) : null,
-              filters?.length > 1 ? /* @__PURE__ */ jsx(
-                NSkeleton,
-                {
-                  "data-ntable-loading-mobile-filter-button": true,
-                  className: "h-10 w-10 shrink-0 rounded-lg"
-                }
-              ) : null,
-              showAddButton ? /* @__PURE__ */ jsx(
-                NSkeleton,
-                {
-                  "data-ntable-loading-mobile-add-button": true,
-                  className: "h-10 w-10 shrink-0 rounded-lg"
-                }
-              ) : null
-            ]
-          }
-        ),
-        hasActions && /* @__PURE__ */ jsxs("div", { className: "hidden shrink-0 gap-2 md:flex", children: [
-          hasSettings && /* @__PURE__ */ jsx(NSkeleton, { className: "h-10 w-10 rounded-lg" }),
-          showAddButton && /* @__PURE__ */ jsx(NSkeleton, { className: "h-10 w-10 rounded-lg" })
-        ] })
-      ]
-    }
-  );
-}
 function NTableLoadingSkeleton({ rows }) {
   const rawColumns = useTableStore.use.columns();
   const responsiveColumns = React__default.useMemo(() => filterResponsiveColumns(rawColumns), [rawColumns]);
@@ -13381,64 +13349,62 @@ function NTableLoadingSkeleton({ rows }) {
   const loadingText = useTableStore.use.loadingText();
   const rowCount = rows ?? (dynamicHeight ? bodyHeight > 0 ? skeletonRowCount : UNMEASURED_DYNAMIC_ROWS : DEFAULT_ROWS2);
   const renderHeaderLabel = (header) => typeof header === "string" ? header : null;
-  return /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 flex-col gap-2", children: [
-    /* @__PURE__ */ jsx(NTableHeaderSkeleton, {}),
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        "data-testid": "ntable-loading-skeleton",
-        "data-ntable-loading-row-count": rowCount,
-        "data-bordered": surface.bordered === false ? "false" : surface.bordered ? "true" : void 0,
-        "aria-busy": "true",
-        "aria-label": loadingText,
-        role: "status",
-        style: surface.style,
-        className: cn("min-h-0 flex-1 rounded-md p-0", surface.className, dynamicHeight ? "overflow-hidden" : "najm-overlay-scroll", classNames?.content),
-        children: [
-          /* @__PURE__ */ jsx("span", { className: "sr-only", children: loadingText }),
-          /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: dynamicHeight ? "najm-overlay-scroll h-full" : void 0, children: /* @__PURE__ */ jsxs(Table, { children: [
-            /* @__PURE__ */ jsx(TableHeader, { "data-ntable-table-header": true, className: cn(headerClassName, "sticky top-0 z-10", classNames?.tableHeader), children: /* @__PURE__ */ jsxs(TableRow, { className: "hover:bg-muted/30", children: [
-              showCheckbox && /* @__PURE__ */ jsx(TableHead, { "aria-label": "Select column", className: "w-10 text-foreground h-12" }),
-              hasExpansion && /* @__PURE__ */ jsx(TableHead, { "aria-label": "Expand column", className: "w-10 text-foreground h-12" }),
-              columns.map((col, i) => /* @__PURE__ */ jsx(
-                TableHead,
-                {
-                  className: cn("text-foreground h-12", resolveHiddenBelowClass(col?.meta?.hiddenBelow)),
-                  style: col?.size ? { width: col.size } : void 0,
-                  children: renderHeaderLabel(col?.header)
-                },
-                col?.id ?? col?.accessorKey ?? i
-              ))
-            ] }) }),
-            /* @__PURE__ */ jsx(TableBody, { children: Array.from({ length: rowCount }).map((_, r) => /* @__PURE__ */ jsxs(TableRow, { children: [
-              showCheckbox && /* @__PURE__ */ jsx(TableCell, { className: "h-14 w-10", children: /* @__PURE__ */ jsx(NSkeleton, { className: "h-4 w-4" }) }),
-              hasExpansion && /* @__PURE__ */ jsx(TableCell, { className: "h-14 w-10", children: /* @__PURE__ */ jsx(NSkeleton, { className: "h-4 w-4" }) }),
-              columns.map((col, c) => /* @__PURE__ */ jsx(
-                TableCell,
-                {
-                  className: cn("h-14", resolveHiddenBelowClass(col?.meta?.hiddenBelow)),
-                  style: col?.size ? { width: col.size } : void 0,
-                  children: /* @__PURE__ */ jsx(NSkeleton, { className: "h-4 w-full" })
-                },
-                `skeleton-${r}-${col?.id ?? col?.accessorKey ?? c}`
-              ))
-            ] }, `skeleton-${r}`)) })
-          ] }) })
-        ]
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsx("div", { className: "flex min-h-0 flex-1 flex-col gap-2", children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-testid": "ntable-loading-skeleton",
+      "data-ntable-loading-row-count": rowCount,
+      "data-bordered": surface.bordered === false ? "false" : surface.bordered ? "true" : void 0,
+      "aria-busy": "true",
+      "aria-label": loadingText,
+      role: "status",
+      style: surface.style,
+      className: cn(
+        "min-h-0 rounded-md p-0",
+        surface.className,
+        // Sizes to its rows for the same reason `NTableContent` does, and it
+        // has to match: the skeleton draws exactly the row count the real
+        // table will render, so a box that fills its container here and hugs
+        // its rows there would visibly resize the instant the rows arrive —
+        // the one thing this whole layout is meant to avoid.
+        dynamicHeight ? "max-h-full shrink overflow-hidden" : "flex-1 najm-overlay-scroll",
+        classNames?.content
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { style: VISUALLY_HIDDEN, children: loadingText }),
+        /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: dynamicHeight ? "najm-overlay-scroll" : void 0, children: /* @__PURE__ */ jsxs(Table, { className: "table-fixed", children: [
+          /* @__PURE__ */ jsx(TableHeader, { "data-ntable-table-header": true, className: cn(headerClassName, "sticky top-0 z-10", classNames?.tableHeader), children: /* @__PURE__ */ jsxs(TableRow, { className: "hover:bg-muted/30", children: [
+            showCheckbox && /* @__PURE__ */ jsx(TableHead, { "aria-label": "Select column", className: "w-10 text-foreground h-12" }),
+            hasExpansion && /* @__PURE__ */ jsx(TableHead, { "aria-label": "Expand column", className: "w-10 text-foreground h-12" }),
+            columns.map((col, i) => /* @__PURE__ */ jsx(
+              TableHead,
+              {
+                className: cn("text-foreground h-12", resolveHiddenBelowClass(col?.meta?.hiddenBelow)),
+                style: col?.size ? { width: col.size } : void 0,
+                children: renderHeaderLabel(col?.header)
+              },
+              col?.id ?? col?.accessorKey ?? i
+            ))
+          ] }) }),
+          /* @__PURE__ */ jsx(TableBody, { children: Array.from({ length: rowCount }).map((_, r) => /* @__PURE__ */ jsxs(TableRow, { children: [
+            showCheckbox && /* @__PURE__ */ jsx(TableCell, { className: "h-14 w-10", children: /* @__PURE__ */ jsx(NSkeleton, { className: "h-4 w-4" }) }),
+            hasExpansion && /* @__PURE__ */ jsx(TableCell, { className: "h-14 w-10", children: /* @__PURE__ */ jsx(NSkeleton, { className: "h-4 w-4" }) }),
+            columns.map((col, c) => /* @__PURE__ */ jsx(
+              TableCell,
+              {
+                className: cn("h-14", resolveHiddenBelowClass(col?.meta?.hiddenBelow)),
+                style: col?.size ? { width: col.size } : void 0,
+                children: /* @__PURE__ */ jsx(NSkeleton, { className: "h-4 w-full" })
+              },
+              `skeleton-${r}-${col?.id ?? col?.accessorKey ?? c}`
+            ))
+          ] }, `skeleton-${r}`)) })
+        ] }) })
+      ]
+    }
+  ) });
 }
 function NTableCardsLoadingSkeleton({ rows }) {
-  const filters = useTableStore.use.filters();
-  const showViewToggle = useTableStore.use.showViewToggle();
-  const showColumnVisibility = useTableStore.use.showColumnVisibility();
-  const showAddButton = useTableStore.use.showAddButton();
-  const hasHeaderSlot = Boolean(useTableStore.use.headerSlot());
-  const hasToolbar = Boolean(useTableStore.use.renderToolbar());
-  const hasHeaderSkeleton = Boolean(
-    filters?.length || showViewToggle || showColumnVisibility || showAddButton || hasHeaderSlot || hasToolbar
-  );
   const classNames = useTableStore.use.classNames();
   const bordered = useTableStore.use.bordered();
   const borderColor = useTableStore.use.borderColor();
@@ -13458,33 +13424,30 @@ function NTableCardsLoadingSkeleton({ rows }) {
   }) : DEFAULT_CARD_COUNT);
   const defaultContainerClass = "grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4";
   const containerClass = classNames?.cards ?? defaultContainerClass;
-  return /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 flex-col gap-2", children: [
-    hasHeaderSkeleton && /* @__PURE__ */ jsx(NTableHeaderSkeleton, {}),
-    /* @__PURE__ */ jsxs(
-      NajmScroll,
-      {
-        axis: "y",
-        "aria-busy": "true",
-        "aria-label": loadingText,
-        role: "status",
-        className: "min-h-0 flex-1 overflow-hidden",
-        children: [
-          /* @__PURE__ */ jsx("span", { className: "sr-only", children: loadingText }),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              "data-testid": "ntable-cards-loading-skeleton",
-              "data-ntable-loading-cards-grid": true,
-              "data-ntable-loading-card-count": cardCount,
-              "aria-hidden": "true",
-              className: cn(containerClass),
-              children: Array.from({ length: cardCount }).map((_, index) => CardSkeletonComponent ? /* @__PURE__ */ jsx("div", { "data-ntable-loading-card": true, children: /* @__PURE__ */ jsx(CardSkeletonComponent, {}) }, index) : /* @__PURE__ */ jsx(NTableCardSkeleton, { surface }, index))
-            }
-          )
-        ]
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsx("div", { className: "flex min-h-0 flex-1 flex-col gap-2", children: /* @__PURE__ */ jsxs(
+    NajmScroll,
+    {
+      axis: "y",
+      "aria-busy": "true",
+      "aria-label": loadingText,
+      role: "status",
+      className: "min-h-0 flex-1 overflow-hidden",
+      children: [
+        /* @__PURE__ */ jsx("span", { style: VISUALLY_HIDDEN, children: loadingText }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-testid": "ntable-cards-loading-skeleton",
+            "data-ntable-loading-cards-grid": true,
+            "data-ntable-loading-card-count": cardCount,
+            "aria-hidden": "true",
+            className: cn(containerClass),
+            children: Array.from({ length: cardCount }).map((_, index) => CardSkeletonComponent ? /* @__PURE__ */ jsx("div", { "data-ntable-loading-card": true, children: /* @__PURE__ */ jsx(CardSkeletonComponent, {}) }, index) : /* @__PURE__ */ jsx(NTableCardSkeleton, { surface }, index))
+          }
+        )
+      ]
+    }
+  ) });
 }
 var DEFAULT_ROOT_MARGIN = "80px";
 function useCardContinuation({
@@ -13767,6 +13730,51 @@ function NTableCards({ effectiveMode }) {
     ) : null
   ] });
 }
+
+// src/components/table/paginationPages.ts
+function buildPageItems(pageIndex, pageCount, siblingCount = 1) {
+  const pages = Math.max(0, Math.floor(pageCount));
+  if (pages <= 0) return [];
+  const current = Math.min(Math.max(0, Math.floor(pageIndex)), pages - 1);
+  const siblings = Math.max(0, Math.floor(siblingCount));
+  const lastIndex = pages - 1;
+  const windowSize = siblings * 2 + 5;
+  if (pages <= windowSize) {
+    return range(0, lastIndex);
+  }
+  const left = Math.max(current - siblings, 0);
+  const right = Math.min(current + siblings, lastIndex);
+  const showStartGap = left - 1 >= 2;
+  const showEndGap = lastIndex - 1 - right >= 2;
+  const runLength = siblings * 2 + 3;
+  if (!showStartGap && showEndGap) {
+    return [
+      ...range(0, runLength - 1),
+      { type: "gap", key: "end" },
+      page(lastIndex)
+    ];
+  }
+  if (showStartGap && !showEndGap) {
+    return [
+      page(0),
+      { type: "gap", key: "start" },
+      ...range(lastIndex - runLength + 1, lastIndex)
+    ];
+  }
+  return [
+    page(0),
+    { type: "gap", key: "start" },
+    ...range(left, right),
+    { type: "gap", key: "end" },
+    page(lastIndex)
+  ];
+}
+function page(pageIndex) {
+  return { type: "page", pageIndex };
+}
+function range(from, to) {
+  return Array.from({ length: to - from + 1 }, (_, index) => page(from + index));
+}
 function CardLoadMorePagination({
   config,
   rowCount,
@@ -13860,6 +13868,44 @@ function CardLoadMorePagination({
     }
   );
 }
+var navButtonClass = "h-8 w-8 p-0 text-foreground disabled:text-muted-foreground disabled:opacity-70";
+var chevronClass = "h-4 w-4 rtl:-scale-x-100";
+function PageNumbers({
+  pageIndex,
+  pageCount,
+  bordered,
+  labels,
+  onSelect
+}) {
+  return /* @__PURE__ */ jsx(Fragment, { children: buildPageItems(pageIndex, pageCount).map((item) => {
+    if (item.type === "gap") {
+      return /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: "flex h-8 w-8 items-center justify-center text-sm text-muted-foreground",
+          children: "\u2026"
+        },
+        `gap-${item.key}`
+      );
+    }
+    const page2 = item.pageIndex + 1;
+    const isCurrent = item.pageIndex === pageIndex;
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        bordered,
+        variant: isCurrent ? "default" : "outline",
+        className: cn(navButtonClass, "tabular-nums"),
+        "aria-label": isCurrent ? labels.currentPage?.(page2) ?? `Page ${page2}, current page` : labels.goToPage?.(page2) ?? `Go to page ${page2}`,
+        "aria-current": isCurrent ? "page" : void 0,
+        onClick: () => onSelect(item.pageIndex),
+        children: page2
+      },
+      item.pageIndex
+    );
+  }) });
+}
 function NTablePagination() {
   const table = useTableStore.use.table();
   const showPagination = useTableStore.use.showPagination();
@@ -13876,7 +13922,9 @@ function NTablePagination() {
   const setPagination = useTableStore.use.setPagination();
   const isPaginationControlled = useTableStore.use.isPaginationControlled();
   const bordered = useTableStore.use.bordered();
-  if (!table || !showPagination || effectiveViewMode === "json" || effectiveViewMode === "files") return null;
+  const paginationVariant = useTableStore.use.paginationVariant();
+  const labels = useTableStore.use.paginationLabels();
+  if (!showPagination || effectiveViewMode === "json" || effectiveViewMode === "files") return null;
   if (cardPagination.mode === "all") return null;
   if (effectiveViewMode === "cards" && cardPagination.mode === "infinite") return null;
   if (effectiveViewMode === "cards" && cardPagination.mode === "load-more") {
@@ -13890,10 +13938,10 @@ function NTablePagination() {
       }
     );
   }
-  const filteredRows = table.getFilteredRowModel().rows;
-  const selectedRows = table.getFilteredSelectedRowModel().rows;
-  const { pageIndex, pageSize } = table.getState().pagination;
-  const effectivePageCount = manualPagination && pageCount !== void 0 ? pageCount : table.getPageCount();
+  const filteredRows = table ? table.getFilteredRowModel().rows : [];
+  const selectedRows = table ? table.getFilteredSelectedRowModel().rows : [];
+  const { pageIndex, pageSize } = table ? table.getState().pagination : pagination;
+  const effectivePageCount = manualPagination && pageCount !== void 0 ? pageCount : table ? table.getPageCount() : 1;
   const currentPagination = pagination ?? { pageIndex, pageSize };
   const currentPageSizeOptions = pageSizeOptions.includes(pageSize) ? pageSizeOptions : [...pageSizeOptions, pageSize].sort((a, b) => a - b);
   const navigate = (direction) => {
@@ -13918,10 +13966,15 @@ function NTablePagination() {
     const newSize = Number(value);
     setPagination({ pageIndex: 0, pageSize: newSize });
   };
+  const hasTrustworthyPageCount = manualPagination ? pageCount !== void 0 && pageCount > 0 : effectivePageCount > 0;
+  const showNumbers = paginationVariant === "numbered" && hasTrustworthyPageCount;
+  const canPrevious = (table?.getCanPreviousPage?.() ?? pageIndex > 0) && pageIndex > 0;
+  const canNext = (table?.getCanNextPage?.() ?? true) && pageIndex < effectivePageCount - 1;
+  const selectedTotal = manualPagination && rowCount !== void 0 ? rowCount : filteredRows.length;
   return /* @__PURE__ */ jsxs("div", { className: cn("flex w-full min-w-0 flex-wrap items-center justify-between gap-x-4 gap-y-2 py-1 text-foreground", classNames?.pagination), children: [
     /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-4 lg:gap-6", children: [
       (!isPaginationControlled || manualPagination) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-foreground", children: [
-        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: "Rows/page" }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: labels.rowsPerPage ?? "Rows/page" }),
         /* @__PURE__ */ jsxs(Select, { value: `${pageSize}`, onValueChange: handlePageSizeChange, children: [
           /* @__PURE__ */ jsx(
             SelectTrigger,
@@ -13934,31 +13987,42 @@ function NTablePagination() {
           /* @__PURE__ */ jsx(SelectContent, { side: "top", children: currentPageSizeOptions.map((size) => /* @__PURE__ */ jsx(SelectItem, { value: `${size}`, children: size }, size)) })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "text-sm font-medium text-foreground", children: [
-        "Page ",
-        pageIndex + 1,
-        " of ",
-        effectivePageCount
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx(Button, { bordered, variant: "outline", className: "hidden h-8 w-8 p-0 text-foreground disabled:text-muted-foreground disabled:opacity-70 lg:flex", "aria-label": "First page", onClick: () => navigate("first"), disabled: !table.getCanPreviousPage?.() || pageIndex === 0, children: /* @__PURE__ */ jsx(ChevronsLeft, { className: "h-4 w-4" }) }),
-        /* @__PURE__ */ jsx(Button, { bordered, variant: "outline", className: "h-8 w-8 p-0 text-foreground disabled:text-muted-foreground disabled:opacity-70", "aria-label": "Previous", onClick: () => navigate("prev"), disabled: !table.getCanPreviousPage?.() || pageIndex === 0, children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" }) }),
-        /* @__PURE__ */ jsx(Button, { bordered, variant: "outline", className: "h-8 w-8 p-0 text-foreground disabled:text-muted-foreground disabled:opacity-70", "aria-label": "Next", onClick: () => navigate("next"), disabled: !table.getCanNextPage?.() || pageIndex >= effectivePageCount - 1, children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" }) }),
-        /* @__PURE__ */ jsx(Button, { bordered, variant: "outline", className: "hidden h-8 w-8 p-0 text-foreground disabled:text-muted-foreground disabled:opacity-70 lg:flex", "aria-label": "Last page", onClick: () => navigate("last"), disabled: !table.getCanNextPage?.() || pageIndex >= effectivePageCount - 1, children: /* @__PURE__ */ jsx(ChevronsRight, { className: "h-4 w-4" }) })
-      ] })
+      /* @__PURE__ */ jsx("div", { className: cn("text-sm font-medium text-foreground", showNumbers && "sm:hidden"), children: labels.pageOf?.(pageIndex + 1, effectivePageCount) ?? `Page ${pageIndex + 1} of ${effectivePageCount}` }),
+      /* @__PURE__ */ jsxs(
+        "nav",
+        {
+          "aria-label": labels.pagination ?? "Pagination",
+          className: "flex items-center gap-2",
+          children: [
+            !showNumbers && /* @__PURE__ */ jsx(Button, { bordered, variant: "outline", className: cn(navButtonClass, "hidden lg:flex"), "aria-label": labels.firstPage ?? "First page", onClick: () => navigate("first"), disabled: !canPrevious, children: /* @__PURE__ */ jsx(ChevronsLeft, { className: chevronClass }) }),
+            /* @__PURE__ */ jsx(Button, { bordered, variant: "outline", className: navButtonClass, "aria-label": labels.previousPage ?? "Previous", onClick: () => navigate("prev"), disabled: !canPrevious, children: /* @__PURE__ */ jsx(ChevronLeft, { className: chevronClass }) }),
+            showNumbers && /* @__PURE__ */ jsx("div", { className: "hidden items-center gap-2 sm:flex", children: /* @__PURE__ */ jsx(
+              PageNumbers,
+              {
+                pageIndex,
+                pageCount: effectivePageCount,
+                bordered,
+                labels,
+                onSelect: (next) => setPagination({ ...currentPagination, pageIndex: next })
+              }
+            ) }),
+            /* @__PURE__ */ jsx(Button, { bordered, variant: "outline", className: navButtonClass, "aria-label": labels.nextPage ?? "Next", onClick: () => navigate("next"), disabled: !canNext, children: /* @__PURE__ */ jsx(ChevronRight, { className: chevronClass }) }),
+            !showNumbers && /* @__PURE__ */ jsx(Button, { bordered, variant: "outline", className: cn(navButtonClass, "hidden lg:flex"), "aria-label": labels.lastPage ?? "Last page", onClick: () => navigate("last"), disabled: !canNext, children: /* @__PURE__ */ jsx(ChevronsRight, { className: chevronClass }) })
+          ]
+        }
+      )
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-none whitespace-nowrap text-sm text-muted-foreground max-sm:hidden", children: [
-      selectedRows.length,
-      " of ",
-      manualPagination && rowCount !== void 0 ? rowCount : filteredRows.length,
-      " row(s) selected."
-    ] })
+    /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-none whitespace-nowrap text-sm text-muted-foreground max-sm:hidden", children: labels.rowsSelected?.(selectedRows.length, selectedTotal) ?? `${selectedRows.length} of ${selectedTotal} row(s) selected.` })
   ] });
 }
+function PendingFilter({ placeholder, icon, bordered }) {
+  return /* @__PURE__ */ jsx(TextInput, { icon, value: "", onChange: () => {
+  }, placeholder, bordered, disabled: true });
+}
 function SearchFilter({ placeholder }) {
   const table = useTableStore.use.table();
   const bordered = useTableStore.use.bordered();
-  if (!table) return null;
+  if (!table) return /* @__PURE__ */ jsx(PendingFilter, { icon: Search, placeholder: placeholder ?? "Search\u2026", bordered });
   const value = table.getState().globalFilter ?? "";
   return /* @__PURE__ */ jsx(TextInput, { icon: Search, value, onChange: (v) => table.setGlobalFilter(v), placeholder: placeholder ?? "Search\u2026", bordered });
 }
@@ -13966,14 +14030,14 @@ function TextFilter({ name, placeholder, icon }) {
   const table = useTableStore.use.table();
   const bordered = useTableStore.use.bordered();
   const column = table?.getColumn?.(name);
-  if (!column) return null;
+  if (!column) return /* @__PURE__ */ jsx(PendingFilter, { icon, placeholder, bordered });
   return /* @__PURE__ */ jsx(TextInput, { icon, value: column.getFilterValue() ?? "", onChange: (value) => column.setFilterValue(value), placeholder, bordered });
 }
 function SelectFilter({ name, options, placeholder, inputType }) {
   const table = useTableStore.use.table();
   const bordered = useTableStore.use.bordered();
   const column = table?.getColumn?.(name);
-  if (!column) return null;
+  if (!column) return /* @__PURE__ */ jsx(PendingFilter, { placeholder: placeholder || "Filter...", bordered });
   const allOptions = [{ value: "__clear__", label: "All" }, ...options.map((o) => typeof o === "string" ? { value: o, label: o } : o)];
   const InputComponent = inputType === "combobox" ? ComboboxInput : SelectInput;
   return /* @__PURE__ */ jsx(InputComponent, { value: column.getFilterValue() ?? "", onChange: (value) => column.setFilterValue(value === "" || value === "__clear__" ? void 0 : value), items: allOptions, placeholder: placeholder || "Filter...", bordered });
@@ -13982,7 +14046,7 @@ function defaultWrapperClass(filter) {
   return filter.type === "search" ? "flex-1 min-w-[160px] max-w-sm" : "w-full sm:w-40 xl:w-56 shrink-0";
 }
 function RenderFilter({ filter, mobilePrimary = false }) {
-  const table = useTableStore.use.table();
+  useTableStore.use.table();
   const bordered = useTableStore.use.bordered();
   if (filter.type === "search") {
     return /* @__PURE__ */ jsx(SearchFilter, { placeholder: filter.placeholder });
@@ -14049,20 +14113,24 @@ function RenderFilter({ filter, mobilePrimary = false }) {
   if (filter.type === "text") {
     return /* @__PURE__ */ jsx(TextFilter, { name: filter.name, placeholder: filter.placeholder, icon: mobilePrimary ? Search : void 0 });
   }
-  if (!table) return null;
   return /* @__PURE__ */ jsx(SelectFilter, { name: filter.name, options: filter.options || [], placeholder: filter.placeholder, inputType: filter.type });
 }
 function TableFilters() {
   const filters = useTableStore.use.filters();
   if (!filters?.length) return null;
-  return /* @__PURE__ */ jsx("div", { "data-ntable-desktop-filters": true, className: "hidden flex-1 min-w-0 flex-wrap items-center gap-2 md:flex", children: filters.map((filter) => /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn(defaultWrapperClass(filter), filter.className),
-      children: /* @__PURE__ */ jsx(RenderFilter, { filter })
-    },
-    filter.name
-  )) });
+  return (
+    // `min-h-10` is the height of one control row. Even if every filter inside
+    // resolves to nothing, the row cannot collapse and change what the body
+    // measures.
+    /* @__PURE__ */ jsx("div", { "data-ntable-desktop-filters": true, className: "hidden min-h-10 flex-1 min-w-0 flex-wrap items-center gap-2 md:flex", children: filters.map((filter) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(defaultWrapperClass(filter), filter.className),
+        children: /* @__PURE__ */ jsx(RenderFilter, { filter })
+      },
+      filter.name
+    )) })
+  );
 }
 function TableAddButton({ mobile = false }) {
   const onAddClick = useTableStore.use.onAddClick();
@@ -14213,12 +14281,14 @@ function NTableHeader() {
   const isCustomMode = useTableStore.use.isCustomMode();
   const showViewToggle = useTableStore.use.showViewToggle();
   const showColumnVisibility = useTableStore.use.showColumnVisibility();
-  const hideDataChrome = isLoading && !isRefreshing || error || hasNoData && !isFilteredEmpty;
+  const hideDataChrome = error || hasNoData && !isFilteredEmpty && !isLoading;
+  const isFirstLoad = Boolean(isLoading) && !isRefreshing;
+  const firstLoadChromeClass = isFirstLoad ? "pointer-events-none opacity-60" : void 0;
   if (isCustomMode) {
     if (!showViewToggle && !showColumnVisibility && !headerSlot && !hasControls) return null;
     if (hideDataChrome) return null;
     const justify2 = headerSlot ? "justify-between" : "justify-end";
-    return /* @__PURE__ */ jsxs("div", { "data-ntable-header": true, className: cn("flex shrink-0 items-center gap-0 lg:gap-3 flex-wrap lg:flex-nowrap", justify2, classNames?.header), children: [
+    return /* @__PURE__ */ jsxs("div", { "data-ntable-header": true, "aria-busy": isFirstLoad ? "true" : void 0, className: cn("flex shrink-0 items-center gap-0 lg:gap-3 flex-wrap lg:flex-nowrap", justify2, firstLoadChromeClass, classNames?.header), children: [
       headerSlot && /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: headerSlot }),
       hasControls && /* @__PURE__ */ jsxs("div", { className: "flex gap-2 shrink-0", children: [
         /* @__PURE__ */ jsx("span", { className: "hidden md:contents", children: /* @__PURE__ */ jsx(TableSettingsMenu, {}) }),
@@ -14231,7 +14301,7 @@ function NTableHeader() {
   if (!hasFilters && !hasControls && !headerSlot && !hasToolbar) return null;
   if (hideDataChrome) return null;
   const justify = hasControls || headerSlot || hasToolbar ? "justify-between" : "justify-start";
-  return /* @__PURE__ */ jsxs("div", { "data-ntable-header": true, className: cn("flex shrink-0 items-center gap-0 lg:gap-3 flex-wrap lg:flex-nowrap", justify, classNames?.header), children: [
+  return /* @__PURE__ */ jsxs("div", { "data-ntable-header": true, "aria-busy": isFirstLoad ? "true" : void 0, className: cn("flex shrink-0 items-center gap-0 lg:gap-3 flex-wrap lg:flex-nowrap", justify, firstLoadChromeClass, classNames?.header), children: [
     /* @__PURE__ */ jsx(TableFilters, {}),
     /* @__PURE__ */ jsx(TableMobileToolbar, {}),
     headerSlot && /* @__PURE__ */ jsx("div", { className: "ml-auto flex shrink-0 items-center gap-2", children: headerSlot }),
@@ -14342,12 +14412,27 @@ function TableLayout(props) {
         "data-ntable-body": true,
         "data-ntable-refreshing": isRefreshing ? "true" : void 0,
         "aria-busy": isRefreshing ? "true" : void 0,
-        className: "flex min-h-0 flex-1 flex-col gap-2 overflow-hidden",
+        className: "relative flex min-h-0 flex-1 flex-col gap-2 overflow-hidden",
         children: isCustomMode ? customRenderer ? customRenderer() : null : /* @__PURE__ */ jsxs(Fragment, { children: [
-          isLoading && !isRefreshing && (props.renderLoading ? /* @__PURE__ */ jsx(TableStateSlot, { children: props.renderLoading() }) : props.responsiveSkeleton ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("div", { "data-ntable-skeleton-variant": "table", className: "hidden min-h-0 flex-1 flex-col lg:flex", children: /* @__PURE__ */ jsx(NTableLoadingSkeleton, {}) }),
-            /* @__PURE__ */ jsx("div", { "data-ntable-skeleton-variant": "cards", className: "flex min-h-0 flex-1 flex-col lg:hidden", children: /* @__PURE__ */ jsx(NTableCardsLoadingSkeleton, {}) })
-          ] }) : effectiveMode === "table" ? /* @__PURE__ */ jsx(NTableLoadingSkeleton, {}) : effectiveMode === "cards" ? /* @__PURE__ */ jsx(NTableCardsLoadingSkeleton, {}) : /* @__PURE__ */ jsx(NTableLoadingSkeleton, {})),
+          isLoading && !isRefreshing && // Absolutely positioned, the way every grid that measures its own
+          // page size does it: AG Grid paints its loading state as an
+          // overlay, and MUI's DataGrid renders `GridOverlay` on top of the
+          // rows rather than in place of them. A skeleton that occupies a
+          // slot in the layout is a second layout — the one the container
+          // gets measured in — and the page size derived from it is a page
+          // size for a table that no longer exists once rows land. Taking
+          // the skeleton out of flow leaves exactly one layout to measure.
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-ntable-loading-overlay": true,
+              className: "absolute inset-0 z-10 flex min-h-0 flex-col bg-background",
+              children: props.renderLoading ? /* @__PURE__ */ jsx(TableStateSlot, { children: props.renderLoading() }) : props.responsiveSkeleton ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("div", { "data-ntable-skeleton-variant": "table", className: "hidden min-h-0 flex-1 flex-col lg:flex", children: /* @__PURE__ */ jsx(NTableLoadingSkeleton, {}) }),
+                /* @__PURE__ */ jsx("div", { "data-ntable-skeleton-variant": "cards", className: "flex min-h-0 flex-1 flex-col lg:hidden", children: /* @__PURE__ */ jsx(NTableCardsLoadingSkeleton, {}) })
+              ] }) : effectiveMode === "cards" ? /* @__PURE__ */ jsx(NTableCardsLoadingSkeleton, {}) : /* @__PURE__ */ jsx(NTableLoadingSkeleton, {})
+            }
+          ),
           error && !isLoading && /* @__PURE__ */ jsx(TableStateSlot, { children: props.renderError ? props.renderError(error) : /* @__PURE__ */ jsx(NErrorState, { message: typeof error === "string" ? error : "An error occurred" }) }),
           showFilteredEmpty && /* @__PURE__ */ jsx(TableStateSlot, { children: props.renderFilteredEmpty ? props.renderFilteredEmpty() : renderFilteredEmpty ? renderFilteredEmpty() : props.renderEmpty ? props.renderEmpty() : /* @__PURE__ */ jsx(DefaultTableFilteredEmptyState, {}) }),
           showEmpty && /* @__PURE__ */ jsx(TableStateSlot, { children: props.renderEmpty ? props.renderEmpty() : /* @__PURE__ */ jsx(DefaultTableEmptyState, { title: noDataText }) }),
@@ -14515,6 +14600,8 @@ function NTable(props) {
     defaultPagination: props.defaultPagination,
     onPaginationChange: props.onPaginationChange ?? null,
     cardPagination: props.cardPagination ?? { mode: "paged" },
+    paginationVariant: props.paginationVariant ?? "numbered",
+    paginationLabels: props.paginationLabels ?? {},
     // Row selection
     rowSelection: props.rowSelection,
     defaultRowSelection: props.defaultRowSelection,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "najm-kit",
-  "version": "2.2.8",
+  "version": "2.4.0",
   "license": "MIT",
   "type": "module",
   "description": "Reusable React UI component package for Najm framework",