### React Quick Start Example

Source: https://tiny-pivot.com/llms-full.txt

Basic setup for TinyPivot React DataGrid with sample data and common features enabled.

```tsx
import { DataGrid } from '@smallwebco/tinypivot-react'
import '@smallwebco/tinypivot-react/style.css'

const data = [
  { id: 1, region: 'North', product: 'Widget A', sales: 12500, units: 150 },
  { id: 2, region: 'North', product: 'Widget B', sales: 8300, units: 95 },
  { id: 3, region: 'South', product: 'Widget A', sales: 15200, units: 180 },
  { id: 4, region: 'South', product: 'Widget B', sales: 9800, units: 110 },
]

export default function App() {
  return (
    <DataGrid
      data={data}
      enableExport={true}
      enableSearch={true}
      enablePagination={true}
      pageSize={100}
      enableColumnResize={true}
      enableClipboard={true}
      theme="light"
      exportFilename="my-data.csv"
    />
  )
}
```

--------------------------------

### Vue 3 Quick Start Example

Source: https://tiny-pivot.com/llms-full.txt

Basic setup for TinyPivot Vue 3 DataGrid with sample data and common features enabled.

```vue
<script setup lang="ts">
import { DataGrid } from '@smallwebco/tinypivot-vue'
import '@smallwebco/tinypivot-vue/style.css'

const data = [
  { id: 1, region: 'North', product: 'Widget A', sales: 12500, units: 150 },
  { id: 2, region: 'North', product: 'Widget B', sales: 8300, units: 95 },
  { id: 3, region: 'South', product: 'Widget A', sales: 15200, units: 180 },
  { id: 4, region: 'South', product: 'Widget B', sales: 9800, units: 110 },
]
</script>

<template>
  <DataGrid
    :data="data"
    :enable-export="true"
    :enable-search="true"
    :enable-pagination="true"
    :page-size="100"
    :enable-column-resize="true"
    :enable-clipboard="true"
    theme="light"
    export-filename="my-data.csv"
  />
</template>
```

--------------------------------

### Install TinyPivot React

Source: https://tiny-pivot.com/llms-full.txt

Install the TinyPivot React package using pnpm or npm.

```bash
pnpm add @smallwebco/tinypivot-react
# or
npm install @smallwebco/tinypivot-react
```

--------------------------------

### Install TinyPivot Vue 3

Source: https://tiny-pivot.com/llms-full.txt

Install the TinyPivot Vue 3 package using pnpm or npm.

```bash
pnpm add @smallwebco/tinypivot-vue
# or
npm install @smallwebco/tinypivot-vue
```

--------------------------------

### Backend API Handler (Next.js)

Source: https://tiny-pivot.com/llms-full.txt

Set up the backend API endpoint for the AI Data Analyst using the createTinyPivotHandler. This example configures which tables to include and provides descriptions for them.

```typescript
// Backend: app/api/tinypivot/route.ts (Next.js App Router example)
import { createTinyPivotHandler } from '@smallwebco/tinypivot-server'

export const POST = createTinyPivotHandler({
  tables: {
    include: ['sales', 'customers', 'products'],
    descriptions: {
      sales: 'Sales transactions with revenue data',
    },
  },
})
```

--------------------------------

### DataGrid Data Shape Example

Source: https://tiny-pivot.com/llms-full.txt

Demonstrates the correct structure for providing flat row objects to the DataGrid. Nested objects should be avoided as they will not render correctly.

```typescript
// Correct — flat objects with consistent keys
const data = [
  { id: 1, name: 'Alice', sales: 1500, region: 'North' },
  { id: 2, name: 'Bob', sales: 2300, region: 'South' },
]

// Avoid — nested objects won't display correctly
const bad = [{ id: 1, user: { name: 'Alice' } }]
```

--------------------------------

### Custom Aggregation Function Example

Source: https://tiny-pivot.com/llms-full.txt

Demonstrates how to define a custom aggregation function for a value field, such as calculating the 90th percentile.

```typescript
// Vue (ref) / React (plain object)
const valueFields = [
  {
    field: 'sales',
    aggregation: 'custom',
    customFn: (values: number[]) => {
      const sorted = [...values].sort((a, b) => a - b)
      return sorted[Math.floor(sorted.length * 0.9)] // 90th percentile
    },
    customLabel: '90th Percentile',
    customSymbol: 'P90',
  },
]
```

--------------------------------

### TypeScript Types for TinyPivot React

Source: https://tiny-pivot.com/llms-full.txt

Imports key types for using TinyPivot in a React application. Ensure you have '@smallwebco/tinypivot-react' installed.

```typescript
import type {
  AggregationFunction,
  AIAnalystConfig,
  DataGridProps,
  PivotConfigType,
  PivotField,
  PivotValueField,
} from '@smallwebco/tinypivot-react'
```

--------------------------------

### TypeScript Types for TinyPivot Vue

Source: https://tiny-pivot.com/llms-full.txt

Imports key types for using TinyPivot in a Vue application. Ensure you have '@smallwebco/tinypivot-vue' installed.

```typescript
// Most types also available from '@smallwebco/tinypivot-vue'
import type {
  AggregationFunction,
  AIAnalystConfig,
  DataGridProps,
  PivotConfigType,
  PivotField,
  PivotValueField,
} from '@smallwebco/tinypivot-vue'
```

--------------------------------

### Activate Pro License

Source: https://tiny-pivot.com/llms-full.txt

Call the setLicenseKey function once at app startup before rendering to activate the pro license for both Vue and React frameworks.

```typescript
// Vue
import { setLicenseKey } from '@smallwebco/tinypivot-vue'
setLicenseKey('YOUR_LICENSE_KEY')

// React
import { setLicenseKey } from '@smallwebco/tinypivot-react'
setLicenseKey('YOUR_LICENSE_KEY')
```

--------------------------------

### Custom CSS Theme for DataGrid

Source: https://tiny-pivot.com/llms-full.txt

Illustrates how to override CSS custom properties to create a custom theme for the DataGrid.

```css
.vpg-data-grid.my-brand {
  --vpg-accent: #ff6b35;
  --vpg-accent-hover: #e55426;
  --vpg-surface-bg: #fafaf7;
  --vpg-surface-panel: #f0eee7;
}
```

--------------------------------

### Frontend Integration (Vue)

Source: https://tiny-pivot.com/llms-full.txt

Integrate the DataGrid component in a Vue application and enable the AI Analyst feature by providing the backend endpoint. Remember to set your license key.

```vue
<!-- Frontend: Vue -->
<script setup lang="ts">
import { DataGrid, setLicenseKey } from '@smallwebco/tinypivot-vue'
import '@smallwebco/tinypivot-vue/style.css'

setLicenseKey('YOUR_LICENSE_KEY')

const aiConfig = {
  enabled: true,
  endpoint: '/api/tinypivot',
}
</script>

<template>
  <DataGrid :data="[]" :ai-analyst="aiConfig" />
</template>
```

--------------------------------

### Frontend Integration (React)

Source: https://tiny-pivot.com/llms-full.txt

Integrate the DataGrid component in a React application and enable the AI Analyst feature by providing the backend endpoint. Ensure your license key is set.

```tsx
// Frontend: React
import { DataGrid, setLicenseKey } from '@smallwebco/tinypivot-react'
import '@smallwebco/tinypivot-react/style.css'

setLicenseKey('YOUR_LICENSE_KEY')

export default function App() {
  return (
    <DataGrid
      data={[]}
      aiAnalyst={{ enabled: true, endpoint: '/api/tinypivot' }}
    />
  )
}
```

--------------------------------

### Applying Custom Theme in React

Source: https://tiny-pivot.com/llms-full.txt

Demonstrates applying a custom CSS theme to the DataGrid component in React by adding a class.

```tsx
{/* React */}
<DataGrid data={data} theme="light" className="my-brand" />
```

--------------------------------

### Vue DataGrid Theming

Source: https://tiny-pivot.com/llms-full.txt

Shows how to apply a built-in theme to the DataGrid component in Vue.

```vue
<!-- Vue -->
<DataGrid :data="data" theme="slate-dark" />
```

--------------------------------

### React DataGrid Theming

Source: https://tiny-pivot.com/llms-full.txt

Shows how to apply a built-in theme to the DataGrid component in React.

```tsx
{/* React */}
<DataGrid data={data} theme="slate-dark" />
```

--------------------------------

### Applying Custom Theme in Vue

Source: https://tiny-pivot.com/llms-full.txt

Demonstrates applying a custom CSS theme to the DataGrid component in Vue by adding a class.

```vue
<!-- Vue -->
<DataGrid :data="data" theme="light" class="my-brand" />
```

--------------------------------

### Client-side Data Integration (React)

Source: https://tiny-pivot.com/llms-full.txt

Configure the AI Analyst for client-side data in a React application. This includes setting up data sources, a schema inference function, and a data source loader.

```tsx
// React
import { useState } from 'react'
import { DataGrid, setLicenseKey } from '@smallwebco/tinypivot-react'
import '@smallwebco/tinypivot-react/style.css'

setLicenseKey('YOUR_LICENSE_KEY')

function inferSchema(data: Record<string, unknown>[]) {
  if (!data.length) return []
  return Object.entries(data[0]).map(([name, value]) => ({
    name,
    type: typeof value === 'number' ? 'number' : typeof value === 'boolean' ? 'boolean' : 'string',
  }))
}

export default function App() {
  const [salesData] = useState([
    { id: 1, region: 'North', product: 'Widget A', sales: 12500, units: 150 },
  ])

  const aiConfig = {
    enabled: true,
    endpoint: '/api/ai-chat',
    dataSources: [
      { id: 'sales', table: 'sales', name: 'Sales Data', description: 'Sales transactions' },
    ],
    dataSourceLoader: async (id: string) => {
      if (id === 'sales')
        return { data: salesData, schema: inferSchema(salesData) }
      throw new Error(`Unknown data source: ${id}`)
    },
  }

  return <DataGrid data={salesData} aiAnalyst={aiConfig} />
}
```

--------------------------------

### Client-side Data Integration (Vue)

Source: https://tiny-pivot.com/llms-full.txt

Configure the AI Analyst for client-side data in a Vue application. This involves defining data sources, a schema inference function, and a data source loader.

```vue
<!-- Vue 3 -->
<script setup lang="ts">
import { ref } from 'vue'
import { DataGrid, setLicenseKey } from '@smallwebco/tinypivot-vue'
import '@smallwebco/tinypivot-vue/style.css'

setLicenseKey('YOUR_LICENSE_KEY')

const salesData = ref([
  { id: 1, region: 'North', product: 'Widget A', sales: 12500, units: 150 },
])

function inferSchema(data: Record<string, unknown>[]) {
  if (!data.length) return []
  return Object.entries(data[0]).map(([name, value]) => ({
    name,
    type: typeof value === 'number' ? 'number' : typeof value === 'boolean' ? 'boolean' : 'string',
  }))
}

const aiConfig = {
  enabled: true,
  endpoint: '/api/ai-chat',
  dataSources: [
    { id: 'sales', table: 'sales', name: 'Sales Data', description: 'Sales transactions' },
  ],
  dataSourceLoader: async (id: string) => {
    if (id === 'sales')
      return { data: salesData.value, schema: inferSchema(salesData.value) }
    throw new Error(`Unknown data source: ${id}`)
  },
}
</script>

<template>
  <DataGrid :data="salesData" :ai-analyst="aiConfig" />
</template>
```

--------------------------------

### DataGrid Component Props

Source: https://tiny-pivot.com/llms-full.txt

This section details the props available for the DataGrid component. Props are generally consistent between Vue and React, with differences primarily in naming conventions (kebab-case for Vue, camelCase for React).

```APIDOC
## DataGrid Component Props

All props are identical between Vue and React except for naming convention (Vue: kebab-case in template; React: camelCase).

| Prop (Vue / React) | Type | Default | Description |
|---|---|---|---|
| `data` / `data` | `Record<string, unknown>[]` | **required** | Array of flat row objects |
| `loading` / `loading` | `boolean` | `false` | Show loading spinner |
| `fontSize` / `fontSize` | `'xs' | 'sm' | 'base'` | `'xs'` | Font size preset |
| `show-pivot` / `showPivot` | `boolean` | `true` | Show pivot toggle button |
| `enable-export` / `enableExport` | `boolean` | `true` | Show the Export dropdown menu (CSV free / Excel .xlsx Pro) |
| `enable-search` / `enableSearch` | `boolean` | `true` | Show global search input |
| `enable-pagination` / `enablePagination` | `boolean` | `false` | Enable pagination |
| `page-size` / `pageSize` | `number` | `50` | Rows per page |
| `enable-column-resize` / `enableColumnResize` | `boolean` | `true` | Drag-to-resize columns |
| `enable-clipboard` / `enableClipboard` | `boolean` | `true` | Ctrl+C to copy selected cells |
| `theme` / `theme` | `string` | `'light'` | Color theme — 22 built-in presets (see Theming) |
| `number-format` / `numberFormat` | `'us' | 'eu' | 'plain'` | `'us'` | Number display: US (1,234.56), EU (1.234,56), plain |
| `date-format` / `dateFormat` | `'us' | 'eu' | 'iso'` | `'iso'` | Date display: US (MM/DD/YYYY), EU (DD/MM/YYYY), ISO |
| `field-role-overrides` / `fieldRoleOverrides` | `FieldRoleOverrides` | `undefined` | Override chart field role per column (`'dimension'` | `'measure'` | `'temporal'`) |
| `striped-rows` / `stripedRows` | `boolean` | `true` | Alternating row background color |
| `export-filename` / `exportFilename` | `string` | `'data-export.csv'` | Filename for CSV download |
| `ai-analyst` / `aiAnalyst` | `AIAnalystConfig` | `undefined` | Pro: AI Data Analyst configuration object |
| `enable-drill-down` / `enableDrillDown` | `boolean` | `true` | Enable pivot row group expand/collapse chevrons (Free) |
| `enable-drill-through` / `enableDrillThrough` | `boolean` | `true` | Enable double-click drill-through on pivot value cells (Pro feature) |
| `pivot-layout` / `pivotLayout` | `'grouped' | 'tabular'` | `'grouped'` | Row layout for multi-field pivots: `'grouped'` merges repeated parent values into a spanning cell; `'tabular'` repeats every value on each row. |
| `row-height` / `rowHeight` | `number` | — | Row height in pixels |
| `header-height` / `headerHeight` | `number` | — | Header row height in pixels |
| `enable-row-selection` / `enableRowSelection` | `boolean` | `false` | Enable row selection (adds a checkbox column) |
| `enable-vertical-resize` / `enableVerticalResize` | `boolean` | — | Allow dragging the bottom edge to resize the grid height |
| `initial-height` / `initialHeight` | `number` | — | Initial height of the grid in pixels |
| `min-height` / `minHeight` | `number` | — | Minimum grid height in pixels |
| `max-height` / `maxHeight` | `number` | — | Maximum grid height in pixels |

### Data Shape

TinyPivot accepts an array of flat objects. Each object is a row; keys become column headers.

```typescript
// Correct — flat objects with consistent keys
const data = [
  { id: 1, name: 'Alice', sales: 1500, region: 'North' },
  { id: 2, name: 'Bob', sales: 2300, region: 'South' },
]

// Avoid — nested objects won't display correctly
const bad = [{ id: 1, user: { name: 'Alice' } }]
```

Supported value types: `string`, `number`, `boolean`, `null`/`undefined` (empty cell), `Date`.

### Vue Events

| Event | Payload | Description |
|---|---|---|
| `@cell-click` | `{ row, col, value, rowData }` | Cell clicked |
| `@selection-change` | `{ cells, values }` | Selection changed |
| `@export` | `{ rowCount, filename }` | CSV exported |
| `@copy` | `{ text, cellCount }` | Cells copied to clipboard |
| `@collapse-change` | `string[]` | Pivot row groups collapsed/expanded (array of collapsed path keys) |
| `@drill-through` | `DrillThroughResult` | Pivot cell double-clicked; drill-through modal opened (Pro) |

### React Callbacks

| Prop | Description |
|---|---|
| `onCellClick` | Cell clicked |
| `onSelectionChange` | Selection changed |
| `onExport` | CSV exported |
| `onCopy` | Cells copied to clipboard |
| `onCollapseChange` | Pivot row groups collapsed/expanded — receives `string[]` of collapsed path keys |
| `onDrillThrough` | Pivot cell double-clicked; drill-through modal opened — receives `DrillThroughResult` (Pro) |

```

--------------------------------

### CSV Export API in Vue

Source: https://tiny-pivot.com/llms-full.txt

Shows how to import and use the `exportToCSV` function for exporting data to CSV in a Vue application.

```typescript
// Vue
import { exportToCSV, exportPivotToCSV } from '@smallwebco/tinypivot-vue'

// React
import { exportToCSV, exportPivotToCSV } from '@smallwebco/tinypivot-react'

// exportToCSV(data: T[], columns: string[], options?: ExportOptions): void
exportToCSV(data, Object.keys(data[0] ?? {}), { filename: 'my-data.csv' })
```

--------------------------------

### Pivot Table Drill-Through to Source Rows

Source: https://tiny-pivot.com/llms-full.txt

Allows drilling through to view source rows contributing to a pivot cell value. Requires a Pro license and fires an event with drill-through results. Supports Vue and React.

```vue
<!-- Vue -->
<DataGrid
  :data="data"
  @drill-through="({ rows, descriptor }) => console.log(descriptor.rowCount, 'rows')"
/>
```

```tsx
// React
<DataGrid
  data={data}
  onDrillThrough={({ rows, descriptor }) => console.log(descriptor.rowCount, 'rows')}
/>
```

--------------------------------

### Export Data to XLSX

Source: https://tiny-pivot.com/llms-full.txt

Exports flat grid data to an XLSX file with customizable options. Supports Vue and React.

```typescript
// Vue
import { exportToXLSX, exportPivotToXLSX } from '@smallwebco/tinypivot-vue'
import type { XlsxExportOptions } from '@smallwebco/tinypivot-vue'

// React
import { exportToXLSX, exportPivotToXLSX } from '@smallwebco/tinypivot-react'

// Flat grid
// exportToXLSX<T>(data: T[], columns: string[], options?: XlsxExportOptions): Promise<void>
await exportToXLSX(data, columns, {
  filename: 'report.xlsx',
  sheetName: 'Sales',
  numberFormats: { revenue: '#,##0.00', units: '#,##0' },
})
```

```typescript
// Pivot table
// exportPivotToXLSX(pivotData, rowFields, columnFields, valueFields, options?): Promise<void>
await exportPivotToXLSX(pivotData, rowFields, columnFields, valueFields, {
  filename: 'pivot-report.xlsx',
  sheetName: 'Pivot',
})
```

--------------------------------

### Pivot Table Row Group Expand/Collapse

Source: https://tiny-pivot.com/llms-full.txt

Enables expanding and collapsing row groups in a pivot table. Controlled by `enableDrillDown` and fires an event on collapse changes. Supports Vue and React.

```vue
<!-- Vue -->
<DataGrid
  :data="data"
  @collapse-change="(collapsedPaths) => console.log(collapsedPaths)"
/>
```

```tsx
// React
<DataGrid
  data={data}
  onCollapseChange={(collapsedPaths) => console.log(collapsedPaths)}
/>
```

--------------------------------

### Drill-Through Result and Descriptor Types

Source: https://tiny-pivot.com/llms-full.txt

Defines the TypeScript interfaces for drill-through results and descriptors, including source rows, paths, value fields, aggregation, and row counts.

```typescript
interface DrillThroughResult {
  rows: Record<string, unknown>[]  // Source rows matching the cell slice
  descriptor: DrillThroughDescriptor
}
interface DrillThroughDescriptor {
  rowPath: string[]          // e.g. ['West', 'Widgets']
  columnPath: string[]       // e.g. ['Q3']
  valueField: string         // e.g. 'sales'
  aggregation: AggregationFunction
  formattedValue: string     // Pre-formatted result, e.g. '1,234'
  rowCount: number
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.