deepspotscreen-sdk 0.0.2 → 0.0.3

package/dist/{DeepspotSDK-CyX06_c2.js → DeepspotSDK-BEdSECUH.js}

@@ -1,24 +1,24 @@
-class A {
+class F {
   constructor(e, t) {
     this.tokenCache = /* @__PURE__ */ new Map(), this.baseUrl = e.replace(/\/$/, ""), this.apiKey = t;
   }
   // ── Embed Token ─────────────────────────────────────────────────────────────
   async getEmbedToken(e) {
-    var i, a, d, o;
+    var i, a, o, d;
     const t = [
       e.dashboardId,
       e.embedType,
       (i = e.embedLevel) != null ? i : "",
       (a = e.componentId) != null ? a : "",
-      (d = e.userId) != null ? d : ""
-    ].join(":"), r = this.tokenCache.get(t);
-    if (r && r.expiresAt > Date.now() + 6e4) return r.token;
-    const s = await this.post(
+      (o = e.userId) != null ? o : ""
+    ].join(":"), s = this.tokenCache.get(t);
+    if (s && s.expiresAt > Date.now() + 6e4) return s.token;
+    const r = await this.post(
       "/dashboard-builder/embed-token",
       {
         dashboardId: e.dashboardId,
         embedType: e.embedType,
-        embedLevel: (o = e.embedLevel) != null ? o : "dashboard",
+        embedLevel: (d = e.embedLevel) != null ? d : "dashboard",
         componentId: e.componentId,
         userId: e.userId,
         tenantId: e.tenantId,
@@ -27,36 +27,36 @@ class A {
       { "x-deepspot-api-key": this.apiKey }
     );
     return this.tokenCache.set(t, {
-      token: s.token,
-      expiresAt: new Date(s.expiresAt).getTime()
-    }), s.token;
+      token: r.token,
+      expiresAt: new Date(r.expiresAt).getTime()
+    }), r.token;
   }
   // ── Dashboard Render (lazy — loads one tab at a time) ──────────────────────
-  async getDashboardRender(e, t, r = {}) {
+  async getDashboardRender(e, t, s = {}) {
     var i;
-    const s = new URLSearchParams({
+    const r = new URLSearchParams({
       embedType: "dashboard",
-      embedLevel: (i = r.embedLevel) != null ? i : "dashboard"
+      embedLevel: (i = s.embedLevel) != null ? i : "dashboard"
     });
-    return r.pageId && s.set("pageId", r.pageId), r.tabId && s.set("tabId", r.tabId), r.filters && Object.entries(r.filters).forEach(([a, d]) => {
-      d != null && d !== "" && s.set(`filter[${a}]`, Array.isArray(d) ? d.join(",") : String(d));
+    return s.pageId && r.set("pageId", s.pageId), s.tabId && r.set("tabId", s.tabId), s.filters && Object.entries(s.filters).forEach(([a, o]) => {
+      o != null && o !== "" && r.set(`filter[${a}]`, Array.isArray(o) ? o.join(",") : String(o));
     }), this.get(
-      `/dashboard-builder/embed/${e}/render?${s}`,
+      `/dashboard-builder/embed/${e}/render?${r}`,
       { "x-embed-token": t }
     );
   }
   // ── Single Report Render ────────────────────────────────────────────────────
-  async getReportRender(e, t, r, s = {}) {
+  async getReportRender(e, t, s, r = {}) {
     const i = new URLSearchParams({
       embedType: "report",
       embedLevel: "report",
       componentId: t
     });
-    return s.filters && Object.entries(s.filters).forEach(([a, d]) => {
-      d != null && d !== "" && i.set(`filter[${a}]`, Array.isArray(d) ? d.join(",") : String(d));
+    return r.filters && Object.entries(r.filters).forEach(([a, o]) => {
+      o != null && o !== "" && i.set(`filter[${a}]`, Array.isArray(o) ? o.join(",") : String(o));
     }), this.get(
       `/dashboard-builder/embed/${e}/render?${i}`,
-      { "x-embed-token": r }
+      { "x-embed-token": s }
     );
   }
   // ── API Key Management ──────────────────────────────────────────────────────
@@ -75,6 +75,18 @@ class A {
       Authorization: `Bearer ${t}`
     });
   }
+  // ── Paginated Table Data ────────────────────────────────────────────────────
+  /**
+   * Fetches one page of data for an embedded data-table component.
+   * Called by TableRenderer whenever the user navigates to a different page.
+   * Mirrors: GET /dashboard-builder/embed/:dashboardId/table/:componentId/data
+   */
+  async getTablePage(e, t, s, r, i) {
+    return this.get(
+      `/dashboard-builder/embed/${e}/table/${t}/data?page=${s}&pageSize=${r}`,
+      { "x-embed-token": i }
+    );
+  }
   // ── Filter Options ──────────────────────────────────────────────────────────
   /**
    * Fetches distinct option values for a dropdown / multi-select filter.
@@ -83,14 +95,14 @@ class A {
    * The embed token is sent so the backend can validate the caller has
    * access to this dashboard without requiring an admin JWT.
    */
-  async getFilterOptions(e, t, r) {
+  async getFilterOptions(e, t, s) {
     try {
-      const s = await this.get(
+      const r = await this.get(
         `/dashboard-builder/embed/${e}/filters/${t}/options`,
-        { "x-embed-token": r }
+        { "x-embed-token": s }
       );
-      return Array.isArray(s) ? s : Array.isArray(s == null ? void 0 : s.options) ? s.options : Array.isArray(s == null ? void 0 : s.data) ? s.data : [];
-    } catch (s) {
+      return Array.isArray(r) ? r : Array.isArray(r == null ? void 0 : r.options) ? r.options : Array.isArray(r == null ? void 0 : r.data) ? r.data : [];
+    } catch (r) {
       return [];
     }
   }
@@ -99,36 +111,36 @@ class A {
   }
   // ── Private helpers ─────────────────────────────────────────────────────────
   async get(e, t = {}) {
-    const r = await fetch(`${this.baseUrl}${e}`, {
+    const s = await fetch(`${this.baseUrl}${e}`, {
       method: "GET",
       headers: { "Content-Type": "application/json", ...t }
     });
-    return this.handleResponse(r);
+    return this.handleResponse(s);
   }
-  async post(e, t, r = {}) {
-    const s = await fetch(`${this.baseUrl}${e}`, {
+  async post(e, t, s = {}) {
+    const r = await fetch(`${this.baseUrl}${e}`, {
       method: "POST",
-      headers: { "Content-Type": "application/json", ...r },
+      headers: { "Content-Type": "application/json", ...s },
       body: JSON.stringify(t)
     });
-    return this.handleResponse(s);
+    return this.handleResponse(r);
   }
   async delete(e, t = {}) {
-    const r = await fetch(`${this.baseUrl}${e}`, {
+    const s = await fetch(`${this.baseUrl}${e}`, {
       method: "DELETE",
       headers: { "Content-Type": "application/json", ...t }
     });
-    if (!r.ok) throw new Error(`Deepspot SDK: DELETE ${e} failed (${r.status})`);
+    if (!s.ok) throw new Error(`Deepspot SDK: DELETE ${e} failed (${s.status})`);
   }
   async handleResponse(e) {
     if (!e.ok) {
-      let r = `HTTP ${e.status}`;
+      let s = `HTTP ${e.status}`;
       try {
-        const s = await e.json();
-        r = (s == null ? void 0 : s.message) || (s == null ? void 0 : s.error) || r;
-      } catch (s) {
+        const r = await e.json();
+        s = (r == null ? void 0 : r.message) || (r == null ? void 0 : r.error) || s;
+      } catch (r) {
       }
-      throw new Error(`Deepspot SDK: ${r}`);
+      throw new Error(`Deepspot SDK: ${s}`);
     }
     const t = await e.json();
     return (t == null ? void 0 : t.data) !== void 0 ? t.data : t;
@@ -136,8 +148,8 @@ class A {
 }
 class $ {
   constructor(e) {
-    var t, r;
-    this.destroyed = !1, this.refreshTimer = null, this.opts = e, this.filters = { ...e.activeFilters }, this.activePageId = (t = e.activePageId) != null ? t : "", this.activeTabId = (r = e.activeTabId) != null ? r : "";
+    var t, s;
+    this.destroyed = !1, this.refreshTimer = null, this.opts = e, this.filters = { ...e.activeFilters }, this.activePageId = (t = e.activePageId) != null ? t : "", this.activeTabId = (s = e.activeTabId) != null ? s : "";
   }
   /** Returns a copy of the currently applied filters */
   getActiveFilters() {
@@ -183,10 +195,10 @@ class $ {
     this.refreshTimer && clearTimeout(this.refreshTimer), this.refreshTimer = setTimeout(() => this.refresh(), 300);
   }
   async fetchData() {
-    const { apiClient: e, dashboardId: t, componentId: r, token: s, embedType: i, embedLevel: a } = this.opts;
-    return i === "report" && r ? e.getReportRender(t, r, s, {
+    const { apiClient: e, dashboardId: t, componentId: s, token: r, embedType: i, embedLevel: a } = this.opts;
+    return i === "report" && s ? e.getReportRender(t, s, r, {
       filters: this.filters
-    }) : e.getDashboardRender(t, s, {
+    }) : e.getDashboardRender(t, r, {
       embedLevel: a,
       pageId: this.activePageId || void 0,
       tabId: this.activeTabId || void 0,
@@ -194,8 +206,8 @@ class $ {
     });
   }
 }
-const D = 24, x = 10, w = 12;
-class I {
+const A = 24, w = 10, T = 12;
+class S {
   /**
    * @param containerWidth  Actual pixel width of the grid container.
    * @param minY            Minimum y value across all components (normalises
@@ -206,44 +218,44 @@ class I {
   }
   /** Pixel width of one column unit */
   get colWidth() {
-    return this.containerWidth / D;
+    return this.containerWidth / A;
   }
   /** Convert grid position {x,y,w,h} → CSS absolute pixel values */
   toPx(e) {
-    const t = this.colWidth, r = w / 2;
+    const t = this.colWidth, s = T / 2;
     return {
-      left: e.x * t + r,
-      top: (e.y - this.minY) * x + r,
-      width: e.w * t - w,
-      height: e.h * x - w
+      left: e.x * t + s,
+      top: (e.y - this.minY) * w + s,
+      width: e.w * t - T,
+      height: e.h * w - T
     };
   }
   /** Total pixel height required to fit all positioned components */
   static totalHeight(e) {
     if (!e.length) return 400;
-    const t = Math.min(...e.map((s) => s.y));
-    return (Math.max(...e.map((s) => s.y + s.h)) - t) * x + 40;
+    const t = Math.min(...e.map((r) => r.y));
+    return (Math.max(...e.map((r) => r.y + r.h)) - t) * w + 40;
   }
   /** Apply absolute positioning styles directly to a DOM element */
   applyStyles(e, t) {
-    const r = this.toPx(t);
-    e.style.position = "absolute", e.style.left = `${r.left}px`, e.style.top = `${r.top}px`, e.style.width = `${r.width}px`, e.style.height = `${r.height}px`;
+    const s = this.toPx(t);
+    e.style.position = "absolute", e.style.left = `${s.left}px`, e.style.top = `${s.top}px`, e.style.width = `${s.width}px`, e.style.height = `${s.height}px`;
   }
 }
-let T = null;
+let k = null;
 function E() {
-  return T || (T = import("./apexcharts.common-k3hLWpB8.js").then((p) => p.a)), T;
+  return k || (k = import("./apexcharts.common-k3hLWpB8.js").then((u) => u.a)), k;
 }
-class L {
+class R {
   constructor(e) {
     this.chart = null, this.container = e;
   }
-  async render(e, t, r, s) {
+  async render(e, t, s, r) {
     if (!t || t.length === 0) {
       this.renderEmpty(e.title);
       return;
     }
-    const i = this.buildOptions(e, t, r, s);
+    const i = this.buildOptions(e, t, s, r);
     if (!i) {
       this.renderEmpty(e.title);
       return;
@@ -258,26 +270,26 @@ class L {
     if (a)
       try {
         this.chart && this.chart.destroy();
-        const { default: d } = await E();
-        this.chart = new d(a, i), this.chart.render();
-      } catch (d) {
-        console.error("[Deepspot SDK] ChartRenderer error:", d), a.innerHTML = '<div class="ds-chart-empty">Chart render error</div>';
+        const { default: o } = await E();
+        this.chart = new o(a, i), this.chart.render();
+      } catch (o) {
+        console.error("[Deepspot SDK] ChartRenderer error:", o), a.innerHTML = '<div class="ds-chart-empty">Chart render error</div>';
       }
   }
-  async update(e, t, r) {
+  async update(e, t, s) {
     if (!this.chart || !t || t.length === 0) {
-      await this.render(e, t, r);
+      await this.render(e, t, s);
       return;
     }
-    const { series: s, categories: i } = this.extractSeriesAndCategories(e, t);
+    const { series: r, categories: i } = this.extractSeriesAndCategories(e, t);
     try {
       this.chart.updateOptions({
-        series: s,
+        series: r,
         xaxis: { categories: i },
-        theme: { mode: r }
+        theme: { mode: s }
       });
     } catch (a) {
-      this.render(e, t, r);
+      this.render(e, t, s);
     }
   }
   destroy() {
@@ -289,13 +301,13 @@ class L {
     this.chart = null;
   }
   // ── Private ─────────────────────────────────────────────────────────────────
-  buildOptions(e, t, r, s) {
+  buildOptions(e, t, s, r) {
     const i = e.type;
-    return i === "pie" || i === "donut" ? this.buildPieOptions(e, t, r, s) : i === "bar" || i === "line" || i === "area" ? this.buildCartesianOptions(e, t, r, s) : null;
+    return i === "pie" || i === "donut" ? this.buildPieOptions(e, t, s, r) : i === "bar" || i === "line" || i === "area" ? this.buildCartesianOptions(e, t, s, r) : null;
   }
-  buildCartesianOptions(e, t, r, s) {
+  buildCartesianOptions(e, t, s, r) {
     var n;
-    const { series: i, categories: a, xAxisLabel: d, yAxisLabel: o } = this.extractSeriesAndCategories(e, t), l = e.properties || {}, b = l.colors ? Object.values(l.colors) : ["#6366f1", "#8b5cf6", "#ec4899", "#f59e0b", "#10b981", "#3b82f6"], c = r === "dark";
+    const { series: i, categories: a, xAxisLabel: o, yAxisLabel: d } = this.extractSeriesAndCategories(e, t), c = e.properties || {}, h = c.colors ? Object.values(c.colors) : ["#6366f1", "#8b5cf6", "#ec4899", "#f59e0b", "#10b981", "#3b82f6"], l = s === "dark";
     return {
       chart: {
         type: e.type === "area" ? "area" : e.type === "line" ? "line" : "bar",
@@ -305,38 +317,38 @@ class L {
         fontFamily: "inherit",
         // Explicit height prevents ApexCharts from guessing the flex-child height
         // at render time (which can read as 0 before the browser settles layout).
-        height: s != null ? s : "100%"
+        height: r != null ? r : "100%"
       },
-      theme: { mode: r },
+      theme: { mode: s },
       series: i,
       xaxis: {
         categories: a,
-        title: { text: d },
+        title: { text: o },
         labels: {
           rotate: a.length > 8 ? -45 : 0,
-          style: { colors: c ? "#94a3b8" : "#6b7280", fontSize: "11px" }
+          style: { colors: l ? "#94a3b8" : "#6b7280", fontSize: "11px" }
         },
-        axisBorder: { color: c ? "#334155" : "#e5e7eb" },
-        axisTicks: { color: c ? "#334155" : "#e5e7eb" }
+        axisBorder: { color: l ? "#334155" : "#e5e7eb" },
+        axisTicks: { color: l ? "#334155" : "#e5e7eb" }
       },
       yaxis: {
-        title: { text: o },
-        labels: { style: { colors: c ? "#94a3b8" : "#6b7280", fontSize: "11px" } }
+        title: { text: d },
+        labels: { style: { colors: l ? "#94a3b8" : "#6b7280", fontSize: "11px" } }
       },
-      colors: b,
+      colors: h,
       legend: {
-        show: i.length > 1 || ((n = l.showLegend) != null ? n : !1),
+        show: i.length > 1 || ((n = c.showLegend) != null ? n : !1),
         position: "bottom",
-        labels: { colors: c ? "#94a3b8" : "#6b7280" }
+        labels: { colors: l ? "#94a3b8" : "#6b7280" }
       },
       grid: {
-        borderColor: c ? "#1e293b" : "#f3f4f6",
+        borderColor: l ? "#1e293b" : "#f3f4f6",
         strokeDashArray: 4,
         padding: {
           bottom: a.length > 8 ? 60 : 10
         }
       },
-      tooltip: { theme: r },
+      tooltip: { theme: s },
       stroke: {
         curve: "smooth",
         width: e.type === "bar" ? 0 : 2
@@ -351,29 +363,29 @@ class L {
       }
     };
   }
-  buildPieOptions(e, t, r, s) {
-    const i = e.properties || {}, a = t.length > 0 ? Object.keys(t[0]) : [], d = a[0] || "label", o = a[1] || "value", l = t.map((h) => {
-      var f;
-      return String((f = h[d]) != null ? f : "");
-    }), b = t.map((h) => Number(h[o]) || 0), c = r === "dark", n = i.colors ? Object.values(i.colors) : ["#6366f1", "#8b5cf6", "#ec4899", "#f59e0b", "#10b981", "#3b82f6"];
+  buildPieOptions(e, t, s, r) {
+    const i = e.properties || {}, a = t.length > 0 ? Object.keys(t[0]) : [], o = a[0] || "label", d = a[1] || "value", c = t.map((b) => {
+      var p;
+      return String((p = b[o]) != null ? p : "");
+    }), h = t.map((b) => Number(b[d]) || 0), l = s === "dark", n = i.colors ? Object.values(i.colors) : ["#6366f1", "#8b5cf6", "#ec4899", "#f59e0b", "#10b981", "#3b82f6"];
     return {
       chart: {
         type: e.type,
         toolbar: { show: !1 },
         background: "transparent",
         fontFamily: "inherit",
-        height: s != null ? s : "100%"
+        height: r != null ? r : "100%"
       },
-      theme: { mode: r },
-      series: b,
-      labels: l,
+      theme: { mode: s },
+      series: h,
+      labels: c,
       colors: n,
       legend: {
         position: "bottom",
-        labels: { colors: c ? "#94a3b8" : "#6b7280" }
+        labels: { colors: l ? "#94a3b8" : "#6b7280" }
       },
-      tooltip: { theme: r },
-      dataLabels: { enabled: l.length <= 8 },
+      tooltip: { theme: s },
+      dataLabels: { enabled: c.length <= 8 },
       plotOptions: {
         pie: {
           donut: { size: e.type === "donut" ? "65%" : "0%" }
@@ -382,38 +394,38 @@ class L {
     };
   }
   extractSeriesAndCategories(e, t) {
-    const r = e.properties || {}, s = t.length > 0 ? Object.keys(t[0]) : [], i = r.xAxis || s[0] || "x";
+    const s = e.properties || {}, r = t.length > 0 ? Object.keys(t[0]) : [], i = s.xAxis || r[0] || "x";
     let a = [];
-    if (r.selectedYAxisColumn)
+    if (s.selectedYAxisColumn)
       try {
-        const n = typeof r.selectedYAxisColumn == "string" ? JSON.parse(r.selectedYAxisColumn) : r.selectedYAxisColumn;
+        const n = typeof s.selectedYAxisColumn == "string" ? JSON.parse(s.selectedYAxisColumn) : s.selectedYAxisColumn;
         Array.isArray(n) && (a = n.map(
-          (h) => typeof h == "string" ? { column: h } : h
+          (b) => typeof b == "string" ? { column: b } : b
         ));
       } catch (n) {
       }
-    if (!a.length && r.yAxis) {
-      const n = r.yAxis;
-      a = (Array.isArray(n) ? n : [n]).map((f) => ({ column: String(f) }));
+    if (!a.length && s.yAxis) {
+      const n = s.yAxis;
+      a = (Array.isArray(n) ? n : [n]).map((p) => ({ column: String(p) }));
     }
-    !a.length && s.length > 1 && (a = s.slice(1).map((n) => ({ column: n })));
-    const d = t.map((n) => {
-      var h;
-      return String((h = n[i]) != null ? h : "");
-    }), o = t.length > 0 ? Object.keys(t[0]) : [], l = a.map((n) => {
-      const h = o.includes(n.column) ? n.column : null, f = h ? null : o.find((u) => u.includes(n.column) || n.column.includes(u)), g = !h && !f ? o.find((u) => {
+    !a.length && r.length > 1 && (a = r.slice(1).map((n) => ({ column: n })));
+    const o = t.map((n) => {
+      var b;
+      return String((b = n[i]) != null ? b : "");
+    }), d = t.length > 0 ? Object.keys(t[0]) : [], c = a.map((n) => {
+      const b = d.includes(n.column) ? n.column : null, p = b ? null : d.find((g) => g.includes(n.column) || n.column.includes(g)), m = !b && !p ? d.find((g) => {
         var y;
-        return u !== i && !isNaN(Number((y = t[0]) == null ? void 0 : y[u]));
-      }) : null, m = h || f || g || n.column;
+        return g !== i && !isNaN(Number((y = t[0]) == null ? void 0 : y[g]));
+      }) : null, f = b || p || m || n.column;
       return {
         name: n.label || n.column.replace(/_/g, " "),
-        data: t.map((u) => {
-          const y = u[m];
+        data: t.map((g) => {
+          const y = g[f];
           return y != null ? Number(y) : null;
         })
       };
-    }), b = r.xAxisLabel || i.replace(/_/g, " "), c = r.yAxisLabel || (l.length === 1 ? l[0].name : "Values");
-    return { series: l, categories: d, xAxisLabel: b, yAxisLabel: c };
+    }), h = s.xAxisLabel || i.replace(/_/g, " "), l = s.yAxisLabel || (c.length === 1 ? c[0].name : "Values");
+    return { series: c, categories: o, xAxisLabel: h, yAxisLabel: l };
   }
   renderEmpty(e) {
     this.container.innerHTML = `
@@ -424,34 +436,126 @@ class L {
     `;
   }
 }
-class R {
-  render(e, t, r) {
-    var l;
-    if (!r || r.length === 0) {
+class L {
+  constructor() {
+    this.columns = [], this.allData = [], this.currentRows = [], this.totalRows = 0, this.currentPage = 1, this.currentPageSize = 10, this.searchTerm = "", this.isLoading = !1;
+  }
+  // ── Public API ─────────────────────────────────────────────────────────────
+  render(e, t, s, r) {
+    var h;
+    this.container = e, this.component = t, this.fetchPage = r, this.searchTerm = "", this.currentPage = 1, this.currentPageSize = 10;
+    const i = s && !Array.isArray(s) && "rows" in s;
+    if (i) {
+      const l = s;
+      this.currentRows = l.rows, this.allData = [], this.totalRows = l.total, this.currentPage = l.page, this.currentPageSize = l.pageSize;
+    } else
+      this.allData = s || [], this.currentRows = [], this.totalRows = this.allData.length, this.currentPage = 1;
+    if (i && s.rows.length === 0 && s.total === 0 || !i && this.allData.length === 0) {
       e.innerHTML = `
         <div class="ds-table-card">
-          <div class="ds-table-title">${t.title || ""}</div>
+          <div class="ds-table-header-row">
+            <span class="ds-table-dot"></span>
+            <div class="ds-table-title">${this.escape(t.title || "")}</div>
+          </div>
           <div class="ds-chart-empty">No data available</div>
         </div>
       `;
       return;
     }
-    const s = Object.keys(r[0]), i = ((l = t.properties) == null ? void 0 : l.columns) || [], a = i.length ? i.filter((b) => s.includes(b)) : s, d = a.map((b) => `<th>${this.formatHeader(b)}</th>`).join(""), o = r.map((b) => `<tr>${a.map((n) => {
-      const h = b[n];
-      return `<td title="${this.escape(String(h != null ? h : ""))}">${this.escape(this.formatValue(h))}</td>`;
-    }).join("")}</tr>`).join("");
-    e.innerHTML = `
+    const a = i ? s.rows[0] : this.allData[0], o = a ? Object.keys(a) : [], d = ((h = t.properties) == null ? void 0 : h.columns) || [], c = d.length ? d.filter((l) => o.includes(l)) : [];
+    this.columns = c.length ? c : o, this.paint();
+  }
+  // ── Rendering ──────────────────────────────────────────────────────────────
+  paint() {
+    const { rows: e, startNum: t } = this.getPageRows(), s = Math.max(1, Math.ceil(this.totalRows / this.currentPageSize)), r = (this.currentPage - 1) * this.currentPageSize + 1, i = this.fetchPage ? Math.min(r - 1 + (this.isLoading ? this.currentPageSize : e.length), this.totalRows) : Math.min(this.currentPage * this.currentPageSize, this.totalRows), a = this.columns.map((n) => `<th>${this.escape(this.formatHeader(n))}</th>`).join(""), o = e.length === 0 ? `<tr><td colspan="${this.columns.length + 1}" style="text-align:center;padding:20px;color:#9ca3af">No results found</td></tr>` : e.map((n, b) => {
+      const p = this.columns.map((m) => {
+        const f = n[m];
+        return `<td title="${this.escape(String(f != null ? f : ""))}">${this.escape(this.formatValue(f))}</td>`;
+      }).join("");
+      return `<tr><td class="ds-table-sno">${t + b}</td>${p}</tr>`;
+    }).join(""), d = this.currentPageSize, c = [10, 25, 50, 100].map((n) => `<option value="${n}"${n === d ? " selected" : ""}>${n}</option>`).join(""), h = this.currentPage <= 1, l = this.currentPage >= s;
+    this.container.innerHTML = `
       <div class="ds-table-card">
-        <div class="ds-table-title">${t.title || ""}</div>
+        <div class="ds-table-header-row">
+          <div class="ds-table-title-wrap">
+            <span class="ds-table-dot"></span>
+            <span class="ds-table-title">${this.escape(this.component.title || "")}</span>
+          </div>
+        </div>
         <div class="ds-table-scroll">
           <table class="ds-table">
-            <thead><tr>${d}</tr></thead>
+            <thead><tr><th class="ds-table-sno-th">S.No</th>${a}</tr></thead>
             <tbody>${o}</tbody>
           </table>
         </div>
+        <div class="ds-table-footer">
+          <div class="ds-table-info">
+            <span>${r.toLocaleString()}–${i.toLocaleString()} of ${this.totalRows.toLocaleString()}</span>
+            <span class="ds-table-rows-label">Rows:</span>
+            <select class="ds-table-page-size">${c}</select>
+          </div>
+          <div class="ds-table-pagination">
+            <button class="ds-table-pg-btn" data-action="first" ${h ? "disabled" : ""}>&#171;</button>
+            <button class="ds-table-pg-btn" data-action="prev"  ${h ? "disabled" : ""}>Previous</button>
+            <span class="ds-table-pg-info">Page ${this.currentPage} of ${s}</span>
+            <button class="ds-table-pg-btn" data-action="next" ${l ? "disabled" : ""}>Next</button>
+            <button class="ds-table-pg-btn" data-action="last" ${l ? "disabled" : ""}>&#187;</button>
+          </div>
+        </div>
+        ${this.isLoading ? '<div class="ds-table-loading-overlay"><div class="ds-embed-spinner"></div></div>' : ""}
       </div>
-    `;
+    `, this.attachEvents();
+  }
+  attachEvents() {
+    const e = this.container.querySelector(".ds-table-search");
+    e == null || e.addEventListener("input", () => {
+      this.searchTerm = e.value, this.currentPage = 1, this.fetchPage || (this.totalRows = this.filteredRows().length, this.paint());
+    });
+    const t = this.container.querySelector(".ds-table-page-size");
+    t == null || t.addEventListener("change", () => {
+      this.currentPageSize = parseInt(t.value, 10), this.currentPage = 1, this.fetchPage ? this.loadPage(1) : (this.totalRows = this.filteredRows().length, this.paint());
+    }), this.container.querySelectorAll("[data-action]").forEach((s) => {
+      s.addEventListener("click", () => {
+        if (s.disabled) return;
+        const r = Math.max(1, Math.ceil(this.totalRows / this.currentPageSize)), i = s.dataset.action;
+        let a = this.currentPage;
+        i === "first" ? a = 1 : i === "prev" ? a = Math.max(1, this.currentPage - 1) : i === "next" ? a = Math.min(r, this.currentPage + 1) : i === "last" && (a = r), (a !== this.currentPage || i === "first" || i === "last") && (this.currentPage = a, this.fetchPage ? this.loadPage(a) : this.paint());
+      });
+    });
+  }
+  // ── Server-side page load ──────────────────────────────────────────────────
+  async loadPage(e) {
+    if (this.fetchPage) {
+      this.isLoading = !0, this.currentPage = e, this.paint();
+      try {
+        const t = await this.fetchPage(e, this.currentPageSize);
+        this.currentRows = t.rows || [], this.totalRows = Number(t.total) || this.currentRows.length, this.currentPage = Number(t.page) || e;
+      } catch (t) {
+        console.error("[Deepspot SDK] TableRenderer: page fetch failed", t);
+      } finally {
+        this.isLoading = !1, this.paint();
+      }
+    }
   }
+  // ── Data helpers ───────────────────────────────────────────────────────────
+  getPageRows() {
+    const e = (this.currentPage - 1) * this.currentPageSize + 1;
+    if (this.fetchPage)
+      return { rows: this.currentRows, startNum: e };
+    const t = this.filteredRows(), s = (this.currentPage - 1) * this.currentPageSize;
+    return { rows: t.slice(s, s + this.currentPageSize), startNum: e };
+  }
+  filteredRows() {
+    if (!this.searchTerm) return this.allData;
+    const e = this.searchTerm.toLowerCase();
+    return this.allData.filter(
+      (t) => this.columns.some((s) => {
+        var r;
+        return String((r = t[s]) != null ? r : "").toLowerCase().includes(e);
+      })
+    );
+  }
+  // ── Formatters ─────────────────────────────────────────────────────────────
   formatHeader(e) {
     return e.replace(/_/g, " ").replace(/\b\w/g, (t) => t.toUpperCase());
   }
@@ -462,39 +566,39 @@ class R {
     return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
   }
 }
-class F {
-  render(e, t, r) {
-    const s = t.properties || {};
+class C {
+  render(e, t, s) {
+    const r = t.properties || {};
     let i = null;
-    if (r && r.length > 0) {
-      const h = r[0], f = s.metric || Object.keys(h)[0], g = h[f];
-      if (g !== void 0)
-        i = g;
+    if (s && s.length > 0) {
+      const b = s[0], p = r.metric || Object.keys(b)[0], m = b[p];
+      if (m !== void 0)
+        i = m;
       else {
-        const m = Object.keys(h).find(
-          (u) => u.includes(f) || f.includes(u)
+        const f = Object.keys(b).find(
+          (g) => g.includes(p) || p.includes(g)
         );
-        i = h[m != null ? m : Object.keys(h)[0]];
+        i = b[f != null ? f : Object.keys(b)[0]];
       }
     }
-    const a = this.formatValue(i, s), d = s.backgroundColor || "", o = s.textColor || "", l = t.title || "", b = d ? `background:${d};border-color:${d};` : "", c = o ? `color:${o};` : "", n = o ? `color:${o};opacity:0.7;` : "";
+    const a = this.formatValue(i, r), o = r.backgroundColor || "", d = r.textColor || "", c = t.title || "", h = o ? `background:${o};border-color:${o};` : "", l = d ? `color:${d};` : "", n = d ? `color:${d};opacity:0.7;` : "";
     e.innerHTML = `
-      <div class="ds-card"${b ? ` style="${b}"` : ""}>
-        <div class="ds-card-label"${n ? ` style="${n}"` : ""}>${l}</div>
-        <div class="ds-card-value"${c ? ` style="${c}"` : ""}>${a}</div>
+      <div class="ds-card"${h ? ` style="${h}"` : ""}>
+        <div class="ds-card-label"${n ? ` style="${n}"` : ""}>${c}</div>
+        <div class="ds-card-value"${l ? ` style="${l}"` : ""}>${a}</div>
       </div>
     `;
   }
   formatValue(e, t) {
     if (e == null) return "—";
-    const r = Number(e);
-    if (isNaN(r)) return String(e);
-    const s = (t == null ? void 0 : t.prefix) || (t == null ? void 0 : t.currencySymbol) || "", i = (t == null ? void 0 : t.suffix) || "";
+    const s = Number(e);
+    if (isNaN(s)) return String(e);
+    const r = (t == null ? void 0 : t.prefix) || (t == null ? void 0 : t.currencySymbol) || "", i = (t == null ? void 0 : t.suffix) || "";
     let a;
-    return Math.abs(r) >= 1e6 ? a = (r / 1e6).toFixed(1) + "M" : Math.abs(r) >= 1e3 ? a = (r / 1e3).toFixed(1) + "K" : a = r % 1 === 0 ? r.toLocaleString() : r.toFixed(2), `${s}${a}${i}`;
+    return Math.abs(s) >= 1e6 ? a = (s / 1e6).toFixed(1) + "M" : Math.abs(s) >= 1e3 ? a = (s / 1e3).toFixed(1) + "K" : a = s % 1 === 0 ? s.toLocaleString() : s.toFixed(2), `${r}${a}${i}`;
   }
 }
-class P {
+class D {
   constructor(e, t) {
     this.currentValues = {}, this.container = e, this.onFilterChange = t;
   }
@@ -503,42 +607,42 @@ class P {
       this.container.style.display = "none";
       return;
     }
-    this.container.style.display = "", this.currentValues = { ...t }, this.container.innerHTML = `<div class="ds-filter-bar">${e.map((r) => this.renderFilter(r, t[r.applyToField || r.filterId])).join("")}</div>`, this.attachListeners(e);
+    this.container.style.display = "", this.currentValues = { ...t }, this.container.innerHTML = `<div class="ds-filter-bar">${e.map((s) => this.renderFilter(s, t[s.applyToField || s.filterId])).join("")}</div>`, this.attachListeners(e);
   }
   /**
    * Populate a dropdown / multi-select with options fetched from the API.
    * Called asynchronously after the filter bar is rendered.
    */
   updateOptions(e, t) {
-    const r = this.container.querySelector(
+    const s = this.container.querySelector(
       `select[data-filter-id="${e}"]`
     );
-    if (!r) return;
-    const s = r.value;
-    r.innerHTML = '<option value="">All</option>' + t.map(
+    if (!s) return;
+    const r = s.value;
+    s.innerHTML = '<option value="">All</option>' + t.map(
       (i) => `<option value="${this.escAttr(i)}">${this.escText(i)}</option>`
-    ).join(""), s && t.includes(s) && (r.value = s);
+    ).join(""), r && t.includes(r) && (s.value = r);
   }
   /** Update the stored values without re-rendering (for programmatic setFilter) */
   updateValues(e) {
-    Object.assign(this.currentValues, e), Object.entries(e).forEach(([t, r]) => {
-      const s = this.container.querySelector(`[data-filter-id="${t}"]`);
-      s && r !== void 0 && (s.value = String(r));
+    Object.assign(this.currentValues, e), Object.entries(e).forEach(([t, s]) => {
+      const r = this.container.querySelector(`[data-filter-id="${t}"]`);
+      r && s !== void 0 && (r.value = String(s));
     });
   }
   // ── Private ─────────────────────────────────────────────────────────────────
   renderFilter(e, t) {
-    const r = `ds-filter-${e.filterId}`, s = `<label class="ds-filter-label" for="${r}">${e.label}</label>`;
+    const s = `ds-filter-${e.filterId}`, r = `<label class="ds-filter-label" for="${s}">${e.label}</label>`;
     switch (e.type) {
       case "dropdown":
         return `
           <div class="ds-filter-item">
-            ${s}
-            <select class="ds-filter-select" id="${r}" data-filter-id="${e.filterId}">
+            ${r}
+            <select class="ds-filter-select" id="${s}" data-filter-id="${e.filterId}">
               <option value="">All</option>
-              ${(e.options || []).map((d) => `
-                <option value="${this.escAttr(d)}" ${t === d ? "selected" : ""}>
-                  ${this.escText(d)}
+              ${(e.options || []).map((o) => `
+                <option value="${this.escAttr(o)}" ${t === o ? "selected" : ""}>
+                  ${this.escText(o)}
                 </option>
               `).join("")}
             </select>
@@ -546,10 +650,10 @@ class P {
       case "multi-select":
         return `
           <div class="ds-filter-item">
-            ${s}
-            <select class="ds-filter-select" id="${r}" data-filter-id="${e.filterId}" multiple size="1">
-              ${(e.options || []).map((d) => `
-                <option value="${this.escAttr(d)}">${this.escText(d)}</option>
+            ${r}
+            <select class="ds-filter-select" id="${s}" data-filter-id="${e.filterId}" multiple size="1">
+              ${(e.options || []).map((o) => `
+                <option value="${this.escAttr(o)}">${this.escText(o)}</option>
               `).join("")}
             </select>
           </div>`;
@@ -557,7 +661,7 @@ class P {
         const i = (t == null ? void 0 : t.from) || "", a = (t == null ? void 0 : t.to) || "";
         return `
           <div class="ds-filter-item">
-            ${s}
+            ${r}
             <div class="ds-date-range-inputs">
               <input type="date" class="ds-filter-input"
                 data-filter-id="${e.filterId}" data-date-part="from"
@@ -571,8 +675,8 @@ class P {
       case "text-input":
         return `
           <div class="ds-filter-item">
-            ${s}
-            <input type="text" class="ds-filter-input" id="${r}"
+            ${r}
+            <input type="text" class="ds-filter-input" id="${s}"
               data-filter-id="${e.filterId}"
               value="${this.escAttr(String(t != null ? t : ""))}"
               placeholder="Search..." />
@@ -580,8 +684,8 @@ class P {
       case "number-input":
         return `
           <div class="ds-filter-item">
-            ${s}
-            <input type="number" class="ds-filter-input" id="${r}"
+            ${r}
+            <input type="number" class="ds-filter-input" id="${s}"
               data-filter-id="${e.filterId}"
               value="${this.escAttr(String(t != null ? t : ""))}" />
           </div>`;
@@ -591,21 +695,21 @@ class P {
   }
   attachListeners(e) {
     const t = {};
-    this.container.querySelectorAll("[data-filter-id]").forEach((r) => {
-      const s = r.dataset.filterId, i = r.dataset.datePart, a = e.find((o) => o.filterId === s), d = () => {
-        let o;
+    this.container.querySelectorAll("[data-filter-id]").forEach((s) => {
+      const r = s.dataset.filterId, i = s.dataset.datePart, a = e.find((d) => d.filterId === r), o = () => {
+        let d;
         if ((a == null ? void 0 : a.type) === "date-range" && i)
-          t[s] = t[s] || {}, t[s][i] = r.value, o = { ...t[s] };
+          t[r] = t[r] || {}, t[r][i] = s.value, d = { ...t[r] };
         else if ((a == null ? void 0 : a.type) === "multi-select") {
-          const l = r;
-          o = Array.from(l.selectedOptions).map((b) => b.value).filter(Boolean);
+          const c = s;
+          d = Array.from(c.selectedOptions).map((h) => h.value).filter(Boolean);
         } else
-          o = r.value;
-        this.currentValues[s] = o, this.onFilterChange(s, o);
+          d = s.value;
+        this.currentValues[r] = d, this.onFilterChange(r, d);
       };
-      r.addEventListener(
+      s.addEventListener(
         (a == null ? void 0 : a.type) === "text-input" ? "input" : "change",
-        d
+        o
       );
     });
   }
@@ -616,14 +720,14 @@ class P {
     return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
   }
 }
-class O {
+class z {
   constructor(e, t) {
-    this.activePageId = "", this.activeTabId = "", this.activeFilters = {}, this.chartRenderers = /* @__PURE__ */ new Map(), this.tableRenderer = new R(), this.cardRenderer = new F(), this.isLoadingTab = !1, this.root = e, this.opts = t, this.activeFilters = { ...t.initialFilters };
+    this.activePageId = "", this.activeTabId = "", this.activeFilters = {}, this.chartRenderers = /* @__PURE__ */ new Map(), this.tableRenderer = new L(), this.cardRenderer = new C(), this.isLoadingTab = !1, this.root = e, this.opts = t, this.activeFilters = { ...t.initialFilters };
   }
   // ── Initial full render ───────────────────────────────────────────────────
   render(e) {
-    var t, r;
-    this.renderData = e, this.activePageId = e.activePage, this.activeTabId = e.activeTab, this.buildShell(), this.renderNavigation(), this.renderFilterBar(), this.renderGrid(), (r = (t = this.opts).onReady) == null || r.call(t);
+    var t, s;
+    this.renderData = e, this.activePageId = e.activePage, this.activeTabId = e.activeTab, this.buildShell(), this.renderNavigation(), this.renderFilterBar(), this.renderGrid(), (s = (t = this.opts).onReady) == null || s.call(t);
   }
   // ── Called after lazy tab fetch completes ─────────────────────────────────
   update(e) {
@@ -640,29 +744,62 @@ class O {
     this.chartRenderers.forEach((e) => e.destroy()), this.chartRenderers.clear(), this.root.innerHTML = "";
   }
   exportPDF() {
-    const e = this.root.querySelector("#ds-canvas");
-    e && import("./html2canvas.esm-CzwMv54K.js").then(
-      ({ default: t }) => t(e, { scale: 2, useCORS: !0 }).then(
-        (r) => import("./jspdf.es.min-Ge0fRUwj.js").then((s) => s.j).then(({ jsPDF: s }) => {
-          const i = new s({ orientation: "landscape", unit: "px" });
-          i.addImage(r.toDataURL("image/png"), "PNG", 0, 0, i.internal.pageSize.width, 0), i.save(`${this.renderData.dashboard.name || "dashboard"}.pdf`);
-        })
-      )
+    var n, b;
+    const e = this.root.querySelector("#ds-grid");
+    if (!e) return;
+    const t = this.root.style.height, s = this.root.style.overflow;
+    this.root.style.height = "auto", this.root.style.overflow = "visible";
+    const r = this.root.querySelector("#ds-canvas"), i = (n = r == null ? void 0 : r.style.height) != null ? n : "", a = (b = r == null ? void 0 : r.style.overflow) != null ? b : "";
+    r && (r.style.height = "auto", r.style.overflow = "visible");
+    const o = Array.from(e.querySelectorAll(".ds-table-scroll")), d = o.map((p) => ({
+      el: p,
+      overflow: p.style.overflow,
+      maxHeight: p.style.maxHeight,
+      height: p.style.height
+    }));
+    o.forEach((p) => {
+      p.style.overflow = "visible", p.style.maxHeight = "none", p.style.height = "auto";
+    });
+    const c = e.offsetWidth, h = parseInt(e.style.height, 10) || e.offsetHeight, l = e.getBoundingClientRect().top + window.scrollY;
+    import("./html2canvas.esm-CzwMv54K.js").then(
+      ({ default: p }) => p(e, {
+        scale: 2,
+        useCORS: !0,
+        allowTaint: !0,
+        logging: !1,
+        width: c,
+        height: h,
+        windowWidth: c,
+        windowHeight: h,
+        scrollX: 0,
+        scrollY: -l
+      }).then((m) => {
+        this.root.style.height = t, this.root.style.overflow = s, r && (r.style.height = i, r.style.overflow = a), d.forEach(({ el: f, overflow: g, maxHeight: y, height: v }) => {
+          f.style.overflow = g, f.style.maxHeight = y, f.style.height = v;
+        }), import("./jspdf.es.min-Ge0fRUwj.js").then((f) => f.j).then(({ jsPDF: f }) => {
+          const g = m.width / 2, y = m.height / 2, v = new f({
+            orientation: g >= y ? "landscape" : "portrait",
+            unit: "px",
+            format: [g, y]
+          });
+          v.addImage(m.toDataURL("image/png"), "PNG", 0, 0, g, y), v.save(`${this.renderData.dashboard.name || "dashboard"}.pdf`);
+        });
+      })
     );
   }
   exportCSV() {
     this.renderData.components.forEach((e) => {
       const t = this.renderData.data[e.id];
       if (!(t != null && t.length) || !["table", "bar", "line", "area"].includes(e.type)) return;
-      const r = Object.keys(t[0]), s = [r.join(","), ...t.map(
-        (a) => r.map((d) => {
-          var o;
-          return JSON.stringify((o = a[d]) != null ? o : "");
+      const s = Object.keys(t[0]), r = [s.join(","), ...t.map(
+        (a) => s.map((o) => {
+          var d;
+          return JSON.stringify((d = a[o]) != null ? d : "");
         }).join(",")
       )].join(`
 `);
       Object.assign(document.createElement("a"), {
-        href: URL.createObjectURL(new Blob([s], { type: "text/csv" })),
+        href: URL.createObjectURL(new Blob([r], { type: "text/csv" })),
         download: `${e.title || e.id}.csv`
       }).click();
     });
@@ -673,11 +810,11 @@ class O {
   }
   // ── Shell ─────────────────────────────────────────────────────────────────
   buildShell() {
-    const e = this.opts.embedLevel, t = this.renderData.dashboard.pages, r = e === "dashboard" && t.length > 1, s = e === "page" || e === "dashboard";
+    const e = this.opts.embedLevel, t = this.renderData.dashboard.pages, s = e === "dashboard" && t.length > 1, r = e === "page" || e === "dashboard";
     this.root.innerHTML = `
       ${this.opts.hideExport ? "" : '<div class="ds-toolbar" id="ds-toolbar"></div>'}
-      ${r ? '<nav class="ds-page-nav" id="ds-page-nav"></nav>' : ""}
-      ${s ? '<nav class="ds-page-nav" id="ds-tab-nav"></nav>' : ""}
+      ${s ? '<nav class="ds-page-nav" id="ds-page-nav"></nav>' : ""}
+      ${r ? '<nav class="ds-page-nav" id="ds-tab-nav"></nav>' : ""}
       <div id="ds-filter-container"></div>
       <div class="ds-canvas" id="ds-canvas">
         <div class="ds-grid" id="ds-grid"></div>
@@ -688,19 +825,19 @@ class O {
       </div>
     `, this.root.style.position = "relative", this.opts.hideExport || this.buildExportToolbar();
     const i = this.root.querySelector("#ds-filter-container");
-    this.filterRenderer = new P(i, (a, d) => {
-      var b, c;
-      const o = this.renderData.filters.find((n) => n.filterId === a), l = (o == null ? void 0 : o.applyToField) || a;
-      this.activeFilters[l] = d, (c = (b = this.opts).onFilterChange) == null || c.call(b, this.activeFilters), this.opts.onTabSwitch(this.activePageId, this.activeTabId);
+    this.filterRenderer = new D(i, (a, o) => {
+      var h, l;
+      const d = this.renderData.filters.find((n) => n.filterId === a), c = (d == null ? void 0 : d.applyToField) || a;
+      this.activeFilters[c] = o, (l = (h = this.opts).onFilterChange) == null || l.call(h, this.activeFilters), this.opts.onTabSwitch(this.activePageId, this.activeTabId);
     });
   }
   buildExportToolbar() {
-    var t, r;
+    var t, s;
     const e = this.root.querySelector("#ds-toolbar");
     e && (e.innerHTML = `
       <button class="ds-toolbar-btn" id="ds-btn-pdf">⬇ PDF</button>
-      <button class="ds-toolbar-btn" id="ds-btn-csv">⬇ CSV</button>
-    `, (t = e.querySelector("#ds-btn-pdf")) == null || t.addEventListener("click", () => this.exportPDF()), (r = e.querySelector("#ds-btn-csv")) == null || r.addEventListener("click", () => this.exportCSV()));
+      <button class="ds-toolbar-btn" id="ds-btn-csv" style="display:none">⬇ CSV</button>
+    `, (t = e.querySelector("#ds-btn-pdf")) == null || t.addEventListener("click", () => this.exportPDF()), (s = e.querySelector("#ds-btn-csv")) == null || s.addEventListener("click", () => this.exportCSV()));
   }
   // ── Navigation ────────────────────────────────────────────────────────────
   renderNavigation() {
@@ -713,9 +850,9 @@ class O {
         data-page-id="${t.pageId}">${t.title}</button>
     `).join(""), e.querySelectorAll(".ds-page-tab").forEach((t) => {
       t.addEventListener("click", () => {
-        var s, i;
-        const r = t.dataset.pageId;
-        r === this.activePageId && !this.isLoadingTab || this.triggerTabSwitch(r, (i = (s = this.getTabsForPage(r)[0]) == null ? void 0 : s.id) != null ? i : "");
+        var r, i;
+        const s = t.dataset.pageId;
+        s === this.activePageId && !this.isLoadingTab || this.triggerTabSwitch(s, (i = (r = this.getTabsForPage(s)[0]) == null ? void 0 : r.id) != null ? i : "");
       });
     }));
   }
@@ -724,17 +861,17 @@ class O {
     t && this.buildTabButtons(t, e);
   }
   buildTabButtons(e, t) {
-    const r = this.getTabsForPage(t);
-    if (r.length <= 1) {
+    const s = this.getTabsForPage(t);
+    if (s.length <= 1) {
       e.style.display = "none";
       return;
     }
-    e.style.display = "", e.innerHTML = r.map((s) => `
-      <button class="ds-page-tab ${s.id === this.activeTabId ? "ds-active" : ""}"
-        data-tab-id="${s.id}" data-page-id="${t}">${s.title}</button>
-    `).join(""), e.querySelectorAll(".ds-page-tab").forEach((s) => {
-      s.addEventListener("click", () => {
-        const i = s.dataset.tabId, a = s.dataset.pageId;
+    e.style.display = "", e.innerHTML = s.map((r) => `
+      <button class="ds-page-tab ${r.id === this.activeTabId ? "ds-active" : ""}"
+        data-tab-id="${r.id}" data-page-id="${t}">${r.title}</button>
+    `).join(""), e.querySelectorAll(".ds-page-tab").forEach((r) => {
+      r.addEventListener("click", () => {
+        const i = r.dataset.tabId, a = r.dataset.pageId;
         i === this.activeTabId && a === this.activePageId && !this.isLoadingTab || this.triggerTabSwitch(a, i);
       });
     });
@@ -775,45 +912,47 @@ class O {
     this.hideTabSpinner();
     const e = this.root.querySelector("#ds-grid");
     if (!e) return;
-    this.chartRenderers.forEach((l) => l.destroy()), this.chartRenderers.clear();
+    this.chartRenderers.forEach((c) => c.destroy()), this.chartRenderers.clear();
     const t = this.renderData.components;
     if (!t.length) {
       e.style.height = "200px", e.innerHTML = '<div class="ds-chart-empty" style="padding-top:80px;">No components on this tab.</div>';
       return;
     }
-    const r = e.clientWidth || this.root.clientWidth || 800, s = t.map((l) => l.position), i = s.length ? Math.min(...s.map((l) => l.y)) : 0, a = new I(r, i);
-    e.style.height = `${I.totalHeight(s)}px`, e.innerHTML = "";
-    const d = 36, o = [];
-    t.forEach((l) => {
-      const b = document.createElement("div");
-      b.className = "ds-component-wrapper", b.dataset.componentId = l.id, a.applyStyles(b, l.position), e.appendChild(b);
-      const c = a.toPx(l.position), n = Math.max(50, c.height - d);
-      o.push(this.renderComponent(b, l, n));
-    }), Promise.all(o).catch(() => {
+    const s = e.clientWidth || this.root.clientWidth || 800, r = t.map((c) => c.position), i = r.length ? Math.min(...r.map((c) => c.y)) : 0, a = new S(s, i);
+    e.style.height = `${S.totalHeight(r)}px`, e.innerHTML = "";
+    const o = 36, d = [];
+    t.forEach((c) => {
+      const h = document.createElement("div");
+      h.className = "ds-component-wrapper", h.dataset.componentId = c.id, a.applyStyles(h, c.position), e.appendChild(h);
+      const l = a.toPx(c.position), n = Math.max(50, l.height - o);
+      d.push(this.renderComponent(h, c, n));
+    }), Promise.all(d).catch(() => {
     });
   }
-  async renderComponent(e, t, r) {
-    var a, d;
-    const s = this.renderData.data[t.id] || [], i = this.opts.theme;
+  async renderComponent(e, t, s) {
+    var a, o;
+    const r = this.renderData.data[t.id] || [], i = this.opts.theme;
     switch (t.type) {
       case "bar":
       case "line":
       case "pie":
       case "donut":
       case "area": {
-        const o = new L(e);
-        await o.render(t, s, i, r), this.chartRenderers.set(t.id, o);
+        const d = new R(e);
+        await d.render(t, r, i, s), this.chartRenderers.set(t.id, d);
         break;
       }
-      case "table":
-        this.tableRenderer.render(e, t, s);
+      case "table": {
+        const d = this.opts.onFetchTablePage ? (c, h) => this.opts.onFetchTablePage(t.id, c, h) : void 0;
+        this.tableRenderer.render(e, t, r, d);
         break;
+      }
       case "number-card":
-        this.cardRenderer.render(e, t, s);
+        this.cardRenderer.render(e, t, r);
         break;
       case "text": {
-        const o = Object.entries(((a = t.properties) == null ? void 0 : a.style) || {}).map(([l, b]) => `${l}:${b}`).join(";");
-        e.innerHTML = `<div style="${o};padding:8px;">${((d = t.properties) == null ? void 0 : d.content) || ""}</div>`;
+        const d = Object.entries(((a = t.properties) == null ? void 0 : a.style) || {}).map(([c, h]) => `${c}:${h}`).join(";");
+        e.innerHTML = `<div style="${d};padding:8px;">${((o = t.properties) == null ? void 0 : o.content) || ""}</div>`;
         break;
       }
     }
@@ -829,43 +968,43 @@ class O {
   }
   // ── Helpers ───────────────────────────────────────────────────────────────
   getTabsForPage(e) {
-    var t, r;
-    return (r = (t = this.renderData.dashboard.pages.find((s) => s.pageId === e)) == null ? void 0 : t.tabs) != null ? r : [];
+    var t, s;
+    return (s = (t = this.renderData.dashboard.pages.find((r) => r.pageId === e)) == null ? void 0 : t.tabs) != null ? s : [];
   }
 }
-class j {
+class O {
   constructor(e, t) {
-    this.chartRenderer = null, this.tableRenderer = new R(), this.cardRenderer = new F(), this.root = e, this.theme = t;
+    this.chartRenderer = null, this.tableRenderer = new L(), this.cardRenderer = new C(), this.root = e, this.theme = t;
   }
   render(e, t) {
-    const r = e.components[0];
-    if (!r) {
+    const s = e.components[0];
+    if (!s) {
       this.root.innerHTML = `<div class="ds-embed-error">
         <div class="ds-embed-error-icon">⚠</div>
         <div>Component not found.</div>
       </div>`;
       return;
     }
-    const s = e.data[r.id] || [];
-    this.renderComponent(r, s), t == null || t();
+    const r = e.data[s.id] || [];
+    this.renderComponent(s, r), t == null || t();
   }
   update(e) {
     const t = e.components[0];
     if (!t) return;
-    const r = e.data[t.id] || [];
+    const s = e.data[t.id] || [];
     switch (t.type) {
       case "bar":
       case "line":
       case "pie":
       case "donut":
       case "area":
-        this.chartRenderer ? this.chartRenderer.update(t, r, this.theme) : this.renderComponent(t, r);
+        this.chartRenderer ? this.chartRenderer.update(t, s, this.theme) : this.renderComponent(t, s);
         break;
       case "table":
-        this.tableRenderer.render(this.root, t, r);
+        this.tableRenderer.render(this.root, t, s);
         break;
       case "number-card":
-        this.cardRenderer.render(this.root, t, r);
+        this.cardRenderer.render(this.root, t, s);
         break;
     }
   }
@@ -874,14 +1013,14 @@ class j {
     (e = this.chartRenderer) == null || e.destroy(), this.chartRenderer = null, this.root.innerHTML = "";
   }
   renderComponent(e, t) {
-    var r;
+    var s;
     switch (e.type) {
       case "bar":
       case "line":
       case "pie":
       case "donut":
       case "area":
-        (r = this.chartRenderer) == null || r.destroy(), this.chartRenderer = new L(this.root), this.chartRenderer.render(e, t, this.theme);
+        (s = this.chartRenderer) == null || s.destroy(), this.chartRenderer = new R(this.root), this.chartRenderer.render(e, t, this.theme);
         break;
       case "table":
         this.tableRenderer.render(this.root, e, t);
@@ -894,12 +1033,12 @@ class j {
     }
   }
 }
-let S = !1;
-function M() {
-  if (!(S || typeof document == "undefined")) {
-    S = !0;
+let I = !1;
+function j() {
+  if (!(I || typeof document == "undefined")) {
+    I = !0;
     try {
-      const p = `/* ─────────────────────────────────────────────────────────────────────────────
+      const u = `/* ─────────────────────────────────────────────────────────────────────────────
    Deepspot SDK — Base Embed Styles
    Injected once into the host page's <head> by the SDK.
    All selectors are scoped under .ds-embed-* to avoid leaking into host styles.
@@ -1182,6 +1321,7 @@ function M() {
   overflow: hidden;
   display: flex;
   flex-direction: column;
+  position: relative;
 }
 
 .ds-theme-dark .ds-table-card {
@@ -1189,21 +1329,100 @@ function M() {
   border-color: #334155;
 }
 
+/* ── Table header: dot + title on left, search on right ──────────────────────*/
+.ds-table-header-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 14px 8px;
+  flex-shrink: 0;
+  gap: 8px;
+  border-bottom: 1px solid #f3f4f6;
+}
+
+.ds-theme-dark .ds-table-header-row {
+  border-bottom-color: #334155;
+}
+
+.ds-table-title-wrap {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
+
+.ds-table-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #6366f1;
+  flex-shrink: 0;
+}
+
 .ds-table-title {
-  padding: 10px 14px 4px;
   font-size: 13px;
   font-weight: 600;
   color: #374151;
-  flex-shrink: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .ds-theme-dark .ds-table-title {
   color: #e2e8f0;
 }
 
+/* ── Search ──────────────────────────────────────────────────────────────────*/
+.ds-table-search-wrap {
+  position: relative;
+  flex-shrink: 0;
+}
+
+.ds-table-search-icon {
+  position: absolute;
+  left: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 14px;
+  height: 14px;
+  color: #9ca3af;
+  pointer-events: none;
+}
+
+.ds-table-search {
+  height: 30px;
+  padding: 0 10px 0 28px;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  font-size: 12px;
+  background: #f9fafb;
+  color: #374151;
+  width: 180px;
+  outline: none;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+.ds-table-search:focus {
+  border-color: #6366f1;
+  box-shadow: 0 0 0 2px rgba(99,102,241,0.15);
+  background: #fff;
+}
+
+.ds-theme-dark .ds-table-search {
+  background: #0f172a;
+  border-color: #334155;
+  color: #e2e8f0;
+}
+
+.ds-theme-dark .ds-table-search:focus {
+  background: #1e293b;
+}
+
+/* ── Scroll area ─────────────────────────────────────────────────────────────*/
 .ds-table-scroll {
   flex: 1;
   overflow: auto;
+  min-height: 0;
 }
 
 .ds-table {
@@ -1212,6 +1431,21 @@ function M() {
   font-size: 12px;
 }
 
+.ds-table-sno-th {
+  width: 48px;
+  text-align: center !important;
+}
+
+.ds-table-sno {
+  text-align: center;
+  color: #9ca3af;
+  font-size: 11px;
+}
+
+.ds-theme-dark .ds-table-sno {
+  color: #64748b;
+}
+
 .ds-table th {
   position: sticky;
   top: 0;
@@ -1253,7 +1487,123 @@ function M() {
 }
 
 .ds-theme-dark .ds-table tr:hover td {
+  background: #0f172a;
+}
+
+/* ── Footer: info + pagination ───────────────────────────────────────────────*/
+.ds-table-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 14px;
+  border-top: 1px solid #f3f4f6;
+  flex-shrink: 0;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.ds-theme-dark .ds-table-footer {
+  border-top-color: #334155;
+}
+
+.ds-table-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  color: #6b7280;
+}
+
+.ds-theme-dark .ds-table-info {
+  color: #94a3b8;
+}
+
+.ds-table-rows-label {
+  margin-left: 4px;
+}
+
+.ds-table-page-size {
+  height: 28px;
+  padding: 0 6px;
+  border: 1px solid #e5e7eb;
+  border-radius: 5px;
+  font-size: 12px;
+  background: #fff;
+  color: #374151;
+  cursor: pointer;
+  outline: none;
+}
+
+.ds-theme-dark .ds-table-page-size {
+  background: #0f172a;
+  border-color: #334155;
+  color: #e2e8f0;
+}
+
+.ds-table-pagination {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.ds-table-pg-btn {
+  height: 28px;
+  padding: 0 10px;
+  border: 1px solid #e5e7eb;
+  border-radius: 5px;
+  font-size: 12px;
+  font-weight: 500;
+  background: #fff;
+  color: #374151;
+  cursor: pointer;
+  transition: background 0.12s, border-color 0.12s;
+  white-space: nowrap;
+}
+
+.ds-table-pg-btn:hover:not(:disabled) {
+  background: #f3f4f6;
+  border-color: #d1d5db;
+}
+
+.ds-table-pg-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.ds-theme-dark .ds-table-pg-btn {
   background: #1e293b;
+  border-color: #334155;
+  color: #e2e8f0;
+}
+
+.ds-theme-dark .ds-table-pg-btn:hover:not(:disabled) {
+  background: #0f172a;
+}
+
+.ds-table-pg-info {
+  font-size: 12px;
+  color: #6b7280;
+  white-space: nowrap;
+}
+
+.ds-theme-dark .ds-table-pg-info {
+  color: #94a3b8;
+}
+
+/* ── Loading overlay while fetching a page ───────────────────────────────────*/
+.ds-table-loading-overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(255,255,255,0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 10px;
+  z-index: 10;
+}
+
+.ds-theme-dark .ds-table-loading-overlay {
+  background: rgba(30,41,59,0.7);
 }
 
 /* ── KPI Number Card ───────────────────────────────────────────────────────── */
@@ -1335,102 +1685,103 @@ function M() {
   background: #0f172a;
 }
 `, e = document.createElement("style");
-      e.id = "deepspot-sdk-styles", e.textContent = p, document.head.appendChild(e);
-    } catch (p) {
+      e.id = "deepspot-sdk-styles", e.textContent = u, document.head.appendChild(e);
+    } catch (u) {
     }
   }
 }
-function C(p) {
-  if (typeof p == "string") {
-    const e = document.querySelector(p);
-    if (!e) throw new Error(`Deepspot SDK: container "${p}" not found in DOM`);
+function P(u) {
+  if (typeof u == "string") {
+    const e = document.querySelector(u);
+    if (!e) throw new Error(`Deepspot SDK: container "${u}" not found in DOM`);
     return e;
   }
-  return p;
+  return u;
 }
-class K {
+class M {
   constructor(e) {
     if (!e.apiKey) throw new Error("Deepspot SDK: apiKey is required");
     if (!e.baseUrl) throw new Error("Deepspot SDK: baseUrl is required");
-    this.apiClient = new A(e.baseUrl, e.apiKey), M();
+    this.apiClient = new F(e.baseUrl, e.apiKey), j();
   }
   // ── Embed full dashboard ────────────────────────────────────────────────────
   async embedDashboard(e) {
-    var a, d, o, l, b;
-    const t = C(e.container), r = (a = e.embedLevel) != null ? a : "dashboard", s = (d = e.theme) != null ? d : "light";
+    var a, o, d, c, h;
+    const t = P(e.container), s = (a = e.embedLevel) != null ? a : "dashboard", r = (o = e.theme) != null ? o : "light";
     t.style.height = e.height || "600px", t.style.display = "block";
-    const i = this.createRoot(t, s);
+    const i = this.createRoot(t, r);
     this.showLoading(i);
     try {
-      const c = await this.apiClient.getEmbedToken({
+      const l = await this.apiClient.getEmbedToken({
         dashboardId: e.dashboardId,
         embedType: "dashboard",
-        embedLevel: r,
+        embedLevel: s,
         userId: e.userId,
         tenantId: e.tenantId
       }), n = await this.apiClient.getDashboardRender(
         e.dashboardId,
-        c,
+        l,
         {
-          embedLevel: r,
+          embedLevel: s,
           pageId: e.pageId,
           tabId: e.tabId,
           filters: e.filters || {}
         }
       );
-      let h;
-      const f = new O(i, {
-        embedLevel: r,
-        theme: s,
-        hideFilters: (o = e.hideFilters) != null ? o : !1,
-        hideExport: (l = e.hideExport) != null ? l : !1,
+      let b;
+      const p = new z(i, {
+        embedLevel: s,
+        theme: r,
+        hideFilters: (d = e.hideFilters) != null ? d : !1,
+        hideExport: (c = e.hideExport) != null ? c : !1,
         initialFilters: e.filters || {},
         onFilterChange: e.onFilterChange,
         onReady: e.onReady,
-        onFetchFilterOptions: (g) => this.apiClient.getFilterOptions(e.dashboardId, g, c),
-        onTabSwitch: async (g, m) => {
-          var u, y, k;
-          (u = e.onTabSwitch) == null || u.call(e, g, m);
+        onFetchFilterOptions: (m) => this.apiClient.getFilterOptions(e.dashboardId, m, l),
+        onFetchTablePage: (m, f, g) => this.apiClient.getTablePage(e.dashboardId, m, f, g, l),
+        onTabSwitch: async (m, f) => {
+          var g, y, v;
+          (g = e.onTabSwitch) == null || g.call(e, m, f);
           try {
-            const v = await this.apiClient.getDashboardRender(
+            const x = await this.apiClient.getDashboardRender(
               e.dashboardId,
-              c,
+              l,
               {
-                embedLevel: r,
-                pageId: g,
-                tabId: m,
-                filters: (k = (y = h == null ? void 0 : h.getActiveFilters()) != null ? y : e.filters) != null ? k : {}
+                embedLevel: s,
+                pageId: m,
+                tabId: f,
+                filters: (v = (y = b == null ? void 0 : b.getActiveFilters()) != null ? y : e.filters) != null ? v : {}
               }
             );
-            f.update(v);
-          } catch (v) {
-            console.error("Deepspot SDK: tab fetch failed", v);
+            p.update(x);
+          } catch (x) {
+            console.error("Deepspot SDK: tab fetch failed", x);
           }
         }
       });
-      return f.render(n), h = new $({
+      return p.render(n), b = new $({
         dashboardId: e.dashboardId,
-        token: c,
+        token: l,
         embedType: "dashboard",
-        embedLevel: r,
+        embedLevel: s,
         activePageId: n.activePage,
         activeTabId: n.activeTab,
         activeFilters: e.filters || {},
         apiClient: this.apiClient,
-        renderer: f,
+        renderer: p,
         onFilterChange: e.onFilterChange
-      }), h;
-    } catch (c) {
-      throw this.showError(i, (c == null ? void 0 : c.message) || "Failed to load dashboard"), (b = e.onError) == null || b.call(e, (c == null ? void 0 : c.message) || "Failed to load dashboard"), c;
+      }), b;
+    } catch (l) {
+      throw this.showError(i, (l == null ? void 0 : l.message) || "Failed to load dashboard"), (h = e.onError) == null || h.call(e, (l == null ? void 0 : l.message) || "Failed to load dashboard"), l;
     }
   }
   // ── Embed single report (component) ────────────────────────────────────────
   async embedReport(e) {
-    var s;
-    const t = C(e.container);
+    var r;
+    const t = P(e.container);
     t.style.height = e.height || "400px", t.style.display = "block";
-    const r = this.createRoot(t, e.theme || "light");
-    this.showLoading(r);
+    const s = this.createRoot(t, e.theme || "light");
+    this.showLoading(s);
     try {
       const i = await this.apiClient.getEmbedToken({
         dashboardId: e.dashboardId,
@@ -1443,25 +1794,25 @@ class K {
         e.componentId,
         i,
         { filters: e.filters || {} }
-      ), d = new j(r, e.theme || "light");
-      return d.render(a, e.onReady), new $({
+      ), o = new O(s, e.theme || "light");
+      return o.render(a, e.onReady), new $({
         dashboardId: e.dashboardId,
         componentId: e.componentId,
         token: i,
         embedType: "report",
         activeFilters: e.filters || {},
         apiClient: this.apiClient,
-        renderer: d
+        renderer: o
       });
     } catch (i) {
-      throw this.showError(r, (i == null ? void 0 : i.message) || "Failed to load report"), (s = e.onError) == null || s.call(e, (i == null ? void 0 : i.message) || "Failed to load report"), i;
+      throw this.showError(s, (i == null ? void 0 : i.message) || "Failed to load report"), (r = e.onError) == null || r.call(e, (i == null ? void 0 : i.message) || "Failed to load report"), i;
     }
   }
   // ── Private helpers ─────────────────────────────────────────────────────────
   createRoot(e, t) {
     e.innerHTML = "";
-    const r = document.createElement("div");
-    return r.className = `ds-embed-root ds-theme-${t}`, r.style.width = "100%", r.style.height = "100%", e.appendChild(r), r;
+    const s = document.createElement("div");
+    return s.className = `ds-embed-root ds-theme-${t}`, s.style.width = "100%", s.style.height = "100%", e.appendChild(s), s;
   }
   showLoading(e) {
     e.innerHTML = `
@@ -1482,5 +1833,5 @@ class K {
   }
 }
 export {
-  K as DeepspotSDK
+  M as DeepspotSDK
 };