Ignite UI Grid Lite for Web Components

Ignite UI Grid Lite for Web Components 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.

Features

Ignite UI Grid Lite for Web Components 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 for Web Components supports all modern browsers:


Latest ✔	Latest ✔	Latest ✔	Latest ✔	Latest ✔

Getting Started

Installation

Install via npm:

npm install igniteui-grid-lite

Quick Start

Import the grid component in your JavaScript/TypeScript file:

import 'igniteui-grid-lite';

Use the grid in your HTML:

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

For a complete example, check out the demo application.

Usage

For detailed usage instructions and API documentation, visit:

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