@adminforth/dashboard 1.0.0 → 1.1.0

package/dist/custom/queries/useDashboardConfig.d.ts

@@ -23,6 +23,27 @@ export declare function useDashboardConfig(slug: Ref<string>): {
                 maxWidth?: number | null | undefined;
                 order: number;
                 target: import("../model/dashboard.types.js").DashboardWidgetTarget;
+                dataSource?: {
+                    type: "resource";
+                    resourceId: string;
+                    columns?: string[] | undefined;
+                    sort?: unknown;
+                    filters?: unknown;
+                } | {
+                    type: "aggregate";
+                    resourceId: string;
+                    aggregations: Record<string, import("../model/dashboard.types.js").AggregationRule>;
+                    groupBy?: {
+                        type: "field";
+                        field: string;
+                    } | {
+                        type: "date_trunc";
+                        field: string;
+                        truncation: "day" | "week" | "month" | "year";
+                        timezone?: string | undefined;
+                    } | undefined;
+                    filters?: unknown;
+                } | undefined;
                 chart?: {
                     type: import("../widgets/chart/chart.types.js").ChartWidgetType;
                     title?: string | undefined;
@@ -75,6 +96,27 @@ export declare function useDashboardConfig(slug: Ref<string>): {
                 maxWidth?: number | null | undefined;
                 order: number;
                 target: import("../model/dashboard.types.js").DashboardWidgetTarget;
+                dataSource?: {
+                    type: "resource";
+                    resourceId: string;
+                    columns?: string[] | undefined;
+                    sort?: unknown;
+                    filters?: unknown;
+                } | {
+                    type: "aggregate";
+                    resourceId: string;
+                    aggregations: Record<string, import("../model/dashboard.types.js").AggregationRule>;
+                    groupBy?: {
+                        type: "field";
+                        field: string;
+                    } | {
+                        type: "date_trunc";
+                        field: string;
+                        truncation: "day" | "week" | "month" | "year";
+                        timezone?: string | undefined;
+                    } | undefined;
+                    filters?: unknown;
+                } | undefined;
                 chart?: {
                     type: import("../widgets/chart/chart.types.js").ChartWidgetType;
                     title?: string | undefined;

package/dist/custom/queries/useWidgetData.d.ts

@@ -1,5 +1,6 @@
 import { type Ref } from 'vue';
-export declare function useWidgetData(slug: Ref<string>, widgetId: Ref<string>): {
+import { type DashboardWidgetDataRequest } from '../api/dashboardApi.js';
+export declare function useWidgetData(slug: Ref<string>, widgetId: Ref<string>, request?: Ref<DashboardWidgetDataRequest>): {
     data: Ref<{
         widget: {
             id: string;
@@ -12,6 +13,27 @@ export declare function useWidgetData(slug: Ref<string>, widgetId: Ref<string>):
             maxWidth?: number | null | undefined;
             order: number;
             target: import("../model/dashboard.types.js").DashboardWidgetTarget;
+            dataSource?: {
+                type: "resource";
+                resourceId: string;
+                columns?: string[] | undefined;
+                sort?: unknown;
+                filters?: unknown;
+            } | {
+                type: "aggregate";
+                resourceId: string;
+                aggregations: Record<string, import("../model/dashboard.types.js").AggregationRule>;
+                groupBy?: {
+                    type: "field";
+                    field: string;
+                } | {
+                    type: "date_trunc";
+                    field: string;
+                    truncation: "day" | "week" | "month" | "year";
+                    timezone?: string | undefined;
+                } | undefined;
+                filters?: unknown;
+            } | undefined;
             chart?: {
                 type: import("../widgets/chart/chart.types.js").ChartWidgetType;
                 title?: string | undefined;
@@ -53,6 +75,27 @@ export declare function useWidgetData(slug: Ref<string>, widgetId: Ref<string>):
             maxWidth?: number | null | undefined;
             order: number;
             target: import("../model/dashboard.types.js").DashboardWidgetTarget;
+            dataSource?: {
+                type: "resource";
+                resourceId: string;
+                columns?: string[] | undefined;
+                sort?: unknown;
+                filters?: unknown;
+            } | {
+                type: "aggregate";
+                resourceId: string;
+                aggregations: Record<string, import("../model/dashboard.types.js").AggregationRule>;
+                groupBy?: {
+                    type: "field";
+                    field: string;
+                } | {
+                    type: "date_trunc";
+                    field: string;
+                    truncation: "day" | "week" | "month" | "year";
+                    timezone?: string | undefined;
+                } | undefined;
+                filters?: unknown;
+            } | undefined;
             chart?: {
                 type: import("../widgets/chart/chart.types.js").ChartWidgetType;
                 title?: string | undefined;

package/dist/custom/queries/useWidgetData.js

@@ -12,7 +12,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useWidgetData = useWidgetData;
 const vue_1 = require("vue");
 const dashboardApi_js_1 = require("../api/dashboardApi.js");
-function useWidgetData(slug, widgetId) {
+function useWidgetData(slug, widgetId, request) {
     const data = (0, vue_1.ref)(null);
     const isLoading = (0, vue_1.ref)(false);
     const isFetching = (0, vue_1.ref)(false);
@@ -29,7 +29,7 @@ function useWidgetData(slug, widgetId) {
                 isLoading.value = true;
             }
             try {
-                const response = yield dashboardApi_js_1.dashboardApi.getDashboardWidgetData(slug.value, widgetId.value);
+                const response = yield dashboardApi_js_1.dashboardApi.getDashboardWidgetData(slug.value, widgetId.value, request === null || request === void 0 ? void 0 : request.value);
                 data.value = response;
                 error.value = null;
                 return response;
@@ -44,7 +44,7 @@ function useWidgetData(slug, widgetId) {
             }
         });
     }
-    (0, vue_1.watch)([slug, widgetId], () => {
+    (0, vue_1.watch)(request ? [slug, widgetId, request] : [slug, widgetId], () => {
         void refetch();
     }, { immediate: true });
     return {

package/dist/custom/queries/useWidgetData.ts

@@ -1,7 +1,11 @@
 import { ref, watch, type Ref } from 'vue'
-import { dashboardApi } from '../api/dashboardApi.js'
+import { dashboardApi, type DashboardWidgetDataRequest } from '../api/dashboardApi.js'
 
-export function useWidgetData(slug: Ref<string>, widgetId: Ref<string>) {
+export function useWidgetData(
+  slug: Ref<string>,
+  widgetId: Ref<string>,
+  request?: Ref<DashboardWidgetDataRequest>,
+) {
   const data = ref<Awaited<ReturnType<typeof dashboardApi.getDashboardWidgetData>> | null>(null)
   const isLoading = ref(false)
   const isFetching = ref(false)
@@ -20,7 +24,7 @@ export function useWidgetData(slug: Ref<string>, widgetId: Ref<string>) {
     }
 
     try {
-      const response = await dashboardApi.getDashboardWidgetData(slug.value, widgetId.value)
+      const response = await dashboardApi.getDashboardWidgetData(slug.value, widgetId.value, request?.value)
       data.value = response
       error.value = null
       return response
@@ -34,7 +38,7 @@ export function useWidgetData(slug: Ref<string>, widgetId: Ref<string>) {
   }
 
   watch(
-    [slug, widgetId],
+    request ? [slug, widgetId, request] : [slug, widgetId],
     () => {
       void refetch()
     },

package/dist/custom/runtime/WidgetShell.vue

@@ -135,11 +135,11 @@ const widgetLayoutVars = computed<CSSProperties>(() => {
   const fixedWidth = formatWidth(props.layout?.width)
 
   return {
-    '--widget-basis': fixedWidth ?? basis,
-    '--widget-min-width': fixedWidth ?? formatWidth(props.layout?.minWidth) ?? basis,
+    '--widget-basis': clampToContainerWidth(fixedWidth ?? basis),
+    '--widget-min-width': clampToContainerWidth(fixedWidth ?? formatWidth(props.layout?.minWidth) ?? basis),
     '--widget-max-width': props.layout?.maxWidth === null
-      ? 'none'
-      : fixedWidth ?? formatWidth(props.layout?.maxWidth) ?? 'none',
+      ? '100%'
+      : clampToContainerWidth(fixedWidth ?? formatWidth(props.layout?.maxWidth) ?? '100%'),
     height: formatWidth(props.layout?.height ?? DEFAULT_WIDGET_HEIGHT),
   }
 })
@@ -149,4 +149,8 @@ function formatWidth(value: number | undefined) {
     return `${value}px`
   }
 }
+
+function clampToContainerWidth(value: string) {
+  return `min(${value}, 100%)`
+}
 </script>

package/dist/custom/widgets/chart/chart.utils.d.ts

@@ -1,5 +1,5 @@
 export declare const CHART_COLORS: string[];
 export declare function toFiniteNumber(value: unknown): number;
-export declare function formatChartValue(value: number): string;
+export declare function formatChartValue(value: number, options?: Intl.NumberFormatOptions): string;
 export declare function formatChartLabel(value: unknown): string;
 export declare function formatChartAxisLabel(value: unknown, maxLength?: number): string;

package/dist/custom/widgets/chart/chart.utils.js

@@ -19,8 +19,8 @@ function toFiniteNumber(value) {
     const numberValue = typeof value === 'number' ? value : Number(value);
     return Number.isFinite(numberValue) ? numberValue : 0;
 }
-function formatChartValue(value) {
-    return new Intl.NumberFormat().format(value);
+function formatChartValue(value, options = {}) {
+    return new Intl.NumberFormat(undefined, options).format(value);
 }
 function formatChartLabel(value) {
     if (typeof value !== 'string') {

package/dist/custom/widgets/chart/chart.utils.ts

@@ -14,8 +14,8 @@ export function toFiniteNumber(value: unknown) {
   return Number.isFinite(numberValue) ? numberValue : 0
 }
 
-export function formatChartValue(value: number) {
-  return new Intl.NumberFormat().format(value)
+export function formatChartValue(value: number, options: Intl.NumberFormatOptions = {}) {
+  return new Intl.NumberFormat(undefined, options).format(value)
 }
 
 export function formatChartLabel(value: unknown) {

package/dist/custom/widgets/gauge-card/GaugeCardWidget.vue

@@ -18,6 +18,66 @@ const {
   refetch,
 } = useWidgetData(dashboardSlugRef, widgetIdRef)
 
+type GaugeCardConfig = {
+  value_field?: string
+  valueField?: string
+  min?: number | string
+  max?: number | string
+  min_field?: string
+  minField?: string
+  max_field?: string
+  maxField?: string
+  suffix?: string
+  color?: string
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null
+}
+
+function parseGaugeCardConfig(value: unknown): GaugeCardConfig | undefined {
+  if (isRecord(value)) {
+    return value as GaugeCardConfig
+  }
+
+  if (typeof value !== 'string') {
+    return undefined
+  }
+
+  try {
+    const parsed = JSON.parse(value) as unknown
+    return isRecord(parsed) ? parsed as GaugeCardConfig : undefined
+  } catch {
+    return undefined
+  }
+}
+
+function parseOptionalNumber(value: unknown): number | undefined {
+  if (value === null || value === undefined || value === '') {
+    return undefined
+  }
+
+  const parsed = typeof value === 'number' ? value : Number(value)
+  return Number.isFinite(parsed) ? parsed : undefined
+}
+
+function countFractionDigits(value: number) {
+  if (!Number.isFinite(value)) {
+    return 0
+  }
+
+  const normalizedValue = value.toString().toLowerCase()
+  const [coefficient, exponentValue] = normalizedValue.split('e')
+  const exponent = exponentValue ? Number(exponentValue) : 0
+  const decimalDigits = coefficient.split('.')[1]?.length ?? 0
+
+  return Math.max(decimalDigits - exponent, 0)
+}
+
+function normalizeDisplayValue(value: number, useWholeNumbers: boolean) {
+  return useWholeNumbers ? Math.trunc(value) : value
+}
+
 watch(
   () => props.widget,
   () => {
@@ -26,20 +86,42 @@ watch(
   { deep: true },
 )
 
-const gaugeConfig = computed(() => props.widget.gauge_card as {
-  value_field?: string
-  min?: number
-  max?: number
-  suffix?: string
-  color?: string
-} | undefined)
+const gaugeConfig = computed(() => parseGaugeCardConfig(props.widget.gauge_card))
 const widgetData = computed(() => data.value?.data as DashboardWidgetTableData | null)
 const columns = computed(() => widgetData.value?.columns ?? [])
 const firstRow = computed(() => widgetData.value?.rows[0] ?? {})
-const valueField = computed(() => gaugeConfig.value?.value_field || columns.value[0])
-const minValue = computed(() => gaugeConfig.value?.min ?? 0)
-const maxValue = computed(() => gaugeConfig.value?.max ?? 100)
+const valueField = computed(() => gaugeConfig.value?.value_field || gaugeConfig.value?.valueField || columns.value[0])
+const minField = computed(() => gaugeConfig.value?.min_field || gaugeConfig.value?.minField)
+const maxField = computed(() => gaugeConfig.value?.max_field || gaugeConfig.value?.maxField)
+const minValue = computed(() => {
+  const dynamicMin = minField.value ? parseOptionalNumber(firstRow.value[minField.value]) : undefined
+  return dynamicMin ?? parseOptionalNumber(gaugeConfig.value?.min) ?? 0
+})
+const maxValue = computed(() => {
+  const dynamicMax = maxField.value ? parseOptionalNumber(firstRow.value[maxField.value]) : undefined
+  return dynamicMax ?? parseOptionalNumber(gaugeConfig.value?.max) ?? 100
+})
 const value = computed(() => toFiniteNumber(firstRow.value[valueField.value]))
+const fractionDigits = computed(() => Math.min([
+  value.value,
+  minValue.value,
+  maxValue.value,
+].reduce((maxDigits, currentValue) => Math.max(maxDigits, countFractionDigits(currentValue)), 0), 3))
+const shouldUseWholeNumbers = computed(() => Math.abs(maxValue.value) >= 1000)
+const formattedValue = computed(() => formatChartValue(normalizeDisplayValue(value.value, shouldUseWholeNumbers.value), {
+  minimumFractionDigits: shouldUseWholeNumbers.value ? 0 : fractionDigits.value,
+  maximumFractionDigits: shouldUseWholeNumbers.value ? 0 : fractionDigits.value,
+}))
+const formattedMinValue = computed(() => formatChartValue(normalizeDisplayValue(minValue.value, shouldUseWholeNumbers.value), {
+  minimumFractionDigits: shouldUseWholeNumbers.value ? 0 : fractionDigits.value,
+  maximumFractionDigits: shouldUseWholeNumbers.value ? 0 : fractionDigits.value,
+}))
+const formattedMaxValue = computed(() => {
+  return formatChartValue(normalizeDisplayValue(maxValue.value, shouldUseWholeNumbers.value), {
+    minimumFractionDigits: shouldUseWholeNumbers.value ? 0 : fractionDigits.value,
+    maximumFractionDigits: shouldUseWholeNumbers.value ? 0 : fractionDigits.value,
+  })
+})
 const progress = computed(() => {
   const range = maxValue.value - minValue.value
   return range > 0 ? Math.min(Math.max((value.value - minValue.value) / range, 0), 1) : 0
@@ -97,10 +179,10 @@ const gaugeColor = computed(() => gaugeConfig.value?.color || CHART_COLORS[0])
       </svg>
 
       <div class="text-3xl font-bold text-lightNavbarText dark:text-darkNavbarText">
-        {{ formatChartValue(value) }}{{ gaugeConfig?.suffix ?? '' }}
+        {{ formattedValue }}{{ gaugeConfig?.suffix ?? '' }}
       </div>
       <div class="text-sm text-lightListTableText dark:text-darkListTableText">
-        {{ formatChartValue(minValue) }} - {{ formatChartValue(maxValue) }}
+        {{ formattedMinValue }} - {{ formattedMaxValue }}
       </div>
     </div>
   </div>

package/dist/custom/widgets/pivot-table/PivotTableWidget.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, watch } from 'vue'
 import { useWidgetData } from '../../queries/useWidgetData.js'
-import type { DashboardWidgetConfig, DashboardWidgetTableData } from '../../model/dashboard.types.js'
+import type { DashboardWidgetConfig, DashboardWidgetData } from '../../model/dashboard.types.js'
 import { formatChartLabel, formatChartValue, toFiniteNumber } from '../chart/chart.utils.js'
 
 const props = defineProps<{
@@ -32,15 +32,37 @@ const pivotConfig = computed(() => props.widget.pivot_table as {
   value_field?: string
   aggregation?: 'count' | 'sum'
 } | undefined)
-const widgetData = computed(() => data.value?.data as DashboardWidgetTableData | null)
+const widgetData = computed(() => data.value?.data as DashboardWidgetData | null)
 const rows = computed(() => widgetData.value?.rows ?? [])
 const columns = computed(() => widgetData.value?.columns ?? [])
-const rowField = computed(() => pivotConfig.value?.row_field || columns.value[0])
+const isAggregateData = computed(() => widgetData.value?.kind === 'aggregate')
+const shouldRenderAggregateMatrix = computed(() => isAggregateData.value && !pivotConfig.value?.column_field)
+const rowField = computed(() => pivotConfig.value?.row_field || (isAggregateData.value ? 'group' : columns.value[0]))
 const columnField = computed(() => pivotConfig.value?.column_field || columns.value[1])
-const valueField = computed(() => pivotConfig.value?.value_field || columns.value[2])
+const valueField = computed(() => pivotConfig.value?.value_field || columns.value[2] || columns.value[1])
 const aggregation = computed(() => pivotConfig.value?.aggregation || (valueField.value ? 'sum' : 'count'))
-const pivotColumnLabels = computed(() => Array.from(new Set(rows.value.map((row) => formatChartLabel(row[columnField.value])))))
+const pivotColumnLabels = computed(() => {
+  if (shouldRenderAggregateMatrix.value) {
+    return columns.value.filter((column) => column !== rowField.value)
+  }
+
+  return Array.from(new Set(rows.value.map((row) => formatChartLabel(row[columnField.value]))))
+})
 const pivotRows = computed(() => {
+  if (shouldRenderAggregateMatrix.value) {
+    return rows.value.map((row) => {
+      const item: Record<string, number | string> = {
+        label: formatChartLabel(row[rowField.value]),
+      }
+
+      for (const column of pivotColumnLabels.value) {
+        item[column] = toFiniteNumber(row[column])
+      }
+
+      return item
+    })
+  }
+
   const rowMap = new Map<string, Record<string, number | string>>()
 
   for (const row of rows.value) {

package/dist/custom/widgets/table/TableWidget.vue

@@ -23,37 +23,87 @@
 
     <div
       v-else
-      class="min-h-0 flex-1 overflow-auto"
+      class="flex min-h-0 flex-1 flex-col"
     >
-      <table class="min-w-max w-full border-collapse text-left text-sm">
-        <thead class="bg-lightTableHeadingBackground text-xs uppercase text-lightTableHeadingText dark:bg-darkTableHeadingBackground dark:text-darkTableHeadingText">
-          <tr>
-            <th
-              v-for="column in columns"
-              :key="column"
-              class="px-3 py-2 font-semibold"
+      <div class="min-h-0 flex-1 overflow-auto">
+        <table class="min-w-max w-full border-collapse text-left text-sm">
+          <thead class="bg-lightTableHeadingBackground text-xs uppercase text-lightTableHeadingText dark:bg-darkTableHeadingBackground dark:text-darkTableHeadingText">
+            <tr>
+              <th
+                v-for="column in columns"
+                :key="column"
+                class="px-3 py-2 font-semibold"
+              >
+                {{ column }}
+              </th>
+            </tr>
+          </thead>
+
+          <tbody>
+            <tr
+              v-for="(row, index) in tableData.rows"
+              :key="`${currentPage}-${index}`"
+              class="border-t border-lightListBorder odd:bg-lightTableOddBackground even:bg-lightTableEvenBackground dark:border-darkListBorder odd:dark:bg-darkTableOddBackground even:dark:bg-darkTableEvenBackground"
             >
-              {{ column }}
-            </th>
-          </tr>
-        </thead>
-
-        <tbody>
-          <tr
-            v-for="(row, index) in tableData.rows"
-            :key="index"
-            class="border-t border-lightListBorder odd:bg-lightTableOddBackground even:bg-lightTableEvenBackground dark:border-darkListBorder odd:dark:bg-darkTableOddBackground even:dark:bg-darkTableEvenBackground"
+              <td
+                v-for="column in columns"
+                :key="column"
+                class="px-3 py-2 text-lightListTableText dark:text-darkListTableText"
+              >
+                {{ formatCell(row[column]) }}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <div
+        v-if="pagination"
+        class="flex flex-wrap items-center justify-between gap-2 border-t border-lightListBorder px-3 py-2 text-sm text-lightListTableText dark:border-darkListBorder dark:text-darkListTableText"
+      >
+        <div>
+          {{ pageStart }}-{{ pageEnd }} of {{ pagination.total }}
+        </div>
+
+        <div class="flex items-center gap-2">
+          <button
+            type="button"
+            class="flex h-8 w-8 items-center justify-center rounded border border-lightListBorder text-sm disabled:opacity-45 dark:border-darkListBorder"
+            :disabled="currentPage <= 1 || isFetching"
+            @click="currentPage -= 1"
+            aria-label="Previous page"
           >
-            <td
-              v-for="column in columns"
-              :key="column"
-              class="px-3 py-2 text-lightListTableText dark:text-darkListTableText"
+            &lt;
+          </button>
+
+          <span class="flex items-center gap-1">
+            <span>Page</span>
+            <input
+              v-model.number="currentPageInput"
+              type="number"
+              min="1"
+              :max="pagination.totalPages"
+              class="dashboard-table-page-input h-8 min-w-8 rounded border border-lightListBorder bg-lightTableBackground px-2 text-center text-sm text-lightListTableText dark:border-darkListBorder dark:bg-darkTableBackground dark:text-darkListTableText"
+              :style="{ width: `${currentPageInputWidth}ch` }"
+              :disabled="isFetching"
+              aria-label="Current page"
+              @blur="applyCurrentPageInput"
+              @keydown.enter="applyCurrentPageInput"
             >
-              {{ formatCell(row[column]) }}
-            </td>
-          </tr>
-        </tbody>
-      </table>
+            <span>of {{ pagination.totalPages }}</span>
+          </span>
+
+          <button
+            type="button"
+            class="flex h-8 w-8 items-center justify-center rounded border border-lightListBorder text-sm disabled:opacity-45 dark:border-darkListBorder"
+            :disabled="currentPage >= pagination.totalPages || isFetching"
+            @click="currentPage += 1"
+            aria-label="Next page"
+          >
+            &gt;
+          </button>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -61,27 +111,52 @@
 
 
 <script setup lang="ts">
-import { computed, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useWidgetData } from '../../queries/useWidgetData.js'
 import type { DashboardWidgetConfig, DashboardWidgetTableData } from '../../model/dashboard.types.js'
 
+type TableWidgetConfig = {
+  columns?: string[]
+  pagination?: boolean
+  pageSize?: number
+}
+
+const DEFAULT_PAGE_SIZE = 10
+
 const props = defineProps<{
   dashboardSlug: string
   widget: DashboardWidgetConfig
 }>()
 
+const currentPage = ref(1)
+const currentPageInput = ref(1)
+const tableConfig = computed(() => props.widget.table as TableWidgetConfig | undefined)
+const isPaginationEnabled = computed(() => tableConfig.value?.pagination !== false)
+const pageSize = computed(() => tableConfig.value?.pageSize ?? props.widget.query?.limit ?? DEFAULT_PAGE_SIZE)
 const dashboardSlugRef = computed(() => props.dashboardSlug)
 const widgetIdRef = computed(() => props.widget.id)
+const widgetDataRequest = computed(() => (
+  isPaginationEnabled.value
+    ? {
+        pagination: {
+          page: currentPage.value,
+          pageSize: pageSize.value,
+        },
+      }
+    : {}
+))
 const {
   data,
   isLoading,
+  isFetching,
   error,
   refetch,
-} = useWidgetData(dashboardSlugRef, widgetIdRef)
+} = useWidgetData(dashboardSlugRef, widgetIdRef, widgetDataRequest)
 
 watch(
   () => props.widget,
   () => {
+    currentPage.value = 1
     void refetch()
   },
   { deep: true },
@@ -92,10 +167,47 @@ const tableData = computed(() => {
 })
 
 const columns = computed(() => {
-  const configuredColumns = (props.widget.table as { columns?: string[] } | undefined)?.columns
+  const configuredColumns = tableConfig.value?.columns
   return configuredColumns ?? tableData.value?.columns ?? []
 })
 
+const pagination = computed(() => tableData.value?.pagination)
+const pageStart = computed(() => {
+  if (!pagination.value || pagination.value.total === 0) {
+    return 0
+  }
+
+  return (pagination.value.page - 1) * pagination.value.pageSize + 1
+})
+const pageEnd = computed(() => {
+  if (!pagination.value) {
+    return 0
+  }
+
+  return Math.min(pagination.value.page * pagination.value.pageSize, pagination.value.total)
+})
+const currentPageInputWidth = computed(() => {
+  const digits = String(currentPageInput.value || currentPage.value).length
+  return Math.max(digits + 3, 4)
+})
+
+watch(pagination, (nextPagination) => {
+  if (nextPagination && currentPage.value > nextPagination.totalPages) {
+    currentPage.value = nextPagination.totalPages
+  }
+})
+
+watch(currentPage, (nextPage) => {
+  currentPageInput.value = nextPage
+})
+
+function applyCurrentPageInput() {
+  const totalPages = pagination.value?.totalPages ?? 1
+  const page = Number.isFinite(currentPageInput.value) ? currentPageInput.value : currentPage.value
+  currentPage.value = Math.min(Math.max(Math.trunc(page), 1), totalPages)
+  currentPageInput.value = currentPage.value
+}
+
 function formatCell(value: unknown) {
   if (value === null || value === undefined) {
     return ''
@@ -108,3 +220,16 @@ function formatCell(value: unknown) {
   return String(value)
 }
 </script>
+
+<style scoped>
+.dashboard-table-page-input::-webkit-outer-spin-button,
+.dashboard-table-page-input::-webkit-inner-spin-button {
+  margin: 0;
+  appearance: none;
+}
+
+.dashboard-table-page-input {
+  appearance: textfield;
+  -moz-appearance: textfield;
+}
+</style>

package/dist/endpoint/widgets.d.ts

@@ -9,7 +9,12 @@ type WidgetEndpointsContext = {
     persistDashboardConfig: (dashboard: DashboardRecord, config: DashboardConfig) => Promise<PersistedDashboardResponse>;
     buildDashboardResponse: (dashboard: DashboardRecord) => PersistedDashboardResponse;
     validateDashboardWidgetApiConfig: (widget: DashboardWidgetConfig) => DashboardWidgetConfigValidationError[];
-    getWidgetData: (widget: DashboardWidgetConfig) => Promise<unknown>;
+    getWidgetData: (widget: DashboardWidgetConfig, options?: {
+        pagination?: {
+            page: number;
+            pageSize: number;
+        };
+    }) => Promise<unknown>;
 };
 export declare function registerWidgetEndpoints(server: IHttpServer, ctx: WidgetEndpointsContext): void;
 export {};