Open Source Web Components Grid

    The Ignite UI for Web Components Grid Lite is part of Infragistics’ open-source UI component set, actively supported and maintained. It is an open-source JavaScript data grid built as a Web Component, so you can use it dependency-free with or without a web framework. There are 40+ OSS controls available under the MIT license across Angular, React, Blazor, and Web Components.

    The Grid Lite delivers essential data-display functionality with minimal overhead and the performance users expect. It is designed for developers who need fast, lightweight data presentation without the complexity of an enterprise grid.

    Grid Lite features:

    • Column Filtering
    • Hiding
    • Resizing
    • Sorting
    • Row Virtualization
    • Accessibility
    • Themes and Styling
    • Column Data Types

    Installation and Setup

    Installation

    To install Grid Lite, go to the root folder of your project (where package.json is located) and run the following command using npm:

    npm install igniteui-grid-lite --save

    Or using yarn:

    yarn add igniteui-grid-lite

    Using the Grid Lite in your Web Components code

    In the file where you want to use Grid Lite, import and register it before your component class or function is declared:

    <div class="grid-lite-wrapper">
    <igc-grid-lite id="grid-lite"></igc-grid-lite>
</div>

    Grid Lite in Action

    Grid Lite is designed to give you the core features that you need to deliver a beautiful data grid / data table experience in your apps. Designed for performance and beauty, the Grid Lite will work in any framework, on any platform.

    Performance Built In

    Row-level virtualization allows you to render unlimited amounts of data with smooth scrolling.

    Automatic Column Types

    Column types are automatically generated based on your data source, with built-in filtering tailored to each column type.

    Custom Column Templates

    Deliver any type of UX with column templates. Anything you imagine can render in a grid column!

    Interactive Features

    All the core interactive features your users expect: column filtering, column hiding, column resizing, column sorting, and more.

    Beautiful UX & Branding

    Built-in theme support for Bootstrap, Material & Fluent, plus endless branding options in color palettes, fonts, elevation, display density & more.

    Rich Keyboard Navigation

    Full Excel-style keyboard navigation gives users the experience they expect, with high performance even on large datasets.