What's New in Syncfusion^® React Components

Common

Theme improvements

• The theming experience has been enhanced to provide a more modular and streamlined approach. Updated theme packages offer both consolidated and component-level styles, with dedicated entry points (index.css/index.scss) that automatically resolve dependencies.
• Additionally, the theming system has been upgraded to the latest Sass version 1.100.0, improving compatibility and providing a more consistent styling workflow across applications. SCSS styling is now standardized through centralized theme packages. SCSS files are no longer supported within individual component packages or the EJ2 combined package, enabling a more structured and maintainable approach to styling.

Production-ready component

The following component has been developed to meet industry standards and is now marked as production-ready for React:

• Sankey Diagram: A powerful visualization tool for understanding flows and relationships within complex systems. It uses interconnected nodes and weighted links to clearly show how quantities move and transform across stages.

Pure React

Common

New components

New Menu and Switch components have been added to the Pure React component suite. These components are implemented entirely using React functional components and hooks, ensuring smooth integration with the React ecosystem.

Production-ready components

The following Pure React components are production-ready:

• Chart
• DataGrid
• ListView
• Buttons: Button, ChipList, Chip, Floating Action Button, Radio Button, Split Button, Dropdown Button.
• Calendars: Calendar, DatePicker, TimePicker, DateTime Picker, DateRangePicker.
• Dropdowns: Autocomplete, ComboBox, Dropdown List, MultiSelect.
• Inputs: Checkbox, Form, Numeric Textbox, TextArea, TextBox.
• Navigation: Toolbar, Context Menu.
• Notifications: Message, Skeleton, Toast, Spinner.
• Layout: Tooltip, Dialog.

Theme support

Tailwind and Bootstrap themes have been added for Pure React components. Developers can apply these themes to components to match their projects’ design.

Inputs

Adornments

The input and input-related components, including pickers and dropdowns, now have adornments. Adornments support leading or trailing icons and action buttons.

Helper text

Helper text allows concise description or validation messages beneath the input field. Helper text lets templating and the custom aligning of messages be accessible to screen readers.

Mouse wheel

The Numeric Textbox component supports mouse-wheel interactions to increment or decrement values when the component is in focus.

Calendar

Islamic calendar

The Calendar includes built-in Islamic calendar support, enabling regional calendar systems and correct date calculations for Islamic dates.

Mask input

Mask support has been added to the DatePicker, DateTime Picker, TimePicker, and DateRangePicker components. The mask feature enforces input formats, shows configurable placeholders, and is location-aware. Masks are compatible with keyboards and screen readers and can be customized via component props.

DataGrid

Grouping

Group rows by column values to simplify large datasets into logical sections. Expand or collapse groups to focus on relevant details and streamline analysis.

Master-detail template

Display hierarchical data with expandable detail rows for deeper insights. Templates allow customization to show related records, charts, or nested grids.

Context menus

Right-click menus provide instant access to grid actions such as edit, delete, and sort. They’re fully customizable to align with application workflows and user preferences.

Print

Print grid content with preserved formatting, headers, and styles for professional reports. The output remains consistent across browsers and devices, ensuring a reliable presentation.

PDF exporting

Export grid data to PDF with layout accuracy, preserving styles and headers. Share polished reports with reliable formatting.

Infinite scrolling

Load large datasets seamlessly as users scroll, eliminating the need for pagination. Optimized rendering ensures smooth performance even with millions of rows.

Cell selection

Select individual cells or ranges using keyboard and mouse interactions. This feature supports advanced data manipulation scenarios for flexible workflows.

Condition selection

Highlight or select rows dynamically based on data values and business rules. This provides flexible control over how records are emphasized or prioritized within the grid.

Row and column spanning

Merge cells across rows or columns when the same data appears continuously. This feature creates a cleaner layout that improves readability and the presentation of repeated values.

Column chooser

Dynamically show or hide grid columns using the column chooser dialog UI. The interactive interface provides the flexibility to configure grid views to meet business requirements.

Cell edits

The DataGrid provides a seamless inline editing experience. Users can quickly update individual cell values directly in the grid, with programmatic control.

Chart

Stacked and 100% stacked line series

Visualize cumulative values across categories. Stacking groups and percentage normalization provide clear representation of proportional contributions.

Range and stacked step area series

Users can visualize data by step. These series display both range-based variations and stacked transitions effectively.

Box and whisker series

Box and whisker plots display the distribution of statistical data, including the minimum, maximum, median, quartiles, and outliers.

Cylindrical column and bar series

Cylindrical rendering uses column and bar series to provide a visually enhanced, 3D-like appearance.

Polar and radar series

Polar and radar chart types display multivariate data in a circular layout, making comparison and analysis more intuitive.

Technical indicators

Built-in financial indicators such as ATR, RSI, MACD, Bollinger Bands, SMA, EMA, and Stochastic enable advanced trend analysis and financial visualization.

Scrollbars

Integrated scrollbars enable efficient navigation across large datasets, ensuring smooth interaction and seamless coordination with zooming.

Series labels

Display each series name directly in the chart area to improve readability when multiple series are rendered.

Last-value labels

Last-value labels display the final data point for each series with customizable formatting.

No-data template

A no-data template displays a customizable message or UI when the data source is empty.

Range color mapping

Range color mapping uses color variations based on value ranges or conditions to highlight patterns and improve data interpretation.

Multilevel labels

Display hierarchical axis labels across multiple levels, enabling better grouping and improved readability of categorical data.

AI AssistView

Regenerate responses with navigation

The AI AssistView supports response regeneration, generating multiple alternative responses for a single prompt. Navigation arrows enable seamless browsing between generated responses without re-entering the prompt, enhancing exploration of different AI-generated solutions and reducing redundant prompt submissions.

Text-to-speech for responses

The integrated text-to-speech functionality speaks AI-generated responses hands-free, enabling developers to utilize AI-generated content while multitasking.

Generative UI with interactive tools

This feature enables generative UI, allowing interactive UI tools to be dynamically generated directly within AI responses. By configuring an appropriate system prompt, the AI can invoke registered tools, seamlessly integrating dynamic and interactive UI elements into responses.

AI chain-of-thoughts

The AI AssistView now displays the AI’s chain-of-thought process before generating responses. It provides transparency into the AI model’s reasoning steps, helping explain how conclusions were reached and enabling verification of the logical flow of AI-generated solutions.

Accumulation Chart

Nested doughnut (multi-level)

The multi-series pie chart displays multiple datasets as concentric rings within a single chart. This makes it easier to compare data and understand hierarchical relationships. Cross-series legend grouping with the mappingKey feature allows similar categories to be combined into a single legend item, enabling unified interaction across all matching slices. Each series operates independently, supporting tooltips, data labels, highlighting, and selection. Find the demo link here.

Chart

Inline DateTime and number formatting in tooltip

Inline DateTime and number formatting within tooltip format strings enables values to be displayed more clearly and readably, such as formatting dates (MMM yyyy, MM:yy) and numbers (n2, c2, n0). This handles invalid formats or values without affecting rendering or template behavior.

DataGrid

DOM virtualization

DOM virtualization efficiently handles large datasets by rendering only the visible rows with a buffer. This reduces memory usage and ensures smooth scrolling.

Cell edits

The DataGrid provides a seamless inline editing experience. In addition to row-level editing, users can update individual cell values directly within the grid, with support for programmatic control.

Undo and redo for batch editing

This feature allows users to easily undo and redo batch editing, helping them correct mistakes quickly.

Show or hide columns with immediate mode

Columns can be shown or hidden dynamically with immediate mode, improving flexibility in data presentation.

Excel and checkbox filters with immediate mode

Filtering actions are applied instantly without additional confirmation with immediate mode, making data exploration faster and more intuitive.

Pivot Table

Built-in CRUD operations for seamless data management

The Syncfusion Pivot Table now supports native create, read, update, and delete (CRUD) operations with configurable, server-side controller endpoints. This enables efficient data editing directly within the Pivot Table, simplifies back-end integration, and eliminates the need for custom CRUD implementations. It is ideal for applications that require dynamic data updates and real-time synchronization.

Advanced top and bottom value filtering

Gain deeper insights with Top N and Bottom N filtering in pivot tables. This feature, available through both APIs and the runtime UI, allows users to filter and analyze high-performing or low-performing data points quickly. It enhances decision-making by helping users focus on the most critical values in large datasets.

Append current selection to existing filters

Improve filtering efficiency with incremental, Excel-like filtering capabilities. Users can now add the current selection to existing filters without clearing previously applied conditions. This makes multi-member filtering more intuitive and significantly enhances interactive data exploration.

Percentage of running totals aggregation type

The Pivot Table now supports percentage of running totals as an aggregation type. This allows users to view cumulative values as percentages, making it easier to analyze trends, measure contribution over time, and understand data progression.

Repeat item labels in classic pivot table layout

Enhance readability and reporting clarity with repeating row item labels in a classic pivot table layout. They provide consistent formatting across the UI and exported reports, making it easier to interpret large and complex datasets in both digital and printed formats.

Range Selector

New series types

Range Selector supports spline, spline area, and column series types, expanding the visualization options for range-based data selection. Spline displays smoother trend lines, spline area emphasizes variations over a continuous range, and column represents values as distinct vertical bars within the navigator.

This enhancement provides greater flexibility for building financial dashboards, analytical reports, and time-series applications, helping users interpret data more effectively through the most suitable visual representation.

Stock Chart

Indicator events

Indicator events in Stock Charts enable users to detect and control add and remove operations triggered through the built-in toolbar. The before indicator change event allows canceling an indicator mutation before it is applied, while the indicator changed event is triggered after a successful indicator update.