@burdenoff/microfe-bigconsole 2026.613.3 → 2026.613.5

package/dist/bigconsole/components/widgets/table/TableHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeader.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/table/TableHeader.tsx"],"sourcesContent":["/**\n * TableHeader Component\n *\n * Sortable table header with column definitions.\n */\n\nimport { type FC, memo, useCallback } from 'react';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface ColumnDefinition {\n  /** Unique key for the column */\n  key: string;\n  /** Display header text */\n  header: string;\n  /** Whether column is sortable */\n  sortable?: boolean;\n  /** Column width (CSS value) */\n  width?: string;\n  /** Text alignment */\n  align?: 'left' | 'center' | 'right';\n}\n\nexport type SortDirection = 'asc' | 'desc' | null;\n\nexport interface SortState {\n  column: string | null;\n  direction: SortDirection;\n}\n\nexport interface TableHeaderProps {\n  /** Column definitions */\n  columns: ColumnDefinition[];\n  /** Current sort state */\n  sortState: SortState;\n  /** Callback when sort changes */\n  onSort: (column: string) => void;\n  /** Whether header is sticky */\n  sticky?: boolean;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const TableHeader: FC<TableHeaderProps> = memo(function TableHeader({\n  columns,\n  sortState,\n  onSort,\n  sticky = true,\n}) {\n  const handleSort = useCallback(\n    (column: ColumnDefinition) => {\n      if (column.sortable !== false) {\n        onSort(column.key);\n      }\n    },\n    [onSort]\n  );\n\n  const getSortIcon = (column: ColumnDefinition) => {\n    if (column.sortable === false) return null;\n\n    const isActive = sortState.column === column.key;\n    const direction = isActive ? sortState.direction : null;\n\n    return (\n      <span className=\"inline-flex ml-1\">\n        {direction === 'asc' && (\n          <svg className=\"w-4 h-4 text-action-primary-bg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 15l7-7 7 7\" />\n          </svg>\n        )}\n        {direction === 'desc' && (\n          <svg className=\"w-4 h-4 text-action-primary-bg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M19 9l-7 7-7-7\" />\n          </svg>\n        )}\n        {!direction && (\n          <svg\n            className=\"w-4 h-4 text-text-secondary opacity-0 group-hover:opacity-100\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            viewBox=\"0 0 24 24\"\n          >\n            <path\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth={2}\n              d=\"M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4\"\n            />\n          </svg>\n        )}\n      </span>\n    );\n  };\n\n  return (\n    <thead\n      className={`\n        bg-bg-muted\n        ${sticky ? 'sticky top-0 z-10' : ''}\n      `}\n    >\n      <tr>\n        {columns.map((column) => (\n          <th\n            key={column.key}\n            className={`\n              px-4 py-3\n              text-xs font-semibold uppercase tracking-wider\n              text-text-secondary\n              border-b border-border-default\n              ${column.sortable !== false ? 'cursor-pointer select-none group hover:bg-bg-surface' : ''}\n              ${column.align === 'center' ? 'text-center' : ''}\n              ${column.align === 'right' ? 'text-right' : 'text-left'}\n            `}\n            style={{ width: column.width }}\n            onClick={() => handleSort(column)}\n            role={column.sortable !== false ? 'button' : undefined}\n            tabIndex={column.sortable !== false ? 0 : undefined}\n            onKeyDown={(e) => {\n              if (column.sortable !== false && (e.key === 'Enter' || e.key === ' ')) {\n                e.preventDefault();\n                handleSort(column);\n              }\n            }}\n            aria-sort={\n              sortState.column === column.key ? (sortState.direction === 'asc' ? 'ascending' : 'descending') : undefined\n            }\n          >\n            <div className=\"inline-flex items-center\">\n              {column.header}\n              {getSortIcon(column)}\n            </div>\n          </th>\n        ))}\n      </tr>\n    </thead>\n  );\n});\n\nexport default TableHeader;\n"],"mappings":";;;AA+CA,IAAa,IAAoC,EAAK,SAAqB,EACzE,YACA,cACA,WACA,YAAS,MACR;CACD,IAAM,IAAa,GAChB,MAA6B;AAC5B,EAAI,EAAO,aAAa,MACtB,EAAO,EAAO,IAAI;IAGtB,CAAC,EAAO,CACT,EAEK,KAAe,MAA6B;AAChD,MAAI,EAAO,aAAa,GAAO,QAAO;EAGtC,IAAM,IADW,EAAU,WAAW,EAAO,MAChB,EAAU,YAAY;AAEnD,SACE,kBAAC,QAAD;GAAM,WAAU;aAAhB;IACG,MAAc,SACb,kBAAC,OAAD;KAAK,WAAU;KAAiC,MAAK;KAAO,QAAO;KAAe,SAAQ;eACxF,kBAAC,QAAD;MAAM,eAAc;MAAQ,gBAAe;MAAQ,aAAa;MAAG,GAAE;MAAkB,CAAA;KACnF,CAAA;IAEP,MAAc,UACb,kBAAC,OAAD;KAAK,WAAU;KAAiC,MAAK;KAAO,QAAO;KAAe,SAAQ;eACxF,kBAAC,QAAD;MAAM,eAAc;MAAQ,gBAAe;MAAQ,aAAa;MAAG,GAAE;MAAmB,CAAA;KACpF,CAAA;IAEP,CAAC,KACA,kBAAC,OAAD;KACE,WAAU;KACV,MAAK;KACL,QAAO;KACP,SAAQ;eAER,kBAAC,QAAD;MACE,eAAc;MACd,gBAAe;MACf,aAAa;MACb,GAAE;MACF,CAAA;KACE,CAAA;IAEH;;;AAIX,QACE,kBAAC,SAAD;EACE,WAAW;;UAEP,IAAS,sBAAsB,GAAG;;YAGtC,kBAAC,MAAD,EAAA,UACG,EAAQ,KAAK,MACZ,kBAAC,MAAD;GAEE,WAAW;;;;;gBAKP,EAAO,aAAa,KAAiE,KAAzD,uDAA4D;gBACxF,EAAO,UAAU,WAAW,gBAAgB,GAAG;gBAC/C,EAAO,UAAU,UAAU,eAAe,YAAY;;GAE1D,OAAO,EAAE,OAAO,EAAO,OAAO;GAC9B,eAAe,EAAW,EAAO;GACjC,MAAM,EAAO,aAAa,KAAmB,KAAA,IAAX;GAClC,UAAU,EAAO,aAAa,KAAY,KAAA,IAAJ;GACtC,YAAY,MAAM;AAChB,IAAI,EAAO,aAAa,OAAU,EAAE,QAAQ,WAAW,EAAE,QAAQ,SAC/D,EAAE,gBAAgB,EAClB,EAAW,EAAO;;GAGtB,aACE,EAAU,WAAW,EAAO,MAAO,EAAU,cAAc,QAAQ,cAAc,eAAgB,KAAA;aAGnG,kBAAC,OAAD;IAAK,WAAU;cAAf,CACG,EAAO,QACP,EAAY,EAAO,CAChB;;GACH,EA5BE,EAAO,IA4BT,CACL,EACC,CAAA;EACC,CAAA;EAEV"}
+{"version":3,"file":"TableHeader.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/table/TableHeader.tsx"],"sourcesContent":["/**\n * TableHeader Component\n *\n * Sortable table header with column definitions.\n */\n\nimport { type FC, memo, useCallback } from 'react';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface ColumnDefinition {\n  /** Unique key for the column */\n  key: string;\n  /** Display header text */\n  header: string;\n  /** Whether column is sortable */\n  sortable?: boolean;\n  /** Column width (CSS value) */\n  width?: string;\n  /** Text alignment */\n  align?: 'left' | 'center' | 'right';\n}\n\nexport type SortDirection = 'asc' | 'desc' | null;\n\nexport interface SortState {\n  column: string | null;\n  direction: SortDirection;\n}\n\nexport interface TableHeaderProps {\n  /** Column definitions */\n  columns: ColumnDefinition[];\n  /** Current sort state */\n  sortState: SortState;\n  /** Callback when sort changes */\n  onSort: (column: string) => void;\n  /** Whether header is sticky */\n  sticky?: boolean;\n  /** column key → sticky-left px offset for frozen leading columns */\n  frozenLefts?: Record<string, number>;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const TableHeader: FC<TableHeaderProps> = memo(function TableHeader({\n  columns,\n  sortState,\n  onSort,\n  sticky = true,\n  frozenLefts,\n}) {\n  const handleSort = useCallback(\n    (column: ColumnDefinition) => {\n      if (column.sortable !== false) {\n        onSort(column.key);\n      }\n    },\n    [onSort]\n  );\n\n  const getSortIcon = (column: ColumnDefinition) => {\n    if (column.sortable === false) return null;\n\n    const isActive = sortState.column === column.key;\n    const direction = isActive ? sortState.direction : null;\n\n    return (\n      <span className=\"inline-flex ml-1\">\n        {direction === 'asc' && (\n          <svg className=\"w-4 h-4 text-action-primary-bg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M5 15l7-7 7 7\" />\n          </svg>\n        )}\n        {direction === 'desc' && (\n          <svg className=\"w-4 h-4 text-action-primary-bg\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M19 9l-7 7-7-7\" />\n          </svg>\n        )}\n        {!direction && (\n          <svg\n            className=\"w-4 h-4 text-text-secondary opacity-0 group-hover:opacity-100\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            viewBox=\"0 0 24 24\"\n          >\n            <path\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth={2}\n              d=\"M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4\"\n            />\n          </svg>\n        )}\n      </span>\n    );\n  };\n\n  return (\n    <thead\n      className={`\n        bg-bg-muted\n        ${sticky ? 'sticky top-0 z-10' : ''}\n      `}\n    >\n      <tr>\n        {columns.map((column) => {\n          const frozen = frozenLefts?.[column.key];\n          return (\n            <th\n              key={column.key}\n              className={`\n              px-4 py-3\n              text-xs font-semibold uppercase tracking-wider\n              text-text-secondary\n              border-b border-border-default\n              ${column.sortable !== false ? 'cursor-pointer select-none group hover:bg-bg-surface' : ''}\n              ${column.align === 'center' ? 'text-center' : ''}\n              ${column.align === 'right' ? 'text-right' : 'text-left'}\n              ${frozen != null ? 'sticky z-20 bg-bg-muted' : ''}\n            `}\n              style={frozen != null ? { width: column.width, left: frozen } : { width: column.width }}\n              onClick={() => handleSort(column)}\n              role={column.sortable !== false ? 'button' : undefined}\n              tabIndex={column.sortable !== false ? 0 : undefined}\n              onKeyDown={(e) => {\n                if (column.sortable !== false && (e.key === 'Enter' || e.key === ' ')) {\n                  e.preventDefault();\n                  handleSort(column);\n                }\n              }}\n              aria-sort={\n                sortState.column === column.key\n                  ? sortState.direction === 'asc'\n                    ? 'ascending'\n                    : 'descending'\n                  : undefined\n              }\n            >\n              <div className=\"inline-flex items-center\">\n                {column.header}\n                {getSortIcon(column)}\n              </div>\n            </th>\n          );\n        })}\n      </tr>\n    </thead>\n  );\n});\n\nexport default TableHeader;\n"],"mappings":";;;AAiDA,IAAa,IAAoC,EAAK,SAAqB,EACzE,YACA,cACA,WACA,YAAS,IACT,kBACC;CACD,IAAM,IAAa,GAChB,MAA6B;AAC5B,EAAI,EAAO,aAAa,MACtB,EAAO,EAAO,IAAI;IAGtB,CAAC,EAAO,CACT,EAEK,KAAe,MAA6B;AAChD,MAAI,EAAO,aAAa,GAAO,QAAO;EAGtC,IAAM,IADW,EAAU,WAAW,EAAO,MAChB,EAAU,YAAY;AAEnD,SACE,kBAAC,QAAD;GAAM,WAAU;aAAhB;IACG,MAAc,SACb,kBAAC,OAAD;KAAK,WAAU;KAAiC,MAAK;KAAO,QAAO;KAAe,SAAQ;eACxF,kBAAC,QAAD;MAAM,eAAc;MAAQ,gBAAe;MAAQ,aAAa;MAAG,GAAE;MAAkB,CAAA;KACnF,CAAA;IAEP,MAAc,UACb,kBAAC,OAAD;KAAK,WAAU;KAAiC,MAAK;KAAO,QAAO;KAAe,SAAQ;eACxF,kBAAC,QAAD;MAAM,eAAc;MAAQ,gBAAe;MAAQ,aAAa;MAAG,GAAE;MAAmB,CAAA;KACpF,CAAA;IAEP,CAAC,KACA,kBAAC,OAAD;KACE,WAAU;KACV,MAAK;KACL,QAAO;KACP,SAAQ;eAER,kBAAC,QAAD;MACE,eAAc;MACd,gBAAe;MACf,aAAa;MACb,GAAE;MACF,CAAA;KACE,CAAA;IAEH;;;AAIX,QACE,kBAAC,SAAD;EACE,WAAW;;UAEP,IAAS,sBAAsB,GAAG;;YAGtC,kBAAC,MAAD,EAAA,UACG,EAAQ,KAAK,MAAW;GACvB,IAAM,IAAS,IAAc,EAAO;AACpC,UACE,kBAAC,MAAD;IAEE,WAAW;;;;;gBAKT,EAAO,aAAa,KAAiE,KAAzD,uDAA4D;gBACxF,EAAO,UAAU,WAAW,gBAAgB,GAAG;gBAC/C,EAAO,UAAU,UAAU,eAAe,YAAY;gBACtD,KAAU,OAAmC,KAA5B,0BAA+B;;IAElD,OAAO,KAAU,OAA+C,EAAE,OAAO,EAAO,OAAO,GAA/D;KAAE,OAAO,EAAO;KAAO,MAAM;KAAQ;IAC7D,eAAe,EAAW,EAAO;IACjC,MAAM,EAAO,aAAa,KAAmB,KAAA,IAAX;IAClC,UAAU,EAAO,aAAa,KAAY,KAAA,IAAJ;IACtC,YAAY,MAAM;AAChB,KAAI,EAAO,aAAa,OAAU,EAAE,QAAQ,WAAW,EAAE,QAAQ,SAC/D,EAAE,gBAAgB,EAClB,EAAW,EAAO;;IAGtB,aACE,EAAU,WAAW,EAAO,MACxB,EAAU,cAAc,QACtB,cACA,eACF,KAAA;cAGN,kBAAC,OAAD;KAAK,WAAU;eAAf,CACG,EAAO,QACP,EAAY,EAAO,CAChB;;IACH,EAjCE,EAAO,IAiCT;IAEP,EACC,CAAA;EACC,CAAA;EAEV"}

package/dist/bigconsole/components/widgets/table/TableWidget.js

@@ -3,10 +3,10 @@ import "../../../contexts/index.js";
 import n from "./TableHeader.js";
 import r from "./TableCell.js";
 import i from "./TablePagination.js";
-import { memo as a, useCallback as o, useMemo as s, useState as c } from "react";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { memo as a, useCallback as o, useEffect as s, useMemo as c, useRef as l, useState as u } from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region src/bigconsole/components/widgets/table/TableWidget.tsx
-function d(e, t) {
+function ee(e, t) {
 	return !t.column || !t.direction ? e : [...e].sort((e, n) => {
 		let r = e[t.column], i = n[t.column];
 		if (r == null && i == null) return 0;
@@ -16,7 +16,7 @@ function d(e, t) {
 		return a = typeof r == "number" && typeof i == "number" ? r - i : String(r).localeCompare(String(i)), t.direction === "asc" ? a : -a;
 	});
 }
-function f(e, t, n) {
+function p(e, t, n) {
 	if (!t.trim()) return e;
 	let r = t.toLowerCase();
 	return e.filter((e) => n.some((t) => {
@@ -24,10 +24,21 @@ function f(e, t, n) {
 		return n != null && String(n).toLowerCase().includes(r);
 	}));
 }
-var p = a(function({ widget: a, data: p = [], onRowClick: m, onDrilldown: h }) {
-	let g = a.config, _ = s(() => {
-		if (Array.isArray(p)) return p;
-		if (p && typeof p == "object") {
+function m(e, t, n) {
+	switch (t) {
+		case "currency": return new Intl.NumberFormat("en-US", {
+			style: "currency",
+			currency: n || "USD"
+		}).format(e);
+		case "percentage": return `${(e * 100).toFixed(1)}%`;
+		case "number": return new Intl.NumberFormat("en-US").format(e);
+		default: return Number.isInteger(e) ? String(e) : e.toFixed(2);
+	}
+}
+var h = a(function({ widget: a, data: h = [], onRowClick: g, onDrilldown: _ }) {
+	let v = a.config, y = c(() => {
+		if (Array.isArray(h)) return h;
+		if (h && typeof h == "object") {
 			for (let e of [
 				"data",
 				"items",
@@ -38,20 +49,20 @@ var p = a(function({ widget: a, data: p = [], onRowClick: m, onDrilldown: h }) {
 				"sales",
 				"entries",
 				"values"
-			]) if (Array.isArray(p[e])) return p[e];
-			let e = Object.values(p);
+			]) if (Array.isArray(h[e])) return h[e];
+			let e = Object.values(h);
 			for (let t of e) if (Array.isArray(t)) return t;
-			return [p];
+			return [h];
 		}
 		return [];
-	}, [p]), { handleDataClick: v, enabled: y } = t(a.id, g?.crossFilterMappings), { clearAllCrossFilters: b, hasCrossFilters: x } = e(), [S, C] = c({
-		column: g?.defaultSortColumn || null,
-		direction: g?.defaultSortDirection || null
-	}), [w, T] = c(""), [E, D] = c({
+	}, [h]), { handleDataClick: b, enabled: x } = t(a.id, v?.crossFilterMappings), { clearAllCrossFilters: S, hasCrossFilters: C } = e(), [w, T] = u({
+		column: v?.defaultSortColumn || null,
+		direction: v?.defaultSortDirection || null
+	}), [E, D] = u(""), [O, k] = u({
 		page: 0,
-		pageSize: g?.pageSize || 10,
+		pageSize: v?.pageSize || 10,
 		totalItems: 0
-	}), O = s(() => g?.columns?.length ? g.columns.map((e) => {
+	}), A = c(() => v?.columns?.length ? v.columns.map((e) => {
 		if (typeof e == "string") return {
 			key: e,
 			header: e.charAt(0).toUpperCase() + e.slice(1).replace(/_/g, " "),
@@ -65,41 +76,131 @@ var p = a(function({ widget: a, data: p = [], onRowClick: m, onDrilldown: h }) {
 			width: e.width == null ? void 0 : String(e.width),
 			align: e.align
 		};
-	}) : _.length > 0 ? Object.keys(_[0]).map((e) => ({
+	}) : y.length > 0 ? Object.keys(y[0]).map((e) => ({
 		key: e,
 		header: e.charAt(0).toUpperCase() + e.slice(1).replace(/_/g, " "),
 		sortable: !0
-	})) : [], [g?.columns, _]), k = s(() => {
+	})) : [], [v?.columns, y]), j = c(() => {
 		let e = {};
-		return g?.columns?.forEach((t) => {
+		return v?.columns?.forEach((t) => {
 			t.format && (t.key || t.field) && (e[t.key || t.field || ""] = { type: t.format });
 		}), e;
-	}, [g?.columns]), A = s(() => {
-		let e = _;
-		return g?.showSearch !== !1 && (e = f(e, w, O)), e = d(e, S), e;
+	}, [v?.columns]), M = c(() => {
+		let e = {};
+		return v?.columns?.forEach((t) => {
+			let n = t.key || t.field;
+			n && t.cellChart && (e[n] = t.cellChart);
+		}), e;
+	}, [v?.columns]), N = v?.conditionalRules, P = c(() => {
+		let e = {};
+		return v?.columns?.forEach((t) => {
+			let n = t.key || t.field;
+			n && t.conditionalRules?.length && (e[n] = t.conditionalRules);
+		}), e;
+	}, [v?.columns]), F = c(() => {
+		let e = {};
+		return v?.columns?.forEach((t) => {
+			let n = t.key || t.field;
+			n && t.total && t.total !== "none" && (e[n] = t.total);
+		}), e;
+	}, [v?.columns]), I = v?.showTotals === !0 || Object.keys(F).length > 0, L = c(() => {
+		let e = y;
+		return v?.showSearch !== !1 && (e = p(e, E, A)), e = ee(e, w), e;
 	}, [
-		_,
+		y,
+		E,
 		w,
-		S,
-		O,
-		g?.showSearch
+		A,
+		v?.showSearch
+	]), R = c(() => {
+		let e = {};
+		for (let t of A) {
+			let n = 0;
+			for (let e of L) {
+				let r = e[t.key];
+				typeof r == "number" && Number.isFinite(r) && (n = Math.max(n, Math.abs(r)));
+			}
+			e[t.key] = n;
+		}
+		return e;
+	}, [A, L]), z = c(() => {
+		if (!I) return {};
+		let e = {};
+		for (let t of A) {
+			let n = F[t.key];
+			if (!n) {
+				e[t.key] = null;
+				continue;
+			}
+			let r = L.map((e) => e[t.key]).filter((e) => typeof e == "number" && Number.isFinite(e));
+			n === "count" ? e[t.key] = L.length : r.length === 0 ? e[t.key] = null : n === "sum" ? e[t.key] = r.reduce((e, t) => e + t, 0) : n === "avg" ? e[t.key] = r.reduce((e, t) => e + t, 0) / r.length : n === "min" ? e[t.key] = Math.min(...r) : n === "max" ? e[t.key] = Math.max(...r) : e[t.key] = null;
+		}
+		return e;
+	}, [
+		I,
+		A,
+		F,
+		L
 	]);
-	s(() => {
-		D((e) => ({
+	c(() => {
+		k((e) => ({
 			...e,
-			totalItems: A.length
+			totalItems: L.length
 		}));
-	}, [A.length]);
-	let j = s(() => {
-		if (g?.showPagination === !1) return A;
-		let e = E.page * E.pageSize;
-		return A.slice(e, e + E.pageSize);
+	}, [L.length]);
+	let B = c(() => {
+		if (v?.showPagination === !1) return L;
+		let e = O.page * O.pageSize;
+		return L.slice(e, e + O.pageSize);
 	}, [
-		A,
-		E,
-		g?.showPagination
-	]), M = o((e) => {
-		C((t) => {
+		L,
+		O,
+		v?.showPagination
+	]), V = v?.virtualized === !0, H = v?.rowHeight && v.rowHeight > 0 ? v.rowHeight : 44, U = l(null), [W, G] = u(0), [K, q] = u(0);
+	s(() => {
+		if (!V) return;
+		let e = U.current;
+		if (!e) return;
+		q(e.clientHeight);
+		let t = typeof ResizeObserver < "u" ? new ResizeObserver(() => q(e.clientHeight)) : void 0;
+		return t?.observe(e), () => t?.disconnect();
+	}, [V]);
+	let J = c(() => {
+		if (!V) return null;
+		let e = L.length, t = K > 0 ? Math.ceil(K / H) : 20, n = Math.max(0, Math.floor(W / H) - 6), r = Math.min(e, n + t + 12);
+		return {
+			rows: L.slice(n, r),
+			topSpacer: n * H,
+			bottomSpacer: Math.max(0, (e - r) * H),
+			startIndex: n
+		};
+	}, [
+		V,
+		L,
+		K,
+		W,
+		H
+	]), Y = V && J ? J.rows : B, X = V && J ? J.startIndex : 0, Z = v?.frozenColumns && v.frozenColumns > 0 ? v.frozenColumns : 0, { displayColumns: Q, frozenLefts: $ } = c(() => {
+		if (Z <= 0) return {
+			displayColumns: A,
+			frozenLefts: {}
+		};
+		let e = {}, t = 0;
+		return {
+			displayColumns: A.map((n, r) => {
+				if (r < Z) {
+					let r = n.width && parseInt(n.width, 10) || 160;
+					return e[n.key] = t, t += r, {
+						...n,
+						width: `${r}px`
+					};
+				}
+				return n;
+			}),
+			frozenLefts: e
+		};
+	}, [A, Z]), te = o((e) => {
+		T((t) => {
 			if (t.column !== e) return {
 				column: e,
 				direction: "asc"
@@ -110,35 +211,35 @@ var p = a(function({ widget: a, data: p = [], onRowClick: m, onDrilldown: h }) {
 				direction: n
 			};
 		});
-	}, []), N = o((e) => {
-		D((t) => ({
+	}, []), ne = o((e) => {
+		k((t) => ({
 			...t,
 			page: e
 		}));
-	}, []), P = o((e) => {
-		D((t) => ({
+	}, []), re = o((e) => {
+		k((t) => ({
 			...t,
 			pageSize: e,
 			page: 0
 		}));
-	}, []), F = o((e, t) => {
-		let n = g?.crossFilterMappings?.length || g?.enableCrossFilter;
-		if (y && n) {
-			let t = O[0]?.key;
-			v(e, t ? String(e[t]) : void 0);
+	}, []), ie = o((e, t) => {
+		let n = v?.crossFilterMappings?.length || v?.enableCrossFilter;
+		if (x && n) {
+			let t = A[0]?.key;
+			b(e, t ? String(e[t]) : void 0);
 		}
-		h ? h(e) : m && a.drilldowns?.length && m(e, t);
+		_ ? _(e) : g && a.drilldowns?.length && g(e, t);
 	}, [
-		m,
-		h,
+		g,
+		_,
 		a.drilldowns,
-		y,
-		v,
-		O,
-		g?.crossFilterMappings,
-		g?.enableCrossFilter
-	]), I = o(() => {
-		let e = [O.map((e) => e.header).join(","), ...A.map((e) => O.map((t) => {
+		x,
+		b,
+		A,
+		v?.crossFilterMappings,
+		v?.enableCrossFilter
+	]), ae = o(() => {
+		let e = [A.map((e) => e.header).join(","), ...L.map((e) => A.map((t) => {
 			let n = e[t.key];
 			if (n == null) return "";
 			let r = String(n);
@@ -146,27 +247,27 @@ var p = a(function({ widget: a, data: p = [], onRowClick: m, onDrilldown: h }) {
 		}).join(","))].join("\n"), t = new Blob([e], { type: "text/csv" }), n = URL.createObjectURL(t), r = document.createElement("a");
 		r.href = n, r.download = `${a.title || "table"}-${(/* @__PURE__ */ new Date()).toISOString().split("T")[0]}.csv`, r.click(), URL.revokeObjectURL(n);
 	}, [
-		O,
 		A,
+		L,
 		a.title
-	]), L = g?.crossFilterMappings?.length || g?.enableCrossFilter, R = !!(h || m && a.drilldowns?.length || L);
-	return /* @__PURE__ */ u("div", {
+	]), oe = v?.crossFilterMappings?.length || v?.enableCrossFilter, se = !!(_ || g && a.drilldowns?.length || oe);
+	return /* @__PURE__ */ f("div", {
 		className: "flex flex-col h-full",
 		children: [
-			x && /* @__PURE__ */ l("div", {
+			C && /* @__PURE__ */ d("div", {
 				className: "flex items-center gap-2 px-3 py-2 border-b border-border-default",
-				children: /* @__PURE__ */ u("button", {
+				children: /* @__PURE__ */ f("button", {
 					type: "button",
 					onClick: (e) => {
-						e.stopPropagation(), b();
+						e.stopPropagation(), S();
 					},
 					className: "\n              inline-flex items-center gap-1.5\n              px-2.5 py-1 rounded-md\n              text-xs font-medium\n              bg-action-primary-bg/10 text-action-primary-text\n              hover:bg-action-primary-bg/20\n              transition-colors\n            ",
-					children: [/* @__PURE__ */ l("svg", {
+					children: [/* @__PURE__ */ d("svg", {
 						className: "w-3.5 h-3.5",
 						fill: "none",
 						stroke: "currentColor",
 						viewBox: "0 0 24 24",
-						children: /* @__PURE__ */ l("path", {
+						children: /* @__PURE__ */ d("path", {
 							strokeLinecap: "round",
 							strokeLinejoin: "round",
 							strokeWidth: 2,
@@ -175,38 +276,38 @@ var p = a(function({ widget: a, data: p = [], onRowClick: m, onDrilldown: h }) {
 					}), "Clear Filter"]
 				})
 			}),
-			(g?.showSearch !== !1 || g?.showExport !== !1) && /* @__PURE__ */ u("div", {
+			(v?.showSearch !== !1 || v?.showExport !== !1) && /* @__PURE__ */ f("div", {
 				className: "flex items-center justify-between p-3 border-b border-border-default",
-				children: [g?.showSearch !== !1 && /* @__PURE__ */ u("div", {
+				children: [v?.showSearch !== !1 && /* @__PURE__ */ f("div", {
 					className: "relative flex items-center",
-					children: [/* @__PURE__ */ l("svg", {
+					children: [/* @__PURE__ */ d("svg", {
 						className: "absolute left-3 w-4 h-4 text-text-secondary pointer-events-none",
 						fill: "none",
 						stroke: "currentColor",
 						viewBox: "0 0 24 24",
-						children: /* @__PURE__ */ l("path", {
+						children: /* @__PURE__ */ d("path", {
 							strokeLinecap: "round",
 							strokeLinejoin: "round",
 							strokeWidth: 2,
 							d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
 						})
-					}), /* @__PURE__ */ l("input", {
+					}), /* @__PURE__ */ d("input", {
 						type: "text",
 						placeholder: "Search products...",
-						value: w,
-						onChange: (e) => T(e.target.value),
+						value: E,
+						onChange: (e) => D(e.target.value),
 						className: "\n                  pl-10 pr-4 py-2\n                  text-sm text-text-primary\n                  bg-bg-surface\n                  border border-border-default\n                  rounded-md\n                  focus:outline-none focus:ring-2 focus:ring-action-primary-bg focus:border-action-primary-bg\n                  w-48 sm:w-64\n                  placeholder:text-text-tertiary\n                "
 					})]
-				}), g?.showExport !== !1 && /* @__PURE__ */ u("button", {
+				}), v?.showExport !== !1 && /* @__PURE__ */ f("button", {
 					type: "button",
-					onClick: I,
+					onClick: ae,
 					className: "\n                inline-flex items-center gap-2\n                px-3 py-2\n                text-sm font-medium\n                text-text-primary\n                bg-bg-surface\n                border border-border-default\n                rounded-md\n                hover:bg-bg-muted\n                transition-colors\n              ",
-					children: [/* @__PURE__ */ l("svg", {
+					children: [/* @__PURE__ */ d("svg", {
 						className: "w-4 h-4",
 						fill: "none",
 						stroke: "currentColor",
 						viewBox: "0 0 24 24",
-						children: /* @__PURE__ */ l("path", {
+						children: /* @__PURE__ */ d("path", {
 							strokeLinecap: "round",
 							strokeLinejoin: "round",
 							strokeWidth: 2,
@@ -215,44 +316,98 @@ var p = a(function({ widget: a, data: p = [], onRowClick: m, onDrilldown: h }) {
 					}), "Export CSV"]
 				})]
 			}),
-			/* @__PURE__ */ u("div", {
+			/* @__PURE__ */ f("div", {
+				ref: U,
 				className: "flex-1 overflow-auto",
-				children: [/* @__PURE__ */ u("table", {
+				onScroll: V ? (e) => G(e.target.scrollTop) : void 0,
+				children: [/* @__PURE__ */ f("table", {
 					className: "w-full",
-					children: [/* @__PURE__ */ l(n, {
-						columns: O,
-						sortState: S,
-						onSort: M
-					}), /* @__PURE__ */ l("tbody", { children: j.map((e, t) => /* @__PURE__ */ l("tr", {
-						className: `
-                  ${R ? "cursor-pointer hover:bg-bg-muted/50" : ""}
-                  ${t % 2 == 0 ? "bg-bg-surface" : "bg-bg-muted/30"}
-                `,
-						onClick: () => F(e, t),
-						children: O.map((t) => /* @__PURE__ */ l(r, {
-							value: e[t.key],
-							column: t,
-							format: k[t.key],
-							rowData: e
-						}, t.key))
-					}, t)) })]
-				}), j.length === 0 && /* @__PURE__ */ l("div", {
+					children: [
+						/* @__PURE__ */ d(n, {
+							columns: Q,
+							sortState: w,
+							onSort: te,
+							frozenLefts: Z > 0 ? $ : void 0
+						}),
+						/* @__PURE__ */ f("tbody", { children: [
+							V && J && J.topSpacer > 0 && /* @__PURE__ */ d("tr", {
+								"aria-hidden": "true",
+								style: { height: J.topSpacer },
+								children: /* @__PURE__ */ d("td", {
+									colSpan: Q.length,
+									style: {
+										padding: 0,
+										border: "none"
+									}
+								})
+							}),
+							Y.map((e, t) => {
+								let n = X + t;
+								return /* @__PURE__ */ d("tr", {
+									className: `
+                    ${se ? "cursor-pointer hover:bg-bg-muted/50" : ""}
+                    ${n % 2 == 0 ? "bg-bg-surface" : "bg-bg-muted/30"}
+                  `,
+									style: V ? { height: H } : void 0,
+									onClick: () => ie(e, n),
+									children: Q.map((t) => /* @__PURE__ */ d(r, {
+										value: e[t.key],
+										column: t,
+										format: j[t.key],
+										rowData: e,
+										conditionalRules: P[t.key] ?? N,
+										dataBarMax: R[t.key],
+										stickyLeft: $[t.key],
+										cellChart: M[t.key]
+									}, t.key))
+								}, n);
+							}),
+							V && J && J.bottomSpacer > 0 && /* @__PURE__ */ d("tr", {
+								"aria-hidden": "true",
+								style: { height: J.bottomSpacer },
+								children: /* @__PURE__ */ d("td", {
+									colSpan: Q.length,
+									style: {
+										padding: 0,
+										border: "none"
+									}
+								})
+							})
+						] }),
+						I && L.length > 0 && /* @__PURE__ */ d("tfoot", { children: /* @__PURE__ */ d("tr", {
+							className: "bg-bg-muted/50 font-semibold border-t-2 border-border-default",
+							children: Q.map((e, t) => {
+								let n = z[e.key], r = j[e.key], i = $[e.key];
+								return /* @__PURE__ */ d("td", {
+									className: `
+                        px-4 py-3 text-sm text-text-primary
+                        ${e.align === "center" ? "text-center" : ""}
+                        ${e.align === "right" ? "text-right" : "text-left"}
+                        ${i == null ? "" : "sticky z-10 bg-bg-muted"}
+                      `,
+									style: i == null ? void 0 : { left: i },
+									children: n == null ? t === 0 ? "Total" : "" : m(n, r?.type, r?.currency)
+								}, e.key);
+							})
+						}) })
+					]
+				}), L.length === 0 && /* @__PURE__ */ d("div", {
 					className: "flex items-center justify-center py-12 text-text-secondary",
-					children: w ? "No matching records found" : "No data available"
+					children: E ? "No matching records found" : "No data available"
 				})]
 			}),
-			g?.showPagination !== !1 && A.length > 0 && /* @__PURE__ */ l(i, {
+			!V && v?.showPagination !== !1 && L.length > 0 && /* @__PURE__ */ d(i, {
 				pagination: {
-					...E,
-					totalItems: A.length
+					...O,
+					totalItems: L.length
 				},
-				onPageChange: N,
-				onPageSizeChange: P
+				onPageChange: ne,
+				onPageSizeChange: re
 			})
 		]
 	});
 });
 //#endregion
-export { p as default };
+export { h as default };
 
 //# sourceMappingURL=TableWidget.js.map