@steven-sanchez-altera/infragistics-grid-element

v2.1.0

Published

9 months ago

Angular 20 Elements POC wrapping Infragistics Web Components Grid as a shareable custom element.

0High
0Medium
0Low

steven-sanchez-altera

angular angular-elements web-components infragistics igniteui grid custom-element data-grid

Infragistics Grid Element

A reusable Angular Elements custom component that wraps the Infragistics Web Components Data Grid.

🚀 Demo

Live Demo

📦 Installation

npm install @steven-sanchez-altera/infragistics-grid-element

📦 Bundle Options:

Lightweight: 2.5 KB (requires external dependencies)
Full Bundle: 2.95 MB (includes all dependencies)
Utilities Only: 1.6 KB (just sample data and utilities)

🎯 Usage

Option 1: Lightweight Bundle (Recommended - 2.5 KB)

Prerequisites: Install the required dependencies in your project:

npm install @angular/core @angular/platform-browser @angular/elements
npm install igniteui-webcomponents igniteui-webcomponents-core igniteui-webcomponents-data-grids

HTML Usage:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="node_modules/@steven-sanchez-altera/infragistics-grid-element/dist/themes/material.css">
</head>
<body>
  <infragistics-grid-element id="myGrid"></infragistics-grid-element>
  
  <!-- Load the lightweight bundle (only 2.5 KB!) -->
  <script type="module" src="node_modules/@steven-sanchez-altera/infragistics-grid-element/dist/custom/infragistics-grid-element.js"></script>
  
  <script>
    // Set data programmatically
    document.getElementById('myGrid').data = [
      {
        ProductID: 1,
        ProductName: "Chai",
        UnitPrice: 18.00,
        UnitsInStock: 39,
        OrderDate: new Date("2012-02-12"),
        Discontinued: false
      }
    ];
  </script>
</body>
</html>

JavaScript/TypeScript:

// Import the lightweight component (only 2.5 KB!)
import '@steven-sanchez-altera/infragistics-grid-element/dist/custom/infragistics-grid-element.js';
import '@steven-sanchez-altera/infragistics-grid-element/dist/themes/material.css';

// Use in your app
const grid = document.createElement('infragistics-grid-element');
grid.data = myData;
document.body.appendChild(grid);

Option 2: Full Bundle (Easiest - 2.95 MB)

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="node_modules/@steven-sanchez-altera/infragistics-grid-element/dist/themes/material.css">
</head>
<body>
  <infragistics-grid-element id="myGrid"></infragistics-grid-element>
  
  <!-- Load the full bundle (2.95 MB - includes all dependencies) -->
  <script src="node_modules/@steven-sanchez-altera/infragistics-grid-element/dist/browser/polyfills.js"></script>
  <script src="node_modules/@steven-sanchez-altera/infragistics-grid-element/dist/browser/main.js"></script>
  
  <script>
    document.getElementById('myGrid').data = [
      {
        ProductID: 1,
        ProductName: "Chai",
        UnitPrice: 18.00,
        UnitsInStock: 39,
        OrderDate: new Date("2012-02-12"),
        Discontinued: false
      }
    ];
  </script>
</body>
</html>

Option 3: Utilities Only (Testing - 1.6 KB)

// Import just the utilities and sample data
import { defaultGridData, registerInfragisticsModules } from 
  '@steven-sanchez-altera/infragistics-grid-element/dist/infragistics-common.js';

// Use in tests or for configuration
const testData = defaultGridData;
registerInfragisticsModules();

In React

import { useEffect, useRef } from 'react';

// Import the custom element (this registers it globally)
import '@steven-sanchez-altera/infragistics-grid-element/dist/browser/main.js';
import '@steven-sanchez-altera/infragistics-grid-element/dist/themes/material.css';

function MyComponent() {
  const gridRef = useRef(null);
  
  useEffect(() => {
    if (gridRef.current) {
      gridRef.current.data = [
        {
          ProductID: 1,
          ProductName: "Chai",
          UnitPrice: 18.00,
          UnitsInStock: 39,
          OrderDate: new Date("2012-02-12"),
          Discontinued: false
        }
      ];
    }
  }, []);

  return (
    <div>
      <infragistics-grid-element ref={gridRef}></infragistics-grid-element>
    </div>
  );
}

In Vue.js

<template>
  <infragistics-grid-element ref="gridRef"></infragistics-grid-element>
</template>

<script>
import '@steven-sanchez-altera/infragistics-grid-element/dist/browser/main.js';
import '@steven-sanchez-altera/infragistics-grid-element/dist/themes/material.css';

export default {
  name: 'MyComponent',
  mounted() {
    this.$refs.gridRef.data = [
      {
        ProductID: 1,
        ProductName: "Chai",
        UnitPrice: 18.00,
        UnitsInStock: 39,
        OrderDate: new Date("2012-02-12"),
        Discontinued: false
      }
    ];
  }
};
</script>

In Angular

import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';

// Import the custom element
import '@steven-sanchez-altera/infragistics-grid-element/dist/browser/main.js';
import '@steven-sanchez-altera/infragistics-grid-element/dist/themes/material.css';

@Component({
  selector: 'app-my-component',
  template: `
    <infragistics-grid-element #gridRef></infragistics-grid-element>
  `
})
export class MyComponent implements AfterViewInit {
  @ViewChild('gridRef') gridRef!: ElementRef;

  ngAfterViewInit() {
    this.gridRef.nativeElement.data = [
      {
        ProductID: 1,
        ProductName: "Chai",
        UnitPrice: 18.00,
        UnitsInStock: 39,
        OrderDate: new Date("2012-02-12"),
        Discontinued: false
      }
    ];
  }
}

🔧 API

Properties

| Property | Type | Description | Default | |----------|------|-------------|---------| | data | Array<any> | Array of data objects to display in the grid | [] |

Data Object Structure

Each data object should contain the following properties:

ProductID (number): Unique product identifier
ProductName (string): Name of the product
QuantityPerUnit (string): Quantity description
UnitsInStock (number): Available stock count
UnitPrice (number): Price per unit
OrderDate (Date): Order date
Discontinued (boolean): Whether the product is discontinued

🎨 Theming

The component includes the Infragistics Material theme by default. You can customize the appearance by:

Using the included theme: dist/themes/material.css
Creating your own custom CSS targeting the grid elements
Using Infragistics theme variables

📋 Requirements

Modern browser with Web Components support
The following peer dependencies will be automatically installed:
- igniteui-webcomponents
- igniteui-webcomponents-core
- igniteui-webcomponents-data-grids
- igniteui-webcomponents-grids

🤝 Contributing

Fork the repository
Create your feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add some amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

📄 License

This project is licensed under the MIT License.

🙏 Acknowledgments

Built with Angular Elements
Uses Infragistics Web Components

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Infragistics Grid Element

🚀 Demo

📦 Installation

🎯 Usage

🎯 Usage

Option 1: Lightweight Bundle (Recommended - 2.5 KB)

Option 2: Full Bundle (Easiest - 2.95 MB)

Option 3: Utilities Only (Testing - 1.6 KB)

In React

In Vue.js

In Angular

🔧 API

Properties

Data Object Structure

🎨 Theming

📋 Requirements

🤝 Contributing

📄 License

🙏 Acknowledgments