@opencorestack/opengridx 0.1.5 → 0.1.7

package/docs/components/toolbar.md

@@ -0,0 +1,40 @@
+# `<Toolbar />`
+
+The toolbar is an optional component rendered at the top of the grid. It typically contains global actions like exporting, filtering, and column management.
+
+## 🛠️ Provided Component: `GridToolbar`
+
+OpenGridX includes a pre-built `GridToolbar` that bundles common actions.
+
+### Usage
+```tsx
+import { DataGrid, GridToolbar } from '@opencorestack/opengridx';
+
+<DataGrid
+  slots={{
+    toolbar: GridToolbar
+  }}
+/>
+```
+
+### Features
+- **Quick Search**: Search across all visible columns.
+- **Export Menu**: Download data as CSV, Print, or [Advanced Excel](../features/export-guide.md).
+- **Column Visibility**: Toggle which columns are shown via a dropdown [Visibility Panel](column-visibility.md).
+- **Density**: Switch between Compact, Standard, and Comfortable row heights.
+
+## 🎨 Custom Toolbar
+
+You can provide your own component to the `toolbar` slot. It will receive props to interact with the grid state.
+
+```tsx
+const MyToolbar = () => {
+  return (
+    <div className="custom-toolbar">
+      <button onClick={...}>Custom Action</button>
+    </div>
+  );
+};
+
+<DataGrid slots={{ toolbar: MyToolbar }} />
+```

package/docs/components/tooltip.md

@@ -0,0 +1,68 @@
+# `<GridTooltip />`
+
+The `GridTooltip` component provides a lightweight, accessible tooltip for any HTML or React element. It is commonly used within columns, actions, or toolbars to display extra information when a user hovers over a component.
+
+## 📑 Overview
+- **Portal Rendering**: Tooltips are rendered at the end of `document.body` for unobstructed positioning.
+- **Dynamic Calculation**: Tooltips calculate their placement relative to the target element on hover.
+- **Support for React Elements**: It wraps its child element to attach event listeners and calculate position.
+- **Customizable Delays**: Support for `enterDelay` and `leaveDelay`.
+
+---
+
+## 🛠️ Usage
+
+### Tooltip with a Button
+Wrap any React element with the `GridTooltip` and provide a `title`.
+
+```tsx
+import { GridTooltip } from '@opencorestack/opengridx';
+
+<GridTooltip title="Click to Export">
+  <button onClick={handleExport}>
+    Export as Excel
+  </button>
+</GridTooltip>
+```
+
+### Tooltip with Custom Placement
+You can choose from four different placements: `top`, `bottom`, `left`, or `right`.
+
+```tsx
+<GridTooltip title="Top Placement" placement="top">
+  <span>Hover me</span>
+</GridTooltip>
+
+<GridTooltip title="Bottom Placement" placement="bottom">
+  <span>Hover me</span>
+</GridTooltip>
+```
+
+---
+
+## ⚙️ Properties
+
+| Property | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| **`title`** | `React.ReactNode` | — | Content (text, JSX, etc.) to show inside the tooltip. |
+| **`children`** | `React.ReactElement` | — | The target element the tooltip is attached to. |
+| **`placement`** | `'top'`, `'bottom'`, `'left'`, `'right'` | `'top'` | Direction where the tooltip appears. |
+| **`enterDelay`** | `number` | `200` | Delay (ms) before showing the tooltip. |
+| **`leaveDelay`** | `number` | `0` | Delay (ms) before hiding the tooltip. |
+
+---
+
+## 🎨 Slot Implementation
+In the DataGrid, specialized components like the Toolbar often use tooltips within their built-in actions. These can be customized or replaced using the slots API.
+
+```tsx
+<DataGrid
+  slots={{
+    tooltip: GridTooltip
+  }}
+/>
+```
+
+## 📝 Accessibility
+- Tooltips are triggered by mouse hover events (`onMouseEnter`/`onMouseLeave`).
+- It is recommended to use descriptive `aria-label` tags on the child element for screen readers, as tooltips are visually focused.

package/docs/customization/slots-api.md

@@ -0,0 +1,227 @@
+# Slots API Reference
+
+The Slots API allows you to replace any built-in component in the DataGrid with your own custom implementation.
+
+## Available Slots
+
+### 1. `toolbar`
+Add a custom toolbar above the grid (commonly used for export buttons, filters, actions).
+
+**Props received:**
+```typescript
+{
+  // Any props from slotProps.toolbar
+}
+```
+
+**Example:**
+```tsx
+import { exportToCsv, exportToExcel } from '@opencorestack/opengridx';
+
+function CustomToolbar({ rows, columns }) {
+  return (
+    <div style={{ padding: '12px', display: 'flex', gap: '8px' }}>
+      <button onClick={() => exportToCsv(rows, columns)}>
+        Export CSV
+      </button>
+      <button onClick={() => exportToExcel(rows, columns)}>
+        Export Excel
+      </button>
+    </div>
+  );
+}
+
+<DataGrid
+  slots={{ toolbar: CustomToolbar }}
+  slotProps={{ toolbar: { rows, columns } }}
+/>
+```
+
+### 2. `pagination`
+Replace the default pagination component.
+
+**Props received:**
+```typescript
+{
+  page: number;                    // Current page (0-based)
+  pageSize: number;                // Current page size
+  rowCount: number;                // Total number of rows
+  pageSizeOptions: number[];       // Available page sizes
+  onPageChange: (page: number) => void;
+  onPageSizeChange: (size: number) => void;
+}
+```
+
+**Example:**
+```tsx
+<DataGrid
+  slots={{ pagination: CustomPagination }}
+  slotProps={{ pagination: { customProp: 'value' } }}
+/>
+```
+
+### 3. `noRowsOverlay`
+Replace the empty state shown when there are no rows.
+
+**Props received:**
+```typescript
+{
+  // Any props from slotProps.noRowsOverlay
+}
+```
+
+**Example:**
+```tsx
+function CustomNoRows() {
+  return (
+    <div style={{ padding: '40px', textAlign: 'center' }}>
+      <h3>No data available</h3>
+      <p>Try adjusting your filters</p>
+    </div>
+  );
+}
+
+<DataGrid
+  slots={{ noRowsOverlay: CustomNoRows }}
+/>
+```
+
+### 4. `loadingOverlay`
+Replace the loading state overlay.
+
+**Props received:**
+```typescript
+{
+  // Any props from slotProps.loadingOverlay
+}
+```
+
+**Example:**
+```tsx
+function CustomLoader() {
+  return (
+    <div style={{ padding: '40px', textAlign: 'center' }}>
+      <Spin size="large" /> {/* Ant Design Spinner */}
+      <p>Loading data...</p>
+    </div>
+  );
+}
+
+<DataGrid
+  slots={{ loadingOverlay: CustomLoader }}
+/>
+```
+
+### 5. `footer`
+Replace the entire footer section (including pagination).
+
+**Props received:**
+```typescript
+{
+  // Any props from slotProps.footer
+}
+```
+
+**Example:**
+```tsx
+function CustomFooter() {
+  return (
+    <div style={{ padding: '12px', borderTop: '1px solid #e0e0e0' }}>
+      <span>Custom footer content</span>
+    </div>
+  );
+}
+
+<DataGrid
+  slots={{ footer: CustomFooter }}
+/>
+```
+
+## Complete Example
+
+```tsx
+import { Select, Pagination, Spin, Empty } from 'antd';
+import { DataGrid } from '@opencorestack/opengridx';
+
+function AntdPagination(props) {
+  const { page, pageSize, rowCount, pageSizeOptions, onPageChange, onPageSizeChange } = props;
+  
+  return (
+    <div style={{ display: 'flex', gap: '16px', padding: '12px 16px', justifyContent: 'flex-end' }}>
+      <Select
+        value={pageSize}
+        onChange={onPageSizeChange}
+        options={pageSizeOptions.map(s => ({ value: s, label: s }))}
+      />
+      <Pagination
+        current={page + 1}
+        total={rowCount}
+        pageSize={pageSize}
+        onChange={(p) => onPageChange(p - 1)}
+      />
+    </div>
+  );
+}
+
+function AntdNoRows() {
+  return <Empty description="No data available" />;
+}
+
+function AntdLoader() {
+  return (
+    <div style={{ padding: '40px', textAlign: 'center' }}>
+      <Spin size="large" />
+    </div>
+  );
+}
+
+function MyApp() {
+  return (
+    <DataGrid
+      rows={rows}
+      columns={columns}
+      pagination
+      loading={isLoading}
+      slots={{
+        pagination: AntdPagination,
+        noRowsOverlay: AntdNoRows,
+        loadingOverlay: AntdLoader
+      }}
+      slotProps={{
+        pagination: {
+          // Additional custom props if needed
+        }
+      }}
+    />
+  );
+}
+```
+
+## TypeScript Support
+
+For full type safety, define your component props:
+
+```typescript
+import type { PaginationProps } from '@opencorestack/opengridx';
+
+interface CustomPaginationProps extends PaginationProps {
+  customProp?: string;
+}
+
+const CustomPagination: React.FC<CustomPaginationProps> = (props) => {
+  // Your implementation
+};
+```
+
+## Best Practices
+
+1. **Maintain Functionality**: Ensure your custom component provides the same core functionality as the default.
+2. **Accessibility**: Include proper ARIA labels and keyboard navigation.
+3. **Responsive Design**: Make sure your component works on different screen sizes.
+4. **Performance**: Avoid expensive operations in render; use memoization where appropriate.
+5. **Consistent Styling**: Match your app's design system while maintaining usability.
+
+## See Also
+
+- [Custom Pagination Guide](./CUSTOM_PAGINATION.md) - Detailed examples with Ant Design and MUI
+- [DataGrid Props](../src/OpenGridX/types/index.ts) - Full TypeScript definitions

package/docs/customization/theming.md

@@ -0,0 +1,293 @@
+# OpenGridX Theming Guide
+
+OpenGridX ships with a complete design-token system built on CSS custom properties (`--ogx-*`). You can theme the grid in two ways:
+
+1. **`DataGridThemeProvider`** — the recommended React API (maps a typed `GridTheme` object → CSS variables)
+2. **Raw CSS override** — set any `--ogx-*` variable yourself on a wrapper element or `:root`
+
+---
+
+## Quick Start — `DataGridThemeProvider`
+
+```tsx
+import { DataGrid, DataGridThemeProvider } from '@opencorestack/opengridx';
+
+const myTheme = {
+  colors: {
+    primary: '#7c3aed',
+    primaryDark: '#5b21b6',
+    primaryLight: '#ede9fe',
+  },
+  grid: {
+    background: '#fff',
+    headerBackground: '#f5f3ff',
+    rowHoverBackground: '#faf5ff',
+    rowSelectedBackground: '#ede9fe',
+    cellFocusBorder: '#7c3aed',
+  },
+};
+
+export default function App() {
+  return (
+    <DataGridThemeProvider theme={myTheme}>
+      <DataGrid rows={rows} columns={columns} />
+    </DataGridThemeProvider>
+  );
+}
+```
+
+The `DataGridThemeProvider` resolves each key in the `GridTheme` object to its corresponding `--ogx-*` CSS variable and applies it as an inline style on a wrapper `div`. **No CSS-in-JS, no runtime overhead.**
+
+---
+
+## Dark Mode
+
+The grid automatically switches to its dark palette via `@media (prefers-color-scheme: dark)`. If your app manages dark mode manually (e.g. via a `data-theme` attribute), override the dark tokens with:
+
+```css
+[data-theme="dark"] {
+  --ogx-grid-background: #0f172a;
+  --ogx-grid-header-background: #1e293b;
+  --ogx-grid-row-text: #cbd5e1;
+  --ogx-grid-border-color: #334155;
+  /* … etc */
+}
+```
+
+---
+
+## `GridTheme` Interface Reference
+
+```ts
+interface GridTheme {
+  colors?:      GridThemeColors;
+  typography?:  GridThemeTypography;
+  spacing?:     GridThemeSpacing;
+  borders?:     GridThemeBorders;
+  shadows?:     GridThemeShadows;
+  grid?:        GridThemeGrid;
+  toolbar?:     GridThemeToolbar;
+  overlays?:    GridThemeOverlays;
+  scrollbar?:   GridThemeScrollbar;
+  skeleton?:    GridThemeSkeleton;
+  transitions?: GridThemeTransitions;
+}
+```
+
+---
+
+## All CSS Tokens
+
+### Colors
+
+| Token | Default (light) | Dark override | Description |
+|---|---|---|---|
+| `--ogx-color-primary` | `#3b82f6` | `#60a5fa` | Brand / accent color |
+| `--ogx-color-primary-dark` | `#2563eb` | `#3b82f6` | Hover / pressed primary |
+| `--ogx-color-primary-light` | `#eff6ff` | `#1e3a5f` | Tinted backgrounds |
+| `--ogx-color-primary-focus` | `rgba(59,130,246,0.5)` | `rgba(96,165,250,0.4)` | Focus ring color |
+| `--ogx-color-secondary` | `#8b5cf6` | — | Secondary accent |
+| `--ogx-color-secondary-dark` | `#7c3aed` | — | Hover secondary |
+| `--ogx-color-secondary-light` | `#f5f3ff` | — | Tinted secondary backgrounds |
+| `--ogx-color-success` | `#10b981` | — | Positive indicators |
+| `--ogx-color-warning` | `#f59e0b` | — | Warning indicators |
+| `--ogx-color-error` | `#ef4444` | — | Error / destructive |
+| `--ogx-color-info` | `#0ea5e9` | — | Informational |
+| `--ogx-color-white` | `#ffffff` | `#0f172a` | Pure white (inverted in dark) |
+| `--ogx-color-black` | `#0f172a` | `#f8fafc` | Pure black (inverted in dark) |
+| `--ogx-color-gray-50` | `#f8fafc` | `#1e293b` | Lightest gray |
+| `--ogx-color-gray-100` | `#f1f5f9` | `#334155` | |
+| `--ogx-color-gray-200` | `#e2e8f0` | `#475569` | Default borders |
+| `--ogx-color-gray-300` | `#cbd5e1` | `#64748b` | |
+| `--ogx-color-gray-400` | `#94a3b8` | `#94a3b8` | Muted text |
+| `--ogx-color-gray-500` | `#64748b` | `#cbd5e1` | |
+| `--ogx-color-gray-600` | `#475569` | `#e2e8f0` | |
+| `--ogx-color-gray-700` | `#334155` | `#e2e8f0` | Header text default |
+| `--ogx-color-gray-800` | `#1e293b` | `#f1f5f9` | Body text default |
+| `--ogx-color-gray-900` | `#0f172a` | `#f8fafc` | Darkest gray |
+
+### Typography
+
+| Token | Default | Description |
+|---|---|---|
+| `--ogx-font-family` | `'Inter', system-ui, sans-serif` | Primary UI font |
+| `--ogx-font-family-mono` | `'JetBrains Mono', 'Fira Code', monospace` | Monospace (code cells, IDs) |
+| `--ogx-font-size-xs` | `0.75rem` (12px) | Extra-small |
+| `--ogx-font-size-sm` | `0.875rem` (14px) | Small |
+| `--ogx-font-size-md` | `1rem` (16px) | Medium |
+| `--ogx-font-size-lg` | `1.125rem` (18px) | Large |
+| `--ogx-font-size-xl` | `1.25rem` (20px) | Extra-large |
+| `--ogx-font-weight-light` | `300` | |
+| `--ogx-font-weight-regular` | `400` | |
+| `--ogx-font-weight-medium` | `500` | |
+| `--ogx-font-weight-semibold` | `600` | |
+| `--ogx-font-weight-bold` | `700` | |
+| `--ogx-line-height-tight` | `1.2` | |
+| `--ogx-line-height-normal` | `1.5` | |
+| `--ogx-line-height-relaxed` | `1.75` | |
+
+### Spacing
+
+| Token | Default | Description |
+|---|---|---|
+| `--ogx-spacing-xs` | `0.25rem` (4px) | |
+| `--ogx-spacing-sm` | `0.5rem` (8px) | |
+| `--ogx-spacing-md` | `1rem` (16px) | |
+| `--ogx-spacing-lg` | `1.5rem` (24px) | |
+| `--ogx-spacing-xl` | `2rem` (32px) | |
+| `--ogx-spacing-xxl` | `3rem` (48px) | |
+
+### Borders
+
+| Token | Default | Description |
+|---|---|---|
+| `--ogx-border-width-thin` | `1px` | |
+| `--ogx-border-width-medium` | `2px` | |
+| `--ogx-border-width-thick` | `3px` | |
+| `--ogx-border-radius-sm` | `4px` | |
+| `--ogx-border-radius-md` | `8px` | |
+| `--ogx-border-radius-lg` | `12px` | |
+| `--ogx-border-radius-xl` | `16px` | |
+| `--ogx-border-radius-round` | `50%` | Circular |
+| `--ogx-border-color` | `var(--ogx-color-gray-200)` | Default border color |
+| `--ogx-border-color-hover` | `var(--ogx-color-gray-300)` | Border on hover |
+
+### Shadows
+
+| Token | Default | Description |
+|---|---|---|
+| `--ogx-shadow-sm` | `0 1px 2px rgba(0,0,0,.05)` | Subtle lift |
+| `--ogx-shadow-md` | `0 4px 6px -1px ...` | Card-level |
+| `--ogx-shadow-lg` | `0 10px 15px -3px ...` | Overlay |
+| `--ogx-shadow-xl` | `0 20px 25px -5px ...` | Modal |
+
+### Grid Layout
+
+| Token | Default | Description |
+|---|---|---|
+| `--ogx-row-height` | `52px` | Default row height |
+| `--ogx-header-height` | `56px` | Column header row height |
+| `--ogx-grid-row-height-compact` | `32px` | Compact density preset |
+| `--ogx-grid-row-height-standard` | `52px` | Standard density preset |
+| `--ogx-grid-row-height-comfortable` | `72px` | Comfortable density preset |
+| `--ogx-grid-header-height` | `56px` | Header height (grid-specific) |
+| `--ogx-grid-cell-padding-x` | `10px` | Horizontal cell padding |
+| `--ogx-grid-cell-padding-y` | `8px` | Vertical cell padding |
+| `--ogx-grid-cell-font-size` | `13px` | Body cell font size |
+| `--ogx-grid-header-font-size` | `13px` | Header cell font size |
+| `--ogx-grid-line-height` | `var(--ogx-line-height-normal)` | Row line height |
+
+### Grid Colors
+
+| Token | Default (light) | Dark override | Description |
+|---|---|---|---|
+| `--ogx-grid-background` | `#ffffff` | `#0f172a` | Grid body background |
+| `--ogx-grid-border-color` | `#e2e8f0` | `#334155` | Cell border lines |
+| `--ogx-grid-header-background` | `#f8fafc` | `#1e293b` | Header row background |
+| `--ogx-grid-header-text` | `#334155` | `#e2e8f0` | Header label color |
+| `--ogx-grid-header-hover-background` | `#f1f5f9` | `#334155` | Header hover state |
+| `--ogx-grid-header-sorted-background` | `#f8fafc` | `#1e3a5f` | Sorted column header tint |
+| `--ogx-grid-row-text` | `#1e293b` | `#cbd5e1` | Default body cell text |
+| `--ogx-grid-row-hover-background` | `#f8fafc` | `#1e293b` | Row hover highlight |
+| `--ogx-grid-row-alternate-background` | `var(--ogx-grid-background)` | `#162032` | Striped row alternate |
+| `--ogx-grid-row-selected-background` | `#eff6ff` | `#1e3a5f` | Selected row fill |
+| `--ogx-grid-row-selected-hover-background` | `#dbeafe` | `#1d4ed8` | Selected row hover |
+| `--ogx-grid-cell-focus-border` | `#3b82f6` | `#60a5fa` | Keyboard focus ring |
+| `--ogx-grid-pinned-left-shadow` | `4px 0 24px...` | (darker) | Shadow on left-pinned columns |
+| `--ogx-grid-pinned-right-shadow` | `-4px 0 24px...` | (darker) | Shadow on right-pinned columns |
+| `--ogx-checkbox-bg` | — | `#1e293b` | Checkbox background (dark only) |
+| `--ogx-checkbox-border` | — | `#64748b` | Checkbox border (dark only) |
+
+### Transitions
+
+| Token | Default | Description |
+|---|---|---|
+| `--ogx-transition-duration-fast` | `150ms` | Quick micro-interactions |
+| `--ogx-transition-duration-normal` | `250ms` | Standard UI transitions |
+| `--ogx-transition-duration-slow` | `350ms` | Deliberate animations |
+| `--ogx-transition-easing` | `cubic-bezier(0.4,0,0.2,1)` | Material easing curve |
+
+### Z-index Scale
+
+| Token | Default | Use |
+|---|---|---|
+| `--ogx-z-index-base` | `0` | |
+| `--ogx-z-index-sticky` | `1020` | Sticky/pinned columns |
+| `--ogx-z-index-fixed` | `1030` | Fixed elements |
+| `--ogx-z-index-dropdown` | `1000` | Inline dropdowns |
+| `--ogx-z-index-modal-backdrop` | `1040` | |
+| `--ogx-z-index-modal` | `1050` | |
+| `--ogx-z-index-popover` | `1060` | Column menus |
+| `--ogx-z-index-tooltip` | `1070` | Tooltips |
+
+---
+
+## CSS-Only Override (no React)
+
+You can theme the grid without the `DataGridThemeProvider` by overriding variables on any ancestor element:
+
+```css
+/* App-level override */
+.my-grid-container {
+  --ogx-color-primary: #059669;
+  --ogx-color-primary-light: #d1fae5;
+  --ogx-grid-header-background: #f0fdf4;
+  --ogx-grid-row-selected-background: #d1fae5;
+  --ogx-grid-cell-focus-border: #059669;
+}
+```
+
+```tsx
+<div className="my-grid-container">
+  <DataGrid rows={rows} columns={columns} />
+</div>
+```
+
+---
+
+## Built-in Presets
+
+OpenGridX ships with two presets accessible from `'opengridx'`:
+
+```tsx
+import { DataGridThemeProvider, themes } from '@opencorestack/opengridx';
+
+// Available: themes.light, themes.dark, themes.compact, themes.comfortable
+<DataGridThemeProvider theme={themes.dark}>
+  <DataGrid ... />
+</DataGridThemeProvider>
+```
+
+---
+
+## Example: Custom Purple Theme
+
+```tsx
+const purpleTheme: GridTheme = {
+  colors: {
+    primary: '#7c3aed',
+    primaryDark: '#5b21b6',
+    primaryLight: '#ede9fe',
+    primaryFocus: 'rgba(124,58,237,0.4)',
+  },
+  grid: {
+    headerBackground: '#f5f3ff',
+    headerText: '#4c1d95',
+    headerHoverBackground: '#ede9fe',
+    headerSortedBackground: '#ddd6fe',
+    rowSelectedBackground: '#ede9fe',
+    rowSelectedHoverBackground: '#ddd6fe',
+    cellFocusBorder: '#7c3aed',
+  },
+};
+```
+
+---
+
+## CSS Architecture Notes
+
+- All tokens are defined in `lib/styles/base/variables.css`
+- The dark mode overrides are in the same file under `@media (prefers-color-scheme: dark)`
+- The CSS entry point for the entire library is `lib/styles/opengridx.css` (single barrel import)
+- BEM class prefix: `ogx__` (e.g. `ogx__cell`, `ogx__header-cell`)
+- Variable prefix: `--ogx-` (e.g. `--ogx-color-primary`)

package/docs/features/aggregation-pivot.md

@@ -0,0 +1,79 @@
+# 📊 Aggregation & Pivot Mode
+
+Transform raw data into meaningful insights with advanced grouping and summary features.
+
+---
+
+## 📈 Row Aggregation
+
+Aggregation allows you to calculate summary values (Sum, Avg, etc.) for groups or the entire dataset.
+
+### Usage
+```tsx
+<DataGrid
+  rows={rows}
+  columns={columns}
+  aggregationModel={{
+    salary: 'sum',
+    age: 'avg',
+    department: 'count'
+  }}
+/>
+```
+
+### Configuration
+You can control where the aggregation results appear:
+- **`footer`**: A sticky row at the bottom of the grid.
+- **`inline`**: Values displayed within group headers (when Row Grouping is active).
+- **`both`**: Display in both locations.
+
+```tsx
+<DataGrid
+  aggregationModel={model}
+  getAggregationPosition={(groupNode) => 'both'}
+/>
+```
+
+---
+
+## 🔄 Pivot Mode
+
+Pivot mode rotates your data, turning row values into dynamically generated columns.
+
+### Defining a Pivot
+```tsx
+const pivotModel: GridPivotModel = {
+  rowFields: ['office'],         // Dimensions on the Left
+  columnFields: ['year'],       // Dimensions on the Top
+  valueFields: [                 // Values to compute
+    { field: 'revenue', aggFn: 'sum', headerName: 'Total Revenue' }
+  ]
+};
+
+<DataGrid
+  pivotMode={true}
+  pivotModel={pivotModel}
+/>
+```
+
+### Key Concepts
+- **Row Fields**: These become the static vertical axis of your pivot table.
+- **Column Fields**: Unique values in these fields become new columns.
+- **Value Fields**: The data that gets summarized at the intersection of row and column fields.
+
+---
+
+## ⚙️ Aggregation Functions
+
+Built-in functions available:
+- `sum`: Total of numeric values.
+- `avg`: Arithmetic mean.
+- `min`: Smallest value.
+- `max`: Largest value.
+- `count`: Number of items.
+- `unique`: Number of unique items.
+
+---
+
+## 🎨 Formatting Totals
+Aggregation results automatically inherit the `valueFormatter` from their respective column definitions. If you need a specific format for aggregates only, use the `formatAggregationValue` utility.