@smallwebco/tinypivot-react 1.0.74 → 1.0.80

package/README.md

@@ -1,15 +1,16 @@
 # @smallwebco/tinypivot-react
 
-A lightweight data grid with pivot tables, charts, and optional AI-powered data exploration for React. **Under 40KB gzipped** — 10x smaller than AG Grid.
+A lightweight data grid with free pivot tables, Pro charts, and optional AI-powered data exploration for React. **Under 40KB gzipped** — 10x smaller than AG Grid.
 
 **[Live Demo](https://tiny-pivot.com)** · **[Buy License](https://tiny-pivot.com/#pricing)**
 
 ## Why TinyPivot?
 
 - **Lightweight**: Under 40KB gzipped vs 500KB+ for AG Grid
-- **Batteries Included**: Pivot tables, 6 chart types, Excel-like features out of the box
+- **Free Pivot Tables**: Sum aggregations, totals, and calculated fields included
+- **Pro Upgrade**: Advanced aggregations, charts, AI Data Analyst, and no watermark
 - **AI Data Analyst** (Pro): Natural language queries with BYOK — use your own OpenAI/Anthropic key
-- **One-Time License**: No subscriptions — pay once, use forever
+- **Lifetime License**: No subscriptions — buy once, use forever
 
 ## Installation
 
@@ -44,6 +45,96 @@ export default function App() {
 }
 ```
 
+## Theming
+
+TinyPivot ships 22 themes — 2 neutral (`light`, `dark`) plus 10 brand themes each with a light and dark variant. Themes are applied via the `theme` prop on `DataGrid`.
+
+### Quick start
+
+```tsx
+<DataGrid data={data} theme="slate-dark" />
+```
+
+`theme="auto"` resolves to `'light'` or `'dark'` based on the user's system preference (`prefers-color-scheme`).
+
+### Available themes
+
+| Theme | Accent | Vibe |
+|---|---|---|
+| `light` / `dark` / `auto` | indigo / violet | TinyPivot defaults — neutral cool grays |
+| `slate` / `slate-dark` | `#4f46e5` indigo | Linear / Stripe — cool neutral |
+| `zinc` / `zinc-dark` | near-mono | Vercel / Anthropic — minimalist |
+| `indigo` / `indigo-dark` | `#6366f1` vivid indigo | Premium SaaS |
+| `violet` / `violet-dark` | `#8b5cf6` purple | Data viz / AI tools |
+| `emerald` / `emerald-dark` | `#10b981` green | Fintech / finance |
+| `sky` / `sky-dark` | `#0ea5e9` light blue | Productivity / airy |
+| `rose` / `rose-dark` | `#f43f5e` warm pink | Friendly / creator |
+| `amber` / `amber-dark` | `#f59e0b` warm orange | Energy / wellness |
+| `solar` / `solar-dark` | `#b58900` mustard | Solarized-inspired warm cream + dark teal |
+| `mono` / `mono-dark` | `#000` / `#fff` | Editorial — pure grayscale, high contrast |
+
+### Custom themes
+
+Brand themes redefine ~25 CSS custom property tokens at the grid root. You can override these in your own CSS to create a custom theme:
+
+```tsx
+import './my-brand.css'
+
+<DataGrid data={data} theme="light" className="my-brand" />
+```
+
+```css
+/* my-brand.css */
+.vpg-data-grid.my-brand {
+  --vpg-accent: #ff6b35;
+  --vpg-accent-hover: #e55426;
+  --vpg-surface-bg: #fafaf7;
+  --vpg-surface-panel: #f0eee7;
+  /* …override any of the tokens below */
+}
+```
+
+**Token reference** — these are the variables you can override:
+
+- **Surfaces**: `--vpg-surface-bg`, `--vpg-surface-panel`, `--vpg-surface-elevated`, `--vpg-surface-hover`, `--vpg-surface-selected`, `--vpg-surface-striped`
+- **Text**: `--vpg-text-primary`, `--vpg-text-secondary`, `--vpg-text-muted`, `--vpg-text-inverse`
+- **Borders**: `--vpg-border-default`, `--vpg-border-strong`, `--vpg-border-subtle`
+- **Accent**: `--vpg-accent`, `--vpg-accent-hover`, `--vpg-accent-soft-bg`, `--vpg-accent-soft-text`, `--vpg-focus-ring`
+- **States**: `--vpg-state-error`, `--vpg-state-warning`, `--vpg-state-success`, `--vpg-state-info`
+- **Scrollbar**: `--vpg-scrollbar-thumb`, `--vpg-scrollbar-track`
+
+Custom theme classes layer on top of any preset, so you can start from `theme="dark"` and tweak just the accent, for example.
+
+### Adding a theme switcher
+
+Let users pick their own theme — bind a state value to a `<select>`:
+
+```tsx
+import { DataGrid } from '@smallwebco/tinypivot-react'
+import '@smallwebco/tinypivot-react/style.css'
+import { useState } from 'react'
+
+type Theme = 'light' | 'dark' | 'slate' | 'slate-dark' | 'emerald' | 'emerald-dark'
+
+export function MyGrid({ data }) {
+  const [theme, setTheme] = useState<Theme>('dark')
+
+  return (
+    <>
+      <select value={theme} onChange={e => setTheme(e.target.value as Theme)}>
+        <option value="light">Light</option>
+        <option value="dark">Dark</option>
+        <option value="slate-dark">Slate (dark)</option>
+        <option value="emerald-dark">Emerald (dark)</option>
+        {/* …add more themes */}
+      </select>
+
+      <DataGrid data={data} theme={theme} />
+    </>
+  )
+}
+```
+
 ## Features
 
 | Feature | Free | Pro |
@@ -56,11 +147,12 @@ export default function App() {
 | Column resizing | ✅ | ✅ |
 | Clipboard (Ctrl+C) | ✅ | ✅ |
 | Dark mode | ✅ | ✅ |
+| Pivot table with Sum aggregation | ✅ | ✅ |
+| Row/column totals | ✅ | ✅ |
+| Calculated fields with formulas | ✅ | ✅ |
 | **AI Data Analyst** (natural language, BYOK) | ❌ | ✅ |
 | **Chart Builder** (6 chart types) | ❌ | ✅ |
-| Pivot table | ❌ | ✅ |
-| Aggregations (Sum, Avg, etc.) | ❌ | ✅ |
-| Row/column totals | ❌ | ✅ |
+| Advanced aggregations (Count, Avg, Min, Max, Unique, Median, Std Dev, %) | ❌ | ✅ |
 | No watermark | ❌ | ✅ |
 
 ## Props
@@ -70,14 +162,14 @@ export default function App() {
 | `data` | `Record<string, unknown>[]` | **required** | Array of data objects |
 | `loading` | `boolean` | `false` | Show loading spinner |
 | `fontSize` | `'xs' \| 'sm' \| 'base'` | `'xs'` | Font size preset |
-| `showPivot` | `boolean` | `true` | Show pivot toggle (Pro) |
+| `showPivot` | `boolean` | `true` | Show pivot toggle |
 | `enableExport` | `boolean` | `true` | Show CSV export button |
 | `enableSearch` | `boolean` | `true` | Show global search |
 | `enablePagination` | `boolean` | `false` | Enable pagination |
 | `pageSize` | `number` | `50` | Rows per page |
 | `enableColumnResize` | `boolean` | `true` | Drag to resize columns |
 | `enableClipboard` | `boolean` | `true` | Ctrl+C to copy cells |
-| `theme` | `'light' \| 'dark' \| 'auto'` | `'light'` | Color theme |
+| `theme` | `string` | `'light'` | Color theme — see [Theming](#theming) for the full list (22 presets) |
 | `numberFormat` | `'us' \| 'eu' \| 'plain'` | `'us'` | Number display format: US (1,234.56), EU (1.234,56), plain (1234.56) |
 | `dateFormat` | `'us' \| 'eu' \| 'iso'` | `'iso'` | Date display format: US (MM/DD/YYYY), EU (DD/MM/YYYY), ISO (YYYY-MM-DD) |
 | `fieldRoleOverrides` | `Record<string, FieldRole>` | `undefined` | Override auto-detected chart field roles per column (`'dimension'` \| `'measure'` \| `'temporal'`) |
@@ -180,7 +272,7 @@ See the [full documentation](https://github.com/Small-Web-Co/tinypivot) for comp
 
 ## License
 
-- **Free Tier**: MIT License for basic grid features
+- **Free Tier**: MIT License for core grid and pivot features
 - **Pro Features**: Commercial license required
 
 **[Purchase at tiny-pivot.com/#pricing](https://tiny-pivot.com/#pricing)**

package/dist/index.cjs

@@ -99,14 +99,22 @@ function useAIAnalyst(options) {
       }
     }
   }, [storageKey]);
-  const [conversation, setConversation] = (0, import_react.useState)(() => loadFromStorage());
+  const initialConversationRef = (0, import_react.useRef)(null);
+  if (!initialConversationRef.current) {
+    initialConversationRef.current = loadFromStorage();
+  }
+  const [conversation, setConversation] = (0, import_react.useState)(initialConversationRef.current);
   const [schemas, setSchemas] = (0, import_react.useState)(/* @__PURE__ */ new Map());
   const [allSchemas, setAllSchemas] = (0, import_react.useState)([]);
   const [isLoading, setIsLoading] = (0, import_react.useState)(false);
   const [error, setError] = (0, import_react.useState)(null);
-  const [lastLoadedData, setLastLoadedData] = (0, import_react.useState)(null);
+  const [lastLoadedData, setLastLoadedData] = (0, import_react.useState)(
+    () => (0, import_tinypivot_core.getLatestConversationData)(initialConversationRef.current)
+  );
   const [discoveredDataSources, setDiscoveredDataSources] = (0, import_react.useState)([]);
   const [isLoadingTables, setIsLoadingTables] = (0, import_react.useState)(false);
+  const dataSourceLoadPromisesRef = (0, import_react.useRef)(/* @__PURE__ */ new Map());
+  const hydratedPersistedSelectionRef = (0, import_react.useRef)(false);
   const effectiveDataSources = (0, import_react.useMemo)(() => {
     if (config.dataSources && config.dataSources.length > 0) {
       return config.dataSources;
@@ -251,6 +259,59 @@ function useAIAnalyst(options) {
       console.warn("Failed to fetch sample data:", err);
     }
   }, [onDataLoaded]);
+  const loadDataSourceState = (0, import_react.useCallback)(async (dataSource) => {
+    const currentConfig = configRef.current;
+    if (currentConfig.dataSourceLoader) {
+      const { data, schema } = await currentConfig.dataSourceLoader(dataSource.id);
+      if (schema) {
+        setSchemas((prev) => new Map(prev).set(dataSource.id, schema));
+      }
+      if (data && data.length > 0) {
+        setLastLoadedData(data);
+        onDataLoaded?.({
+          data,
+          query: `SELECT * FROM ${dataSource.table} LIMIT 100`,
+          dataSourceId: dataSource.id,
+          rowCount: data.length
+        });
+      }
+      return;
+    }
+    if (currentConfig.demoMode) {
+      const demoSchema = (0, import_tinypivot_core.getDemoSchema)(dataSource.id);
+      if (demoSchema) {
+        setSchemas((prev) => new Map(prev).set(dataSource.id, demoSchema));
+      }
+      const initialData = (0, import_tinypivot_core.getInitialDemoData)(dataSource.id);
+      if (initialData) {
+        setLastLoadedData(initialData);
+        onDataLoaded?.({
+          data: initialData,
+          query: `SELECT * FROM ${dataSource.table} LIMIT 10`,
+          dataSourceId: dataSource.id,
+          rowCount: initialData.length
+        });
+      }
+      return;
+    }
+    if (currentConfig.endpoint) {
+      await fetchSchema(dataSource);
+      await fetchSampleData(dataSource);
+    }
+  }, [fetchSchema, fetchSampleData, onDataLoaded]);
+  const ensureDataSourceState = (0, import_react.useCallback)(async (dataSource) => {
+    const existingLoad = dataSourceLoadPromisesRef.current.get(dataSource.id);
+    if (existingLoad) {
+      return existingLoad;
+    }
+    const loadPromise = loadDataSourceState(dataSource).catch((err) => {
+      console.warn("Failed to load data source:", err);
+    }).finally(() => {
+      dataSourceLoadPromisesRef.current.delete(dataSource.id);
+    });
+    dataSourceLoadPromisesRef.current.set(dataSource.id, loadPromise);
+    return loadPromise;
+  }, [loadDataSourceState]);
   const selectDataSource = (0, import_react.useCallback)(async (dataSourceId) => {
     const dataSource = effectiveDataSources.find((ds) => ds.id === dataSourceId);
     if (!dataSource) {
@@ -270,44 +331,30 @@ What would you like to know about this data?`
       onConversationUpdate?.({ conversation: withMessage });
       return withMessage;
     });
-    if (configRef.current.dataSourceLoader) {
-      try {
-        const { data, schema } = await configRef.current.dataSourceLoader(dataSourceId);
-        if (schema) {
-          setSchemas((prev) => new Map(prev).set(dataSourceId, schema));
-        }
-        if (data && data.length > 0) {
-          setLastLoadedData(data);
-          onDataLoaded?.({
-            data,
-            query: `SELECT * FROM ${dataSource.table} LIMIT 100`,
-            dataSourceId,
-            rowCount: data.length
-          });
-        }
-      } catch (err) {
-        console.warn("Failed to load data source:", err);
-      }
-    } else if (configRef.current.demoMode) {
-      const demoSchema = (0, import_tinypivot_core.getDemoSchema)(dataSourceId);
-      if (demoSchema) {
-        setSchemas((prev) => new Map(prev).set(dataSourceId, demoSchema));
-      }
-      const initialData = (0, import_tinypivot_core.getInitialDemoData)(dataSourceId);
-      if (initialData) {
-        setLastLoadedData(initialData);
-        onDataLoaded?.({
-          data: initialData,
-          query: `SELECT * FROM ${dataSource.table} LIMIT 10`,
-          dataSourceId,
-          rowCount: initialData.length
-        });
-      }
-    } else if (configRef.current.endpoint) {
-      await fetchSchema(dataSource);
-      await fetchSampleData(dataSource);
+    await ensureDataSourceState(dataSource);
+  }, [effectiveDataSources, ensureDataSourceState, onConversationUpdate]);
+  (0, import_react.useEffect)(() => {
+    if (hydratedPersistedSelectionRef.current) {
+      return;
+    }
+    const initialConversation = initialConversationRef.current;
+    const initialDataSourceId = initialConversation?.dataSourceId;
+    if (!initialDataSourceId) {
+      hydratedPersistedSelectionRef.current = true;
+      return;
+    }
+    const dataSource = effectiveDataSources.find((ds) => ds.id === initialDataSourceId);
+    if (!dataSource) {
+      return;
+    }
+    const hasPersistedPreviewData = !!(0, import_tinypivot_core.getLatestConversationData)(initialConversation);
+    const hasSchema = schemas.has(initialDataSourceId);
+    const hasPreviewData = !!lastLoadedData?.length || hasPersistedPreviewData;
+    hydratedPersistedSelectionRef.current = true;
+    if (!hasSchema || !hasPreviewData) {
+      void ensureDataSourceState(dataSource);
     }
-  }, [effectiveDataSources, fetchSchema, fetchSampleData, onConversationUpdate, onDataLoaded]);
+  }, [effectiveDataSources, ensureDataSourceState, lastLoadedData, schemas]);
   const callAIEndpoint = (0, import_react.useCallback)(async (userInput, currentConversation, currentSchemas, currentDataSources, currentAllSchemas) => {
     if (!configRef.current.endpoint) {
       throw new Error("No endpoint configured. Set `endpoint` in AI analyst config.");
@@ -710,6 +757,7 @@ What would you like to know about this data?`
     return null;
   }, [conversation.dataSourceId, effectiveDataSources, onError]);
   const clearConversation = (0, import_react.useCallback)(() => {
+    hydratedPersistedSelectionRef.current = true;
     const newConv = (0, import_tinypivot_core.createConversation)(configRef.current.sessionId);
     setConversation(newConv);
     setError(null);
@@ -720,7 +768,9 @@ What would you like to know about this data?`
     return { ...conversation };
   }, [conversation]);
   const importConversation = (0, import_react.useCallback)((conv) => {
+    hydratedPersistedSelectionRef.current = true;
     setConversation(conv);
+    setLastLoadedData((0, import_tinypivot_core.getLatestConversationData)(conv));
     onConversationUpdate?.({ conversation: conv });
   }, [onConversationUpdate]);
   return {
@@ -782,6 +832,7 @@ var AIAnalyst = (0, import_react2.forwardRef)(({
     onQueryExecuted,
     onError
   });
+  const isDarkTheme = theme === "dark" || typeof theme === "string" && theme.endsWith("-dark");
   (0, import_react2.useImperativeHandle)(ref, () => ({
     loadFullData,
     selectedDataSource
@@ -943,7 +994,7 @@ var AIAnalyst = (0, import_react2.forwardRef)(({
     return !!message.metadata?.data && message.metadata.data.length > 0;
   };
   if (!selectedDataSource) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `vpg-ai-analyst ${theme === "dark" ? "vpg-theme-dark" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "vpg-ai-picker-fullscreen", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "vpg-ai-picker-content", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `vpg-ai-analyst ${isDarkTheme ? "vpg-theme-dark" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "vpg-ai-picker-fullscreen", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "vpg-ai-picker-content", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "vpg-ai-picker-header", children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "vpg-ai-icon-lg", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 2a2 2 0 0 1 2 2c0 .74-.4 1.39-1 1.73V7h1a7 7 0 0 1 7 7h1a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1v1a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-1H2a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h1a7 7 0 0 1 7-7h1V5.73c-.6-.34-1-.99-1-1.73a2 2 0 0 1 2-2z" }),
@@ -1015,7 +1066,7 @@ var AIAnalyst = (0, import_react2.forwardRef)(({
       ] })
     ] }) }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `vpg-ai-analyst ${theme === "dark" ? "vpg-theme-dark" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "vpg-ai-split-layout", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `vpg-ai-analyst ${isDarkTheme ? "vpg-theme-dark" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "vpg-ai-split-layout", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "vpg-ai-chat-panel", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "vpg-ai-chat-header", children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -1745,7 +1796,7 @@ function ChartBuilder({
     return val.toFixed(dec);
   }, []);
   const chartOptions = (0, import_react4.useMemo)(() => {
-    const isDark = theme === "dark";
+    const isDark = theme === "dark" || typeof theme === "string" && theme.endsWith("-dark");
     const config = chartConfig;
     const options = config.options || {};
     const baseOptions = {
@@ -3834,7 +3885,8 @@ function PivotConfig({
   onAddColumnField,
   onAddCalculatedField,
   onRemoveCalculatedField,
-  onUpdateCalculatedField
+  onUpdateCalculatedField,
+  theme
 }) {
   const [fieldSearch, setFieldSearch] = (0, import_react12.useState)("");
   const [showCalcModal, setShowCalcModal] = (0, import_react12.useState)(false);
@@ -3960,7 +4012,7 @@ function PivotConfig({
     setShowCalcModal(false);
     setEditingCalcField(null);
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "vpg-pivot-config", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: `vpg-pivot-config ${theme ? `vpg-theme-${theme}` : ""}`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "vpg-config-header", children: [
       /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("h3", { className: "vpg-config-title", children: [
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
@@ -4228,7 +4280,8 @@ function PivotSkeleton({
   onAddValueField,
   onRemoveValueField,
   onReorderRowFields,
-  onReorderColumnFields
+  onReorderColumnFields,
+  theme
 }) {
   const { showWatermark, canUsePivot, isDemo } = useLicense();
   const getValueFieldDisplayName = (0, import_react13.useCallback)((field) => {
@@ -4594,7 +4647,7 @@ function PivotSkeleton({
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "div",
     {
-      className: `vpg-pivot-skeleton vpg-font-${currentFontSize} ${draggingField ? "vpg-is-dragging" : ""}`,
+      className: `vpg-pivot-skeleton vpg-font-${currentFontSize} ${theme ? `vpg-theme-${theme}` : ""} ${draggingField ? "vpg-is-dragging" : ""}`,
       children: [
         showCopyToast && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "vpg-toast", children: [
           /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("svg", { className: "vpg-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
@@ -4715,9 +4768,8 @@ function PivotSkeleton({
               d: "M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h3", { children: "Pro Feature" }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { children: "Pivot Table functionality requires a Pro license." }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("a", { href: "https://tiny-pivot.com/#pricing", target: "_blank", rel: "noopener noreferrer", className: "vpg-pro-link", children: "Get Pro License \u2192" })
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h3", { children: "Pivot Unavailable" }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { children: "Pivot mode could not be enabled in this session. Try reloading the page." })
         ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "vpg-config-bar", children: [
             /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
@@ -6146,7 +6198,8 @@ function DataGrid({
               onRemoveValueField: removeValueField,
               onAddCalculatedField: addCalculatedField,
               onRemoveCalculatedField: removeCalculatedField,
-              onUpdateCalculatedField: addCalculatedField
+              onUpdateCalculatedField: addCalculatedField,
+              theme: currentTheme
             }
           ) }),
           /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `vpg-pivot-main ${!showPivotConfig ? "vpg-full-width" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
@@ -6171,7 +6224,8 @@ function DataGrid({
               onRemoveValueField: removeValueField,
               onUpdateAggregation: updateValueFieldAggregation,
               onReorderRowFields: setRowFields,
-              onReorderColumnFields: setColumnFields
+              onReorderColumnFields: setColumnFields,
+              theme: currentTheme
             }
           ) })
         ] }),