@quillsql/react 2.16.43 → 2.16.45

package/dist/index.cjs

@@ -14976,6 +14976,9 @@ function resolvePivotDateBucket({
   if (override) {
     return override;
   }
+  if (pivot?.dateBucket) {
+    return pivot.dateBucket;
+  }
   const inferred = inferDateBucketFromFilters(
     pivot ?? {},
     filters ?? []
@@ -19496,6 +19499,8 @@ var init_tableProcessing = __esm({
       pivot,
       getPivotRowCount = true,
       comparisonQuery,
+      reportId,
+      dateBucket,
       getToken,
       eventTracking
     }) => {
@@ -19507,9 +19512,26 @@ var init_tableProcessing = __esm({
       let referencedTables = void 0;
       try {
         if (pivot) {
+          const dateFilter = filters?.find(
+            (filter) => filter.filterType === "date_range" || filter.operator === "BETWEEN"
+          );
+          const normalizedDateFilter = dateFilter?.operator === "BETWEEN" ? {
+            ...dateFilter,
+            startDate: dateFilter.value?.[0],
+            endDate: dateFilter.value?.[1]
+          } : dateFilter;
+          const resolvedDateBucket = resolvePivotDateBucket({
+            pivot,
+            filters,
+            override: dateBucket
+          });
           const pivotData = await generatePivotWithSQL({
             pivot,
+            report: reportId ? { id: reportId } : void 0,
             client,
+            dateBucket: resolvedDateBucket,
+            dateFilter: normalizedDateFilter,
+            dashboardFilters: filters,
             pivotQuery: query,
             comparisonPivotQuery: comparisonQuery,
             additionalProcessing: processing,
@@ -19647,6 +19669,7 @@ var init_tableProcessing = __esm({
       pivotQuery,
       comparisonPivotQuery,
       getPivotRowCount = true,
+      dateBucket,
       getToken,
       eventTracking
     }) => {
@@ -19660,6 +19683,8 @@ var init_tableProcessing = __esm({
           customFields,
           filters,
           pivot,
+          reportId,
+          dateBucket,
           getPivotRowCount,
           getToken,
           eventTracking
@@ -20887,6 +20912,8 @@ __export(index_exports, {
   ChartDisplay: () => ChartDisplay,
   ChartEditor: () => ChartEditor,
   Chat: () => Chat,
+  DEFAULT_PAGE_SIZE: () => DEFAULT_PAGE_SIZE,
+  DEFAULT_USE_REPORT_ROWS_PER_REQUEST: () => DEFAULT_USE_REPORT_ROWS_PER_REQUEST,
   Dashboard: () => Dashboard,
   DashboardFilterType: () => DashboardFilterType,
   DashboardLegacy: () => DashboardLegacy,
@@ -21267,6 +21294,7 @@ async function cleanDashboardItem({
     dateField: item.dateField,
     pivot: pivotError ? void 0 : item.pivot ? {
       ...item.pivot,
+      dateBucket: dateBucket ?? item.pivot.dateBucket,
       aggregations: item.pivot.aggregations ?? [
         {
           valueField: item.pivot.valueField,
@@ -21693,7 +21721,8 @@ function coalescePivotsForPivotTemplateMetadata(hookPivot, rbsPivot) {
     columnFieldType: hookPivot.columnFieldType ?? rbsPivot.columnFieldType,
     rowFieldTable: rowField ? hookPivot.rowFieldTable ?? rbsPivot.rowFieldTable : void 0,
     columnFieldTable: columnField ? hookPivot.columnFieldTable ?? rbsPivot.columnFieldTable : void 0,
-    aggregations: aggregations ?? hookPivot.aggregations ?? rbsPivot.aggregations
+    aggregations: aggregations ?? hookPivot.aggregations ?? rbsPivot.aggregations,
+    dateBucket: hookPivot.dateBucket ?? rbsPivot.dateBucket
   };
 }
 function shapePivotForPivotTemplateMetadata(pivot) {
@@ -21781,6 +21810,7 @@ function createPivotTemplateMetadata({
 }) {
   const { normalizedPivot, normalizedReportBuilderState } = preparePivotLayersForPivotTemplate(pivot, reportBuilderState);
   const normalizedAdditionalProcessing = normalizeLegacyAdditionalProcessingSort(additionalProcessing);
+  const resolvedDateBucket = normalizedPivot?.dateBucket ?? normalizedReportBuilderState?.pivot?.dateBucket;
   return {
     reportId,
     dashboardItemId: reportId,
@@ -21794,7 +21824,8 @@ function createPivotTemplateMetadata({
     flags,
     overwriteCache,
     pivot: normalizedPivot ?? void 0,
-    reportBuilderState: normalizedReportBuilderState ?? void 0
+    reportBuilderState: normalizedReportBuilderState ?? void 0,
+    ...resolvedDateBucket ? { dateBucket: resolvedDateBucket } : {}
   };
 }
 async function requestPivotTemplateTask({
@@ -22158,6 +22189,11 @@ async function fetchReport({
       pivotForRequest = prepared.normalizedPivot ?? void 0;
       reportBuilderStateForRequest = prepared.normalizedReportBuilderState;
     }
+    const resolvedDateBucket = usePivotTask ? resolvePivotDateBucket({
+      pivot: pivotForRequest ?? void 0,
+      filters,
+      override: dateBucket
+    }) : void 0;
     const fetchResp = await quillFetch({
       client,
       task,
@@ -22177,7 +22213,8 @@ async function fetchReport({
         flags,
         overwriteCache,
         pivot: pivotForRequest,
-        reportBuilderState: reportBuilderStateForRequest
+        reportBuilderState: reportBuilderStateForRequest,
+        ...resolvedDateBucket ? { dateBucket: resolvedDateBucket } : {}
       },
       abortSignal,
       getToken
@@ -32011,6 +32048,10 @@ function QuillTable({
   downloadCSV: downloadCSV2,
   onPageChange,
   onSortChange,
+  manualPagination = false,
+  pageCount,
+  canNextPage,
+  canPreviousPage,
   hideLabels,
   disableSort,
   headerBackgroundColor,
@@ -32029,10 +32070,19 @@ function QuillTable({
     setSortDirection(sort?.direction || "desc");
   }, [sort]);
   const holdFullPageLoader = rows?.length === 0 && isLoading;
+  const pageCountUnknown = manualPagination && pageCount === -1;
   const { activeRows, maxPage } = (0, import_react14.useMemo)(() => {
     const start = currentPage * rowsPerPage;
     const end = (currentPage + 1) * rowsPerPage;
     const rowList = rows ?? [];
+    if (manualPagination) {
+      const total = rowCount ?? rowList.length;
+      const resolvedPageCount = pageCount !== void 0 && pageCount >= 0 ? pageCount : total > 0 ? Math.ceil(total / rowsPerPage) : rowList.length > 0 ? 1 : 0;
+      return {
+        maxPage: Math.max(resolvedPageCount, 1),
+        activeRows: rowList
+      };
+    }
     if (rowCount && onSortChange && rowCount !== rowList.length) {
       return {
         maxPage: Math.ceil(rowCount / rowsPerPage),
@@ -32052,6 +32102,8 @@ function QuillTable({
     };
   }, [
     currentPage,
+    manualPagination,
+    pageCount,
     rows,
     rowsPerPage,
     rowCount,
@@ -32061,21 +32113,30 @@ function QuillTable({
     overrideInMemortSort
   ]);
   (0, import_react14.useEffect)(() => {
+    if (manualPagination) {
+      return;
+    }
     if (currentPage > 0 && rows.length <= currentPage * rowsPerPage) {
       onPageChange?.(0);
     }
-  }, [rows, currentPage, rowsPerPage, onPageChange]);
+  }, [manualPagination, rows, currentPage, rowsPerPage, onPageChange]);
   const increasePage = () => {
-    if (!rowCountIsLoading && currentPage + 1 === maxPage) {
+    if (canNextPage === false) {
       return;
     }
-    onPageChange && onPageChange(currentPage + 1);
+    if (canNextPage !== true && !pageCountUnknown && !rowCountIsLoading && currentPage + 1 >= maxPage) {
+      return;
+    }
+    onPageChange?.(currentPage + 1);
   };
   const decreasePage = () => {
+    if (canPreviousPage === false) {
+      return;
+    }
     if (currentPage === 0) {
       return;
     }
-    onPageChange && onPageChange(currentPage - 1);
+    onPageChange?.(currentPage - 1);
   };
   const toggleSort = (column) => {
     if (disableSort) {
@@ -32457,7 +32518,7 @@ function QuillTable({
                                       children: [
                                         currentPage + 1,
                                         " of ",
-                                        rowCountIsLoading && maxPage > 1 ? "many" : maxPage
+                                        pageCountUnknown || rowCountIsLoading && maxPage > 1 ? "many" : maxPage
                                       ]
                                     }
                                   ),
@@ -37144,6 +37205,7 @@ function DataLoader({
           pivot: chartReport.pivot || item.pivot,
           pivotQuery,
           comparisonPivotQuery,
+          dateBucket: chartReport.pivot?.dateBucket ?? item.pivot?.dateBucket,
           getPivotRowCount: false,
           getToken,
           eventTracking
@@ -44173,8 +44235,10 @@ var Table = ({
     clientLoading,
     !reports[props.reportId ?? ""]
   ]);
-  const [page, setPage] = (0, import_react44.useState)(0);
+  const [internalPage, setInternalPage] = (0, import_react44.useState)(0);
   if ("rows" in data && "columns" in data) {
+    const currentPage = data.currentPage ?? internalPage;
+    const onPageChange = data.onPageChange ?? setInternalPage;
     return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
       QuillTable,
       {
@@ -44191,8 +44255,16 @@ var Table = ({
         LoadingComponent: data.LoadingComponent,
         isLoading: data.isLoading || loading,
         downloadCSV: data.downloadCSV,
-        currentPage: page,
-        onPageChange: setPage
+        currentPage,
+        rowsPerPage: data.rowsPerPage,
+        rowCount: data.rowCount,
+        rowCountIsLoading: data.rowCountIsLoading,
+        onPageChange,
+        manualPagination: data.manualPagination,
+        pageCount: data.pageCount,
+        canNextPage: data.canNextPage,
+        canPreviousPage: data.canPreviousPage,
+        disableSort: data.disableSort
       }
     );
   }
@@ -44227,7 +44299,7 @@ var Table = ({
           error,
           rowCount: rowCount ?? data2?.rowCount ?? data2?.rows?.length ?? 0,
           rowCountIsLoading,
-          onPageChange: (page2) => onPageChange(page2),
+          onPageChange: (page) => onPageChange(page),
           onSortChange: (sort) => onSortChange(sort),
           hideName: true
         }
@@ -59620,6 +59692,19 @@ function createUseFormPivotTableDataRefreshQueryKey(input) {
     input.clientHash
   ];
 }
+function createUseFormTablePageQueryKey(input) {
+  return [
+    "useReport",
+    "table-page",
+    input.reportId,
+    input.pageIndex,
+    input.pageSize,
+    input.sortHash,
+    input.reportBuilderStateHash,
+    input.tenantHash,
+    input.clientHash
+  ];
+}
 function createUseFormReportNameQueryKey(input) {
   return [
     "useReport",
@@ -59632,6 +59717,51 @@ function createUseFormQueryFn(loader) {
   return async () => loader();
 }
 
+// src/hooks/useForm.pagination.ts
+var DEFAULT_PAGE_INDEX = 0;
+var DEFAULT_PAGE_SIZE = 10;
+var DEFAULT_USE_REPORT_ROWS_PER_REQUEST = DEFAULT_PAGE_SIZE * 10;
+function getDefaultPaginationState() {
+  return { pageIndex: DEFAULT_PAGE_INDEX, pageSize: DEFAULT_PAGE_SIZE };
+}
+function functionalUpdate(updater, input) {
+  return typeof updater === "function" ? updater(input) : updater;
+}
+function clampPageIndex(pageIndex, pageCount) {
+  const maxPageIndex = pageCount === -1 ? Number.MAX_SAFE_INTEGER : Math.max(0, pageCount - 1);
+  return Math.max(0, Math.min(pageIndex, maxPageIndex));
+}
+function paginationStateAfterPageSizeChange(old, nextPageSizeRaw) {
+  const pageSize = Math.max(1, nextPageSizeRaw);
+  const topRowIndex = old.pageSize * old.pageIndex;
+  const pageIndex = Math.floor(topRowIndex / pageSize);
+  return { pageIndex, pageSize };
+}
+function getPageCountFromRowCount(rowCount, pageSize) {
+  if (rowCount === void 0) {
+    return -1;
+  }
+  return Math.ceil(Math.max(0, rowCount) / Math.max(1, pageSize));
+}
+function getCanPreviousPageFromState(pageIndex) {
+  return pageIndex > 0;
+}
+function getCanNextPageFromState(pageIndex, pageCount) {
+  if (pageCount === -1) {
+    return true;
+  }
+  if (pageCount === 0) {
+    return false;
+  }
+  return pageIndex < pageCount - 1;
+}
+function getPageOptionsFromPageCount(pageCount) {
+  if (!pageCount || pageCount <= 0) {
+    return [];
+  }
+  return Array.from({ length: pageCount }, (_, index) => index);
+}
+
 // src/hooks/useForm.tsx
 var INTERNAL_PIVOT_ROW_FIELDS = /* @__PURE__ */ new Set(["__quillRawDate"]);
 var LEGACY_SINGLE_Y_AXIS_COLUMN_PIVOT_REPORT_IDS = /* @__PURE__ */ new Set([
@@ -60527,6 +60657,17 @@ function chartDetailRowsMissingPivotRowBucket(chart) {
   const v = first[rowField];
   return v === void 0 || v === null;
 }
+function shouldUsePivotRowFieldAsXAxis(chartType, pivotRowField, rowColumnFormat) {
+  const rowField = String(pivotRowField ?? "").trim();
+  if (!rowField) return false;
+  const isMetricOrGauge = ["metric", "gauge"].includes(
+    String(chartType ?? "").toLowerCase()
+  );
+  if (isMetricOrGauge && !NUMBER_FORMAT_TYPES.includes(String(rowColumnFormat ?? "").trim())) {
+    return false;
+  }
+  return true;
+}
 function normalizePivotChartForDisplay(chart) {
   const swapPivotRowsForChartRows = Boolean(chart?.pivot) && Array.isArray(chart?.pivotRows) && chart.pivotRows.length > 0;
   const syntheticAggregationOnlyRows = chart && !swapPivotRowsForChartRows ? buildSyntheticAggregationOnlyDisplayRows(chart) : null;
@@ -60555,8 +60696,19 @@ function normalizePivotChartForDisplay(chart) {
     stillUsingDetailRows: Boolean(config.pivot) && !swapPivotRowsForChartRows && Array.isArray(config.rows) && config.rows.length > 0
   });
   if (!config.pivot) return config;
-  const resolvedXAxisField = config.pivot?.rowField || config.xAxisField;
+  const pivotRowFieldEarly = String(config.pivot?.rowField ?? "").trim();
+  const rowColumn = (config.pivotColumns ?? config.columns ?? []).find(
+    (col) => String(col.field ?? "").trim() === pivotRowFieldEarly
+  );
+  const resolvedXAxisField = shouldUsePivotRowFieldAsXAxis(
+    config.chartType,
+    pivotRowFieldEarly,
+    String(rowColumn?.format ?? "")
+  ) ? pivotRowFieldEarly : config.xAxisField;
   const withResolvedXAxis = resolvedXAxisField && resolvedXAxisField !== config.xAxisField ? { ...config, xAxisField: resolvedXAxisField } : config;
+  const isMetricOrGauge = ["metric", "gauge"].includes(
+    String(withResolvedXAxis.chartType ?? "").toLowerCase()
+  );
   const aggregations = getPivotAggregations(withResolvedXAxis);
   const hasMultipleAggregations = aggregations.length > 1;
   const yAxisFallbackFormat = withResolvedXAxis.yAxisFields?.[0]?.format ?? withResolvedXAxis.xAxisFormat ?? "whole_number";
@@ -60669,7 +60821,7 @@ function normalizePivotChartForDisplay(chart) {
   const normalizedPivotColumns = pivotColumnFields.length > 0 ? pivotColumnFields.map((field) => {
     const knownColumn = knownColumnsByField.get(field);
     const yAxis = yAxisFields.find((axis) => axis.field === field);
-    const format9 = yAxis?.format ?? knownColumn?.format ?? (field === withResolvedXAxis.pivot?.rowField ? withResolvedXAxis.xAxisFormat ?? "string" : yAxisFallbackFormat);
+    const format9 = yAxis?.format ?? knownColumn?.format ?? (field === withResolvedXAxis.pivot?.rowField ? isMetricOrGauge ? "string" : withResolvedXAxis.xAxisFormat ?? "string" : yAxisFallbackFormat);
     return {
       field,
       label: yAxis?.label ?? knownColumn?.label ?? field,
@@ -60677,9 +60829,10 @@ function normalizePivotChartForDisplay(chart) {
     };
   }) : withResolvedXAxis.columns ?? [];
   const isPivotTableChart = String(withResolvedXAxis.chartType ?? "").toLowerCase() === "table" && Boolean(withResolvedXAxis.pivot);
+  const pivotTableSlotColumns = isPivotTableChart && Array.isArray(withResolvedXAxis.pivotColumns) && withResolvedXAxis.pivotColumns.length > 0 ? withResolvedXAxis.pivotColumns : withResolvedXAxis.columns;
   const pivotTableDisplayColumns = isPivotTableChart && pivotColumnFields.length > 0 ? normalizedPivotColumns.map((col) => {
     const slotCol = getPivotTableSlotReportColumn(
-      withResolvedXAxis.columns,
+      pivotTableSlotColumns,
       aggregations,
       withResolvedXAxis.pivot?.rowField,
       col.field
@@ -60694,9 +60847,6 @@ function normalizePivotChartForDisplay(chart) {
     }
     return next;
   }) : normalizedPivotColumns;
-  const isMetricOrGauge = ["metric", "gauge"].includes(
-    String(withResolvedXAxis.chartType ?? "").toLowerCase()
-  );
   const hasXAxisValueInPivotRows = Boolean(firstPivotRow) && Boolean(withResolvedXAxis.xAxisField) && Object.prototype.hasOwnProperty.call(
     firstPivotRow,
     String(withResolvedXAxis.xAxisField)
@@ -62166,7 +62316,12 @@ async function loadViaInMemoryEngines({
   draftSessionId
 }) {
   const requestedTask = allowReportTaskBootstrap ? "report" : "item";
-  const additionalProcessing = allowReportTaskBootstrap ? { page: { ...DEFAULT_PAGINATION, rowsPerRequest: 20 } } : {};
+  const additionalProcessing = allowReportTaskBootstrap ? {
+    page: {
+      ...DEFAULT_PAGINATION,
+      rowsPerRequest: DEFAULT_USE_REPORT_ROWS_PER_REQUEST
+    }
+  } : {};
   const { report, error } = await fetchReport({
     reportId,
     client,
@@ -62590,7 +62745,9 @@ async function loadViaReportBuilderState({
   customFields,
   dashboardName,
   report,
-  draftSessionId
+  draftSessionId,
+  pagination,
+  paginationSort
 }) {
   const baseReport = {
     ...EMPTY_INTERNAL_REPORT,
@@ -62611,8 +62768,18 @@ async function loadViaReportBuilderState({
     // refresh queries are not blocked on `report-builder-unique-values`.
     skipUniqueValues: true,
     previousRelevant: previousRelevantWhenSkippingInlineUniqueFetch(report),
-    processing: {
-      page: { ...DEFAULT_PAGINATION, rowsPerRequest: 20 }
+    processing: pagination ? {
+      page: {
+        page: pagination.pageIndex,
+        rowsPerPage: pagination.pageSize,
+        rowsPerRequest: pagination.pageSize
+      },
+      ...paginationSort?.field ? { sort: paginationSort } : {}
+    } : {
+      page: {
+        ...DEFAULT_PAGINATION,
+        rowsPerRequest: DEFAULT_USE_REPORT_ROWS_PER_REQUEST
+      }
     },
     dashboardName,
     getToken,
@@ -62809,6 +62976,98 @@ function useReport(reportIdArg, options = {}) {
   const destinationDashboardName = String(
     options.destinationDashboardName ?? ""
   ).trim();
+  const controlledPagination = options.state?.pagination;
+  const initialPaginationRef = (0, import_react62.useRef)({
+    ...getDefaultPaginationState(),
+    ...options.initialState?.pagination ?? {}
+  });
+  const [internalPagination, setInternalPagination] = (0, import_react62.useState)(
+    initialPaginationRef.current
+  );
+  const [paginationInteracted, setPaginationInteracted] = (0, import_react62.useState)(
+    () => Boolean(
+      options.state?.pagination || options.initialState?.pagination || options.onPaginationChange
+    )
+  );
+  const pagination = controlledPagination ?? internalPagination;
+  const paginationActive = paginationInteracted || Boolean(controlledPagination);
+  const paginationRef = (0, import_react62.useRef)(pagination);
+  paginationRef.current = pagination;
+  const onPaginationChangeRef = (0, import_react62.useRef)(options.onPaginationChange);
+  onPaginationChangeRef.current = options.onPaginationChange;
+  const controlledPaginationRef = (0, import_react62.useRef)(Boolean(controlledPagination));
+  controlledPaginationRef.current = Boolean(controlledPagination);
+  const autoResetPageIndexRef = (0, import_react62.useRef)(true);
+  autoResetPageIndexRef.current = options.autoResetPageIndex ?? true;
+  const paginationPageCountRef = (0, import_react62.useRef)(-1);
+  const applyPaginationUpdate = (0, import_react62.useCallback)(
+    (updater, { activate = true } = {}) => {
+      if (activate) {
+        setPaginationInteracted(true);
+      }
+      onPaginationChangeRef.current?.(updater);
+      if (!controlledPaginationRef.current) {
+        setInternalPagination((old) => functionalUpdate(updater, old));
+      }
+    },
+    []
+  );
+  const setPagination = (0, import_react62.useCallback)(
+    (updater) => applyPaginationUpdate(updater),
+    [applyPaginationUpdate]
+  );
+  const setPageIndex = (0, import_react62.useCallback)(
+    (updater) => applyPaginationUpdate((old) => ({
+      ...old,
+      pageIndex: clampPageIndex(
+        functionalUpdate(updater, old.pageIndex),
+        paginationPageCountRef.current
+      )
+    })),
+    [applyPaginationUpdate]
+  );
+  const setPageSize = (0, import_react62.useCallback)(
+    (updater) => applyPaginationUpdate(
+      (old) => paginationStateAfterPageSizeChange(
+        old,
+        functionalUpdate(updater, old.pageSize)
+      )
+    ),
+    [applyPaginationUpdate]
+  );
+  const resetPagination = (0, import_react62.useCallback)(
+    (defaultState) => applyPaginationUpdate(
+      defaultState ? getDefaultPaginationState() : initialPaginationRef.current
+    ),
+    [applyPaginationUpdate]
+  );
+  const resetPageIndex = (0, import_react62.useCallback)(
+    (defaultState) => {
+      const target = defaultState ? 0 : initialPaginationRef.current.pageIndex;
+      setPageIndex(target);
+    },
+    [setPageIndex]
+  );
+  const resetPageSize = (0, import_react62.useCallback)(
+    (defaultState) => {
+      const target = defaultState ? getDefaultPaginationState().pageSize : initialPaginationRef.current.pageSize;
+      setPageSize(target);
+    },
+    [setPageSize]
+  );
+  const nextPage = (0, import_react62.useCallback)(
+    () => setPageIndex((old) => old + 1),
+    [setPageIndex]
+  );
+  const previousPage = (0, import_react62.useCallback)(
+    () => setPageIndex((old) => old - 1),
+    [setPageIndex]
+  );
+  const firstPage = (0, import_react62.useCallback)(() => setPageIndex(0), [setPageIndex]);
+  const lastPage = (0, import_react62.useCallback)(
+    () => setPageIndex(paginationPageCountRef.current - 1),
+    [setPageIndex]
+  );
   const chartPivotHydratedFromSourceRef = (0, import_react62.useRef)(false);
   const lastPivotHydrateCompletedSourceIdRef = (0, import_react62.useRef)(null);
   const groupRowsBySetViaSetReportRef = (0, import_react62.useRef)(false);
@@ -64590,7 +64849,10 @@ function useReport(reportIdArg, options = {}) {
           direction: regularSort.sortDirection
         }
       ] : [],
-      limit: pivotState ? null : { value: 30 }
+      // The user's limit caps the query (SQL LIMIT inside the base CTE); the
+      // server row count respects it, so pagination sees `min(total, limit)`.
+      // No hardcoded cap — page fetches window rows via additionalProcessing.
+      limit: pivotState ? null : limit?.value ? { value: limit.value } : null
     };
   }, [
     effectiveReportBuilderColumns,
@@ -64607,6 +64869,23 @@ function useReport(reportIdArg, options = {}) {
     () => stableSerializeForQueryKey(effectiveReportBuilderState),
     [effectiveReportBuilderState]
   );
+  const prevPaginationResetStateHashRef = (0, import_react62.useRef)(null);
+  (0, import_react62.useEffect)(() => {
+    const prevHash = prevPaginationResetStateHashRef.current;
+    prevPaginationResetStateHashRef.current = effectiveReportBuilderStateHash;
+    if (prevHash === null || prevHash === effectiveReportBuilderStateHash) {
+      return;
+    }
+    if (!autoResetPageIndexRef.current) {
+      return;
+    }
+    if (paginationRef.current.pageIndex === 0) {
+      return;
+    }
+    applyPaginationUpdate((old) => ({ ...old, pageIndex: 0 }), {
+      activate: false
+    });
+  }, [applyPaginationUpdate, effectiveReportBuilderStateHash]);
   const pivotTableDataReportBuilderState = (0, import_react62.useMemo)(() => {
     if (!effectiveReportBuilderState?.pivot) {
       return void 0;
@@ -65276,6 +65555,93 @@ function useReport(reportIdArg, options = {}) {
     enabled: pivotTableDataRefreshQueryEnabled,
     retry: false
   });
+  const tablePageReportBuilderState = pivotTableDataReportBuilderState ?? effectiveReportBuilderState;
+  const tablePageReportBuilderStateHash = pivotTableDataReportBuilderState ? pivotTableDataReportBuilderStateHash : effectiveReportBuilderStateHash;
+  const tablePaginationSort = (0, import_react62.useMemo)(() => {
+    const sortEntry = tablePageReportBuilderState?.sort?.[0];
+    const field = String(sortEntry?.field ?? "").trim();
+    if (!field || !/^[A-Za-z_][A-Za-z0-9_]*$/.test(field)) {
+      return void 0;
+    }
+    const isOutputColumn = (tablePageReportBuilderState?.columns ?? []).some(
+      (column) => String(column?.field ?? "").trim() === field
+    );
+    if (!isOutputColumn) {
+      return void 0;
+    }
+    const direction = String(sortEntry?.direction ?? "ASC").toUpperCase() === "DESC" ? "DESC" : "ASC";
+    return { field, direction };
+  }, [tablePageReportBuilderState]);
+  const baseWindowRowsLength = Array.isArray(sourceReport?.rows) ? sourceReport.rows.length : 0;
+  const sourceReportRowCount = typeof sourceReport?.rowCount === "number" ? sourceReport.rowCount : void 0;
+  const trustedSourceRowCount = sourceReportRowCount !== void 0 && (sourceReportRowCount > 0 || baseWindowRowsLength === 0) && sourceReportRowCount >= baseWindowRowsLength ? sourceReportRowCount : void 0;
+  const paginationRangeStart = pagination.pageIndex * pagination.pageSize;
+  const paginationRangeEnd = paginationRangeStart + pagination.pageSize;
+  const pageWithinBaseWindow = paginationRangeEnd <= baseWindowRowsLength || trustedSourceRowCount !== void 0 && trustedSourceRowCount <= baseWindowRowsLength;
+  const tablePageQueryEnabled = paginationActive && !pageWithinBaseWindow && !reportOverride && !useInMemoryEngines && Boolean(client) && Boolean(sourceReport) && Boolean(tablePageReportBuilderState) && sourceReportMatchesEffectiveReportId && !pendingPivotRefresh;
+  const tablePageQuery = (0, import_react_query2.useQuery)({
+    queryKey: createUseFormTablePageQueryKey({
+      reportId: effectiveReportId,
+      pageIndex: pagination.pageIndex,
+      pageSize: pagination.pageSize,
+      sortHash: stableSerializeForQueryKey(tablePaginationSort ?? null),
+      reportBuilderStateHash: tablePageReportBuilderStateHash,
+      tenantHash,
+      clientHash
+    }),
+    queryFn: createUseFormQueryFn(async () => {
+      if (!tablePageReportBuilderState || !sourceReport || !client) {
+        return { report: null, error: "Missing table page prerequisites" };
+      }
+      return loadViaReportBuilderState({
+        reportId: effectiveReportId,
+        reportBuilderState: tablePageReportBuilderState,
+        client,
+        getToken,
+        tenants,
+        schema: schemaForReportBuilderState,
+        customFields: schemaData.customFields,
+        dashboardName: resolvedSourceDashboardName,
+        report: sourceReport,
+        draftSessionId: draftSessionId || void 0,
+        pagination: {
+          pageIndex: pagination.pageIndex,
+          pageSize: pagination.pageSize
+        },
+        paginationSort: tablePaginationSort
+      });
+    }),
+    enabled: tablePageQueryEnabled,
+    retry: false,
+    // Keep showing the previous page's rows while the next page loads.
+    placeholderData: import_react_query2.keepPreviousData
+  });
+  const tablePageRows = tablePageQueryEnabled && !tablePageQuery.data?.error && Array.isArray(tablePageQuery.data?.report?.rows) ? tablePageQuery.data.report.rows : void 0;
+  const tablePageRowCount = tablePageQueryEnabled && typeof tablePageQuery.data?.report?.rowCount === "number" && tablePageQuery.data.report.rowCount > 0 ? tablePageQuery.data.report.rowCount : void 0;
+  const tablePageFetching = tablePageQueryEnabled && tablePageQuery.isFetching;
+  const paginationTotalRowCount = (0, import_react62.useMemo)(() => {
+    if (tablePageRowCount !== void 0) {
+      return Math.max(tablePageRowCount, baseWindowRowsLength);
+    }
+    if (trustedSourceRowCount !== void 0) {
+      return trustedSourceRowCount;
+    }
+    if (useInMemoryEngines || Boolean(reportOverride)) {
+      return baseWindowRowsLength;
+    }
+    return void 0;
+  }, [
+    tablePageRowCount,
+    trustedSourceRowCount,
+    baseWindowRowsLength,
+    useInMemoryEngines,
+    reportOverride
+  ]);
+  const paginationPageCount = getPageCountFromRowCount(
+    paginationTotalRowCount,
+    pagination.pageSize
+  );
+  paginationPageCountRef.current = paginationPageCount;
   (0, import_react62.useEffect)(() => {
     if (!pivotTableDataRefreshQueryEnabled) return;
     if (pivotTableDataRefreshQuery.status !== "success" && pivotTableDataRefreshQuery.status !== "error") {
@@ -65577,11 +65943,19 @@ function useReport(reportIdArg, options = {}) {
   ]);
   const resolvedXAxisField = (0, import_react62.useMemo)(() => {
     if (!chartAxesBaseChart) return "";
+    const chartType2 = String(chartAxesBaseChart.chartType ?? "").toLowerCase();
     const pivotRowField = String(
       chartAxesBaseChart.pivot?.rowField ?? ""
     ).trim();
     if (pivotRowField) {
-      return pivotRowField;
+      const rowColumn = (chartAxesBaseChart.pivotColumns ?? chartAxesBaseChart.columns ?? []).find((col) => String(col.field ?? "").trim() === pivotRowField);
+      if (shouldUsePivotRowFieldAsXAxis(
+        chartType2,
+        pivotRowField,
+        String(rowColumn?.format ?? "")
+      )) {
+        return pivotRowField;
+      }
     }
     const requestedXAxisField = String(chartAxisEdits.xAxisField ?? "").trim();
     if (requestedXAxisField && chartAxisOptionByField.has(requestedXAxisField)) {
@@ -65904,7 +66278,8 @@ function useReport(reportIdArg, options = {}) {
     ]
   );
   const table = (0, import_react62.useMemo)(() => {
-    const rawRows = Array.isArray(sourceReport?.rows) ? sourceReport.rows : [];
+    const baseWindowRows = Array.isArray(sourceReport?.rows) ? sourceReport.rows : [];
+    const rawRows = !paginationActive ? baseWindowRows : tablePageRows ?? baseWindowRows.slice(paginationRangeStart, paginationRangeEnd);
     const { columns: mergedFromReport } = mergeDisplayAndSourceForTableFormats({
       effectiveReportBuilderTableNames,
       scopedSchemaColumns,
@@ -65922,8 +66297,24 @@ function useReport(reportIdArg, options = {}) {
         format: pivotRowTableUsesAxisFormat ? String(resolvedXAxisFormat ?? column.format) : column.format
       } : column
     ) : mergedFromReport;
+    const pivotLabeledColumns = String(chartType ?? "").toLowerCase() === "table" && sourceReport?.pivot ? mergePivotTableDisplayColumnLabelsFromYAxis({
+      columns: columns2,
+      yAxisFields: resolvedYAxisFieldsForDisplay,
+      pivotRowField: String(sourceReport.pivot.rowField ?? ""),
+      xAxisLabel: resolvedXAxisLabel
+    }) ?? columns2 : columns2;
+    const tableColumnsWithPivotDisplayLabels = pivotLabeledColumns.map(
+      (column) => ({
+        label: String(column.label ?? "").trim() || String(column.field ?? ""),
+        field: String(column.field ?? "").trim(),
+        format: String(column.format ?? "string").trim() || "string"
+      })
+    );
     const formatByField = new Map(
-      columns2.map((column) => [column.field, column.format])
+      tableColumnsWithPivotDisplayLabels.map((column) => [
+        column.field,
+        column.format
+      ])
     );
     const isCacheableValue = (value) => {
       return value === null || value === void 0 || typeof value === "string" || typeof value === "number" || typeof value === "boolean" || typeof value === "bigint";
@@ -65951,20 +66342,37 @@ function useReport(reportIdArg, options = {}) {
       cache.set(cacheKey, formatted);
       return formatted;
     };
-    const formattedRows = columns2.length === 0 ? rawRows : rawRows.map((rawRow) => {
+    const formattedRows = tableColumnsWithPivotDisplayLabels.length === 0 ? rawRows : rawRows.map((rawRow) => {
       const out = { ...rawRow };
-      for (const col of columns2) {
+      for (const col of tableColumnsWithPivotDisplayLabels) {
         out[col.field] = formatCellValue(col.field, rawRow[col.field]);
       }
       return out;
     });
     const getFormattedCellValue = (row, field) => String(row?.[field] ?? "");
     return {
-      columns: columns2,
+      columns: tableColumnsWithPivotDisplayLabels,
       rows: formattedRows,
       getColumnFormat,
       formatCellValue,
-      getFormattedCellValue
+      getFormattedCellValue,
+      // TanStack Table–style pagination API.
+      pagination,
+      setPagination,
+      setPageIndex,
+      setPageSize,
+      resetPagination,
+      resetPageIndex,
+      resetPageSize,
+      nextPage,
+      previousPage,
+      firstPage,
+      lastPage,
+      getCanNextPage: () => getCanNextPageFromState(pagination.pageIndex, paginationPageCount),
+      getCanPreviousPage: () => getCanPreviousPageFromState(pagination.pageIndex),
+      getPageCount: () => paginationPageCount,
+      getRowCount: () => paginationTotalRowCount ?? baseWindowRows.length,
+      getPageOptions: () => getPageOptionsFromPageCount(paginationPageCount)
     };
   }, [
     chartAxisEdits.xAxisFormat,
@@ -65974,8 +66382,26 @@ function useReport(reportIdArg, options = {}) {
     resolvedXAxisField,
     resolvedXAxisFormat,
     resolvedXAxisLabel,
+    resolvedYAxisFieldsForDisplay,
     scopedSchemaColumns,
-    sourceReport
+    sourceReport,
+    pagination,
+    paginationActive,
+    paginationPageCount,
+    paginationRangeEnd,
+    paginationRangeStart,
+    paginationTotalRowCount,
+    tablePageRows,
+    setPagination,
+    setPageIndex,
+    setPageSize,
+    resetPagination,
+    resetPageIndex,
+    resetPageSize,
+    nextPage,
+    previousPage,
+    firstPage,
+    lastPage
   ]);
   const {
     columnsOptions: tableFormattingColumnOptions,
@@ -66287,7 +66713,7 @@ function useReport(reportIdArg, options = {}) {
   const initialLoadInProgress = !reportOverride && Boolean(effectiveReportId) && (!client || initialLoadQuery.isPending || initialLoadQuery.isFetching);
   const filterUniqueValuesLoading = filterUniqueValuesEnabled && (filterUniqueValuesQuery.isPending || filterUniqueValuesQuery.isFetching);
   const chartLoading = initialLoadInProgress || (Boolean(nextPivot) ? pivotRefreshQuery.isFetching : tableRefreshQuery.isFetching);
-  const tableLoading = initialLoadInProgress || (Boolean(nextPivot) ? pivotTableDataRefreshQuery.isFetching : tableRefreshQuery.isFetching);
+  const tableLoading = initialLoadInProgress || tablePageFetching || (Boolean(nextPivot) ? pivotTableDataRefreshQuery.isFetching : tableRefreshQuery.isFetching);
   const loading = chartLoading || tableLoading;
   const buildSetReportColumnsFromIds = (nextColumnIds, settingsById) => {
     const normalizedNextIds = nextColumnIds.map((columnId) => String(columnId ?? "").trim()).filter(Boolean);
@@ -68040,6 +68466,23 @@ var styles2 = {
     boxSizing: "border-box"
   }
 };
+function getTablePaginationBindings(table) {
+  if (!table?.pagination || typeof table.setPageIndex !== "function") {
+    return {};
+  }
+  const { pageIndex, pageSize } = table.pagination;
+  return {
+    manualPagination: true,
+    currentPage: pageIndex,
+    rowsPerPage: pageSize,
+    rowCount: table.getRowCount?.() ?? table.rows?.length ?? 0,
+    pageCount: table.getPageCount?.(),
+    canNextPage: table.getCanNextPage?.(),
+    canPreviousPage: table.getCanPreviousPage?.(),
+    onPageChange: (page) => table.setPageIndex?.(page),
+    disableSort: true
+  };
+}
 function chartTypeFromConfig(chart) {
   return String(chart?.chartType ?? "").trim().toLowerCase();
 }
@@ -68090,6 +68533,7 @@ function ReportDetail({
     borderBottom: "none"
   } : void 0;
   const trimmedTitle = String(reportTitle ?? "").trim();
+  const tablePagination = getTablePaginationBindings(table);
   return /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(
     "div",
     {
@@ -68121,6 +68565,7 @@ function ReportDetail({
                 columns: Array.isArray(table?.columns) ? table.columns : [],
                 rows: Array.isArray(table?.rows) ? table.rows : [],
                 isLoading: chartLoading || tableLoading,
+                rowCountIsLoading: tableLoading,
                 hideCSVDownloadButton: true,
                 containerStyle: {
                   width: "100%",
@@ -68129,7 +68574,8 @@ function ReportDetail({
                   padding: 0,
                   margin: 0
                 },
-                ...tableChartSlotBorders
+                ...tableChartSlotBorders,
+                ...tablePagination
               }
             ) : /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
               ChartDisplay,
@@ -68169,9 +68615,11 @@ function ReportDetail({
                 columns: Array.isArray(table?.columns) ? table.columns : [],
                 rows: Array.isArray(table?.rows) ? table.rows : [],
                 isLoading: tableLoading,
+                rowCountIsLoading: tableLoading,
                 hideCSVDownloadButton: true,
                 containerStyle: quillTableFramelessStyle,
-                ...quillTableFramelessBorders
+                ...quillTableFramelessBorders,
+                ...tablePagination
               }
             )
           }
@@ -69067,6 +69515,8 @@ init_constants();
   ChartDisplay,
   ChartEditor,
   Chat,
+  DEFAULT_PAGE_SIZE,
+  DEFAULT_USE_REPORT_ROWS_PER_REQUEST,
   Dashboard,
   DashboardFilterType,
   DashboardLegacy,