ms-data-grid 0.0.1 → 0.0.3
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,24 +1,158 @@
|
|
|
1
|
-
#
|
|
1
|
+
# 📊 MS Data Grid - Advanced Angular Data Grid Component
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
[](https://www.npmjs.com/package/ms-data-grid)
|
|
4
|
+
[](https://www.npmjs.com/package/ms-data-grid)
|
|
5
|
+
[](https://opensource.org/licenses/MIT)
|
|
4
6
|
|
|
5
|
-
|
|
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.
|
|
6
8
|
|
|
7
|
-
|
|
8
|
-
> Note: Don't forget to add `--project data-grid` or else it will be added to the default project in your `angular.json` file.
|
|
9
|
+
## ✨ Key Features
|
|
9
10
|
|
|
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
|
|
11
21
|
|
|
12
|
-
|
|
22
|
+
## 🚀 Quick Start
|
|
13
23
|
|
|
14
|
-
|
|
24
|
+
### Installation
|
|
15
25
|
|
|
16
|
-
|
|
26
|
+
```bash
|
|
27
|
+
npm install ms-data-grid
|
|
17
28
|
|
|
18
|
-
## Running unit tests
|
|
19
29
|
|
|
20
|
-
|
|
30
|
+
## Inputs (Configuration)
|
|
21
31
|
|
|
22
|
-
|
|
32
|
+
| Input | Type | Description |
|
|
33
|
+
|-----------------------------|-----------|-------------|
|
|
34
|
+
| `columns` | `Array` | Defines table columns configuration. |
|
|
35
|
+
| `dataSet` | `Array` | Data to be displayed in the grid. |
|
|
36
|
+
| `evenRowsBackgroundColor` | `string` | Background color for even rows. |
|
|
37
|
+
| `oddRowsBackgroundColor` | `string` | Background color for odd rows. |
|
|
38
|
+
| `headerBackgroundColor` | `string` | Background color of the header row. |
|
|
39
|
+
| `sidemenuBackgroundColor` | `string` | Background color of the side menu. |
|
|
40
|
+
| `checkboxesBackgroundColor` | `string` | Background color of checkboxes. |
|
|
41
|
+
| `fontFaimly` | `string` | Font family applied to the table. |
|
|
42
|
+
| `showColumnsGrouping` | `boolean` | Show/hide columns grouping. |
|
|
43
|
+
| `leftPinnedBackgroundColor` | `string` | Background color of left pinned columns. |
|
|
44
|
+
| `rightPinnedBackgroundColor`| `string` | Background color of right pinned columns. |
|
|
45
|
+
| `bodyBackgroundColor` | `string` | Background color of table body. |
|
|
46
|
+
| `showVerticalBorder` | `boolean` | Show/hide vertical borders. |
|
|
47
|
+
| `bodyTextColor` | `string` | Color of body text. |
|
|
48
|
+
| `headerTextColor` | `string` | Color of header text. |
|
|
49
|
+
| `headerTextFontsSize` | `string` | Font size of header text. |
|
|
50
|
+
| `bodyTextFontsSize` | `string` | Font size of body text. |
|
|
51
|
+
| `bodyFontWeight` | `number` | Font weight of body text. |
|
|
52
|
+
| `checkedRowBackgroundColor` | `string` | Background color of selected rows. |
|
|
53
|
+
| `dropdownsBackgroundColor` | `string` | Background color of dropdown menus. |
|
|
54
|
+
| `showFilterRow` | `boolean` | Show/hide filter row. |
|
|
55
|
+
| `paginationConfig` | `object` | Pagination configuration. |
|
|
56
|
+
| `rowShadingEnabled` | `boolean` | Enable/disable row shading. |
|
|
57
|
+
| `singleSpaAssetsPath` | `string` | Path for single-spa assets. |
|
|
58
|
+
| `tableView` | `Array` | Table view configurations. |
|
|
59
|
+
| `filtersConfig` | `object` | Filters configuration. |
|
|
60
|
+
| `loading` | `boolean` | Show loading indicator. |
|
|
61
|
+
| `tableSearch` | `string` | Global search text. |
|
|
62
|
+
| `showCellDetailsBox` | `boolean` | Show/hide cell details popup. |
|
|
63
|
+
| `tableFilterViewId` | `string` | Selected filter view ID. |
|
|
64
|
+
| `selectedTableLayout` | `string` | Selected table layout. |
|
|
65
|
+
| `globalSearchText` | `string` | Text for global search. |
|
|
66
|
+
| `horizintalScrollbarWidth` | `string` | Width of horizontal scrollbar. |
|
|
67
|
+
| `verticalScrollbarWidth` | `string` | Width of vertical scrollbar. |
|
|
68
|
+
| `showTaskbar` | `boolean` | Show/hide taskbar. |
|
|
69
|
+
| `taskbarActions` | `Array` | Actions available in the taskbar. |
|
|
70
|
+
| `sortingConfig` | `object` | Sorting configuration. |
|
|
71
|
+
| `checkboxState` | `boolean` | Checkbox state reset flag. |
|
|
72
|
+
| `closeDropdown` | `boolean` | Close dropdown flag. |
|
|
23
73
|
|
|
24
|
-
|
|
74
|
+
## Outputs (Events)
|
|
75
|
+
|
|
76
|
+
| Event | Payload | Description |
|
|
77
|
+
|-----------------------------|---------|-------------|
|
|
78
|
+
| `genericEvent` | `any` | Emits generic table events. |
|
|
79
|
+
| `filterOptions` | `any` | Emits filter options when applied. |
|
|
80
|
+
| `createUpdateConfigListing` | `any` | Emits updated table configuration. |
|
|
81
|
+
| `sortingOrderOptions` | `any` | Emits sorting order selection. |
|
|
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**
|