# Gridler

A powerful React data grid component built on top of @glideapps/glide-data-grid with enhanced features for data manipulation and visualization.

## Features

### ✅ Completed Features

#### Core Grid Functionality
- **Data Display**: Support for both local data and remote API data sources
- **Column Management**: Dynamic column configuration with customizable properties
- **Cell Rendering**: Custom cell renderers with flexible display options
- **Row Selection**: Multi-row selection capabilities
- **Context Menus**: Right-click context menus for cells, headers, and general grid areas

#### Sorting & Filtering
- **Local File Sorting**: Built-in sorting for local data sources
- **Column Sorting**: Click-to-sort headers with ascending/descending indicators
- **Advanced Filtering**: Column-based filtering with multiple operators:
  - Contains, Equal, Not Equal
  - Greater Than, Greater Than or Equal
  - Less Than, Less Than or Equal
  - Between, Starts With, Ends With
- **Filter UI**: Dedicated filter input components with debounced search
- **Searching**: Built-in search functionality across data

#### Column Features
- **Show/Hide Columns**: Dynamic column visibility control
- **Column Resizing**: Adjustable column widths with min/max constraints
- **Column Reordering**: Drag-and-drop column repositioning
- **Column Persistence**: Automatic saving of column order and sizes
- **Filtering Interface/Menu**: Comprehensive filtering controls per column

#### Data Management
- **Pagination**: Built-in pager component for large datasets
- **Progressive Scrolling**: Efficient rendering for large data sets
- **State Persistence**: Column preferences saved across sessions
- **Error Handling**: Comprehensive error management and display

#### UI/UX Features
- **Theme Support**: Customizable grid themes with dark/light mode support
- **Responsive Design**: Adaptive layout for different screen sizes
- **Loading States**: Visual feedback during data loading
- **Keyboard Navigation**: Full keyboard accessibility
- **Sprites/Icons**: Custom sort indicators and UI elements

#### Integration Features
- **API Adaptor**: Go Lang v2 REST API integration
- **Zustand Store**: Centralized state management
- **Mantine Integration**: Seamless integration with Mantine UI components
- **TypeScript Support**: Full TypeScript definitions and type safety

### 🚧 Planned Features

#### Enhanced Filtering
- **Date Range Filters**: Specialized date/time filtering controls
- **Multi-Select Filters**: Dropdown filters with multiple selection options
- **Custom Filter Types**: Support for custom filter implementations
- **Filter Presets**: Save and load common filter combinations
- **Advanced Search**: Global search with highlighting and regex support

#### Export/Import
- **CSV Export**: Export filtered/sorted data to CSV format
- **Excel Export**: Export to Excel with formatting preservation
- **JSON Export**: Export data in JSON format
- **Print Support**: Print-friendly grid layouts
- **Data Import**: Import data from various file formats

#### Advanced Grid Features
- **Cell Editing**: In-place cell editing with validation
- **Bulk Operations**: Multi-row operations (delete, update, etc.)
- **Grouping**: Row grouping with expand/collapse functionality
- **Aggregation**: Column aggregation (sum, average, count, etc.)
- **Virtual Scrolling**: Enhanced performance for very large datasets
- **Frozen Columns**: Pin important columns to left/right
- **Row Grouping**: Hierarchical data display

#### UI Enhancements
- **Column Templates**: Pre-defined column configurations
- **Grid Templates**: Save and load entire grid configurations
- **Toolbar Customization**: Configurable toolbar with custom actions
- **Status Bar**: Display grid statistics and information
- **Full Screen Mode**: Maximize grid to full viewport
- **Responsive Breakpoints**: Better mobile/tablet support

#### Performance & Optimization
- **Data Virtualization**: Improved virtual scrolling implementation
- **Lazy Loading**: On-demand data loading for large datasets
- **Caching Strategy**: Intelligent data caching for better performance
- **Memory Optimization**: Reduced memory footprint for large grids

#### Developer Experience
- **Plugin System**: Extensible plugin architecture
- **Custom Hooks**: Reusable hooks for common grid operations
- **Documentation**: Comprehensive API documentation and examples
- **Testing Suite**: Complete test coverage for all features
- **Storybook Stories**: Interactive component examples

## Usage

```tsx
import { Gridler } from './Gridler';

const MyGrid = () => {
  const columns = [
    { id: 'name', title: 'Name', width: 200 },
    { id: 'email', title: 'Email', width: 250 },
    { id: 'role', title: 'Role', width: 150 }
  ];

  const data = [
    { name: 'John Doe', email: 'john@example.com', role: 'Admin' },
    { name: 'Jane Smith', email: 'jane@example.com', role: 'User' }
  ];

  return (
    <Gridler
      uniqueid="my-grid"
      columns={columns}
      data={data}
    />
  );
};
```

## Architecture

- **Gridler.tsx**: Main component wrapper with provider setup
- **GridlerDataGrid.tsx**: Core data grid implementation
- **Store.tsx**: Zustand-based state management
- **Column.tsx**: Column definitions and filtering components
- **components/**: Reusable grid components (Pager, Computer, etc.)
- **hooks/**: Custom React hooks for grid functionality
- **utils/**: Utility functions and type definitions