deepspotscreen-sdk 0.0.1 → 0.0.3

package/dist/deepspot-sdk.esm.js

@@ -1,16 +1,16 @@
-class S {
+class P {
   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 : ""
+      (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(
@@ -18,7 +18,7 @@ class S {
       {
         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,
@@ -38,8 +38,8 @@ class S {
       embedType: "dashboard",
       embedLevel: (i = s.embedLevel) != null ? i : "dashboard"
     });
-    return s.pageId && r.set("pageId", s.pageId), s.tabId && r.set("tabId", s.tabId), s.filters && Object.entries(s.filters).forEach(([a, d]) => {
-      d != null && d !== "" && r.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?${r}`,
       { "x-embed-token": t }
@@ -52,8 +52,8 @@ class S {
       embedLevel: "report",
       componentId: t
     });
-    return r.filters && Object.entries(r.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": s }
@@ -75,6 +75,18 @@ class S {
       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.
@@ -194,8 +206,8 @@ class w {
     });
   }
 }
-const K = 24, $ = 10, C = 12;
-class E {
+const N = 24, S = 10, I = 12;
+class A {
   /**
    * @param containerWidth  Actual pixel width of the grid container.
    * @param minY            Minimum y value across all components (normalises
@@ -206,23 +218,23 @@ class E {
   }
   /** Pixel width of one column unit */
   get colWidth() {
-    return this.containerWidth / K;
+    return this.containerWidth / N;
   }
   /** Convert grid position {x,y,w,h} → CSS absolute pixel values */
   toPx(e) {
-    const t = this.colWidth, s = C / 2;
+    const t = this.colWidth, s = I / 2;
     return {
       left: e.x * t + s,
-      top: (e.y - this.minY) * $ + s,
-      width: e.w * t - C,
-      height: e.h * $ - C
+      top: (e.y - this.minY) * S + s,
+      width: e.w * t - I,
+      height: e.h * S - I
     };
   }
   /** Total pixel height required to fit all positioned components */
   static totalHeight(e) {
     if (!e.length) return 400;
     const t = Math.min(...e.map((r) => r.y));
-    return (Math.max(...e.map((r) => r.y + r.h)) - t) * $ + 40;
+    return (Math.max(...e.map((r) => r.y + r.h)) - t) * S + 40;
   }
   /** Apply absolute positioning styles directly to a DOM element */
   applyStyles(e, t) {
@@ -231,8 +243,8 @@ class E {
   }
 }
 let R = null;
-function q() {
-  return R || (R = import("./apexcharts.common-k3hLWpB8.js").then((u) => u.a)), R;
+function K() {
+  return R || (R = import("./apexcharts.common-k3hLWpB8.js").then((m) => m.a)), R;
 }
 class O {
   constructor(e) {
@@ -258,10 +270,10 @@ class O {
     if (a)
       try {
         this.chart && this.chart.destroy();
-        const { default: d } = await q();
-        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 K();
+        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, s) {
@@ -295,7 +307,7 @@ class O {
   }
   buildCartesianOptions(e, t, s, r) {
     var l;
-    const { series: i, categories: a, xAxisLabel: d, yAxisLabel: o } = this.extractSeriesAndCategories(e, t), n = e.properties || {}, b = n.colors ? Object.values(n.colors) : ["#6366f1", "#8b5cf6", "#ec4899", "#f59e0b", "#10b981", "#3b82f6"], h = s === "dark";
+    const { series: i, categories: a, xAxisLabel: o, yAxisLabel: d } = this.extractSeriesAndCategories(e, t), n = e.properties || {}, b = n.colors ? Object.values(n.colors) : ["#6366f1", "#8b5cf6", "#ec4899", "#f59e0b", "#10b981", "#3b82f6"], c = s === "dark";
     return {
       chart: {
         type: e.type === "area" ? "area" : e.type === "line" ? "line" : "bar",
@@ -311,26 +323,26 @@ class O {
       series: i,
       xaxis: {
         categories: a,
-        title: { text: d },
+        title: { text: o },
         labels: {
           rotate: a.length > 8 ? -45 : 0,
-          style: { colors: h ? "#94a3b8" : "#6b7280", fontSize: "11px" }
+          style: { colors: c ? "#94a3b8" : "#6b7280", fontSize: "11px" }
         },
-        axisBorder: { color: h ? "#334155" : "#e5e7eb" },
-        axisTicks: { color: h ? "#334155" : "#e5e7eb" }
+        axisBorder: { color: c ? "#334155" : "#e5e7eb" },
+        axisTicks: { color: c ? "#334155" : "#e5e7eb" }
       },
       yaxis: {
-        title: { text: o },
-        labels: { style: { colors: h ? "#94a3b8" : "#6b7280", fontSize: "11px" } }
+        title: { text: d },
+        labels: { style: { colors: c ? "#94a3b8" : "#6b7280", fontSize: "11px" } }
       },
       colors: b,
       legend: {
         show: i.length > 1 || ((l = n.showLegend) != null ? l : !1),
         position: "bottom",
-        labels: { colors: h ? "#94a3b8" : "#6b7280" }
+        labels: { colors: c ? "#94a3b8" : "#6b7280" }
       },
       grid: {
-        borderColor: h ? "#1e293b" : "#f3f4f6",
+        borderColor: c ? "#1e293b" : "#f3f4f6",
         strokeDashArray: 4,
         padding: {
           bottom: a.length > 8 ? 60 : 10
@@ -352,10 +364,10 @@ class O {
     };
   }
   buildPieOptions(e, t, s, r) {
-    const i = e.properties || {}, a = t.length > 0 ? Object.keys(t[0]) : [], d = a[0] || "label", o = a[1] || "value", n = t.map((c) => {
+    const i = e.properties || {}, a = t.length > 0 ? Object.keys(t[0]) : [], o = a[0] || "label", d = a[1] || "value", n = t.map((h) => {
       var p;
-      return String((p = c[d]) != null ? p : "");
-    }), b = t.map((c) => Number(c[o]) || 0), h = s === "dark", l = i.colors ? Object.values(i.colors) : ["#6366f1", "#8b5cf6", "#ec4899", "#f59e0b", "#10b981", "#3b82f6"];
+      return String((p = h[o]) != null ? p : "");
+    }), b = t.map((h) => Number(h[d]) || 0), c = s === "dark", l = i.colors ? Object.values(i.colors) : ["#6366f1", "#8b5cf6", "#ec4899", "#f59e0b", "#10b981", "#3b82f6"];
     return {
       chart: {
         type: e.type,
@@ -370,7 +382,7 @@ class O {
       colors: l,
       legend: {
         position: "bottom",
-        labels: { colors: h ? "#94a3b8" : "#6b7280" }
+        labels: { colors: c ? "#94a3b8" : "#6b7280" }
       },
       tooltip: { theme: s },
       dataLabels: { enabled: n.length <= 8 },
@@ -388,7 +400,7 @@ class O {
       try {
         const l = typeof s.selectedYAxisColumn == "string" ? JSON.parse(s.selectedYAxisColumn) : s.selectedYAxisColumn;
         Array.isArray(l) && (a = l.map(
-          (c) => typeof c == "string" ? { column: c } : c
+          (h) => typeof h == "string" ? { column: h } : h
         ));
       } catch (l) {
       }
@@ -397,23 +409,23 @@ class O {
       a = (Array.isArray(l) ? l : [l]).map((p) => ({ column: String(p) }));
     }
     !a.length && r.length > 1 && (a = r.slice(1).map((l) => ({ column: l })));
-    const d = t.map((l) => {
-      var c;
-      return String((c = l[i]) != null ? c : "");
-    }), o = t.length > 0 ? Object.keys(t[0]) : [], n = a.map((l) => {
-      const c = o.includes(l.column) ? l.column : null, p = c ? null : o.find((f) => f.includes(l.column) || l.column.includes(f)), g = !c && !p ? o.find((f) => {
+    const o = t.map((l) => {
+      var h;
+      return String((h = l[i]) != null ? h : "");
+    }), d = t.length > 0 ? Object.keys(t[0]) : [], n = a.map((l) => {
+      const h = d.includes(l.column) ? l.column : null, p = h ? null : d.find((u) => u.includes(l.column) || l.column.includes(u)), f = !h && !p ? d.find((u) => {
         var y;
-        return f !== i && !isNaN(Number((y = t[0]) == null ? void 0 : y[f]));
-      }) : null, m = c || p || g || l.column;
+        return u !== i && !isNaN(Number((y = t[0]) == null ? void 0 : y[u]));
+      }) : null, g = h || p || f || l.column;
       return {
         name: l.label || l.column.replace(/_/g, " "),
-        data: t.map((f) => {
-          const y = f[m];
+        data: t.map((u) => {
+          const y = u[g];
           return y != null ? Number(y) : null;
         })
       };
-    }), b = s.xAxisLabel || i.replace(/_/g, " "), h = s.yAxisLabel || (n.length === 1 ? n[0].name : "Values");
-    return { series: n, categories: d, xAxisLabel: b, yAxisLabel: h };
+    }), b = s.xAxisLabel || i.replace(/_/g, " "), c = s.yAxisLabel || (n.length === 1 ? n[0].name : "Values");
+    return { series: n, categories: o, xAxisLabel: b, yAxisLabel: c };
   }
   renderEmpty(e) {
     this.container.innerHTML = `
@@ -424,34 +436,126 @@ class O {
     `;
   }
 }
-class j {
-  render(e, t, s) {
-    var n;
-    if (!s || s.length === 0) {
+class z {
+  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 b;
+    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 c = s;
+      this.currentRows = c.rows, this.allData = [], this.totalRows = c.total, this.currentPage = c.page, this.currentPageSize = c.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 r = Object.keys(s[0]), i = ((n = t.properties) == null ? void 0 : n.columns) || [], a = i.length ? i.filter((b) => r.includes(b)) : r, d = a.map((b) => `<th>${this.formatHeader(b)}</th>`).join(""), o = s.map((b) => `<tr>${a.map((l) => {
-      const c = b[l];
-      return `<td title="${this.escape(String(c != null ? c : ""))}">${this.escape(this.formatValue(c))}</td>`;
-    }).join("")}</tr>`).join("");
-    e.innerHTML = `
+    const a = i ? s.rows[0] : this.allData[0], o = a ? Object.keys(a) : [], d = ((b = t.properties) == null ? void 0 : b.columns) || [], n = d.length ? d.filter((c) => o.includes(c)) : [];
+    this.columns = n.length ? n : 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((l) => `<th>${this.escape(this.formatHeader(l))}</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((l, h) => {
+      const p = this.columns.map((f) => {
+        const g = l[f];
+        return `<td title="${this.escape(String(g != null ? g : ""))}">${this.escape(this.formatValue(g))}</td>`;
+      }).join("");
+      return `<tr><td class="ds-table-sno">${t + h}</td>${p}</tr>`;
+    }).join(""), d = this.currentPageSize, n = [10, 25, 50, 100].map((l) => `<option value="${l}"${l === d ? " selected" : ""}>${l}</option>`).join(""), b = this.currentPage <= 1, c = 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">${n}</select>
+          </div>
+          <div class="ds-table-pagination">
+            <button class="ds-table-pg-btn" data-action="first" ${b ? "disabled" : ""}>&#171;</button>
+            <button class="ds-table-pg-btn" data-action="prev"  ${b ? "disabled" : ""}>Previous</button>
+            <span class="ds-table-pg-info">Page ${this.currentPage} of ${s}</span>
+            <button class="ds-table-pg-btn" data-action="next" ${c ? "disabled" : ""}>Next</button>
+            <button class="ds-table-pg-btn" data-action="last" ${c ? "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,26 +566,26 @@ class j {
     return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
   }
 }
-class M {
+class j {
   render(e, t, s) {
     const r = t.properties || {};
     let i = null;
     if (s && s.length > 0) {
-      const c = s[0], p = r.metric || Object.keys(c)[0], g = c[p];
-      if (g !== void 0)
-        i = g;
+      const h = s[0], p = r.metric || Object.keys(h)[0], f = h[p];
+      if (f !== void 0)
+        i = f;
       else {
-        const m = Object.keys(c).find(
-          (f) => f.includes(p) || p.includes(f)
+        const g = Object.keys(h).find(
+          (u) => u.includes(p) || p.includes(u)
         );
-        i = c[m != null ? m : Object.keys(c)[0]];
+        i = h[g != null ? g : Object.keys(h)[0]];
       }
     }
-    const a = this.formatValue(i, r), d = r.backgroundColor || "", o = r.textColor || "", n = t.title || "", b = d ? `background:${d};border-color:${d};` : "", h = o ? `color:${o};` : "", l = o ? `color:${o};opacity:0.7;` : "";
+    const a = this.formatValue(i, r), o = r.backgroundColor || "", d = r.textColor || "", n = t.title || "", b = o ? `background:${o};border-color:${o};` : "", c = d ? `color:${d};` : "", l = d ? `color:${d};opacity:0.7;` : "";
     e.innerHTML = `
       <div class="ds-card"${b ? ` style="${b}"` : ""}>
         <div class="ds-card-label"${l ? ` style="${l}"` : ""}>${n}</div>
-        <div class="ds-card-value"${h ? ` style="${h}"` : ""}>${a}</div>
+        <div class="ds-card-value"${c ? ` style="${c}"` : ""}>${a}</div>
       </div>
     `;
   }
@@ -494,7 +598,7 @@ class M {
     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 z {
+class q {
   constructor(e, t) {
     this.currentValues = {}, this.container = e, this.onFilterChange = t;
   }
@@ -536,9 +640,9 @@ class z {
             ${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>
@@ -548,8 +652,8 @@ class z {
           <div class="ds-filter-item">
             ${r}
             <select class="ds-filter-select" id="${s}" data-filter-id="${e.filterId}" multiple size="1">
-              ${(e.options || []).map((d) => `
-                <option value="${this.escAttr(d)}">${this.escText(d)}</option>
+              ${(e.options || []).map((o) => `
+                <option value="${this.escAttr(o)}">${this.escText(o)}</option>
               `).join("")}
             </select>
           </div>`;
@@ -592,20 +696,20 @@ class z {
   attachListeners(e) {
     const t = {};
     this.container.querySelectorAll("[data-filter-id]").forEach((s) => {
-      const r = s.dataset.filterId, i = s.dataset.datePart, a = e.find((o) => o.filterId === r), d = () => {
-        let o;
+      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[r] = t[r] || {}, t[r][i] = s.value, o = { ...t[r] };
+          t[r] = t[r] || {}, t[r][i] = s.value, d = { ...t[r] };
         else if ((a == null ? void 0 : a.type) === "multi-select") {
           const n = s;
-          o = Array.from(n.selectedOptions).map((b) => b.value).filter(Boolean);
+          d = Array.from(n.selectedOptions).map((b) => b.value).filter(Boolean);
         } else
-          o = s.value;
-        this.currentValues[r] = o, this.onFilterChange(r, o);
+          d = s.value;
+        this.currentValues[r] = d, this.onFilterChange(r, d);
       };
       s.addEventListener(
         (a == null ? void 0 : a.type) === "text-input" ? "input" : "change",
-        d
+        o
       );
     });
   }
@@ -616,9 +720,9 @@ class z {
     return e.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
   }
 }
-class N {
+class M {
   constructor(e, t) {
-    this.activePageId = "", this.activeTabId = "", this.activeFilters = {}, this.chartRenderers = /* @__PURE__ */ new Map(), this.tableRenderer = new j(), this.cardRenderer = new M(), 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 z(), this.cardRenderer = new j(), this.isLoadingTab = !1, this.root = e, this.opts = t, this.activeFilters = { ...t.initialFilters };
   }
   // ── Initial full render ───────────────────────────────────────────────────
   render(e) {
@@ -640,14 +744,47 @@ class N {
     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(
-        (s) => import("./jspdf.es.min-d9hlG26J.js").then((r) => r.j).then(({ jsPDF: r }) => {
-          const i = new r({ orientation: "landscape", unit: "px" });
-          i.addImage(s.toDataURL("image/png"), "PNG", 0, 0, i.internal.pageSize.width, 0), i.save(`${this.renderData.dashboard.name || "dashboard"}.pdf`);
-        })
-      )
+    var l, h;
+    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 = (l = r == null ? void 0 : r.style.height) != null ? l : "", a = (h = r == null ? void 0 : r.style.overflow) != null ? h : "";
+    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 n = e.offsetWidth, b = parseInt(e.style.height, 10) || e.offsetHeight, c = e.getBoundingClientRect().top + window.scrollY;
+    import("./html2canvas.esm-CzwMv54K.js").then(
+      ({ default: p }) => p(e, {
+        scale: 2,
+        useCORS: !0,
+        allowTaint: !0,
+        logging: !1,
+        width: n,
+        height: b,
+        windowWidth: n,
+        windowHeight: b,
+        scrollX: 0,
+        scrollY: -c
+      }).then((f) => {
+        this.root.style.height = t, this.root.style.overflow = s, r && (r.style.height = i, r.style.overflow = a), d.forEach(({ el: g, overflow: u, maxHeight: y, height: v }) => {
+          g.style.overflow = u, g.style.maxHeight = y, g.style.height = v;
+        }), import("./jspdf.es.min-d9hlG26J.js").then((g) => g.j).then(({ jsPDF: g }) => {
+          const u = f.width / 2, y = f.height / 2, v = new g({
+            orientation: u >= y ? "landscape" : "portrait",
+            unit: "px",
+            format: [u, y]
+          });
+          v.addImage(f.toDataURL("image/png"), "PNG", 0, 0, u, y), v.save(`${this.renderData.dashboard.name || "dashboard"}.pdf`);
+        });
+      })
     );
   }
   exportCSV() {
@@ -655,9 +792,9 @@ class N {
       const t = this.renderData.data[e.id];
       if (!(t != null && t.length) || !["table", "bar", "line", "area"].includes(e.type)) return;
       const s = Object.keys(t[0]), r = [s.join(","), ...t.map(
-        (a) => s.map((d) => {
-          var o;
-          return JSON.stringify((o = a[d]) != null ? o : "");
+        (a) => s.map((o) => {
+          var d;
+          return JSON.stringify((d = a[o]) != null ? d : "");
         }).join(",")
       )].join(`
 `);
@@ -688,10 +825,10 @@ class N {
       </div>
     `, this.root.style.position = "relative", this.opts.hideExport || this.buildExportToolbar();
     const i = this.root.querySelector("#ds-filter-container");
-    this.filterRenderer = new z(i, (a, d) => {
-      var b, h;
-      const o = this.renderData.filters.find((l) => l.filterId === a), n = (o == null ? void 0 : o.applyToField) || a;
-      this.activeFilters[n] = d, (h = (b = this.opts).onFilterChange) == null || h.call(b, this.activeFilters), this.opts.onTabSwitch(this.activePageId, this.activeTabId);
+    this.filterRenderer = new q(i, (a, o) => {
+      var b, c;
+      const d = this.renderData.filters.find((l) => l.filterId === a), n = (d == null ? void 0 : d.applyToField) || a;
+      this.activeFilters[n] = o, (c = (b = this.opts).onFilterChange) == null || c.call(b, this.activeFilters), this.opts.onTabSwitch(this.activePageId, this.activeTabId);
     });
   }
   buildExportToolbar() {
@@ -699,7 +836,7 @@ class N {
     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>
+      <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 ────────────────────────────────────────────────────────────
@@ -781,19 +918,19 @@ class N {
       e.style.height = "200px", e.innerHTML = '<div class="ds-chart-empty" style="padding-top:80px;">No components on this tab.</div>';
       return;
     }
-    const s = e.clientWidth || this.root.clientWidth || 800, r = t.map((n) => n.position), i = r.length ? Math.min(...r.map((n) => n.y)) : 0, a = new E(s, i);
-    e.style.height = `${E.totalHeight(r)}px`, e.innerHTML = "";
-    const d = 36, o = [];
+    const s = e.clientWidth || this.root.clientWidth || 800, r = t.map((n) => n.position), i = r.length ? Math.min(...r.map((n) => n.y)) : 0, a = new A(s, i);
+    e.style.height = `${A.totalHeight(r)}px`, e.innerHTML = "";
+    const o = 36, d = [];
     t.forEach((n) => {
       const b = document.createElement("div");
       b.className = "ds-component-wrapper", b.dataset.componentId = n.id, a.applyStyles(b, n.position), e.appendChild(b);
-      const h = a.toPx(n.position), l = Math.max(50, h.height - d);
-      o.push(this.renderComponent(b, n, l));
-    }), Promise.all(o).catch(() => {
+      const c = a.toPx(n.position), l = Math.max(50, c.height - o);
+      d.push(this.renderComponent(b, n, l));
+    }), Promise.all(d).catch(() => {
     });
   }
   async renderComponent(e, t, s) {
-    var a, d;
+    var a, o;
     const r = this.renderData.data[t.id] || [], i = this.opts.theme;
     switch (t.type) {
       case "bar":
@@ -801,19 +938,21 @@ class N {
       case "pie":
       case "donut":
       case "area": {
-        const o = new O(e);
-        await o.render(t, r, i, s), this.chartRenderers.set(t.id, o);
+        const d = new O(e);
+        await d.render(t, r, i, s), this.chartRenderers.set(t.id, d);
         break;
       }
-      case "table":
-        this.tableRenderer.render(e, t, r);
+      case "table": {
+        const d = this.opts.onFetchTablePage ? (n, b) => this.opts.onFetchTablePage(t.id, n, b) : void 0;
+        this.tableRenderer.render(e, t, r, d);
         break;
+      }
       case "number-card":
         this.cardRenderer.render(e, t, r);
         break;
       case "text": {
-        const o = Object.entries(((a = t.properties) == null ? void 0 : a.style) || {}).map(([n, b]) => `${n}:${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(([n, b]) => `${n}:${b}`).join(";");
+        e.innerHTML = `<div style="${d};padding:8px;">${((o = t.properties) == null ? void 0 : o.content) || ""}</div>`;
         break;
       }
     }
@@ -835,7 +974,7 @@ class N {
 }
 class H {
   constructor(e, t) {
-    this.chartRenderer = null, this.tableRenderer = new j(), this.cardRenderer = new M(), this.root = e, this.theme = t;
+    this.chartRenderer = null, this.tableRenderer = new z(), this.cardRenderer = new j(), this.root = e, this.theme = t;
   }
   render(e, t) {
     const s = e.components[0];
@@ -894,12 +1033,12 @@ class H {
     }
   }
 }
-let D = !1;
-function F() {
-  if (!(D || typeof document == "undefined")) {
-    D = !0;
+let E = !1;
+function L() {
+  if (!(E || typeof document == "undefined")) {
+    E = !0;
     try {
-      const u = `/* ─────────────────────────────────────────────────────────────────────────────
+      const m = `/* ─────────────────────────────────────────────────────────────────────────────
    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 F() {
   overflow: hidden;
   display: flex;
   flex-direction: column;
+  position: relative;
 }
 
 .ds-theme-dark .ds-table-card {
@@ -1189,21 +1329,100 @@ function F() {
   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 F() {
   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 F() {
 }
 
 .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,34 +1685,34 @@ function F() {
   background: #0f172a;
 }
 `, e = document.createElement("style");
-      e.id = "deepspot-sdk-styles", e.textContent = u, document.head.appendChild(e);
-    } catch (u) {
+      e.id = "deepspot-sdk-styles", e.textContent = m, document.head.appendChild(e);
+    } catch (m) {
     }
   }
 }
-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`);
+function D(m) {
+  if (typeof m == "string") {
+    const e = document.querySelector(m);
+    if (!e) throw new Error(`Deepspot SDK: container "${m}" not found in DOM`);
     return e;
   }
-  return u;
+  return m;
 }
 class U {
   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 S(e.baseUrl, e.apiKey), F();
+    this.apiClient = new P(e.baseUrl, e.apiKey), L();
   }
   // ── Embed full dashboard ────────────────────────────────────────────────────
   async embedDashboard(e) {
-    var a, d, o, n, b;
-    const t = P(e.container), s = (a = e.embedLevel) != null ? a : "dashboard", r = (d = e.theme) != null ? d : "light";
+    var a, o, d, n, b;
+    const t = D(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, r);
     this.showLoading(i);
     try {
-      const h = await this.apiClient.getEmbedToken({
+      const c = await this.apiClient.getEmbedToken({
         dashboardId: e.dashboardId,
         embedType: "dashboard",
         embedLevel: s,
@@ -1370,7 +1720,7 @@ class U {
         tenantId: e.tenantId
       }), l = await this.apiClient.getDashboardRender(
         e.dashboardId,
-        h,
+        c,
         {
           embedLevel: s,
           pageId: e.pageId,
@@ -1378,39 +1728,40 @@ class U {
           filters: e.filters || {}
         }
       );
-      let c;
-      const p = new N(i, {
+      let h;
+      const p = new M(i, {
         embedLevel: s,
         theme: r,
-        hideFilters: (o = e.hideFilters) != null ? o : !1,
+        hideFilters: (d = e.hideFilters) != null ? d : !1,
         hideExport: (n = e.hideExport) != null ? n : !1,
         initialFilters: e.filters || {},
         onFilterChange: e.onFilterChange,
         onReady: e.onReady,
-        onFetchFilterOptions: (g) => this.apiClient.getFilterOptions(e.dashboardId, g, h),
-        onTabSwitch: async (g, m) => {
-          var f, y, x;
-          (f = e.onTabSwitch) == null || f.call(e, g, m);
+        onFetchFilterOptions: (f) => this.apiClient.getFilterOptions(e.dashboardId, f, c),
+        onFetchTablePage: (f, g, u) => this.apiClient.getTablePage(e.dashboardId, f, g, u, c),
+        onTabSwitch: async (f, g) => {
+          var u, y, v;
+          (u = e.onTabSwitch) == null || u.call(e, f, g);
           try {
-            const v = await this.apiClient.getDashboardRender(
+            const x = await this.apiClient.getDashboardRender(
               e.dashboardId,
-              h,
+              c,
               {
                 embedLevel: s,
-                pageId: g,
-                tabId: m,
-                filters: (x = (y = c == null ? void 0 : c.getActiveFilters()) != null ? y : e.filters) != null ? x : {}
+                pageId: f,
+                tabId: g,
+                filters: (v = (y = h == null ? void 0 : h.getActiveFilters()) != null ? y : e.filters) != null ? v : {}
               }
             );
-            p.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 p.render(l), c = new w({
+      return p.render(l), h = new w({
         dashboardId: e.dashboardId,
-        token: h,
+        token: c,
         embedType: "dashboard",
         embedLevel: s,
         activePageId: l.activePage,
@@ -1419,15 +1770,15 @@ class U {
         apiClient: this.apiClient,
         renderer: p,
         onFilterChange: e.onFilterChange
-      }), c;
-    } catch (h) {
-      throw this.showError(i, (h == null ? void 0 : h.message) || "Failed to load dashboard"), (b = e.onError) == null || b.call(e, (h == null ? void 0 : h.message) || "Failed to load dashboard"), h;
+      }), 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;
     }
   }
   // ── Embed single report (component) ────────────────────────────────────────
   async embedReport(e) {
     var r;
-    const t = P(e.container);
+    const t = D(e.container);
     t.style.height = e.height || "400px", t.style.display = "block";
     const s = this.createRoot(t, e.theme || "light");
     this.showLoading(s);
@@ -1443,15 +1794,15 @@ class U {
         e.componentId,
         i,
         { filters: e.filters || {} }
-      ), d = new H(s, e.theme || "light");
-      return d.render(a, e.onReady), new w({
+      ), o = new H(s, e.theme || "light");
+      return o.render(a, e.onReady), new w({
         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(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;
@@ -1481,12 +1832,12 @@ class U {
     `;
   }
 }
-const L = class L extends HTMLElement {
+const C = class C extends HTMLElement {
   constructor() {
     super(...arguments), this.instance = null, this.connected = !1;
   }
   connectedCallback() {
-    this.connected = !0, F(), this.style.display = "block", this.renderRoot = document.createElement("div"), this.renderRoot.className = "ds-embed-root", this.appendChild(this.renderRoot), this.mount();
+    this.connected = !0, L(), this.style.display = "block", this.renderRoot = document.createElement("div"), this.renderRoot.className = "ds-embed-root", this.appendChild(this.renderRoot), this.mount();
   }
   disconnectedCallback() {
     var e;
@@ -1497,59 +1848,60 @@ const L = class L extends HTMLElement {
     t === s || !this.connected || ((r = this.instance) == null || r.destroy(), this.instance = null, this.mount());
   }
   async mount() {
-    const e = this.getAttribute("dashboard-id"), t = this.getAttribute("api-key"), s = this.getAttribute("base-url") || "", r = this.getAttribute("user-id") || void 0, i = this.getAttribute("tenant-id") || void 0, a = this.getAttribute("embed-level") || "dashboard", d = this.getAttribute("theme") || "light", o = this.getAttribute("height") || "600px", n = this.getAttribute("page-id") || void 0, b = this.getAttribute("tab-id") || void 0, h = this.getAttribute("hide-filters") === "true", l = this.getAttribute("hide-export") === "true";
+    const e = this.getAttribute("dashboard-id"), t = this.getAttribute("api-key"), s = this.getAttribute("base-url") || "", r = this.getAttribute("user-id") || void 0, i = this.getAttribute("tenant-id") || void 0, a = this.getAttribute("embed-level") || "dashboard", o = this.getAttribute("theme") || "light", d = this.getAttribute("height") || "600px", n = this.getAttribute("page-id") || void 0, b = this.getAttribute("tab-id") || void 0, c = this.getAttribute("hide-filters") === "true", l = this.getAttribute("hide-export") === "true";
     if (!e || !t || !s) {
       this.showError("Missing required attributes: dashboard-id, api-key, base-url");
       return;
     }
-    this.renderRoot.style.height = o, this.renderRoot.className = `ds-embed-root ds-theme-${d}`, this.showLoading();
+    this.renderRoot.style.height = d, this.renderRoot.className = `ds-embed-root ds-theme-${o}`, this.showLoading();
     try {
-      const c = new S(s, t), p = await c.getEmbedToken({
+      const h = new P(s, t), p = await h.getEmbedToken({
         dashboardId: e,
         embedType: "dashboard",
         embedLevel: a,
         userId: r,
         tenantId: i
-      }), g = await c.getDashboardRender(e, p, {
+      }), f = await h.getDashboardRender(e, p, {
         embedLevel: a,
         pageId: n,
         tabId: b,
         filters: {}
-      }), m = new N(this.renderRoot, {
+      }), g = new M(this.renderRoot, {
         embedLevel: a,
-        theme: d,
-        hideFilters: h,
+        theme: o,
+        hideFilters: c,
         hideExport: l,
         initialFilters: {},
-        onFetchFilterOptions: (f) => c.getFilterOptions(e, f, p),
-        onTabSwitch: async (f, y) => {
-          var x, v;
+        onFetchFilterOptions: (u) => h.getFilterOptions(e, u, p),
+        onFetchTablePage: (u, y, v) => h.getTablePage(e, u, y, v, p),
+        onTabSwitch: async (u, y) => {
+          var v, x;
           try {
-            const I = await c.getDashboardRender(e, p, {
+            const $ = await h.getDashboardRender(e, p, {
               embedLevel: a,
-              pageId: f,
+              pageId: u,
               tabId: y,
-              filters: (v = (x = this.instance) == null ? void 0 : x.getActiveFilters()) != null ? v : {}
+              filters: (x = (v = this.instance) == null ? void 0 : v.getActiveFilters()) != null ? x : {}
             });
-            m.update(I);
-          } catch (I) {
-            console.error("Deepspot SDK: tab fetch failed", I);
+            g.update($);
+          } catch ($) {
+            console.error("Deepspot SDK: tab fetch failed", $);
           }
         }
       });
-      m.render(g), this.instance = new w({
+      g.render(f), this.instance = new w({
         dashboardId: e,
         token: p,
         embedLevel: a,
         embedType: "dashboard",
-        activePageId: g.activePage,
-        activeTabId: g.activeTab,
+        activePageId: f.activePage,
+        activeTabId: f.activeTab,
         activeFilters: {},
-        apiClient: c,
-        renderer: m
+        apiClient: h,
+        renderer: g
       });
-    } catch (c) {
-      this.showError((c == null ? void 0 : c.message) || "Failed to load dashboard");
+    } catch (h) {
+      this.showError((h == null ? void 0 : h.message) || "Failed to load dashboard");
     }
   }
   showLoading() {
@@ -1593,7 +1945,7 @@ const L = class L extends HTMLElement {
     (e = this.instance) == null || e.exportPDF();
   }
 };
-L.observedAttributes = [
+C.observedAttributes = [
   "dashboard-id",
   "api-key",
   "user-id",
@@ -1607,14 +1959,14 @@ L.observedAttributes = [
   "hide-filters",
   "hide-export"
 ];
-let T = L;
+let T = C;
 customElements.get("deepspot-dashboard") || customElements.define("deepspot-dashboard", T);
-const A = class A extends HTMLElement {
+const F = class F extends HTMLElement {
   constructor() {
     super(...arguments), this.instance = null, this.isConnected_ = !1;
   }
   connectedCallback() {
-    this.isConnected_ = !0, F(), this.style.display = "block", this.renderRoot = document.createElement("div"), this.renderRoot.className = "ds-embed-root", this.appendChild(this.renderRoot), this.mount();
+    this.isConnected_ = !0, L(), this.style.display = "block", this.renderRoot = document.createElement("div"), this.renderRoot.className = "ds-embed-root", this.appendChild(this.renderRoot), this.mount();
   }
   disconnectedCallback() {
     var e;
@@ -1625,23 +1977,23 @@ const A = class A extends HTMLElement {
     t !== s && this.isConnected_ && ((r = this.instance) == null || r.destroy(), this.instance = null, this.mount());
   }
   async mount() {
-    const e = this.getAttribute("dashboard-id"), t = this.getAttribute("component-id"), s = this.getAttribute("api-key"), r = this.getAttribute("base-url") || "", i = this.getAttribute("user-id") || void 0, a = this.getAttribute("tenant-id") || void 0, d = this.getAttribute("theme") || "light", o = this.getAttribute("height") || "400px";
+    const e = this.getAttribute("dashboard-id"), t = this.getAttribute("component-id"), s = this.getAttribute("api-key"), r = this.getAttribute("base-url") || "", i = this.getAttribute("user-id") || void 0, a = this.getAttribute("tenant-id") || void 0, o = this.getAttribute("theme") || "light", d = this.getAttribute("height") || "400px";
     if (!e || !t || !s || !r) {
       this.showError("Missing required attributes: dashboard-id, component-id, api-key, base-url");
       return;
     }
-    this.renderRoot.style.height = o, this.renderRoot.className = `ds-embed-root ds-theme-${d}`, this.showLoading();
+    this.renderRoot.style.height = d, this.renderRoot.className = `ds-embed-root ds-theme-${o}`, this.showLoading();
     try {
-      const n = new S(r, s), b = await n.getEmbedToken({
+      const n = new P(r, s), b = await n.getEmbedToken({
         dashboardId: e,
         embedType: "report",
         componentId: t,
         userId: i,
         tenantId: a
-      }), h = await n.getReportRender(e, t, b, {
+      }), c = await n.getReportRender(e, t, b, {
         filters: {}
-      }), l = new H(this.renderRoot, d);
-      l.render(h, () => {
+      }), l = new H(this.renderRoot, o);
+      l.render(c, () => {
       }), this.instance = new w({
         dashboardId: e,
         componentId: t,
@@ -1685,7 +2037,7 @@ const A = class A extends HTMLElement {
     (e = this.instance) == null || e.refresh();
   }
 };
-A.observedAttributes = [
+F.observedAttributes = [
   "dashboard-id",
   "component-id",
   "api-key",
@@ -1695,7 +2047,7 @@ A.observedAttributes = [
   "theme",
   "height"
 ];
-let k = A;
+let k = F;
 customElements.get("deepspot-report") || customElements.define("deepspot-report", k);
 customElements.get("deepspot-dashboard") || customElements.define("deepspot-dashboard", T);
 customElements.get("deepspot-report") || customElements.define("deepspot-report", k);