react-open-source-grid 1.6.4 → 1.6.5

package/dist/lib/index.js

@@ -8043,6 +8043,195 @@ var GridApiImpl = class {
   }
 };
 
+// src/components/DataGrid/pivotEngine.ts
+var AGGREGATORS = {
+  sum: (values) => values.reduce((acc, val) => acc + val, 0),
+  count: (values) => values.length,
+  avg: (values) => values.length > 0 ? values.reduce((acc, val) => acc + val, 0) / values.length : 0,
+  min: (values) => values.length > 0 ? Math.min(...values) : 0,
+  max: (values) => values.length > 0 ? Math.max(...values) : 0
+};
+function getUniqueValues(data, column) {
+  const uniqueSet = /* @__PURE__ */ new Set();
+  data.forEach((row) => {
+    const value = row[column];
+    if (value !== null && value !== void 0) {
+      uniqueSet.add(String(value));
+    }
+  });
+  return Array.from(uniqueSet).sort();
+}
+function getAggregatorFn(aggregator) {
+  if (typeof aggregator === "function") {
+    return aggregator;
+  }
+  return AGGREGATORS[aggregator] || AGGREGATORS.sum;
+}
+function toNumber(value) {
+  if (typeof value === "number") return value;
+  if (typeof value === "string") {
+    const num = parseFloat(value);
+    return isNaN(num) ? 0 : num;
+  }
+  return 0;
+}
+function buildPivot(data, config) {
+  const {
+    pivotColumn,
+    valueColumn,
+    rowGroupColumn,
+    aggregator,
+    showTotals = false,
+    showGrandTotal = false
+  } = config;
+  if (!data || data.length === 0) {
+    return {
+      columns: [],
+      rows: [],
+      pivotValues: []
+    };
+  }
+  const pivotValues = getUniqueValues(data, pivotColumn);
+  const rowGroupValues = getUniqueValues(data, rowGroupColumn);
+  const aggregatorFn = getAggregatorFn(aggregator);
+  const groupedData = /* @__PURE__ */ new Map();
+  rowGroupValues.forEach((rowValue) => {
+    const pivotMap = /* @__PURE__ */ new Map();
+    pivotValues.forEach((pivotValue) => {
+      pivotMap.set(pivotValue, []);
+    });
+    groupedData.set(rowValue, pivotMap);
+  });
+  data.forEach((row) => {
+    const rowValue = String(row[rowGroupColumn] ?? "");
+    const pivotValue = String(row[pivotColumn] ?? "");
+    const value = toNumber(row[valueColumn]);
+    if (groupedData.has(rowValue)) {
+      const pivotMap = groupedData.get(rowValue);
+      if (pivotMap.has(pivotValue)) {
+        pivotMap.get(pivotValue).push(value);
+      }
+    }
+  });
+  const columns = [
+    {
+      field: rowGroupColumn,
+      headerName: formatHeaderName(rowGroupColumn),
+      width: 180,
+      sortable: true,
+      filterable: true,
+      isPivotColumn: false
+    }
+  ];
+  pivotValues.forEach((pivotValue) => {
+    columns.push({
+      field: pivotValue,
+      headerName: pivotValue,
+      width: 120,
+      sortable: true,
+      filterable: true,
+      isPivotColumn: true
+    });
+  });
+  if (showGrandTotal) {
+    columns.push({
+      field: "__grandTotal",
+      headerName: "Grand Total",
+      width: 120,
+      sortable: true,
+      filterable: false,
+      isTotalColumn: true
+    });
+  }
+  const rows = [];
+  rowGroupValues.forEach((rowValue) => {
+    const pivotMap = groupedData.get(rowValue);
+    const row = {
+      [rowGroupColumn]: rowValue,
+      __id: rowValue
+      // Add unique ID for grid
+    };
+    let grandTotal = 0;
+    pivotValues.forEach((pivotValue) => {
+      const values = pivotMap.get(pivotValue);
+      const aggregatedValue = aggregatorFn(values);
+      row[pivotValue] = aggregatedValue;
+      grandTotal += aggregatedValue;
+    });
+    if (showGrandTotal) {
+      row["__grandTotal"] = grandTotal;
+    }
+    rows.push(row);
+  });
+  let totalsRow;
+  if (showTotals) {
+    totalsRow = {
+      [rowGroupColumn]: "Total",
+      __id: "__totals",
+      __isTotal: true
+    };
+    let overallGrandTotal = 0;
+    pivotValues.forEach((pivotValue) => {
+      const allValues = [];
+      groupedData.forEach((pivotMap) => {
+        const values = pivotMap.get(pivotValue);
+        allValues.push(...values);
+      });
+      const total = aggregatorFn(allValues);
+      totalsRow[pivotValue] = total;
+      overallGrandTotal += total;
+    });
+    if (showGrandTotal) {
+      totalsRow["__grandTotal"] = overallGrandTotal;
+    }
+  }
+  return {
+    columns,
+    rows,
+    pivotValues,
+    totalsRow
+  };
+}
+function formatHeaderName(field) {
+  return field.split(/(?=[A-Z])|_|-/).map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" ");
+}
+function exportPivotToCSV(pivotResult) {
+  const { columns, rows, totalsRow } = pivotResult;
+  const headers = columns.map((col) => col.headerName).join(",");
+  const dataRows = rows.map((row) => {
+    return columns.map((col) => {
+      const value = row[col.field];
+      if (typeof value === "string" && value.includes(",")) {
+        return `"${value}"`;
+      }
+      return value ?? "";
+    }).join(",");
+  });
+  if (totalsRow) {
+    const totalRow = columns.map((col) => {
+      const value = totalsRow[col.field];
+      if (typeof value === "string" && value.includes(",")) {
+        return `"${value}"`;
+      }
+      return value ?? "";
+    }).join(",");
+    dataRows.push(totalRow);
+  }
+  return [headers, ...dataRows].join("\n");
+}
+function downloadCSV(csvContent, filename = "pivot-table.csv") {
+  const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
+  const link = document.createElement("a");
+  const url = URL.createObjectURL(blob);
+  link.setAttribute("href", url);
+  link.setAttribute("download", filename);
+  link.style.visibility = "hidden";
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+  URL.revokeObjectURL(url);
+}
+
 // src/components/DataGrid/DataGrid.tsx
 var DataGrid = forwardRef(({
   columns,
@@ -8057,6 +8246,7 @@ var DataGrid = forwardRef(({
   rowPinConfig,
   contextMenuConfig,
   tooltipConfig,
+  pivotConfig,
   tableId,
   theme: _theme = "quartz",
   densityMode: _densityMode = "normal",
@@ -8077,6 +8267,42 @@ var DataGrid = forwardRef(({
   );
   const [internalRows, setInternalRows] = useState14(null);
   const activeRows = internalRows !== null ? internalRows : rows;
+  const { pivotedData, effectiveColumns } = useMemo4(() => {
+    if (!pivotConfig) {
+      return { pivotedData: activeRows, effectiveColumns: columns };
+    }
+    const pivotResult = buildPivot(activeRows, pivotConfig);
+    console.log("Pivot Result:", {
+      columnsCount: pivotResult.columns.length,
+      columns: pivotResult.columns.map((c) => c.field),
+      rowsCount: pivotResult.rows.length,
+      sampleRow: pivotResult.rows[0]
+    });
+    const pivotColumns = pivotResult.columns.map((col) => ({
+      field: col.field,
+      headerName: col.headerName,
+      width: col.width || 120,
+      sortable: col.sortable !== false,
+      filterable: col.filterable !== false,
+      editable: false,
+      renderCell: col.isTotalColumn || col.isPivotColumn ? (row) => {
+        const value = row[col.field];
+        if (typeof value === "number") {
+          return /* @__PURE__ */ React20.createElement("span", { style: {
+            fontWeight: col.isTotalColumn ? "700" : "600",
+            color: col.isTotalColumn ? "#0f766e" : "#475569"
+          } }, value.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
+        }
+        return value;
+      } : void 0
+    }));
+    const allRows = pivotResult.totalsRow ? [...pivotResult.rows, pivotResult.totalsRow] : pivotResult.rows;
+    const rowsWithId = allRows.map((row, index) => ({
+      ...row,
+      id: row.__id || row.id || `pivot-row-${index}`
+    }));
+    return { pivotedData: rowsWithId, effectiveColumns: pivotColumns };
+  }, [activeRows, columns, pivotConfig]);
   const rowsRef = useRef10(rows);
   useEffect9(() => {
     if (rows !== rowsRef.current) {
@@ -8179,8 +8405,8 @@ var DataGrid = forwardRef(({
       gridApiRef.current = new GridApiImpl(
         state,
         dispatch,
-        columns,
-        activeRows,
+        effectiveColumns,
+        pivotedData,
         containerRef,
         persistenceManager,
         setInternalRows
@@ -8190,24 +8416,24 @@ var DataGrid = forwardRef(({
   useEffect9(() => {
     if (gridApiRef.current && !gridApiRef.current.isDestroyed()) {
       gridApiRef.current.updateState(state);
-      gridApiRef.current.updateData(columns, activeRows);
+      gridApiRef.current.updateData(effectiveColumns, pivotedData);
       gridApiRef.current.updateCallbacks(setInternalRows);
     }
-  }, [state, columns, activeRows, setInternalRows]);
+  }, [state, effectiveColumns, pivotedData, setInternalRows]);
   useImperativeHandle(ref, () => {
     if (!gridApiRef.current || gridApiRef.current.isDestroyed()) {
       gridApiRef.current = new GridApiImpl(
         state,
         dispatch,
-        columns,
-        activeRows,
+        effectiveColumns,
+        pivotedData,
         containerRef,
         persistenceManager,
         setInternalRows
       );
     }
     return gridApiRef.current;
-  }, [state, columns, activeRows, persistenceManager]);
+  }, [state, effectiveColumns, pivotedData, persistenceManager]);
   const onGridReadyCalledRef = useRef10(false);
   const onGridReadyCallbackRef = useRef10(onGridReady);
   useEffect9(() => {
@@ -8288,9 +8514,11 @@ var DataGrid = forwardRef(({
     ...middleColumns,
     ...pinnedRightFields
   ];
+  console.log("Display column order:", displayColumnOrder, "from state.columnOrder:", state.columnOrder);
   useEffect9(() => {
-    dispatch({ type: "RESET_COLUMNS", payload: columns });
-  }, [columns]);
+    console.log("Dispatching RESET_COLUMNS with", effectiveColumns.length, "columns:", effectiveColumns.map((c) => c.field));
+    dispatch({ type: "RESET_COLUMNS", payload: effectiveColumns });
+  }, [effectiveColumns]);
   useEffect9(() => {
     if (onSelectionChange) {
       onSelectionChange(Array.from(state.selection.selectedRows));
@@ -8306,17 +8534,17 @@ var DataGrid = forwardRef(({
   }, [state.pinnedRowsTop, state.pinnedRowsBottom]);
   useEffect9(() => {
     if (state.sortConfig.field) {
-      const column = columns.find((c) => c.field === state.sortConfig.field);
+      const column = effectiveColumns.find((c) => c.field === state.sortConfig.field);
       if (column) {
         announceSorting(column.headerName, state.sortConfig.direction);
       }
     }
-  }, [state.sortConfig.field, state.sortConfig.direction]);
+  }, [state.sortConfig.field, state.sortConfig.direction, effectiveColumns]);
   const sortedRows = useMemo4(() => {
     if (!state.sortConfig.field || !state.sortConfig.direction) {
-      return activeRows;
+      return pivotedData;
     }
-    const sorted = [...activeRows].sort((a, b) => {
+    const sorted = [...pivotedData].sort((a, b) => {
       const aValue = a[state.sortConfig.field];
       const bValue = b[state.sortConfig.field];
       if (aValue == null && bValue == null) return 0;
@@ -8333,7 +8561,7 @@ var DataGrid = forwardRef(({
       sorted.reverse();
     }
     return sorted;
-  }, [activeRows, state.sortConfig]);
+  }, [pivotedData, state.sortConfig]);
   const filteredRows = useMemo4(() => {
     if (!hasActiveFilters(state.filterConfig)) {
       return sortedRows;
@@ -8479,7 +8707,7 @@ var DataGrid = forwardRef(({
     /* @__PURE__ */ React20.createElement("div", { style: { position: "relative", display: "flex", alignItems: "center", justifyContent: "space-between", paddingLeft: "16px", paddingRight: "16px", paddingTop: "10px", paddingBottom: "10px", backgroundColor: "var(--grid-bg-alt)", borderBottom: "var(--grid-border-width, 1px) solid var(--grid-border)", zIndex: 30 } }, /* @__PURE__ */ React20.createElement("div", { style: { position: "relative", display: "flex", alignItems: "center", gap: "8px" } }, /* @__PURE__ */ React20.createElement(
       ColumnChooser,
       {
-        columns,
+        columns: effectiveColumns,
         columnOrder: state.columnOrder,
         hiddenColumns: state.hiddenColumns,
         onToggleVisibility: (field) => dispatch({ type: "TOGGLE_COLUMN_VISIBILITY", payload: field }),
@@ -8489,7 +8717,7 @@ var DataGrid = forwardRef(({
     ), /* @__PURE__ */ React20.createElement(
       ExportMenu,
       {
-        columns,
+        columns: effectiveColumns,
         fullDataset: rows,
         filteredData: filteredRows.filter((r) => !("isGroup" in r)),
         selectedRows: state.selection.selectedRows,
@@ -8507,7 +8735,7 @@ var DataGrid = forwardRef(({
     /* @__PURE__ */ React20.createElement(
       GroupByPanel,
       {
-        columns,
+        columns: effectiveColumns,
         groupBy: state.groupBy,
         dispatch
       }
@@ -8515,7 +8743,7 @@ var DataGrid = forwardRef(({
     /* @__PURE__ */ React20.createElement("div", { role: "rowgroup", style: { position: "sticky", top: 0, zIndex: 20, width: "100%" } }, /* @__PURE__ */ React20.createElement(
       GridHeader,
       {
-        columns,
+        columns: effectiveColumns,
         columnOrder: state.columnOrder,
         displayColumnOrder,
         columnWidths: state.columnWidths,
@@ -8534,7 +8762,7 @@ var DataGrid = forwardRef(({
     ), /* @__PURE__ */ React20.createElement(
       ColumnFilters,
       {
-        columns,
+        columns: effectiveColumns,
         displayColumnOrder,
         columnWidths: state.columnWidths,
         filterConfig: state.filterConfig,
@@ -8547,7 +8775,7 @@ var DataGrid = forwardRef(({
     /* @__PURE__ */ React20.createElement(
       GridBody,
       {
-        columns,
+        columns: effectiveColumns,
         rows: (virtualScrollConfig == null ? void 0 : virtualScrollConfig.enabled) ? unpinnedRows : paginatedRows,
         pinnedRowsTop: pinnedRowsTopData,
         pinnedRowsBottom: pinnedRowsBottomData,
@@ -8587,7 +8815,7 @@ var DataGrid = forwardRef(({
     (footerConfig == null ? void 0 : footerConfig.show) && footerConfig.aggregates && /* @__PURE__ */ React20.createElement(
       GridFooter,
       {
-        columns,
+        columns: effectiveColumns,
         displayColumnOrder,
         columnWidths: state.columnWidths,
         aggregates: globalAggregates,
@@ -11752,6 +11980,258 @@ function createMockFeed(config) {
     createConnection: () => createMockWebSocket(feed)
   };
 }
+
+// src/components/DataGrid/PivotToolbar.tsx
+import React29, { useState as useState20, useMemo as useMemo8 } from "react";
+var AGGREGATOR_OPTIONS = [
+  { value: "sum", label: "Sum" },
+  { value: "avg", label: "Average" },
+  { value: "count", label: "Count" },
+  { value: "min", label: "Minimum" },
+  { value: "max", label: "Maximum" }
+];
+var PivotToolbar = ({
+  columns,
+  pivotConfig,
+  onPivotToggle,
+  onConfigChange,
+  isPivotMode = false,
+  style,
+  className
+}) => {
+  const [isExpanded, setIsExpanded] = useState20(isPivotMode);
+  const [rowGroupColumn, setRowGroupColumn] = useState20((pivotConfig == null ? void 0 : pivotConfig.rowGroupColumn) || "");
+  const [pivotColumn, setPivotColumn] = useState20((pivotConfig == null ? void 0 : pivotConfig.pivotColumn) || "");
+  const [valueColumn, setValueColumn] = useState20((pivotConfig == null ? void 0 : pivotConfig.valueColumn) || "");
+  const [aggregator, setAggregator] = useState20(
+    (pivotConfig == null ? void 0 : pivotConfig.aggregator) || "sum"
+  );
+  const [showTotals, setShowTotals] = useState20((pivotConfig == null ? void 0 : pivotConfig.showTotals) ?? true);
+  const [showGrandTotal, setShowGrandTotal] = useState20((pivotConfig == null ? void 0 : pivotConfig.showGrandTotal) ?? true);
+  const isConfigValid = useMemo8(() => {
+    return rowGroupColumn && pivotColumn && valueColumn;
+  }, [rowGroupColumn, pivotColumn, valueColumn]);
+  const handleApply = () => {
+    if (!isConfigValid) return;
+    const config = {
+      rowGroupColumn,
+      pivotColumn,
+      valueColumn,
+      aggregator,
+      showTotals,
+      showGrandTotal
+    };
+    onConfigChange(config);
+    onPivotToggle(true);
+  };
+  const handleClear = () => {
+    setRowGroupColumn("");
+    setPivotColumn("");
+    setValueColumn("");
+    setAggregator("sum");
+    setShowTotals(true);
+    setShowGrandTotal(true);
+    onConfigChange(null);
+    onPivotToggle(false);
+    setIsExpanded(false);
+  };
+  const handleToggle = () => {
+    setIsExpanded(!isExpanded);
+  };
+  return /* @__PURE__ */ React29.createElement(
+    "div",
+    {
+      className,
+      style: {
+        backgroundColor: "#f8fafc",
+        border: "1px solid #e2e8f0",
+        borderRadius: "8px",
+        padding: "12px",
+        ...style
+      }
+    },
+    /* @__PURE__ */ React29.createElement("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: isExpanded ? "12px" : "0" } }, /* @__PURE__ */ React29.createElement("div", { style: { display: "flex", alignItems: "center", gap: "8px" } }, /* @__PURE__ */ React29.createElement("span", { style: { fontSize: "20px" } }, "\u{1F4CA}"), /* @__PURE__ */ React29.createElement("h3", { style: { margin: 0, fontSize: "14px", fontWeight: "600", color: "#1e293b" } }, "Pivot Table"), isPivotMode && /* @__PURE__ */ React29.createElement("span", { style: {
+      backgroundColor: "#10b981",
+      color: "white",
+      padding: "2px 8px",
+      borderRadius: "12px",
+      fontSize: "11px",
+      fontWeight: "600"
+    } }, "Active")), /* @__PURE__ */ React29.createElement("div", { style: { display: "flex", gap: "8px" } }, isPivotMode && /* @__PURE__ */ React29.createElement(
+      "button",
+      {
+        onClick: handleClear,
+        style: {
+          padding: "6px 12px",
+          fontSize: "13px",
+          fontWeight: "500",
+          color: "#dc2626",
+          backgroundColor: "#fee2e2",
+          border: "1px solid #fecaca",
+          borderRadius: "6px",
+          cursor: "pointer",
+          transition: "all 0.15s"
+        },
+        onMouseEnter: (e) => {
+          e.currentTarget.style.backgroundColor = "#fecaca";
+        },
+        onMouseLeave: (e) => {
+          e.currentTarget.style.backgroundColor = "#fee2e2";
+        }
+      },
+      "Clear Pivot"
+    ), /* @__PURE__ */ React29.createElement(
+      "button",
+      {
+        onClick: handleToggle,
+        style: {
+          padding: "6px 10px",
+          fontSize: "13px",
+          color: "#64748b",
+          backgroundColor: "white",
+          border: "1px solid #cbd5e1",
+          borderRadius: "6px",
+          cursor: "pointer",
+          transition: "all 0.15s"
+        },
+        onMouseEnter: (e) => {
+          e.currentTarget.style.backgroundColor = "#f1f5f9";
+        },
+        onMouseLeave: (e) => {
+          e.currentTarget.style.backgroundColor = "white";
+        }
+      },
+      isExpanded ? "\u25B2" : "\u25BC"
+    ))),
+    isExpanded && /* @__PURE__ */ React29.createElement("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))", gap: "12px" } }, /* @__PURE__ */ React29.createElement("div", null, /* @__PURE__ */ React29.createElement("label", { style: { display: "block", fontSize: "12px", fontWeight: "600", color: "#475569", marginBottom: "6px" } }, "Row Group By ", /* @__PURE__ */ React29.createElement("span", { style: { color: "#dc2626" } }, "*")), /* @__PURE__ */ React29.createElement(
+      "select",
+      {
+        value: rowGroupColumn,
+        onChange: (e) => setRowGroupColumn(e.target.value),
+        style: {
+          width: "100%",
+          padding: "8px",
+          fontSize: "13px",
+          border: "1px solid #cbd5e1",
+          borderRadius: "6px",
+          backgroundColor: "white",
+          color: "#1e293b",
+          cursor: "pointer"
+        }
+      },
+      /* @__PURE__ */ React29.createElement("option", { value: "" }, "Select column..."),
+      columns.map((col) => /* @__PURE__ */ React29.createElement("option", { key: col.field, value: col.field }, col.headerName))
+    )), /* @__PURE__ */ React29.createElement("div", null, /* @__PURE__ */ React29.createElement("label", { style: { display: "block", fontSize: "12px", fontWeight: "600", color: "#475569", marginBottom: "6px" } }, "Pivot Column ", /* @__PURE__ */ React29.createElement("span", { style: { color: "#dc2626" } }, "*")), /* @__PURE__ */ React29.createElement(
+      "select",
+      {
+        value: pivotColumn,
+        onChange: (e) => setPivotColumn(e.target.value),
+        style: {
+          width: "100%",
+          padding: "8px",
+          fontSize: "13px",
+          border: "1px solid #cbd5e1",
+          borderRadius: "6px",
+          backgroundColor: "white",
+          color: "#1e293b",
+          cursor: "pointer"
+        }
+      },
+      /* @__PURE__ */ React29.createElement("option", { value: "" }, "Select column..."),
+      columns.map((col) => /* @__PURE__ */ React29.createElement("option", { key: col.field, value: col.field }, col.headerName))
+    )), /* @__PURE__ */ React29.createElement("div", null, /* @__PURE__ */ React29.createElement("label", { style: { display: "block", fontSize: "12px", fontWeight: "600", color: "#475569", marginBottom: "6px" } }, "Value Column ", /* @__PURE__ */ React29.createElement("span", { style: { color: "#dc2626" } }, "*")), /* @__PURE__ */ React29.createElement(
+      "select",
+      {
+        value: valueColumn,
+        onChange: (e) => setValueColumn(e.target.value),
+        style: {
+          width: "100%",
+          padding: "8px",
+          fontSize: "13px",
+          border: "1px solid #cbd5e1",
+          borderRadius: "6px",
+          backgroundColor: "white",
+          color: "#1e293b",
+          cursor: "pointer"
+        }
+      },
+      /* @__PURE__ */ React29.createElement("option", { value: "" }, "Select column..."),
+      columns.map((col) => /* @__PURE__ */ React29.createElement("option", { key: col.field, value: col.field }, col.headerName))
+    )), /* @__PURE__ */ React29.createElement("div", null, /* @__PURE__ */ React29.createElement("label", { style: { display: "block", fontSize: "12px", fontWeight: "600", color: "#475569", marginBottom: "6px" } }, "Aggregation"), /* @__PURE__ */ React29.createElement(
+      "select",
+      {
+        value: aggregator,
+        onChange: (e) => setAggregator(e.target.value),
+        style: {
+          width: "100%",
+          padding: "8px",
+          fontSize: "13px",
+          border: "1px solid #cbd5e1",
+          borderRadius: "6px",
+          backgroundColor: "white",
+          color: "#1e293b",
+          cursor: "pointer"
+        }
+      },
+      AGGREGATOR_OPTIONS.map((opt) => /* @__PURE__ */ React29.createElement("option", { key: opt.value, value: opt.value }, opt.label))
+    )), /* @__PURE__ */ React29.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "8px", justifyContent: "center" } }, /* @__PURE__ */ React29.createElement("label", { style: { display: "flex", alignItems: "center", gap: "6px", fontSize: "13px", color: "#475569", cursor: "pointer" } }, /* @__PURE__ */ React29.createElement(
+      "input",
+      {
+        type: "checkbox",
+        checked: showTotals,
+        onChange: (e) => setShowTotals(e.target.checked),
+        style: { cursor: "pointer" }
+      }
+    ), "Show Totals Row"), /* @__PURE__ */ React29.createElement("label", { style: { display: "flex", alignItems: "center", gap: "6px", fontSize: "13px", color: "#475569", cursor: "pointer" } }, /* @__PURE__ */ React29.createElement(
+      "input",
+      {
+        type: "checkbox",
+        checked: showGrandTotal,
+        onChange: (e) => setShowGrandTotal(e.target.checked),
+        style: { cursor: "pointer" }
+      }
+    ), "Show Grand Total Column")), /* @__PURE__ */ React29.createElement("div", { style: { display: "flex", alignItems: "flex-end" } }, /* @__PURE__ */ React29.createElement(
+      "button",
+      {
+        onClick: handleApply,
+        disabled: !isConfigValid,
+        style: {
+          width: "100%",
+          padding: "10px",
+          fontSize: "14px",
+          fontWeight: "600",
+          color: "white",
+          backgroundColor: isConfigValid ? "#2563eb" : "#94a3b8",
+          border: "none",
+          borderRadius: "6px",
+          cursor: isConfigValid ? "pointer" : "not-allowed",
+          transition: "all 0.15s",
+          boxShadow: isConfigValid ? "0 2px 4px rgba(37, 99, 235, 0.2)" : "none"
+        },
+        onMouseEnter: (e) => {
+          if (isConfigValid) {
+            e.currentTarget.style.backgroundColor = "#1d4ed8";
+          }
+        },
+        onMouseLeave: (e) => {
+          if (isConfigValid) {
+            e.currentTarget.style.backgroundColor = "#2563eb";
+          }
+        }
+      },
+      "Apply Pivot"
+    ))),
+    isExpanded && /* @__PURE__ */ React29.createElement("div", { style: {
+      marginTop: "12px",
+      padding: "10px",
+      backgroundColor: "#eff6ff",
+      border: "1px solid #bfdbfe",
+      borderRadius: "6px",
+      fontSize: "12px",
+      color: "#1e40af"
+    } }, /* @__PURE__ */ React29.createElement("strong", null, "\u{1F4A1} Tip:"), " Select a Row Group column to organize data by, a Pivot column whose values become new columns, and a Value column to aggregate.")
+  );
+};
 export {
   AdvancedFilterBuilder,
   BadgeCell,
@@ -11774,6 +12254,7 @@ export {
   LocalStorageAdapter,
   MarketDataEngine,
   MarketDataGrid,
+  PivotToolbar,
   PriorityIndicator,
   ProgressBar,
   Rating,
@@ -11786,6 +12267,7 @@ export {
   VirtualScroller,
   WebSocketMockFeed,
   alpineTheme,
+  buildPivot,
   buildTreeFromFlat,
   collapseAllNodes,
   countTreeNodes,
@@ -11796,7 +12278,9 @@ export {
   createPreset,
   darkTheme,
   densityConfigs,
+  downloadCSV,
   expandAllNodes,
+  exportPivotToCSV,
   exportToCSV,
   exportToXLSX,
   filterTree,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-open-source-grid",
   "private": false,
-  "version": "1.6.4",
+  "version": "1.6.5",
   "type": "module",
   "description": "A high-performance React DataGrid component with advanced features like virtual scrolling, infinite scrolling, tree data, market data mode, and more",
   "main": "./dist/lib/index.cjs",