---

Screenshots

> Try it live: Check out the examples directory for working demos across different modes and frameworks

---

⚡ Features

---

Installation

`bash


npm

`html











`

$3

`tsx
import { useEffect, useRef } from 'react';
import '@mindfiredigital/pivothead-web-component';

export default function PivotDemo() {
const pivotRef = useRef(null);

useEffect(() => {
if (pivotRef.current) {
pivotRef.current.data = salesData;
pivotRef.current.options = {
rows: ['product'],
columns: ['region'],
values: ['sales'],
};
}
}, []);

return ;
}
`

> Prefer React? Use our official React wrapper: @mindfiredigital/pivothead-react

$3

`vue



`

$3

`typescript
// app.component.ts
import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@mindfiredigital/pivothead-web-component';

@Component({
selector: 'app-root',
template: [attr.data]="dataJson"
[attr.options]="optionsJson"
>,
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppComponent {
dataJson = JSON.stringify(salesData);
optionsJson = JSON.stringify({
rows: ['product'],
columns: ['region'],
values: ['sales'],
});
}
`

---

Rendering Modes Deep Dive

$3

Perfect for rapid development with zero configuration.

`html
data='[{"product":"A","sales":100}]'
options='{"rows":["product"],"values":["sales"]}'
>
`

Includes:

- Pre-built responsive UI
- Drag & drop interface
- Filtering controls
- Pagination
- Export buttons
- Sorting indicators

Best for: Admin panels, dashboards, internal tools, rapid prototyping

---

$3

You control the UI, we handle the data.

`html





`

Best for: Custom designs, branded applications, unique UX requirements

---

$3

Zero UI, maximum flexibility. Build anything on top of the pivot engine.

`html



`

Best for: Custom visualizations, D3.js integrations, charting libraries, unique interfaces

---

WebAssembly Power - Large File Processing

$3

`html




`

$3

| File Size | Strategy | Processing Time\* | Memory |
| --------- | ---------------- | ----------------- | ------------- |
| < 1 MB | JavaScript | ~50ms | Low |
| 1-8 MB | Web Workers | ~200ms | Medium |
| 8-100 MB | WASM (in-memory) | ~800ms | Medium |
| 100MB-1GB | WASM + Streaming | ~3-5s | Low (chunked) |

Key Benefits:

- Zero configuration - Automatic mode selection
- Smart memory management - Chunked processing for large files
- Real-time progress - Built-in loading indicators
- Fallback support - Graceful degradation if WASM unavailable

---

API Reference

$3

| Property | Type | Default | Description |
| ------------ | ---------------------------------- | ----------- | --------------------------------------------- |
| mode | 'default' \| 'minimal' \| 'none' | 'default' | Rendering mode |
| data | Array \| File \| string | [] | Data source (array, CSV File, or JSON string) |
| options | object \| string | {} | Pivot configuration |
| filters | object \| string | [] | Active filters |
| pagination | object \| string | {} | Pagination settings |

$3

Access via JavaScript:

`javascript
const pivot = document.querySelector('pivot-head');

// State Management
pivot.getState() // Get current state
pivot.refresh() // Refresh the pivot table
pivot.getData() // Get raw data
pivot.getProcessedData() // Get processed/grouped data

// Configuration
pivot.setMeasures([...]) // Update measures
pivot.setDimensions([...]) // Update dimensions
pivot.setGroupConfig({...}) // Update grouping
pivot.setLayout(rows, cols, vals) // Set complete layout

// Data Manipulation
pivot.sort(field, direction) // Sort by field ('asc' | 'desc')
pivot.filter(field, operator, val) // Apply filter
pivot.clearFilters() // Remove all filters

// Pagination
pivot.setPageSize(size) // Set page size
pivot.goToPage(pageNum) // Navigate to page
pivot.getPagination() // Get pagination state

// Export
pivot.exportToPDF(fileName) // Export to PDF
pivot.exportToExcel(fileName) // Export to Excel
pivot.exportToHTML(fileName) // Export to HTML

// File Operations (ConnectService)
await pivot.connectToLocalCSV() // Open CSV file picker
await pivot.connectToLocalJSON() // Open JSON file picker
await pivot.connectToLocalFile() // Open file picker (any supported format)
`

$3

| Event | Detail Type | Description |
| ------------- | --------------------------- | ------------------------------------------------------ |
| stateChange | PivotTableState | Emitted on any state change (data, sort, filter, etc.) |
| dataLoaded | { recordCount, fileSize } | Emitted when file loading completes |
| error | { message, code } | Emitted on errors |

`javascript
pivot.addEventListener('stateChange', event => {
const state = event.detail;
console.log('Headers:', state.processedData.headers);
console.log('Rows:', state.processedData.rows);
console.log('Totals:', state.processedData.totals);
console.log('Performance mode:', state.performanceMode);
});

pivot.addEventListener('dataLoaded', event => {
console.log(Loaded ${event.detail.recordCount} records);
});
`

$3

`typescript
import type {
PivotTableState,
PivotTableOptions,
FilterConfig,
PaginationConfig,
} from '@mindfiredigital/pivothead';

interface PivotTableState {
data: T[];
processedData: {
headers: string[];
rows: any[][];
totals: Record;
};
filters: FilterConfig[];
pagination: PaginationConfig;
performanceMode?: 'standard' | 'workers' | 'wasm' | 'streaming-wasm';
// ... other properties
}
`

---

Real-World Examples

$3

`html



`

$3

`html


`html



`

---

Customization & Theming

$3

`css
pivot-head {
/ Colors /
--pivot-primary-color: #4a90e2;
--pivot-secondary-color: #6c757d;
--pivot-background: #ffffff;
--pivot-text-color: #212529;

/ Typography /
--pivot-font-family: 'Inter', sans-serif;
--pivot-font-size: 14px;

/ Spacing /
--pivot-padding: 16px;
--pivot-gap: 8px;

/ Borders /
--pivot-border-color: #dee2e6;
--pivot-border-radius: 4px;

/ Table /
--pivot-header-bg: #f8f9fa;
--pivot-row-hover-bg: #f1f3f5;
--pivot-cell-padding: 8px 12px;
}
`

---

Related Packages

Build pivot tables for any framework:

| Package | Description | NPM | Documentation |
| ------------------------------------------------ | ----------------------- | --------------------------------------------------------------------------------------------------------------------------- | ---------------------------- |
| @mindfiredigital/pivothead | Core TypeScript engine | ![npm](https://www.npmjs.com/package/@mindfiredigital/pivothead) | README |
| @mindfiredigital/pivothead-react | React wrapper component | - | README |
| @mindfiredigital/pivothead-vue | Vue wrapper | - | Coming soon |

---

$3

We welcome contributions! See our Contributing Guide to get started.

$3

If PivotHead helps your project, please consider:

- ⭐ Star the repository

---

Examples

Check out complete working examples in the repository:

| Example | Description | Path |
| --------------------- | ------------------------------------------ | ------------------------------------------------------------------- |
| Vanilla JS | Pure JavaScript implementation | simple-js-demo |
| Default Mode | Full UI with all features | pivothead-default-demo |
| Minimal Mode | Custom rendering with slots | pivothead-minimal-demo |
| Headless Mode | Complete control for custom visualizations | pivothead-none-demo |
| React Integration | Using web component in React | react-web-component-demo |
| Vue Integration | Using web component in Vue | vue-example |

$3

`bash


Clone the repository

---

License

MIT © Mindfiredigital

---