ms-data-grid 0.0.28 → 0.0.30

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.
Files changed (2) hide show
  1. package/README.md +323 -173
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,182 +1,332 @@
1
- # 📊 MS Data Grid - Advanced Angular Data Grid Component
2
-
3
- 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.
4
-
5
- ## ✨ Key Features
6
-
7
- - 🚀 **High Performance** - Optimized for large datasets
8
- - 🎨 **Fully Customizable** - Complete control over styling and appearance
9
- - 📱 **Responsive Design** - Works seamlessly on all devices
10
- - 🔍 **Advanced Filtering** - Multiple filter types and global search
11
- - 📊 **Column Management** - Sorting, pinning, and grouping
12
- - 🛠️ **Taskbar Actions** - Built-in action buttons and controls
13
- - 📄 **Pagination** - Efficient data pagination
14
- - ✅ **Row Selection** - Single and multiple row selection
15
- - 🎯 **TypeScript Support** - Full type safety
16
-
17
- ## 🚀 Quick Start
18
-
19
- ### Installation
20
-
1
+ # 📊 MS Data Grid
2
+
3
+ ### Advanced Angular Data Grid Package Demo Preview
4
+
5
+ <video autoplay loop muted playsinline width="100%">
6
+ <source src="https://techbar.s3.amazonaws.com/data-table/table%20demo%202.mp4">
7
+ Your browser does not support the video tag.
8
+ </video>
9
+
10
+ <p align="end">
11
+ <a href="https://stackblitz.com/edit/finitelooper-ng16-2jdszu1d?embed=1&file=src%2Fapp%2Fapp.component.t… target="_blank" style="
12
+ display: inline-block;
13
+ padding: 10px 20px;
14
+ background-color: #0078d7;
15
+ color: white;
16
+ text-decoration: none;
17
+ border-radius: 6px;
18
+ font-weight: 600;
19
+ font-family: sans-serif;
20
+ box-shadow: 0 2px 5px rgba(0,0,0,0.2);
21
+ transition: background-color 0.3s ease;
22
+ " onmouseover="this.style.backgroundColor='#005fa3'" onmouseout="this.style.backgroundColor='#0078d7'">
23
+ 🚀 View StackBlitz Demo
24
+ </a>
25
+ </p>
26
+
27
+ **MS Data Grid** is a powerful, enterprise-grade Angular data grid package built for high-performance web applications.
28
+ It offers a rich set of modern data handling features — including **sorting**, **filtering**, **pagination**, **column pinning**, **row selection**, and **customizable styling** — all optimized for **speed**, **scalability**, and **seamless user experience**.
29
+
30
+ Designed with **modularity** and **customization** in mind, MS Data Grid empowers developers to build **dynamic**, **feature-rich** data tables with minimal effort and maximum flexibility.
31
+
32
+ ## ⚙️ Installation
33
+
34
+ Install the MS Data Grid package:
35
+
21
36
  ```bash
22
37
  npm install ms-data-grid
23
-
24
-
25
- ## 📋 Configuration Properties
26
-
27
- ### Core Data Properties
28
- | Property | Type | Description |
29
- |----------|------|-------------|
30
- | `columns` | `Array` | Table columns configuration |
31
- | `dataSet` | `Array` | Data to display in the grid |
32
- | `loading` | `boolean` | Show loading indicator |
33
-
34
- ### Styling & Appearance
35
- | Property | Type | Description |
36
- |----------|------|-------------|
37
- | `evenRowsBackgroundColor` | `string` | Even rows background color |
38
- | `oddRowsBackgroundColor` | `string` | Odd rows background color |
39
- | `headerBackgroundColor` | `string` | Header row background color |
40
- | `bodyBackgroundColor` | `string` | Table body background color |
41
- | `leftPinnedBackgroundColor` | `string` | Left pinned columns background |
42
- | `rightPinnedBackgroundColor` | `string` | Right pinned columns background |
43
- | `checkedRowBackgroundColor` | `string` | Selected rows background color |
44
- | `sidemenuBackgroundColor` | `string` | Side menu background color |
45
- | `checkboxesBackgroundColor` | `string` | Checkboxes background color |
46
- | `dropdownsBackgroundColor` | `string` | Dropdown menus background color |
47
-
48
- ### Text & Typography
49
- | Property | Type | Description |
50
- |----------|------|-------------|
51
- | `fontFamily` | `string` | Font family for the table |
52
- | `bodyTextColor` | `string` | Body text color |
53
- | `headerTextColor` | `string` | Header text color |
54
- | `headerTextFontsSize` | `string` | Header text font size |
55
- | `bodyTextFontsSize` | `string` | Body text font size |
56
- | `bodyFontWeight` | `number` | Body text font weight |
57
-
58
- ### Features & Functionality
59
- | Property | Type | Description |
60
- |----------|------|-------------|
61
- | `showColumnsGrouping` | `boolean` | Enable/disable column grouping |
62
- | `showVerticalBorder` | `boolean` | Show/hide vertical borders |
63
- | `showFilterRow` | `boolean` | Show/hide filter row |
64
- | `showCellDetailsBox` | `boolean` | Show/hide cell details popup |
65
- | `showTaskbar` | `boolean` | Show/hide taskbar |
66
- | `rowShadingEnabled` | `boolean` | Enable/disable row shading |
67
-
68
- ### Search & Filtering
69
- | Property | Type | Description |
70
- |----------|------|-------------|
71
- | `tableSearch` | `string` | Global search text |
72
- | `globalSearchText` | `string` | Text for global search |
73
- | `filtersConfig` | `object` | Filters configuration |
74
- | `tableFilterViewId` | `string` | Selected filter view ID |
75
-
76
- ### Configuration Objects
77
- | Property | Type | Description |
78
- |----------|------|-------------|
79
- | `paginationConfig` | `object` | Pagination settings |
80
- | `sortingConfig` | `object` | Sorting configuration |
81
- | `tableView` | `Array` | Table view configurations |
82
- | `taskbarActions` | `Array` | Available taskbar actions |
83
-
84
- ### Layout & Scrolling
85
- | Property | Type | Description |
86
- |----------|------|-------------|
87
- | `selectedTableLayout` | `string` | Selected table layout |
88
- | `horizintalScrollbarWidth` | `string` | Horizontal scrollbar width |
89
- | `verticalScrollbarWidth` | `string` | Vertical scrollbar width |
90
-
91
- ### State Management
92
- | Property | Type | Description |
93
- |----------|------|-------------|
94
- | `checkboxState` | `boolean` | Checkbox state reset flag |
95
- | `closeDropdown` | `boolean` | Close dropdown flag |
96
- | `singleSpaAssetsPath` | `string` | Single-spa assets path |
97
-
98
- ## 📤 Event Outputs
99
-
100
- | Event | Payload Type | Description |
101
- |-------|--------------|-------------|
102
- | `genericEvent` | `any` | Generic table events (row clicks, selections, etc.) |
103
- | `filterOptions` | `any` | Filter options when filters are applied |
104
- | `createUpdateConfigListing` | `any` | Updated table configuration changes |
105
- | `sortingOrderOptions` | `any` | Sorting order selection events |
106
-
107
38
  ```
108
-
109
- ### Basic Usage
110
-
111
- ```typescript
112
- import { Component } from '@angular/core';
113
-
39
+
40
+ Install angular cdk for drag drop of columns:
41
+
42
+ ```bash
43
+ npm install @angular/cdk@16
44
+ ```
45
+
46
+ Install ng-inline-svg for icons:
47
+
48
+ ```bash
49
+ npm install ng-inline-svg@13.1.1
50
+ ```
51
+
52
+ Install bootstrap for styling:
53
+
54
+ ```bash
55
+ npm install bootstrap
56
+ ```
57
+
58
+ ## ⚡️ Quick Start
59
+
60
+ Get up and running with **MS Data Grid** in just a few simple steps.
61
+ After installing the package and its dependencies, import the required module and start using the grid component in your Angular templates.
62
+ Below is a basic example showing how to configure and display a simple data grid.
63
+
64
+ ### **Step 1: Register Required Modules**
65
+
66
+ After installation, register the `DataGridModule` in your `app.module.ts` and import the `HttpClientModule`:
67
+
68
+ ```ts
69
+ // app.module.ts
70
+
71
+ import { NgModule } from "@angular/core";
72
+ import { BrowserModule } from "@angular/platform-browser";
73
+ import { DataGridModule } from "ms-data-grid";
74
+ import { AppComponent } from "./app.component";
75
+ import { HttpClientModule } from "@angular/common/http";
76
+
77
+ @NgModule({
78
+ declarations: [AppComponent],
79
+ imports: [
80
+ BrowserModule,
81
+ DataGridModule, // Register the main module here
82
+ HttpClientModule, // Add this as well
83
+ ],
84
+ providers: [],
85
+ bootstrap: [AppComponent],
86
+ })
87
+ export class AppModule {}
88
+ ```
89
+
90
+ ### **Step 2: Define Rows and Columns**
91
+
92
+ ```ts
114
93
  @Component({
115
- selector: 'app-example',
116
- template: `
117
- <ms-data-grid
118
- [columns]="columns"
119
- [dataSet]="data"
120
- [showFilterRow]="true"
121
- [paginationConfig]="paginationConfig">
122
- </ms-data-grid>
123
- `
94
+ selector: "app-root",
95
+ templateUrl: "./app.component.html",
96
+ styleUrls: [],
124
97
  })
125
- export class ExampleComponent {
126
- columns = [
127
- { field: 'name', header: 'Name', sortable: true },
128
- { field: 'email', header: 'Email', filterable: true },
129
- { field: 'role', header: 'Role' }
98
+ export class AppComponent implements OnInit {
99
+ columns: any[] = [
100
+ {
101
+ id: 1,
102
+ field: "logo",
103
+ header: "Image",
104
+ type: "image",
105
+ is_visible: true,
106
+ },
107
+ {
108
+ id: 2,
109
+ field: "full_name",
110
+ header: "Employee Name",
111
+ type: "string",
112
+ is_visible: true,
113
+ },
114
+ {
115
+ id: 3,
116
+ field: "email",
117
+ header: "Email",
118
+ type: "email",
119
+ is_visible: true,
120
+ },
121
+ {
122
+ id: 4,
123
+ field: "phone",
124
+ header: "Mobile Number",
125
+ type: "string",
126
+ is_visible: true,
127
+ },
130
128
  ];
131
-
132
- data = [
133
- { name: 'John Doe', email: 'john@example.com', role: 'Admin' },
134
- { name: 'Jane Smith', email: 'jane@example.com', role: 'User' }
129
+
130
+ dataSet: any[] = [
131
+ {
132
+ logo: null,
133
+ full_name: "Muhammad Moeen Khan",
134
+ email: "moeenkhan@4iisolutions.com",
135
+ phone: "+923170524160",
136
+ },
137
+ {
138
+ logo: null,
139
+ full_name: "Uzair Saeed",
140
+ email: "Uzairsaeed@4iisolutions.com",
141
+ phone: "+923449043675",
142
+ },
143
+ {
144
+ logo: null,
145
+ full_name: "Waqar Nawaz",
146
+ email: "waqar@4iisolutions.com",
147
+ phone: "+923118871780",
148
+ },
135
149
  ];
136
-
137
- paginationConfig = {
138
- pageSize: 10,
139
- showPagination: true
140
- };
141
150
  }
142
151
  ```
143
-
144
- ## 🎯 Use Cases
145
-
146
- MS Data Grid is perfect for:
147
-
148
- - **Enterprise Applications** - Handle large datasets efficiently
149
- - **Admin Dashboards** - Display and manage complex data
150
- - **Reporting Systems** - Create interactive data reports
151
- - **E-commerce Platforms** - Product listings and HR management
152
- - **CRM Systems** - Customer data management
153
- - **Financial Applications** - Transaction and account data display
154
-
155
- ## 🌟 Why Choose MS Data Grid?
156
-
157
- - **Battle-tested** in production environments
158
- - **Lightweight** - Minimal bundle size impact
159
- - **Accessible** - WCAG compliant
160
- - **Well-documented** - Comprehensive guides and examples
161
- - **Active support** - Regular updates and bug fixes
162
- - **Framework optimized** - Built specifically for Angular
163
-
164
- ## 📚 Documentation
165
-
166
- For detailed documentation, examples, and API reference, visit our [documentation site](https://github.com/yourusername/ms-data-grid/wiki).
167
-
168
- ## 🤝 Contributing
169
-
170
- We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.
171
-
172
- ## 📄 License
173
-
174
- This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
175
-
176
- ## 🏷️ Tags
177
-
178
- `angular-data-grid` `angular-table` `data-visualization` `enterprise-grid` `typescript-grid` `responsive-table` `sortable-table` `filterable-grid` `pagination-table` `customizable-grid`
179
-
180
- ---
181
-
182
- **Made with ❤️ for the Angular community**
152
+
153
+ ### Step 3: Create the Angular Data Grid Component
154
+
155
+ ```html
156
+ template: `
157
+
158
+ <div style="height: 400px" class="p-4 w-100">
159
+ <data-grid [columns]="columns" [dataSet]="dataSet" [leftPinnedBoxshadow]="''" [rightPinnedBoxshadow]="''" [loading]="loading"></data-grid>
160
+ </div>
161
+ `
162
+ ```
163
+
164
+ ### Result
165
+
166
+ ![alt text](https://techbar.s3.amazonaws.com/data-table/image.jpeg)
167
+
168
+ <br />
169
+ <br />
170
+
171
+ ### ⚙️ Inputs
172
+
173
+ <br/>
174
+
175
+ <table style="border-collapse: collapse; width: 100%; background-color: #fff; font-size: 16px; color: #000;"> <thead> <tr style="background-color: #f3f3f3; border: 1px solid #ddd;"> <th style="padding: 10px; border: 1px solid #ddd; text-align: left;">Input</th> <th style="padding: 10px; border: 1px solid #ddd; text-align: left;">Type</th> <th style="padding: 10px; border: 1px solid #ddd; text-align: left;">Description</th> </tr> </thead> <tbody> <tr style="background-color: #fff;"><td style="padding:10px;border:1px solid #ddd;">dataSet</td><td style="padding:10px;border:1px solid #ddd;">any[]</td><td style="padding:10px;border:1px solid #ddd;">Data source for the grid rows.</td></tr> <tr style="background-color:#f9f9f9;"><td style="padding:10px;border:1px solid #ddd;">columns</td><td style="padding:10px;border:1px solid #ddd;">any[]</td><td style="padding:10px;border:1px solid #ddd;">Configuration for columns (field, type, header, etc.).</td></tr> <tr style="background-color:#fff;"><td style="padding:10px;border:1px solid #ddd;">rowHeight</td><td style="padding:10px;border:1px solid #ddd;">number</td><td style="padding:10px;border:1px solid #ddd;">Height of each row (default: 44px).</td></tr> <tr style="background-color:#f9f9f9;"><td style="padding:10px;border:1px solid #ddd;">headerRowHeight</td><td style="padding:10px;border:1px solid #ddd;">number</td><td style="padding:10px;border:1px solid #ddd;">Height of the header row (default: 44px).</td></tr> <tr style="background-color:#fff;"><td style="padding:10px;border:1px solid #ddd;">showVerticalBorder</td><td style="padding:10px;border:1px solid #ddd;">boolean</td><td style="padding:10px;border:1px solid #ddd;">Toggle vertical borders between cells.</td></tr> <tr style="background-color:#f9f9f9;"><td style="padding:10px;border:1px solid #ddd;">evenRowsBackgroundColor</td><td style="padding:10px;border:1px solid #ddd;">string</td><td style="padding:10px;border:1px solid #ddd;">Background color for even rows.</td></tr> <tr style="background-color:#fff;"><td style="padding:10px;border:1px solid #ddd;">oddRowsBackgroundColor</td><td style="padding:10px;border:1px solid #ddd;">string</td><td style="padding:10px;border:1px solid #ddd;">Background color for odd rows.</td></tr> <tr style="background-color:#f9f9f9;"><td style="padding:10px;border:1px solid #ddd;">headerBackgroundColor</td><td style="padding:10px;border:1px solid #ddd;">string</td><td style="padding:10px;border:1px solid #ddd;">Header background color.</td></tr> <tr style="background-color:#fff;"><td style="padding:10px;border:1px solid #ddd;">checkboxesBackgroundColor</td><td style="padding:10px;border:1px solid #ddd;">string</td><td style="padding:10px;border:1px solid #ddd;">Background color for checkbox column.</td></tr> <tr style="background-color:#f9f9f9;"><td style="padding:10px;border:1px solid #ddd;">showColumnsGrouping</td><td style="padding:10px;border:1px solid #ddd;">boolean</td><td style="padding:10px;border:1px solid #ddd;">Enable/disable column grouping UI.</td></tr> <tr style="background-color:#fff;"><td style="padding:10px;border:1px solid #ddd;">rowHoverColor</td><td style="padding:10px;border:1px solid #ddd;">string</td><td style="padding:10px;border:1px solid #ddd;">Row background color when hovered.</td></tr> <tr style="background-color:#f9f9f9;"><td style="padding:10px;border:1px solid #ddd;">leftPinnedBackgroundColor</td><td style="padding:10px;border:1px solid #ddd;">string</td><td style="padding:10px;border:1px solid #ddd;">Background color for left pinned columns.</td></tr> <tr style="background-color:#fff;"><td style="padding:10px;border:1px solid #ddd;">bodyBackgroundColor</td><td style="padding:10px;border:1px solid #ddd;">string</td><td style="padding:10px;border:1px solid #ddd;">Background color for the table body.</td></tr> <tr style="background-color:#f9f9f9;"><td style="padding:10px;border:1px solid #ddd;">rightPinnedBackgroundColor</td><td style="padding:10px;border:1px solid #ddd;">string</td><td style="padding:10px;border:1px solid #ddd;">Background color for right pinned columns.</td></tr> <tr style="background-color:#fff;"><td style="padding:10px;border:1px solid #ddd;">sidemenuBackgroundColor</td><td style="padding:10px;border:1px solid #ddd;">string</td><td style="padding:10px;border:1px solid #ddd;">Background color for side menu area.</td></tr> <tr style="background-color:#f9f9f9;"><td style="padding:10px;border:1px solid #ddd;">bodyTextColor</td><td style="padding:10px;border:1px solid #ddd;">string</td><td style="padding:10px;border:1px solid #ddd;">Font color for table rows.</td></tr> <tr style="background-color:#fff;"><td style="padding:10px;border:1px solid #ddd;">headerTextColor</td><td style="padding:10px;border:1px solid #ddd;">string</td><td style="padding:10px;border:1px solid #ddd;">Font color for table headers.</td></tr> <tr style="background-color:#f9f9f9;"><td style="padding:10px;border:1px solid #ddd;">headerTextFontsSize</td><td style="padding:10px;border:1px solid #ddd;">number</td><td style="padding:10px;border:1px solid #ddd;">Header text font size.</td></tr> <tr style="background-color:#fff;"><td style="padding:10px;border:1px solid #ddd;">bodyTextFontsSize</td><td style="padding:10px;border:1px solid #ddd;">number</td><td style="padding:10px;border:1px solid #ddd;">Body text font size.</td></tr> <tr style="background-color:#f9f9f9;"><td style="padding:10px;border:1px solid #ddd;">headerFontWeight</td><td style="padding:10px;border:1px solid #ddd;">number</td><td style="padding:10px;border:1px solid #ddd;">Font weight of header text.</td></tr> <tr style="background-color:#fff;"><td style="padding:10px;border:1px solid #ddd;">bodyFontWeight</td><td style="padding:10px;border:1px solid #ddd;">number</td><td style="padding:10px;border:1px solid #ddd;">Font weight of body text.</td></tr> <tr style="background-color:#f9f9f9;"><td style="padding:10px;border:1px solid #ddd;">checkedRowBackgroundColor</td><td style="padding:10px;border:1px solid #ddd;">string</td><td style="padding:10px;border:1px solid #ddd;">Background color for checked rows.</td></tr> <tr style="background-color:#fff;"><td style="padding:10px;border:1px solid #ddd;">dropdownsBackgroundColor</td><td style="padding:10px;border:1px solid #ddd;">string</td><td style="padding:10px;border:1px solid #ddd;">Background color for dropdowns.</td></tr> <tr style="background-color:#f9f9f9;"><td style="padding:10px;border:1px solid #ddd;">footerRowHeight</td><td style="padding:10px;border:1px solid #ddd;">number</td><td style="padding:10px;border:1px solid #ddd;">Height of footer row (default: 46px).</td></tr> <tr style="background-color:#fff;"><td style="padding:10px;border:1px solid #ddd;">topGroupedBadgesBackgroundColor</td><td style="padding:10px;border:1px solid #ddd;">string</td><td style="padding:10px;border:1px solid #ddd;">Background color for top grouped badges.</td></tr> <tr style="background-color:#f9f9f9;"><td style="padding:10px;border:1px solid #ddd;">showRowsGrouping</td><td style="padding:10px;border:1px solid #ddd;">boolean</td><td style="padding:10px;border:1px solid #ddd;">Enable/disable row grouping.</td></tr> <tr style="background-color:#fff;"><td style="padding:10px;border:1px solid #ddd;">showFilterRow</td><td style="padding:10px;border:1px solid #ddd;">boolean</td><td style="padding:10px;border:1px solid #ddd;">Show/hide filter row.</td></tr> <tr style="background-color:#f9f9f9;"><td style="padding:10px;border:1px solid #ddd;">fontFaimly</td><td style="padding:10px;border:1px solid #ddd;">string</td><td style="padding:10px;border:1px solid #ddd;">Font family for table text.</td></tr> <tr style="background-color:#fff;"><td style="padding:10px;border:1px solid #ddd;">showSideMenu</td><td style="padding:10px;border:1px solid #ddd;">boolean</td><td style="padding:10px;border:1px solid #ddd;">Show/hide side menu.</td></tr> <tr style="background-color:#f9f9f9;"><td style="padding:10px;border:1px solid #ddd;">footerPadding</td><td style="padding:10px;border:1px solid #ddd;">number</td><td style="padding:10px;border:1px solid #ddd;">Padding for footer area.</td></tr> <tr style="background-color:#fff;"><td style="padding:10px;border:1px solid #ddd;">topFilterRowHeight</td><td style="padding:10px;border:1px solid #ddd;">number</td><td style="padding:10px;border:1px solid #ddd;">Height of top filter row (default: 50px).</td></tr> <tr style="background-color:#f9f9f9;"><td style="padding:10px;border:1px solid #ddd;">rowShadingEnabled</td><td style="padding:10px;border:1px solid #ddd;">boolean</td><td style="padding:10px;border:1px solid #ddd;">Enable/disable row shading.</td></tr> <tr style="background-color:#fff;"><td style="padding:10px;border:1px solid #ddd;">showSerialNumber</td><td style="padding:10px;border:1px solid #ddd;">boolean</td><td style="padding:10px;border:1px solid #ddd;">Show serial numbers column.</td></tr> <tr style="background-color:#f9f9f9;"><td style="padding:10px;border:1px solid #ddd;">singleSpaAssetsPath</td><td style="padding:10px;border:1px solid #ddd;">string</td><td style="padding:10px;border:1px solid #ddd;">Single Spa URL path for icons.</td></tr> <tr style="background-color:#fff;"><td style="padding:10px;border:1px solid #ddd;">filtersConfig</td><td style="padding:10px;border:1px solid #ddd;">any[]</td><td style="padding:10px;border:1px solid #ddd;">Configuration for applied filters.</td></tr> <tr style="background-color:#f9f9f9;"><td style="padding:10px;border:1px solid #ddd;">loading</td><td style="padding:10px;border:1px solid #ddd;">boolean</td><td style="padding:10px;border:1px solid #ddd;">Show loading state.</td></tr> <tr style="background-color:#fff;"><td style="padding:10px;border:1px solid #ddd;">verticalScrollbarWidth</td><td style="padding:10px;border:1px solid #ddd;">'auto' | 'thin'</td><td style="padding:10px;border:1px solid #ddd;">Vertical scrollbar style.</td></tr> <tr style="background-color:#f9f9f9;"><td style="padding:10px;border:1px solid #ddd;">horizintalScrollbarWidth</td><td style="padding:10px;border:1px solid #ddd;">'auto' | 'thin'</td><td style="padding:10px;border:1px solid #ddd;">Horizontal scrollbar style.</td></tr> <tr style="background-color:#fff;"><td style="padding:10px;border:1px solid #ddd;">showCellDetailsBox</td><td style="padding:10px;border:1px solid #ddd;">boolean</td><td style="padding:10px;border:1px solid #ddd;">Show cell details box.</td></tr> <tr style="background-color:#f9f9f9;"><td style="padding:10px;border:1px solid #ddd;">dateFormat</td><td style="padding:10px;border:1px solid #ddd;">string</td><td style="padding:10px;border:1px solid #ddd;">Date format for date columns.</td></tr> <tr style="background-color:#fff;"><td style="padding:10px;border:1px solid #ddd;">tableSearch</td><td style="padding:10px;border:1px solid #ddd;">string</td><td style="padding:10px;border:1px solid #ddd;">Table search text.</td></tr> <tr style="background-color:#f9f9f9;"><td style="padding:10px;border:1px solid #ddd;">actions</td><td style="padding:10px;border:1px solid #ddd;">any[]</td><td style="padding:10px;border:1px solid #ddd;">Available row actions.</td></tr> <tr style="background-color:#fff;"><td style="padding:10px;border:1px solid #ddd;">config</td><td style="padding:10px;border:1px solid #ddd;">any</td><td style="padding:10px;border:1px solid #ddd;">Table configuration for pagination.</td></tr> <tr style="background-color:#f9f9f9;"><td style="padding:10px;border:1px solid #ddd;">showTaskbar</td><td style="padding:10px;border:1px solid #ddd;">boolean</td><td style="padding:10px;border:1px solid #ddd;">Show selection taskbar.</td></tr> <tr style="background-color:#fff;"><td style="padding:10px;border:1px solid #ddd;">tableName</td><td style="padding:10px;border:1px solid #ddd;">boolean</td><td style="padding:10px;border:1px solid #ddd;">Table name for state management.</td></tr> <tr style="background-color:#f9f9f9;"><td style="padding:10px;border:1px solid #ddd;">listingType</td><td style="padding:10px;border:1px solid #ddd;">string | boolean</td><td style="padding:10px;border:1px solid #ddd;">Listing type configuration.</td></tr> <tr style="background-color:#fff;"><td style="padding:10px;border:1px solid #ddd;">checkboxState</td><td style="padding:10px;border:1px solid #ddd;">{ reset: boolean }</td><td style="padding:10px;border:1px solid #ddd;">Checkbox state configuration.</td></tr> <tr style="background-color:#f9f9f9;"><td style="padding:10px;border:1px solid #ddd;">taskbarActions</td><td style="padding:10px;border:1px solid #ddd;">any[]</td><td style="padding:10px;border:1px solid #ddd;">Taskbar actions configuration.</td></tr> <tr style="background-color:#fff;"><td style="padding:10px;border:1px solid #ddd;">sortingConfig</td><td style="padding:10px;border:1px solid #ddd;">{ field: string, order_by: string } | null</td><td style="padding:10px;border:1px solid #ddd;">Sorting configuration.</td></tr> <tr style="background-color:#f9f9f9;"><td style="padding:10px;border:1px solid #ddd;">tableFilterViewId</td><td style="padding:10px;border:1px solid #ddd;">string | number</td><td style="padding:10px;border:1px solid #ddd;">Table filter view ID.</td></tr> <tr style="background-color:#fff;"><td style="padding:10px;border:1px solid #ddd;">selectedTableLayout</td><td style="padding:10px;border:1px solid #ddd;">any</td><td style="padding:10px;border:1px solid #ddd;">Selected table layout.</td></tr> <tr style="background-color:#f9f9f9;"><td style="padding:10px;border:1px solid #ddd;">closeDropdown</td><td style="padding:10px;border:1px solid #ddd;">{ preset: { closed: boolean, loading: boolean } }</td><td style="padding:10px;border:1px solid #ddd;">Close dropdown configuration.</td></tr> <tr style="background-color:#fff;"><td style="padding:10px;border:1px solid #ddd;">globalSearchText</td><td style="padding:10px;border:1px solid #ddd;">string</td><td style="padding:10px;border:1px solid #ddd;">Global search text.</td></tr> <tr style="background-color:#f9f9f9;"><td style="padding:10px;border:1px solid #ddd;">nestedTablerowFontsize</td><td style="padding:10px;border:1px solid #ddd;">number</td><td style="padding:10px;border:1px solid #ddd;">Nested table row font size.</td></tr> <tr style="background-color:#fff;"><td style="padding:10px;border:1px solid #ddd;">nestedTableHeaderRowHeight</td><td style="padding:10px;border:1px solid #ddd;">number</td><td style="padding:10px;border:1px solid #ddd;">Nested table header row height.</td></tr> <tr style="background-color:#f9f9f9;"><td style="padding:10px;border:1px solid #ddd;">nestedTablerowHeight</td><td style="padding:10px;border:1px solid #ddd;">number</td><td style="padding:10px;border:1px solid #ddd;">Nested table row height.</td></tr> <tr style="background-color:#fff;"><td style="padding:10px;border:1px solid #ddd;">gridType</td><td style="padding:10px;border:1px solid #ddd;">string</td><td style="padding:10px;border:1px solid #ddd;">Grid type configuration.</td></tr> <tr style="background-color:#f9f9f9;"><td style="padding:10px;border:1px solid #ddd;">currencySymbol</td><td style="padding:10px;border:1px solid #ddd;">string</td><td style="padding:10px;border:1px solid #ddd;">Currency symbol for currency columns.</td></tr> <tr style="background-color:#fff;"><td style="padding:10px;border:1px solid #ddd;">leftPinnedBoxshadow</td><td style="padding:10px;border:1px solid #ddd;">string</td><td style="padding:10px;border:1px solid #ddd;">Box shadow for left pinned columns.</td></tr> <tr style="background-color:#f9f9f9;"><td style="padding:10px;border:1px solid #ddd;">rightPinnedBoxshadow</td><td style="padding:10px;border:1px solid #ddd;">string</td><td style="padding:10px;border:1px solid #ddd;">Box shadow for right pinned columns.</td></tr> <tr style="background-color:#fff;"><td style="padding:10px;border:1px solid #ddd;">selectedRowsBackgroundColor</td><td style="padding:10px;border:1px solid #ddd;">string</td><td style="padding:10px;border:1px solid #ddd;">Background color for selected rows.</td></tr> <tr style="background-color:#f9f9f9;"><td style="padding:10px;border:1px solid #ddd;">nestedTableHeaderBAckgroundColor</td><td style="padding:10px;border:1px solid #ddd;">string</td><td style="padding:10px;border:1px solid #ddd;">Background color for nested table headers.</td></tr> <tr style="background-color:#fff;"><td style="padding:10px;border:1px solid #ddd;">tableView</td><td style="padding:10px;border:1px solid #ddd;">any[]</td><td style="padding:10px;border:1px solid #ddd;">Table view configuration.</td></tr> <tr style="background-color:#f9f9f9;"><td style="padding:10px;border:1px solid #ddd;">keepMultipleExpandedDetails</td><td style="padding:10px;border:1px solid #ddd;">boolean</td><td style="padding:10px;border:1px solid #ddd;">Keep multiple expanded details open.</td></tr> <tr style="background-color:#fff;"><td style="padding:10px;border:1px solid #ddd;">showTotalAmountRow</td><td style="padding:10px;border:1px solid #ddd;">boolean</td><td style="padding:10px;border:1px solid #ddd;">Show total amount row.</td></tr> <tr style="background-color:#f9f9f9;"><td style="padding:10px;border:1px solid #ddd;">tableType</td><td style="padding:10px;border:1px solid #ddd;">string</td><td style="padding:10px;border:1px solid #ddd;">Table type configuration.</td></tr> <tr style="background-color:#fff;"><td style="padding:10px;border:1px solid #ddd;">columnThreedotsMunuConfig</td><td style="padding:10px;border:1px solid #ddd;">object</td><td style="padding:10px;border:1px solid #ddd;">Column three dots menu configuration.</td></tr> <tr style="background-color:#f9f9f9;"><td style="padding:10px;border:1px solid #ddd;">paginationConfig</td><td style="padding:10px;border:1px solid #ddd;">any</td><td style="padding:10px;border:1px solid #ddd;">Pagination configuration.</td></tr> <tr style="background-color:#fff;"><td style="padding:10px;border:1px solid #ddd;">animationType</td><td style="padding:10px;border:1px solid #ddd;">string</td><td style="padding:10px;border:1px solid #ddd;">Animation type configuration.</td></tr> </tbody> </table>
176
+
177
+ <br />
178
+ <br />
179
+
180
+ ### ⚙️ Otputs Events
181
+
182
+ <br />
183
+ <table style="border-collapse: collapse; width: 100%; background-color: #fff; font-size: 16px; color: #000;"> <thead> <tr style="background-color: #f3f3f3; border: 1px solid #ddd;"> <th style="padding: 10px; border: 1px solid #ddd; text-align: left;">Output Name</th> <th style="padding: 10px; border: 1px solid #ddd; text-align: left;">Description</th> </tr> </thead> <tbody> <tr style="background-color: #fff;"><td style="padding:10px;border:1px solid #ddd;">changeLayout</td><td style="padding:10px;border:1px solid #ddd;">Emitted when table layout is changed (small, medium, large).</td></tr> <tr style="background-color:#f9f9f9;"><td style="padding:10px;border:1px solid #ddd;">filterOptions</td><td style="padding:10px;border:1px solid #ddd;">Emitted when filter is applied.</td></tr> <tr style="background-color:#fff;"><td style="padding:10px;border:1px solid #ddd;">genericEvent</td><td style="padding:10px;border:1px solid #ddd;">Generic event for various actions (check row, page change, limit change, create/update preset, right-click options, taskbar options, cell edit, cut/paste cells, global search, resizing, drag-drop). Parent components can determine action type using event.eventType.</td></tr> <tr style="background-color:#f9f9f9;"><td style="padding:10px;border:1px solid #ddd;">tablePresetConfig</td><td style="padding:10px;border:1px solid #ddd;">Emitted when changing table preset configuration or selecting/changing default view.</td></tr> <tr style="background-color:#fff;"><td style="padding:10px;border:1px solid #ddd;">sortingOrderOptions</td><td style="padding:10px;border:1px solid #ddd;">Emitted when sorting is applied to the table.</td></tr> <tr style="background-color:#f9f9f9;"><td style="padding:10px;border:1px solid #ddd;">createUpdateConfigListing</td><td style="padding:10px;border:1px solid #ddd;">Emitted on each action for state management from backend (resizing, drag-drop, etc.).</td></tr> </tbody> </table>
184
+
185
+ <br />
186
+ <br />
187
+
188
+ ### 🚀 Features
189
+
190
+ <br />
191
+ <table style="border-collapse: collapse; width: 100%; background-color: #fff; font-size: 16px; color: #000;">
192
+ <thead>
193
+ <tr style="background-color: #f3f3f3; border: 1px solid #ddd;">
194
+ <th style="padding: 10px; border: 1px solid #ddd; text-align: left;">Feature</th>
195
+ <th style="padding: 10px; border: 1px solid #ddd; text-align: center;">Available</th>
196
+ <th style="padding: 10px; border: 1px solid #ddd; text-align: left;">Description</th>
197
+ </tr>
198
+ </thead>
199
+ <tbody>
200
+ <tr style="background-color: #fff;">
201
+ <td style="padding: 10px; border: 1px solid #ddd;">Drag & Drop Columns</td>
202
+ <td style="padding: 10px; border: 1px solid #ddd; text-align: center;">✅</td>
203
+ <td style="padding: 10px; border: 1px solid #ddd;">Reorder columns easily using Angular CDK drag-drop.</td>
204
+ </tr>
205
+ <tr style="background-color: #f9f9f9;">
206
+ <td style="padding: 10px; border: 1px solid #ddd;">Column Resizing</td>
207
+ <td style="padding: 10px; border: 1px solid #ddd; text-align: center;">✅</td>
208
+ <td style="padding: 10px; border: 1px solid #ddd;">Adjust column width by dragging the column borders.</td>
209
+ </tr>
210
+ <tr style="background-color: #fff;">
211
+ <td style="padding: 10px; border: 1px solid #ddd;">Column Pinning (Left / Right)</td>
212
+ <td style="padding: 10px; border: 1px solid #ddd; text-align: center;">✅</td>
213
+ <td style="padding: 10px; border: 1px solid #ddd;">Fix important columns on either side for better visibility.</td>
214
+ </tr>
215
+ <tr style="background-color: #f9f9f9;">
216
+ <td style="padding: 10px; border: 1px solid #ddd;">Inline Editing</td>
217
+ <td style="padding: 10px; border: 1px solid #ddd; text-align: center;">✅</td>
218
+ <td style="padding: 10px; border: 1px solid #ddd;">Edit cell data directly within the grid with validation support.</td>
219
+ </tr>
220
+ <tr style="background-color: #fff;">
221
+ <td style="padding: 10px; border: 1px solid #ddd;">Row Selection (Single / Multi)</td>
222
+ <td style="padding: 10px; border: 1px solid #ddd; text-align: center;">✅</td>
223
+ <td style="padding: 10px; border: 1px solid #ddd;">Supports both single and multiple row selection modes.</td>
224
+ </tr>
225
+ <tr style="background-color: #f9f9f9;">
226
+ <td style="padding: 10px; border: 1px solid #ddd;">Column Grouping</td>
227
+ <td style="padding: 10px; border: 1px solid #ddd; text-align: center;">✅</td>
228
+ <td style="padding: 10px; border: 1px solid #ddd;">Group columns under shared headers for better organization.</td>
229
+ </tr>
230
+ <tr style="background-color: #fff;">
231
+ <td style="padding: 10px; border: 1px solid #ddd;">Row Grouping</td>
232
+ <td style="padding: 10px; border: 1px solid #ddd; text-align: center;">✅</td>
233
+ <td style="padding: 10px; border: 1px solid #ddd;">Group rows dynamically based on specific column values.</td>
234
+ </tr>
235
+ <!-- <tr style="background-color: #f9f9f9;">
236
+ <td style="padding: 10px; border: 1px solid #ddd;">Sorting (Ascending / Descending)</td>
237
+ <td style="padding: 10px; border: 1px solid #ddd; text-align: center;">✅</td>
238
+ <td style="padding: 10px; border: 1px solid #ddd;">Built-in sorting by any column, supports custom comparators.</td>
239
+ </tr> -->
240
+ <tr style="background-color: #fff;">
241
+ <td style="padding: 10px; border: 1px solid #ddd;">Filtering</td>
242
+ <td style="padding: 10px; border: 1px solid #ddd; text-align: center;">✅</td>
243
+ <td style="padding: 10px; border: 1px solid #ddd;">Column filters and global search supported.</td>
244
+ </tr>
245
+ <!-- <tr style="background-color: #f9f9f9;">
246
+ <td style="padding: 10px; border: 1px solid #ddd;">Pagination (Client / Server)</td>
247
+ <td style="padding: 10px; border: 1px solid #ddd; text-align: center;">✅</td>
248
+ <td style="padding: 10px; border: 1px solid #ddd;">Built-in paginator with full client and server mode support.</td>
249
+ </tr> -->
250
+ <tr style="background-color: #fff;">
251
+ <td style="padding: 10px; border: 1px solid #ddd;">Virtual Scrolling</td>
252
+ <td style="padding: 10px; border: 1px solid #ddd; text-align: center;">✅</td>
253
+ <td style="padding: 10px; border: 1px solid #ddd;">Render only visible rows for massive datasets efficiently.</td>
254
+ </tr>
255
+ <!-- <tr style="background-color: #f9f9f9;">
256
+ <td style="padding: 10px; border: 1px solid #ddd;">Custom Cell Templates</td>
257
+ <td style="padding: 10px; border: 1px solid #ddd; text-align: center;">✅</td>
258
+ <td style="padding: 10px; border: 1px solid #ddd;">Define your own templates for cells, headers, and footers.</td>
259
+ </tr> -->
260
+ <tr style="background-color: #fff;">
261
+ <td style="padding: 10px; border: 1px solid #ddd;">Export to CSV</td>
262
+ <td style="padding: 10px; border: 1px solid #ddd; text-align: center;">✅</td>
263
+ <td style="padding: 10px; border: 1px solid #ddd;">Easily export visible or all grid data to Excel or CSV format.</td>
264
+ </tr>
265
+ <!-- <tr style="background-color: #f9f9f9;">
266
+ <td style="padding: 10px; border: 1px solid #ddd;">Dark / Light Themes</td>
267
+ <td style="padding: 10px; border: 1px solid #ddd; text-align: center;">✅</td>
268
+ <td style="padding: 10px; border: 1px solid #ddd;">Easily switch between dark and light themes via inputs.</td>
269
+ </tr> -->
270
+ <tr style="background-color: #fff;">
271
+ <td style="padding: 10px; border: 1px solid #ddd;">Responsive Layout</td>
272
+ <td style="padding: 10px; border: 1px solid #ddd; text-align: center;">✅</td>
273
+ <td style="padding: 10px; border: 1px solid #ddd;">Optimized layout for all screen sizes including tablets.</td>
274
+ </tr>
275
+ <tr style="background-color: #f9f9f9;">
276
+ <td style="padding: 10px; border: 1px solid #ddd;">Custom Actions (Edit / Delete / View)</td>
277
+ <td style="padding: 10px; border: 1px solid #ddd; text-align: center;">✅</td>
278
+ <td style="padding: 10px; border: 1px solid #ddd;">Add custom icons or buttons for row actions.</td>
279
+ </tr>
280
+ <tr style="background-color: #fff;">
281
+ <td style="padding: 10px; border: 1px solid #ddd;">State Persistence</td>
282
+ <td style="padding: 10px; border: 1px solid #ddd; text-align: center;">✅</td>
283
+ <td style="padding: 10px; border: 1px solid #ddd;">Remembers column order, filters, and selections between reloads.</td>
284
+ </tr>
285
+ </tbody>
286
+ </table>
287
+
288
+ <br />
289
+ <br />
290
+
291
+ # 🎬 Previews
292
+
293
+ <table style="width:100%; border-collapse: collapse;">
294
+ <tr>
295
+ <td style="width:50%; padding:6px; vertical-align:top;">
296
+ <a href="https://techbar.s3.amazonaws.com/data-table/table%20demo%203.mp4" target="_blank">
297
+ <video autoplay loop muted playsinline width="100%" style="border-radius:8px; box-shadow:0 2px 6px rgba(0,0,0,0.1); cursor:pointer;">
298
+ <source src="https://techbar.s3.amazonaws.com/data-table/table%20demo%203.mp4" type="video/mp4">
299
+ Your browser does not support the video tag.
300
+ </video>
301
+ </a>
302
+ </td>
303
+ <td style="width:50%; padding:6px; vertical-align:top;">
304
+ <img src="https://techbar.s3.amazonaws.com/data-table/demo%20table.jpeg"
305
+ alt="Row Shading Example"
306
+ style="width:100%; border-radius:8px; box-shadow:0 2px 6px rgba(0,0,0,0.1);" />
307
+ </td>
308
+ </tr>
309
+ <tr>
310
+ <td style="padding:6px; vertical-align:top;">
311
+ <img src="https://techbar.s3.amazonaws.com/data-table/table%20demo%201.jpeg"
312
+ alt="Vertical Borders Example"
313
+ style="width:100%; border-radius:8px; box-shadow:0 2px 6px rgba(0,0,0,0.1);" />
314
+ </td>
315
+
316
+ </tr>
317
+ </table>
318
+
319
+ <br />
320
+ <br />
321
+
322
+
323
+
324
+ # Keywords
325
+
326
+ None
327
+
328
+ <br />
329
+ <br />
330
+
331
+ #
332
+
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ms-data-grid",
3
- "version": "0.0.28",
3
+ "version": "0.0.30",
4
4
  "description": "A powerful, customizable Angular data grid component with advanced features like sorting, filtering, pagination, column pinning, and taskbar actions. Perfect for enterprise applications.",
5
5
  "keywords": [
6
6
  "angular",