We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback
What’s New in Syncfusion React UI Components

ESSENTIAL STUDIO 2022 VOLUME 4

What’s New in Syncfusion React UI Components

The React component suite receives a new Rating component, export capabilities in the Pivot Table, and shimmer loading placeholders in the Gantt Chart.

Common

New components

The following component has been added to React:

  • Rating

Preview to production-ready components

The following components have been developed to meet industry standards and are now marked production-ready:

  • AppBar
  • Floating Action Button (FAB)
  • Mention
  • Message
  • Speed Dial

Chart

Wrap data labels

Support to wrap text in data labels based on its size or when it overflows the container, in accumulation charts, has been added.

Data Label - Wrap in React Chart

Dashed legends

Provided support for dashed legends for dashed line series.

Dashed Legend in React Chart

Axis title rotation

Provided support to rotate the axis title from 0 to 360 degrees.

Axis title rotation in React Chart

Word Processor

Multi-column layout

This feature allows users to display the text in multiple-column layout in the Word Processor component. Using this feature, users can format documents in multiple columns like a newspaper.

Display the text in multiple-column layout in the React Word Processor.

Gantt Chart

Right to left (RTL)

Improve user experience and accessibility for those who work with RTL languages like Hebrew and Arabic, by switching the text direction and layout of the Gantt Chart component from right to left.

RTL in React Gantt Chart

Shimmer loading placeholder

Improve visualization while loading data by showing a placeholder in gantt chart cells until the data operation is completed. Find the demo link here.

Shimmer effect as loading indicator in React Gantt Chart

Grid

Lazy load group row expanding

The grouped items with n levels of data will be loaded on demand with virtual scrolling when the corresponding lazy load group row is expanded. The grouped items are loaded with virtual scrolling when that mode is enabled in the grid.

React Grid virtual scrolling with lazy load grouping

Add current selection option to filter checkbox

This feature keeps the previously selected checkbox filters when making additional changes. It is achieved by showing “Add current selection to filter” as one of the checkbox options in the Excel or checkbox filter.

React Grid add current selection option to filter checkbox

HeatMap

Single cell selection

The HeatMap now allows you to select one cell at a time. Each cell can be selected using the keyboard, mouse, or touch interface.

Single cell selection in React HeatMap

Image Editor

Color adjustment support

Provided color adjustment support with the following options:

  • Brightness
  • Contrast
  • Hue
  • Saturation
  • Opacity
  • Blur
  • Exposure

Filters support

Provided filter support to adjust the color of the image with the following optionsL

  • Default
  • Chrome
  • Cold
  • Warm
  • Grayscale
  • Sepia
  • Invert

PDF VIEWER

Render digital signatures

Now, the PDF Viewer component renders digital signatures in the existing PDF documents in a non-interactive way to avoid data loss while viewing. Its integrity is preserved if no editing operation is performed.

PDF document with digital signature in the  PDF Viewer

Form fields enhancement

Form field values can be exported to FDF, XFDF, and XML formats, and the same can be imported into the PDF Viewer, programmatically.

Pivot Table

Display sub-totals at the top/bottom of the group

Allows sub-totals to be displayed in the Pivot Table’s row and column axes at the top or bottom position in their group.

Display sub-totals at top or bottom position in React Pivot Table.

Single y-axis for multiple values

The provided support enables the pivot chart’s series for multiple measures to be drawn on a single y-axis rather than separate axes.

React Pivot Chart displays a single y-axis for multiple values.

Export table and chart in a single PDF document

This feature allows you to export both pivot table and pivot chart to a single PDF document.

Rating (Preview)

The React Rating component lets a user provide a star rating or view other people’s ratings in a numeric scale for any service or product.

Key features

  • Precision: Provide more accurate ratings with different precision options (full, half, quarter, exact).
  • Label: Express rating values with custom labels.
  • Tooltip: Guide users by displaying the current rated value in a tooltip on hover.
  • Template: Customize the rating star with any icon or template.

React Rating

Schedule

Custom workdays

This feature allows users to customize workdays when the resources are grouped by date. Find the demo link here.

React Scheduler custom workdays

Tree Grid

Load child records on-demand with virtualization

Lazy load child records with the virtualization feature enabled. Parent records in the current viewport are retrieved from remote services at initial rendering and child records are loaded on-demand when expanding parent rows. Find more details in the documentation here.

Shimmer loading placeholder

Improve visualization while loading data by showing a placeholder in tree grid cells until the data operation is completed. Find the demo link here.

Shimmer effect as loading indicator in React Tree Grid

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon