ms-data-grid/README.md

A powerful, customizable Angular data grid component with advanced features like sorting, filtering, pagination, column pinning, and taskbar actions. Perfect for enterprise applications.

# 📊 MS Data Grid - Advanced Angular Data Grid Component

A **powerful, enterprise-grade Angular data grid component** designed for modern web applications. MS Data Grid provides advanced features including sorting, filtering, pagination, column pinning, row selection, and customizable styling - all optimized for performance and user experience.

## ✨ Key Features

- 🚀 **High Performance** - Optimized for large datasets
- 🎨 **Fully Customizable** - Complete control over styling and appearance
- 📱 **Responsive Design** - Works seamlessly on all devices
- 🔍 **Advanced Filtering** - Multiple filter types and global search
- 📊 **Column Management** - Sorting, pinning, and grouping
- ⚡ **Real-time Updates** - Dynamic data binding
- 🛠️ **Taskbar Actions** - Built-in action buttons and controls
- 📄 **Pagination** - Efficient data pagination
- ✅ **Row Selection** - Single and multiple row selection
- 🎯 **TypeScript Support** - Full type safety

## 🚀 Quick Start

### Installation

```bash
npm install ms-data-grid


## Inputs (Configuration)

| Input                       | Type      | Description |
|-----------------------------|-----------|-------------|
| `columns`                   | `Array`   | Defines table columns configuration. |
| `dataSet`                   | `Array`   | Data to be displayed in the grid. |
| `evenRowsBackgroundColor`   | `string`  | Background color for even rows. |
| `oddRowsBackgroundColor`    | `string`  | Background color for odd rows. |
| `headerBackgroundColor`     | `string`  | Background color of the header row. |
| `sidemenuBackgroundColor`   | `string`  | Background color of the side menu. |
| `checkboxesBackgroundColor` | `string`  | Background color of checkboxes. |
| `fontFaimly`                | `string`  | Font family applied to the table. |
| `showColumnsGrouping`       | `boolean` | Show/hide columns grouping. |
| `leftPinnedBackgroundColor` | `string`  | Background color of left pinned columns. |
| `rightPinnedBackgroundColor`| `string`  | Background color of right pinned columns. |
| `bodyBackgroundColor`       | `string`  | Background color of table body. |
| `showVerticalBorder`        | `boolean` | Show/hide vertical borders. |
| `bodyTextColor`             | `string`  | Color of body text. |
| `headerTextColor`           | `string`  | Color of header text. |
| `headerTextFontsSize`       | `string`  | Font size of header text. |
| `bodyTextFontsSize`         | `string`  | Font size of body text. |
| `bodyFontWeight`            | `number`  | Font weight of body text. |
| `checkedRowBackgroundColor` | `string`  | Background color of selected rows. |
| `dropdownsBackgroundColor`  | `string`  | Background color of dropdown menus. |
| `showFilterRow`             | `boolean` | Show/hide filter row. |
| `paginationConfig`          | `object`  | Pagination configuration. |
| `rowShadingEnabled`         | `boolean` | Enable/disable row shading. |
| `singleSpaAssetsPath`       | `string`  | Path for single-spa assets. |
| `tableView`                 | `Array`   | Table view configurations. |
| `filtersConfig`             | `object`  | Filters configuration. |
| `loading`                   | `boolean` | Show loading indicator. |
| `tableSearch`               | `string`  | Global search text. |
| `showCellDetailsBox`        | `boolean` | Show/hide cell details popup. |
| `tableFilterViewId`         | `string`  | Selected filter view ID. |
| `selectedTableLayout`       | `string`  | Selected table layout. |
| `globalSearchText`          | `string`  | Text for global search. |
| `horizintalScrollbarWidth`  | `string`  | Width of horizontal scrollbar. |
| `verticalScrollbarWidth`    | `string`  | Width of vertical scrollbar. |
| `showTaskbar`               | `boolean` | Show/hide taskbar. |
| `taskbarActions`            | `Array`   | Actions available in the taskbar. |
| `sortingConfig`             | `object`  | Sorting configuration. |
| `checkboxState`             | `boolean` | Checkbox state reset flag. |
| `closeDropdown`             | `boolean` | Close dropdown flag. |

## Outputs (Events)

| Event                       | Payload | Description |
|-----------------------------|---------|-------------|
| `genericEvent`              | `any`   | Emits generic table events. |
| `filterOptions`             | `any`   | Emits filter options when applied. |
| `createUpdateConfigListing` | `any`   | Emits updated table configuration. |
| `sortingOrderOptions`       | `any`   | Emits sorting order selection. |

```

### Basic Usage

```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <ms-data-grid
      [columns]="columns"
      [dataSet]="data"
      [showFilterRow]="true"
      [paginationConfig]="paginationConfig">
    </ms-data-grid>
  `
})
export class ExampleComponent {
  columns = [
    { field: 'name', header: 'Name', sortable: true },
    { field: 'email', header: 'Email', filterable: true },
    { field: 'role', header: 'Role' }
  ];

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

  paginationConfig = {
    pageSize: 10,
    showPagination: true
  };
}
```

## 🎯 Use Cases

MS Data Grid is perfect for:

- **Enterprise Applications** - Handle large datasets efficiently
- **Admin Dashboards** - Display and manage complex data
- **Reporting Systems** - Create interactive data reports  
- **E-commerce Platforms** - Product listings and HR management
- **CRM Systems** - Customer data management
- **Financial Applications** - Transaction and account data display

## 🌟 Why Choose MS Data Grid?

- **Battle-tested** in production environments
- **Lightweight** - Minimal bundle size impact
- **Accessible** - WCAG compliant
- **Well-documented** - Comprehensive guides and examples
- **Active support** - Regular updates and bug fixes
- **Framework optimized** - Built specifically for Angular

## 📚 Documentation

For detailed documentation, examples, and API reference, visit our [documentation site](https://github.com/yourusername/ms-data-grid/wiki).

## 🤝 Contributing

We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.

## 📄 License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

## 🏷️ Tags

`angular-data-grid` `angular-table` `data-visualization` `enterprise-grid` `typescript-grid` `responsive-table` `sortable-table` `filterable-grid` `pagination-table` `customizable-grid`

---

**Made with ❤️ for the Angular community**