Free & Open-Source React Data Grid (Grid Lite)

    The Ignite UI for React Grid Lite is a lightweight, high-performance React data grid that’s free to use, open-source, and built for modern React applications.

    This free React data grid is open-source JavaScript data grid built as a Web Component, which means you can use it dependency-free with or without a web framework. It delivers essential data-display functionality with minimal overhead and the performance users expect. The React Grid Lite is designed for developers who need fast and lightweight data presentation.

    What You Get with our Free React Data Grid

    Our free, open-source React Grid Lite comes with the following column-based features: sorting, filtering, hiding, resizing and a variety of pre-defined data types. Blazing-fast performance is delivered with the use of row virtualization. In addition, the component supports keyboard navigation and theming through the Ignite UI Theming Framework.

    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-react --save

    Or using yarn:

    yarn add igniteui-react

    Using the Grid Lite in your React code

    In the file where you want to use Grid Lite, first we need to import it:

    import { IgrGridLite } from 'igniteui-react/grid-lite';

    Add the <GridLite> component to your markup:

    return (
  <div className="container sample ig-typography">
    <div className="grid-lite-wrapper">
      <IgrGridLite ref={this.gridRef} id="grid-lite"></IgrGridLite>
    </div>
  </div>
);

    Grid Lite in Action

    Grid Lite는 앱에서 아름다운 데이터 그리드/데이터 테이블 경험을 제공하는 데 필요한 핵심 기능을 제공하기 위해 설계되었습니다. 성능과 아름다움을 위해 설계된 Grid Lite는 어떤 프레임워크와 플랫폼에서도 작동할 수 있습니다.

    Performance Built In

    행 단위 가상화는 부드러운 스크롤로 무제한 데이터를 렌더링할 수 있게 해줍니다.

    Automatic Column Types

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

    Interactive Features

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

    Beautiful UX & Branding

    Bootstrap, Material, Fluent에 대한 내장 테마 지원과 더불어 색상 팔레트, 폰트, 높이도, 디스플레이 밀도 등 무한한 브랜딩 옵션이 제공됩니다.

    Rich Keyboard Navigation

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

    Is Grid Lite a Free & Open-Source React Data Grid?

    Yes. Ignite UI Grid Lite is a free, open-source React data grid released under the MIT license. You can use it in commercial or personal projects with no licensing fees. It is part of our initiative to make Ignite UI more open, transparent, and accessible.

    • MIT-licensed

    • Free for commercial use

    • Community-driven development

    • No feature gating

    However, if your project scales and grows in complexity and functionality, and you require an enterprise-grade application, we have a seamless upgrade strategy. It will make the transitioning from the free React data grid (Grid Lite) to the full-featured and advanced Data Grid simpler and faster.