data-grid-workspace 0.0.120

package/projects/data-grid/README.md

@@ -0,0 +1,324 @@
+# 📊 MS Data Grid
+ 
+### Advanced Angular Data Grid Package Demo Preview
+ 
+<video autoplay loop muted playsinline width="100%">
+  <source src="https://techbar.s3.amazonaws.com/data-table/table%20demo%202.mp4">
+  Your browser does not support the video tag.
+</video>
+ 
+<p align="end">
+  <a href="https://stackblitz.com/edit/finitelooper-ng16-2jdszu1d?embed=1&file=src%2Fapp%2Fapp.component.ts%22"_blank" style="
+    display: inline-block;
+    padding: 10px 20px;
+    background-color: #0078d7;
+    color: white;
+    text-decoration: none;
+    border-radius: 6px;
+    font-weight: 600;
+    font-family: sans-serif;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+    transition: background-color 0.3s ease;
+  " onmouseover="this.style.backgroundColor='#005fa3'" onmouseout="this.style.backgroundColor='#0078d7'">
+    🚀 View StackBlitz Demo
+  </a>
+</p>
+ 
+**MS Data Grid** is a powerful, enterprise-grade Angular data grid package built for high-performance web applications.  
+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**.
+ 
+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.
+ 
+## ⚙️ Installation
+ 
+Install the MS Data Grid package:
+ 
+```bash
+npm install ms-data-grid
+```
+ 
+Install angular cdk for drag drop of columns:
+ 
+```bash
+npm install @angular/cdk@16
+```
+ 
+Install ng-inline-svg for icons:
+ 
+```bash
+npm install ng-inline-svg@13.1.1
+```
+ 
+Install bootstrap for styling:
+ 
+```bash
+npm install bootstrap
+```
+ 
+## ⚡️ Quick Start
+ 
+Get up and running with **MS Data Grid** in just a few simple steps.  
+After installing the package and its dependencies, import the required module and start using the grid component in your Angular templates.  
+Below is a basic example showing how to configure and display a simple data grid.
+ 
+### **Step 1: Register Required Modules**
+ 
+After installation, register the `DataGridModule` in your `app.module.ts` and import the `HttpClientModule`:
+ 
+```ts
+// app.module.ts
+ 
+import { NgModule } from "@angular/core";
+import { BrowserModule } from "@angular/platform-browser";
+import { DataGridModule } from "ms-data-grid";
+import { AppComponent } from "./app.component";
+import { HttpClientModule } from "@angular/common/http";
+ 
+@NgModule({
+  declarations: [AppComponent],
+  imports: [
+    BrowserModule,
+    DataGridModule, // Register the main module here
+    HttpClientModule, // Add this as well
+  ],
+  providers: [],
+  bootstrap: [AppComponent],
+})
+export class AppModule {}
+```
+ 
+### **Step 2: Define Rows and Columns**
+ 
+```ts
+@Component({
+  selector: "app-root",
+  templateUrl: "./app.component.html",
+  styleUrls: [],
+})
+export class AppComponent implements OnInit {
+  columns: any[] = [
+    {
+      id: 1,
+      field: "logo",
+      header: "Image",
+      type: "image",
+      is_visible: true,
+    },
+    {
+      id: 2,
+      field: "full_name",
+      header: "Employee Name",
+      type: "string",
+      is_visible: true,
+    },
+    {
+      id: 3,
+      field: "email",
+      header: "Email",
+      type: "email",
+      is_visible: true,
+    },
+    {
+      id: 4,
+      field: "phone",
+      header: "Mobile Number",
+      type: "string",
+      is_visible: true,
+    },
+  ];
+ 
+  dataSet: any[] = [
+    {
+      logo: null,
+      full_name: "Muhammad Moeen Khan",
+      email: "moeenkhan@4iisolutions.com",
+      phone: "+923170524160",
+    },
+    {
+      logo: null,
+      full_name: "Uzair Saeed",
+      email: "Uzairsaeed@4iisolutions.com",
+      phone: "+923449043675",
+    },
+    {
+      logo: null,
+      full_name: "Waqar Nawaz",
+      email: "waqar@4iisolutions.com",
+      phone: "+923118871780",
+    },
+  ];
+}
+```
+ 
+### Step 3: Create the Angular Data Grid Component
+ 
+```html
+template: `
+ 
+<div style="height: 400px" class="p-4 w-100">
+  <data-grid [columns]="columns" [dataSet]="dataSet" [leftPinnedBoxshadow]="''" [rightPinnedBoxshadow]="''" [loading]="loading"></data-grid>
+</div>
+`
+```
+ 
+### Result
+ 
+![alt text](https://techbar.s3.amazonaws.com/data-table/image.jpeg)
+ 
+<br />
+<br />
+ 
+### ⚙️ Inputs
+ 
+<br/>
+ 
+<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>
+ 
+<br />
+<br />
+ 
+### ⚙️ Otputs Events
+ 
+<br />
+<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>
+ 
+<br />
+<br />
+ 
+### 🚀 Features
+ 
+<br />
+<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;">Feature</th>
+      <th style="padding: 10px; border: 1px solid #ddd; text-align: center;">Available</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;">Drag & Drop Columns</td>
+      <td style="padding: 10px; border: 1px solid #ddd; text-align: center;">✅</td>
+      <td style="padding: 10px; border: 1px solid #ddd;">Reorder columns easily using Angular CDK drag-drop.</td>
+    </tr>
+    <tr style="background-color: #f9f9f9;">
+      <td style="padding: 10px; border: 1px solid #ddd;">Column Resizing</td>
+      <td style="padding: 10px; border: 1px solid #ddd; text-align: center;">✅</td>
+      <td style="padding: 10px; border: 1px solid #ddd;">Adjust column width by dragging the column borders.</td>
+    </tr>
+    <tr style="background-color: #fff;">
+      <td style="padding: 10px; border: 1px solid #ddd;">Column Pinning (Left / Right)</td>
+      <td style="padding: 10px; border: 1px solid #ddd; text-align: center;">✅</td>
+      <td style="padding: 10px; border: 1px solid #ddd;">Fix important columns on either side for better visibility.</td>
+    </tr>
+    <tr style="background-color: #f9f9f9;">
+      <td style="padding: 10px; border: 1px solid #ddd;">Inline Editing</td>
+      <td style="padding: 10px; border: 1px solid #ddd; text-align: center;">✅</td>
+      <td style="padding: 10px; border: 1px solid #ddd;">Edit cell data directly within the grid with validation support.</td>
+    </tr>
+    <tr style="background-color: #fff;">
+      <td style="padding: 10px; border: 1px solid #ddd;">Row Selection (Single / Multi)</td>
+      <td style="padding: 10px; border: 1px solid #ddd; text-align: center;">✅</td>
+      <td style="padding: 10px; border: 1px solid #ddd;">Supports both single and multiple row selection modes.</td>
+    </tr>
+    <tr style="background-color: #f9f9f9;">
+      <td style="padding: 10px; border: 1px solid #ddd;">Column Grouping</td>
+      <td style="padding: 10px; border: 1px solid #ddd; text-align: center;">✅</td>
+      <td style="padding: 10px; border: 1px solid #ddd;">Group columns under shared headers for better organization.</td>
+    </tr>
+    <tr style="background-color: #fff;">
+      <td style="padding: 10px; border: 1px solid #ddd;">Row Grouping</td>
+      <td style="padding: 10px; border: 1px solid #ddd; text-align: center;">✅</td>
+      <td style="padding: 10px; border: 1px solid #ddd;">Group rows dynamically based on specific column values.</td>
+    </tr>
+    <!-- <tr style="background-color: #f9f9f9;">
+      <td style="padding: 10px; border: 1px solid #ddd;">Sorting (Ascending / Descending)</td>
+      <td style="padding: 10px; border: 1px solid #ddd; text-align: center;">✅</td>
+      <td style="padding: 10px; border: 1px solid #ddd;">Built-in sorting by any column, supports custom comparators.</td>
+    </tr> -->
+    <tr style="background-color: #fff;">
+      <td style="padding: 10px; border: 1px solid #ddd;">Filtering</td>
+      <td style="padding: 10px; border: 1px solid #ddd; text-align: center;">✅</td>
+      <td style="padding: 10px; border: 1px solid #ddd;">Column filters and global search supported.</td>
+    </tr>
+    <!-- <tr style="background-color: #f9f9f9;">
+      <td style="padding: 10px; border: 1px solid #ddd;">Pagination (Client / Server)</td>
+      <td style="padding: 10px; border: 1px solid #ddd; text-align: center;">✅</td>
+      <td style="padding: 10px; border: 1px solid #ddd;">Built-in paginator with full client and server mode support.</td>
+    </tr> -->
+    <tr style="background-color: #fff;">
+      <td style="padding: 10px; border: 1px solid #ddd;">Virtual Scrolling</td>
+      <td style="padding: 10px; border: 1px solid #ddd; text-align: center;">✅</td>
+      <td style="padding: 10px; border: 1px solid #ddd;">Render only visible rows for massive datasets efficiently.</td>
+    </tr>
+    <!-- <tr style="background-color: #f9f9f9;">
+      <td style="padding: 10px; border: 1px solid #ddd;">Custom Cell Templates</td>
+      <td style="padding: 10px; border: 1px solid #ddd; text-align: center;">✅</td>
+      <td style="padding: 10px; border: 1px solid #ddd;">Define your own templates for cells, headers, and footers.</td>
+    </tr> -->
+    <tr style="background-color: #fff;">
+      <td style="padding: 10px; border: 1px solid #ddd;">Export to CSV</td>
+      <td style="padding: 10px; border: 1px solid #ddd; text-align: center;">✅</td>
+      <td style="padding: 10px; border: 1px solid #ddd;">Easily export visible or all grid data to Excel or CSV format.</td>
+    </tr>
+    <!-- <tr style="background-color: #f9f9f9;">
+      <td style="padding: 10px; border: 1px solid #ddd;">Dark / Light Themes</td>
+      <td style="padding: 10px; border: 1px solid #ddd; text-align: center;">✅</td>
+      <td style="padding: 10px; border: 1px solid #ddd;">Easily switch between dark and light themes via inputs.</td>
+    </tr> -->
+    <tr style="background-color: #fff;">
+      <td style="padding: 10px; border: 1px solid #ddd;">Responsive Layout</td>
+      <td style="padding: 10px; border: 1px solid #ddd; text-align: center;">✅</td>
+      <td style="padding: 10px; border: 1px solid #ddd;">Optimized layout for all screen sizes including tablets.</td>
+    </tr>
+    <tr style="background-color: #f9f9f9;">
+      <td style="padding: 10px; border: 1px solid #ddd;">Custom Actions (Edit / Delete / View)</td>
+      <td style="padding: 10px; border: 1px solid #ddd; text-align: center;">✅</td>
+      <td style="padding: 10px; border: 1px solid #ddd;">Add custom icons or buttons for row actions.</td>
+    </tr>
+    <tr style="background-color: #fff;">
+      <td style="padding: 10px; border: 1px solid #ddd;">State Persistence</td>
+      <td style="padding: 10px; border: 1px solid #ddd; text-align: center;">✅</td>
+      <td style="padding: 10px; border: 1px solid #ddd;">Remembers column order, filters, and selections between reloads.</td>
+    </tr>
+  </tbody>
+</table>
+ 
+<br />
+<br />
+ 
+# 🎬 Previews
+ 
+<table style="width:100%; border-collapse: collapse;">
+  <tr>
+    <td style="width:50%; padding:6px; vertical-align:top;">
+      <img src="https://techbar.s3.amazonaws.com/data-table/demo%20table.jpeg"
+           alt="Row Shading Example"
+           style="width:100%; border-radius:8px; box-shadow:0 2px 6px rgba(0,0,0,0.1);" />
+    </td>
+  </tr>
+  <tr>
+    <td style="padding:6px; vertical-align:top;">
+      <img src="https://techbar.s3.amazonaws.com/data-table/table%20demo%201.jpeg"
+           alt="Vertical Borders Example"
+           style="width:100%; border-radius:8px; box-shadow:0 2px 6px rgba(0,0,0,0.1);" />
+    </td>
+
+  </tr>
+</table>
+ 
+<br />
+<br />
+ 
+
+ 
+# Keywords
+ 
+None
+ 
+<br />
+<br />
+ 
+#
+ 

package/projects/data-grid/ng-package.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/data-grid",
+   "lib": {
+    "entryFile": "src/public-api.ts",
+    "styleIncludePaths": ["node_modules"] 
+  },
+  "assets": [
+    "src/assets"
+  ],
+  "allowedNonPeerDependencies": [
+    "xlsx-js-style",
+    "ng-inline-svg",
+    "ngx-bootstrap",
+    "bootstrap",
+    "file-saver",
+    "zone.js"
+  ]
+}

package/projects/data-grid/package-lock.json

@@ -0,0 +1,25 @@
+{
+  "name": "iis-data-grid",
+  "version": "0.0.1",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "iis-data-grid",
+      "version": "0.0.1",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/common": "^16.2.0",
+        "@angular/core": "^16.2.0"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    }
+  }
+}

package/projects/data-grid/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "ms-data-grid",
+  "version": "0.0.120",
+  "description": "A powerful, customizable Angular data grid component with advanced features like sorting, filtering, pagination, column pinning, and taskbar actions. Perfect for enterprise applications.",
+  "keywords": [
+    "angular",
+    "data-grid",
+    "table",
+    "datagrid",
+    "angular-component",
+    "data-table",
+    "grid",
+    "sorting",
+    "filtering",
+    "pagination",
+    "angular-grid",
+    "enterprise-grid",
+    "customizable-grid",
+    "responsive-table",
+    "column-pinning"
+  ],
+  "author": "Bilal",
+  "license": "MIT",
+  "peerDependencies": {
+    "@angular/common": "^16.2.0",
+    "@angular/core": "^16.2.0"
+    },
+    "dependencies": {
+    "xlsx-js-style": "^1.2.0",
+    "ng-inline-svg": "^13.1.1",
+    "ngx-bootstrap": "^20.0.0",
+    "bootstrap": "^5.3.7",
+    "tslib": "^2.3.0",
+    "file-saver": "^2.0.5",
+    "zone.js": "~0.13.0"
+  },
+  "sideEffects": false
+}

package/projects/data-grid/src/lib/assets/fonts/Inter/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2020 The Inter Project Authors (https://github.com/rsms/inter)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.