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';

2. Use the grid in your HTML:

<igc-grid-lite>
  <!-- Grid configuration here -->
</igc-grid-lite>

3. 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