Ignite UI Grid Lite

Ignite UI Grid Lite is a high-performance, lightweight data grid built as a web component using Lit. It provides essential grid functionality with a small footprint, making it perfect for applications that need fast, efficient data visualization without the overhead of a full-featured grid.

Table of Contents

• Features
• Browser Support
• Getting Started
• Usage
• Building the Library
• Running Tests
• Documentation
• Ignite UI Open-Source vs. Premium for Web Comonents
• Contributing
• Support
• License

Features

Ignite UI Grid Lite provides core data grid capabilities with an emphasis on performance and simplicity:

• High Performance Row Virtualization - Handles large datasets efficiently with built-in virtual scrolling
• Column Filtering - Built-in column filtering capabilities
• Sorting - Column sorting support for better data organization
• Lightweight - Minimal bundle size for fast load times
• Web Standards - Built with web components for framework-agnostic usage
• Modern Architecture - Built with Lit and TypeScript for maintainability
• Customizable - Flexible theming and styling options
• Cell Templating - Custom cell rendering for flexible data display
• Header Templating - Custom header rendering for enhanced grid headers
• Accessible - Designed with accessibility in mind

Browser Support

Ignite UI Grid Lite supports all modern browsers:

Latest ✔	Latest ✔	Latest ✔	Latest ✔	Latest ✔

Getting Started

Installation

Install via npm:

npm install igniteui-grid-lite

Quick Start

1. Import the grid component in your JavaScript/TypeScript file:

import 'igniteui-grid-lite';

1. Use the grid in your HTML:

<igc-grid-lite>

</igc-grid-lite>

1. For a complete example, check out the demo application.

Usage

For detailed usage instructions and API documentation, visit: - Grid Lite Overview - API Documentation

Building the Library

Setup

Clone the repository and install dependencies:

git clone https://github.com/IgniteUI/igniteui-grid-lite.git
cd igniteui-grid-lite
npm install

Build

To build the library:

npm run build

This will: - Analyze custom elements - Build the TypeScript source - Generate API documentation

Development

Start the development server with live reload:

npm start

This will open the demo page at demo/index.html with automatic rebuilding on file changes.

Running Tests

Run tests once:

npm test

Run tests in watch mode:

npm run test:watch

Tests are written using @web/test-runner and @open-wc/testing.

Documentation

API Documentation

The API documentation is generated using TypeDoc. To build the docs:

npm run build

Documentation will be available in the build output.

Additional Resources

• Ignite UI Web Components Product Documentation
• Grid Lite Documentation
• Web Components Guide

Ignite UI Grid Lite vs. Ignite UI for Web Components

Ignite UI Grid Lite is designed as a lightweight, open-source alternative to the full-featured Ignite UI for Web Components Data Grid, while allowing for an easy swap with the full-featured grid, if application needs require it.

Ignite UI Grid Lite (Open Source - MIT)

Best for: - Applications requiring basic grid functionality - Projects where bundle size is critical - Framework-agnostic web applications - Community-driven development

Includes: - Core data virtualization - Basic filtering and sorting - Lightweight and fast - MIT licensed and free for all use

Ignite UI for Web Components

Best for: - Enterprise applications requiring advanced features - Complex data scenarios with editing, grouping, and aggregation - Applications needing professional support and SLA

Includes: - All Grid Lite features plus: - Advanced filtering with query builder - Excel-style column filtering - Grouping - Cell editing, row editing, batch editing - Summaries and aggregations - Excel, PDF, and CSV export - Column pinning, hiding, and resizing - Row selection - Paging - Multi-column headers and collapsible column groups - Cell merging - Custom row layouts - Master-detail views - Hierarchical grid - Tree grid - Pivot grid - 24/5 developer support

Learn more about Open-Source vs Premium Ignite UI options

Contributing

We welcome contributions! Please see our contributing guidelines for details on: - Code of conduct - Development workflow - Submitting pull requests - Coding standards

To contribute:

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

Support

Community Support

Community support for open source usage of this product is available at: - GitHub Issues - Report bugs or request features - Stack Overflow - Ask questions using the igniteui tag

Commercial Support

For professional support and access to the full Ignite UI for Web Components suite with advanced grid features: - Visit Infragistics Support - Explore Ignite UI for Web Components - Register for a trial

License

This project is licensed under the MIT License - see the LICENSE file for details.

MIT License - Free for commercial and non-commercial use.

© Copyright 2025 INFRAGISTICS. All Rights Reserved.

For the commercial Ignite UI for Angular product, please visit Infragistics Licensing.

---

Built with ❤️ by Infragistics