ms-data-grid 0.0.85 → 0.0.89

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 (20) hide show
  1. package/README.md +323 -323
  2. package/esm2022/lib/data-grid/data-grid.component.mjs +60 -33
  3. package/esm2022/lib/data-grid/statuses.mjs +1 -1
  4. package/esm2022/lib/data-grid.module.mjs +1 -1
  5. package/esm2022/lib/directives/cell-editor.directive.mjs +1 -1
  6. package/esm2022/lib/directives/cell-render-init.directive.mjs +1 -1
  7. package/esm2022/lib/directives/cellHost.directive.mjs +1 -1
  8. package/esm2022/lib/interfaces/data-grid-config.ts.mjs +1 -1
  9. package/esm2022/lib/pipes/filter.pipe.mjs +1 -1
  10. package/esm2022/lib/pipes/format-currency.pipe.mjs +1 -1
  11. package/esm2022/lib/pipes/format-index.pipe.mjs +1 -1
  12. package/esm2022/lib/services/common.service.mjs +1 -1
  13. package/esm2022/lib/services/copy-service.service.mjs +1 -1
  14. package/esm2022/lib/services/export.service.mjs +1 -1
  15. package/esm2022/lib/services/split-columns.service.mjs +2 -2
  16. package/esm2022/public-api.mjs +1 -1
  17. package/fesm2022/ms-data-grid.mjs +60 -33
  18. package/fesm2022/ms-data-grid.mjs.map +1 -1
  19. package/lib/data-grid/data-grid.component.d.ts +1 -0
  20. package/package.json +1 -1
package/README.md CHANGED
@@ -1,324 +1,324 @@
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.ts%22"_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
-
36
- ```bash
37
- npm install ms-data-grid
38
- ```
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
93
- @Component({
94
- selector: "app-root",
95
- templateUrl: "./app.component.html",
96
- styleUrls: [],
97
- })
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
- },
128
- ];
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
- },
149
- ];
150
- }
151
- ```
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
- <img src="https://techbar.s3.amazonaws.com/data-table/demo%20table.jpeg"
297
- alt="Row Shading Example"
298
- style="width:100%; border-radius:8px; box-shadow:0 2px 6px rgba(0,0,0,0.1);" />
299
- </td>
300
- </tr>
301
- <tr>
302
- <td style="padding:6px; vertical-align:top;">
303
- <img src="https://techbar.s3.amazonaws.com/data-table/table%20demo%201.jpeg"
304
- alt="Vertical Borders Example"
305
- style="width:100%; border-radius:8px; box-shadow:0 2px 6px rgba(0,0,0,0.1);" />
306
- </td>
307
-
308
- </tr>
309
- </table>
310
-
311
- <br />
312
- <br />
313
-
314
-
315
-
316
- # Keywords
317
-
318
- None
319
-
320
- <br />
321
- <br />
322
-
323
- #
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.ts%22"_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
+
36
+ ```bash
37
+ npm install ms-data-grid
38
+ ```
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
93
+ @Component({
94
+ selector: "app-root",
95
+ templateUrl: "./app.component.html",
96
+ styleUrls: [],
97
+ })
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
+ },
128
+ ];
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
+ },
149
+ ];
150
+ }
151
+ ```
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
+ <img src="https://techbar.s3.amazonaws.com/data-table/demo%20table.jpeg"
297
+ alt="Row Shading Example"
298
+ style="width:100%; border-radius:8px; box-shadow:0 2px 6px rgba(0,0,0,0.1);" />
299
+ </td>
300
+ </tr>
301
+ <tr>
302
+ <td style="padding:6px; vertical-align:top;">
303
+ <img src="https://techbar.s3.amazonaws.com/data-table/table%20demo%201.jpeg"
304
+ alt="Vertical Borders Example"
305
+ style="width:100%; border-radius:8px; box-shadow:0 2px 6px rgba(0,0,0,0.1);" />
306
+ </td>
307
+
308
+ </tr>
309
+ </table>
310
+
311
+ <br />
312
+ <br />
313
+
314
+
315
+
316
+ # Keywords
317
+
318
+ None
319
+
320
+ <br />
321
+ <br />
322
+
323
+ #
324
324