ms-data-grid 0.0.16 → 0.0.17

package/CHANGELOG.md

@@ -0,0 +1,57 @@
+# Changelog
+
+All notable changes to the MS Data Grid project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [0.0.2] - 2024-01-15
+
+### Added
+- Advanced data grid component for Angular applications
+- Customizable column configuration with sorting and filtering
+- Flexible pagination system
+- Row selection with checkbox support
+- Column pinning (left and right)
+- Taskbar with customizable actions
+- Global search functionality
+- Responsive design support
+- Custom styling options for headers, rows, and cells
+- Loading state indicator
+- Cell details popup
+- Multiple table view configurations
+- Horizontal and vertical scrollbar customization
+
+### Features
+- **Performance Optimized**: Efficient rendering for large datasets
+- **Fully Customizable**: Complete control over appearance and behavior
+- **TypeScript Support**: Full type safety and IntelliSense
+- **Accessibility**: WCAG compliant design
+- **Mobile Responsive**: Works seamlessly on all devices
+
+### Technical Specifications
+- Angular 16+ compatibility
+- TypeScript support
+- Tree-shakable build
+- Minimal bundle size impact
+- No external dependencies (except Angular core)
+
+## [0.0.1] - 2024-01-01
+
+### Added
+- Initial release of MS Data Grid
+- Basic table functionality
+- Column configuration
+- Data binding support
+
+---
+
+## Upcoming Features
+
+- Export functionality (CSV, Excel, PDF)
+- Advanced filtering with date ranges
+- Column resizing
+- Row grouping
+- Virtual scrolling for massive datasets
+- Dark theme support
+- Internationalization (i18n)

package/DOCUMENTATION.md

@@ -0,0 +1,243 @@
+# MS Data Grid - Complete API Documentation
+
+## Table of Contents
+- [Installation](#installation)
+- [Getting Started](#getting-started)
+- [Configuration](#configuration)
+- [API Reference](#api-reference)
+- [Examples](#examples)
+- [Best Practices](#best-practices)
+- [Troubleshooting](#troubleshooting)
+
+## Installation
+
+Install MS Data Grid via npm:
+
+```bash
+npm install ms-data-grid
+```
+
+Import the module in your Angular application:
+
+```typescript
+import { MsDataGridModule } from 'ms-data-grid';
+
+@NgModule({
+  imports: [MsDataGridModule],
+  // ...
+})
+export class AppModule { }
+```
+
+## Getting Started
+
+### Basic Implementation
+
+```typescript
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-data-example',
+  template: `
+    <ms-data-grid
+      [columns]="gridColumns"
+      [dataSet]="gridData"
+      [showFilterRow]="true"
+      [paginationConfig]="pagination"
+      (genericEvent)="handleGridEvent($event)">
+    </ms-data-grid>
+  `
+})
+export class DataExampleComponent {
+  gridColumns = [
+    { 
+      field: 'id', 
+      header: 'ID', 
+      width: '80px',
+      sortable: true,
+      filterable: false
+    },
+    { 
+      field: 'name', 
+      header: 'Full Name', 
+      sortable: true,
+      filterable: true,
+      width: '200px'
+    },
+    { 
+      field: 'email', 
+      header: 'Email Address', 
+      sortable: true,
+      filterable: true
+    },
+    { 
+      field: 'department', 
+      header: 'Department', 
+      sortable: true,
+      filterable: true
+    }
+  ];
+
+  gridData = [
+    { id: 1, name: 'John Doe', email: 'john@company.com', department: 'Engineering' },
+    { id: 2, name: 'Jane Smith', email: 'jane@company.com', department: 'Marketing' },
+    // ... more data
+  ];
+
+  pagination = {
+    pageSize: 25,
+    showPagination: true,
+    showPageSizeSelector: true,
+    pageSizeOptions: [10, 25, 50, 100]
+  };
+
+  handleGridEvent(event: any) {
+    console.log('Grid event:', event);
+  }
+}
+```
+
+## Configuration
+
+### Column Configuration
+
+Each column supports the following properties:
+
+```typescript
+interface ColumnConfig {
+  field: string;           // Data field name
+  header: string;          // Display header text
+  width?: string;          // Column width (e.g., '100px', '20%')
+  sortable?: boolean;      // Enable sorting
+  filterable?: boolean;    // Enable filtering
+  pinned?: 'left' | 'right'; // Pin column position
+  type?: 'text' | 'number' | 'date' | 'boolean'; // Data type
+  format?: string;         // Display format
+  editable?: boolean;      // Enable inline editing
+}
+```
+
+### Styling Configuration
+
+Customize the grid appearance:
+
+```typescript
+// Component template
+<ms-data-grid
+  [columns]="columns"
+  [dataSet]="data"
+  evenRowsBackgroundColor="#f8f9fa"
+  oddRowsBackgroundColor="#ffffff"
+  headerBackgroundColor="#e9ecef"
+  headerTextColor="#495057"
+  bodyTextColor="#212529"
+  fontFamily="'Inter', sans-serif"
+  headerTextFontsSize="14px"
+  bodyTextFontsSize="13px"
+  [showVerticalBorder]="true"
+  [rowShadingEnabled]="true">
+</ms-data-grid>
+```
+
+## API Reference
+
+### Input Properties
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `columns` | `ColumnConfig[]` | `[]` | Column definitions |
+| `dataSet` | `any[]` | `[]` | Data to display |
+| `loading` | `boolean` | `false` | Show loading indicator |
+| `showFilterRow` | `boolean` | `false` | Display filter row |
+| `showTaskbar` | `boolean` | `false` | Display taskbar |
+| `paginationConfig` | `PaginationConfig` | `null` | Pagination settings |
+
+### Output Events
+
+| Event | Payload | Description |
+|-------|---------|-------------|
+| `genericEvent` | `GridEvent` | General grid events |
+| `filterOptions` | `FilterEvent` | Filter changes |
+| `sortingOrderOptions` | `SortEvent` | Sort changes |
+
+## Examples
+
+### Advanced Filtering Example
+
+```typescript
+// Enable advanced filtering
+filtersConfig = {
+  enableGlobalSearch: true,
+  enableColumnFilters: true,
+  filterTypes: {
+    text: ['contains', 'equals', 'startsWith', 'endsWith'],
+    number: ['equals', 'greaterThan', 'lessThan', 'between'],
+    date: ['equals', 'before', 'after', 'between']
+  }
+};
+```
+
+### Custom Taskbar Actions
+
+```typescript
+taskbarActions = [
+  {
+    id: 'export',
+    label: 'Export Data',
+    icon: 'download',
+    action: () => this.exportData()
+  },
+  {
+    id: 'refresh',
+    label: 'Refresh',
+    icon: 'refresh',
+    action: () => this.refreshData()
+  }
+];
+```
+
+## Best Practices
+
+### Performance Optimization
+
+1. **Use trackBy functions** for large datasets
+2. **Implement virtual scrolling** for 1000+ rows
+3. **Lazy load data** with server-side pagination
+4. **Debounce filter inputs** to reduce API calls
+
+### Accessibility
+
+1. **Provide meaningful column headers**
+2. **Use proper ARIA labels**
+3. **Ensure keyboard navigation works**
+4. **Maintain sufficient color contrast**
+
+## Troubleshooting
+
+### Common Issues
+
+**Q: Grid not displaying data**
+A: Ensure `columns` and `dataSet` are properly bound and contain valid data.
+
+**Q: Styling not applied**
+A: Check that CSS custom properties are correctly set and not overridden.
+
+**Q: Performance issues with large datasets**
+A: Implement server-side pagination and consider virtual scrolling.
+
+### Browser Support
+
+- Chrome 90+
+- Firefox 88+
+- Safari 14+
+- Edge 90+
+
+### Angular Version Compatibility
+
+- Angular 16.x ✅
+- Angular 15.x ✅ (with compatibility mode)
+- Angular 17.x ✅
+
+---
+
+For more examples and advanced usage, visit our [GitHub repository](https://github.com/yourusername/ms-data-grid).

package/ng-package.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/data-grid",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  },
+    "assets": [
+    "src/assets"
+  ]
+}

package/package.json

@@ -1,45 +1,33 @@
-{
-  "name": "ms-data-grid",
-  "version": "0.0.16",
-  "description": "A powerful, customizable Angular data grid component with advanced features like sorting, filtering, pagination, column pinning, and taskbar actions. Perfect for enterprise applications.",
-  "keywords": [
-    "angular",
-    "data-grid",
-    "table",
-    "datagrid",
-    "angular-component",
-    "data-table",
-    "grid",
-    "sorting",
-    "filtering",
-    "pagination",
-    "angular-grid",
-    "enterprise-grid",
-    "customizable-grid",
-    "responsive-table",
-    "column-pinning"
-  ],
-  "author": "Bilal",
-  "license": "MIT",
-  "peerDependencies": {
-    "@angular/common": "^16.2.0",
-    "@angular/core": "^16.2.0"
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  },
-  "sideEffects": false,
-  "module": "fesm2022/ms-data-grid.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/ms-data-grid.mjs",
-      "esm": "./esm2022/ms-data-grid.mjs",
-      "default": "./fesm2022/ms-data-grid.mjs"
-    }
-  }
-}
+{
+  "name": "ms-data-grid",
+  "version": "0.0.17",
+  "description": "A powerful, customizable Angular data grid component with advanced features like sorting, filtering, pagination, column pinning, and taskbar actions. Perfect for enterprise applications.",
+  "keywords": [
+    "angular",
+    "data-grid",
+    "table",
+    "datagrid",
+    "angular-component",
+    "data-table",
+    "grid",
+    "sorting",
+    "filtering",
+    "pagination",
+    "angular-grid",
+    "enterprise-grid",
+    "customizable-grid",
+    "responsive-table",
+    "column-pinning"
+  ],
+  "author": "Bilal",
+  "license": "MIT",
+  "peerDependencies": {
+    "@angular/common": "^16.2.0",
+    "@angular/core": "^16.2.0",
+    "ng-inline-svg": "^13.1.1"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false
+}