JSPM

@syncfusion/react-grid

31.1.17
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 43
  • Score
    100M100P100Q68889F
  • License SEE LICENSE IN license

A high-performance React Data Grid component designed for modern web applications.

Package Exports

  • @syncfusion/react-grid
  • @syncfusion/react-grid/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@syncfusion/react-grid) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Data Grid Components

What's Included in the React Grid Package

The React Grid package includes the Data Grid component.

React Data Grid

The Syncfusion React Data Grid is a high-performance, feature-rich component designed for building scalable, responsive, and data-intensive web applications. Engineered to meet the requirements of enterprise-grade solutions, it provides a robust architecture that supports dynamic data handling, seamless integration with modern react frameworks, and a highly customizable interface.

Ideal for react applications requiring structured data presentation, real-time interaction, and flexible configuration, the grid supports essential functionalities such as sorting, filtering, paging, and editing. Extensibility is achieved through custom templates and a comprehensive API surface, enabling integration with complex business logic and external systems.

Explore the demo here.

Key Features

  • Sorting Enables column-based sorting with support for single and multi-column configurations. Sorting operations are optimized for performance and consistency, allowing structured data to be organized efficiently across large datasets.

  • Filtering Provides a built-in filter bar with customizable filter types per column. Supports text, number, date, and dropdown filters, enabling precise data segmentation and contextual filtering based on business logic.

  • Editing Facilitates inline CRUD operations including add, edit, and delete actions. Editing is integrated with toolbar controls and supports validation, making it suitable for transactional data entry and real-time updates.

  • Toolbar Offers a configurable toolbar with built-in actions such as Add, Edit, Delete, and Search. Toolbar elements can be extended or replaced with custom components to align with specific operational workflows.

  • Searching Includes a responsive search box within the toolbar for quick data lookup. Supports keyword-based filtering across multiple columns, improving accessibility to relevant records in large datasets.

  • Paging Manages large volumes of data using built-in pagination. Supports both client-side and server-side paging strategies to ensure scalable performance and efficient data navigation in distributed environments.

  • Customization Allows custom cell rendering, conditional styling, and layout adjustments. Enables integration with design systems and branding guidelines, supporting tailored visual experiences and functional enhancements.

  • Template Extensibility Supports column and row templates for embedding custom components, applying conditional formatting, and creating rich, interactive visual layouts. Template logic can be used to integrate charts, buttons, or nested views within grid cells.

  • Aggregates Displays summary values such as totals, averages, minimums, and maximums using built-in aggregate functions. Aggregation logic can be customized to support analytical dashboards and reporting interfaces.

  • Interactivity Supports clickable headers, row selection, and keyboard navigation. Enhances engagement through responsive UI behavior and intuitive controls, suitable for complex data exploration scenarios.

  • Accessibility Compliant with WCAG 2.1 standards, ensuring compatibility with screen readers, keyboard navigation, and assistive technologies. Designed to meet accessibility requirements for public sector and regulated environments.

  • Globalization Adapts dates, numbers, currencies, and text formats for international audiences. Includes built-in support for localization and internationalization (i18n), enabling deployment across multilingual and multicultural platforms.

  • Robust API Provides a comprehensive and extensible API for programmatic control over grid behavior, data updates, and event handling. Supports integration with external systems, custom business logic, and advanced workflow automation.

Trusted by the world's leading companies Syncfusion logo

Setup

To install grid and its dependent packages, use the following command,

npm install @syncfusion/react-grid

Support

Product support is available through following mediums.

  • Support ticket - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support
  • Live chat

Changelog

Check the changelog here. Get minor improvements and bug fixes every week to stay up to date with frequent updates.

This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's EULA. To acquire a license for React UI components, you can purchase or start a free 30-day trial.

A free community license is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.

See LICENSE FILE for more info.

© Copyright 2025 Syncfusion®, Inc. All Rights Reserved. The Syncfusion® Essential® Studio license and copyright applies to this distribution.