🚀 Hyper-Pivot

Hyper-Pivot is a premium, highly customizable PivotGrid and Query Builder component for React. Designed with performance, flexibility, and a modern aesthetic in mind, it provides an intuitive drag-and-drop interface for users to build complex data aggregations and views on the fly, similar to premium enterprise grid components.

✨ Features

• Drag & Drop UI: Easily configure rows, columns, and values with intuitive drag-and-drop mechanics.
• Dynamic Theming: Built-in support for light and dark modes, with highly customizable colors and styles.
• High Performance: Optimized for fast rendering and fluid interactions even with large datasets.
• Data Aggregation: Powerful client-side (and server-side) data grouping and aggregation.
• Pagination & Filtering: Comprehensive controls for data display.
• Accessible & Responsive: Keyboard navigation support and mobile-friendly design.

⚙️ Installation

npm install hyper-pivot
# or
yarn add hyper-pivot
# or
pnpm add hyper-pivot

🚀 Quick Start

Here's a quick example of how to use Hyper-Pivot in your React application:

'use client'
import React, from 'react';
import { PivotGrid } from 'hyper-pivot';
import 'hyper-pivot/dist/style.css'; // If applicable

const mySalesData = [
  { Region: 'North', Country: 'USA', City: 'New York', Store: 'NY-01', Category: 'Electronics', SubCategory: 'Mobile', Product: 'iPhone 14', Sales: 4500, Qty: 12, Discount: 0.05, Profit: 800 },
  { Region: 'South', Country: 'Brazil', City: 'São Paulo', Store: 'SP-01', Category: 'Electronics', SubCategory: 'Laptop', Product: 'Dell XPS', Sales: 6700, Qty: 15, Discount: 0.07, Profit: 1200 },
  // ... more data
];

export default function App() {
  return (
    <div style={{ height: '100vh', padding: 20 }}>
      <PivotGrid 
        data={mySalesData} 
        themeMode="light" // or "dark"
      />
    </div>
  );
}

� Documentation

For detailed documentation and examples, visit: Hyper Pivot Documentation

�🛠 Configuration Options

The PivotGrid component accepts several props for customization:

| Prop | Type | Default | Description | |------|------|---------|-------------| | data | any[] | [] | The array of objects to be displayed and aggregated in the grid. | | themeMode | 'light' \| 'dark' | 'light' | Toggles the visual theme of the component. | | colors | object | undefined | Custom palette overrides for detailed styling. | | initialState | object | undefined | Initial configuration for rows, columns, and values. | | onStateChange | function | undefined | Callback fired when the grid configuration changes. |

🤝 Contributing

We welcome contributions to Hyper-Pivot! Since this project is open-source, please feel free to fork the repository, make your changes, and submit a pull request.

📄 License

MIT License. See LICENSE for more information.