ms-data-grid 0.0.2 → 0.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -1,11 +1,27 @@
|
|
|
1
|
-
# 📊
|
|
1
|
+
# 📊 MS Data Grid - Advanced Angular Data Grid Component
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
[](https://www.npmjs.com/package/ms-data-grid)
|
|
4
|
+
[](https://www.npmjs.com/package/ms-data-grid)
|
|
5
|
+
[](https://opensource.org/licenses/MIT)
|
|
5
6
|
|
|
6
|
-
|
|
7
|
+
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.
|
|
8
|
+
|
|
9
|
+
## ✨ Key Features
|
|
10
|
+
|
|
11
|
+
- 🚀 **High Performance** - Optimized for large datasets
|
|
12
|
+
- 🎨 **Fully Customizable** - Complete control over styling and appearance
|
|
13
|
+
- 📱 **Responsive Design** - Works seamlessly on all devices
|
|
14
|
+
- 🔍 **Advanced Filtering** - Multiple filter types and global search
|
|
15
|
+
- 📊 **Column Management** - Sorting, pinning, and grouping
|
|
16
|
+
- ⚡ **Real-time Updates** - Dynamic data binding
|
|
17
|
+
- 🛠️ **Taskbar Actions** - Built-in action buttons and controls
|
|
18
|
+
- 📄 **Pagination** - Efficient data pagination
|
|
19
|
+
- ✅ **Row Selection** - Single and multiple row selection
|
|
20
|
+
- 🎯 **TypeScript Support** - Full type safety
|
|
21
|
+
|
|
22
|
+
## 🚀 Quick Start
|
|
7
23
|
|
|
8
|
-
|
|
24
|
+
### Installation
|
|
9
25
|
|
|
10
26
|
```bash
|
|
11
27
|
npm install ms-data-grid
|
|
@@ -64,3 +80,79 @@ npm install ms-data-grid
|
|
|
64
80
|
| `createUpdateConfigListing` | `any` | Emits updated table configuration. |
|
|
65
81
|
| `sortingOrderOptions` | `any` | Emits sorting order selection. |
|
|
66
82
|
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
### Basic Usage
|
|
86
|
+
|
|
87
|
+
```typescript
|
|
88
|
+
import { Component } from '@angular/core';
|
|
89
|
+
|
|
90
|
+
@Component({
|
|
91
|
+
selector: 'app-example',
|
|
92
|
+
template: `
|
|
93
|
+
<ms-data-grid
|
|
94
|
+
[columns]="columns"
|
|
95
|
+
[dataSet]="data"
|
|
96
|
+
[showFilterRow]="true"
|
|
97
|
+
[paginationConfig]="paginationConfig">
|
|
98
|
+
</ms-data-grid>
|
|
99
|
+
`
|
|
100
|
+
})
|
|
101
|
+
export class ExampleComponent {
|
|
102
|
+
columns = [
|
|
103
|
+
{ field: 'name', header: 'Name', sortable: true },
|
|
104
|
+
{ field: 'email', header: 'Email', filterable: true },
|
|
105
|
+
{ field: 'role', header: 'Role' }
|
|
106
|
+
];
|
|
107
|
+
|
|
108
|
+
data = [
|
|
109
|
+
{ name: 'John Doe', email: 'john@example.com', role: 'Admin' },
|
|
110
|
+
{ name: 'Jane Smith', email: 'jane@example.com', role: 'User' }
|
|
111
|
+
];
|
|
112
|
+
|
|
113
|
+
paginationConfig = {
|
|
114
|
+
pageSize: 10,
|
|
115
|
+
showPagination: true
|
|
116
|
+
};
|
|
117
|
+
}
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
## 🎯 Use Cases
|
|
121
|
+
|
|
122
|
+
MS Data Grid is perfect for:
|
|
123
|
+
|
|
124
|
+
- **Enterprise Applications** - Handle large datasets efficiently
|
|
125
|
+
- **Admin Dashboards** - Display and manage complex data
|
|
126
|
+
- **Reporting Systems** - Create interactive data reports
|
|
127
|
+
- **E-commerce Platforms** - Product listings and HR management
|
|
128
|
+
- **CRM Systems** - Customer data management
|
|
129
|
+
- **Financial Applications** - Transaction and account data display
|
|
130
|
+
|
|
131
|
+
## 🌟 Why Choose MS Data Grid?
|
|
132
|
+
|
|
133
|
+
- **Battle-tested** in production environments
|
|
134
|
+
- **Lightweight** - Minimal bundle size impact
|
|
135
|
+
- **Accessible** - WCAG compliant
|
|
136
|
+
- **Well-documented** - Comprehensive guides and examples
|
|
137
|
+
- **Active support** - Regular updates and bug fixes
|
|
138
|
+
- **Framework optimized** - Built specifically for Angular
|
|
139
|
+
|
|
140
|
+
## 📚 Documentation
|
|
141
|
+
|
|
142
|
+
For detailed documentation, examples, and API reference, visit our [documentation site](https://github.com/yourusername/ms-data-grid/wiki).
|
|
143
|
+
|
|
144
|
+
## 🤝 Contributing
|
|
145
|
+
|
|
146
|
+
We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.
|
|
147
|
+
|
|
148
|
+
## 📄 License
|
|
149
|
+
|
|
150
|
+
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
|
|
151
|
+
|
|
152
|
+
## 🏷️ Tags
|
|
153
|
+
|
|
154
|
+
`angular-data-grid` `angular-table` `data-visualization` `enterprise-grid` `typescript-grid` `responsive-table` `sortable-table` `filterable-grid` `pagination-table` `customizable-grid`
|
|
155
|
+
|
|
156
|
+
---
|
|
157
|
+
|
|
158
|
+
**Made with ❤️ for the Angular community**
|