Edit Types in React Data Grid

The Syncfusion® React Data Grid component uses the edit.type property to assign editors based on column data types, streamlining input handling and customization. Default editors are automatically applied for common data types such as text, number, date, and boolean. The supported edit types are listed below.

Edit Type Value	Description
EditType.TextBox	Renders a TextBox component for string data type columns.
EditType.NumericTextBox	Renders a NumericTextBox component for numeric data types (e.g., integers, doubles, floats, shorts, bytes, longs, long doubles, decimals).
EditType.DropDownList	Renders a DropDownList component for string data type columns with predefined options.
EditType.CheckBox	Renders a CheckBox component for boolean data type columns.
EditType.DatePicker	Renders a DatePicker component for date type columns.

To configure edit types, use the edit.type property within the column configuration. This enables customized data input based on column data types.

When edit.type is not defined, the grid defaults to EditType.TextBox type, rendering a TextBox component for the column.

TextBox Editor

The EditType.TextBox type uses the Syncfusion® React TextBox component for editing string data. The textbox can be customized using the edit.params property, which supports attributes such as clearButton, placeholder, and other textbox-specific properties.

Placeholder and its position

The following example demonstrates adding a placeholder and positioning it with labelMode for the "Employee Name" column.

NumericTextBox Editor

The EditType.NumericTextBox type uses the Syncfusion® React NumericTextBox component for editing numeric data. The numeric textbox can be customized using the edit.params property, which supports attributes such as decimals, format, spinButton, and other numeric textbox specific properties.

In the following example, the NumericTextBox component used to edit the "Units Sold" column. It uses the format "N1", with a minimum value of "1" and a maximum value of "1000".

Restricting decimal points in NumericTextBox

The Data Grid component restricts decimal input in the NumericTextBox during editing by using the edit.params property. Setting validateOnType to true prevents decimal input while typing, and decimals to "0" ensures only whole numbers are displayed. Disabling spin buttons through the spinButton property provides additional control. This configuration is applied to the "Price" column for precise numeric input.

DropDownList Editor

The EditType.DropDownList type uses the Syncfusion® React DropDownList component for editing string data with predefined values.

Popup customization

The following example demonstrates popup height customization through the edit.params property for the "Ship Country" column.

CheckBox Editor

The EditType.CheckBox type uses the Syncfusion® React CheckBox component for editing boolean data. The checkbox can be customized using the edit.params property, which supports attributes such as label, color and other checkbox specific properties.

Color customization

The following example demonstrates customizing the color of the checkbox for the "Item Availability" column.

DatePicker Editor

The EditType.DatePicker type uses the Syncfusion® React DatePicker component for editing date data. The datepicker can be customized using the edit.params property, which supports attributes such as minDate, maxDate, format, placeholder and other datepicker specific properties.

Configuring date ranges

The following example demonstrates setting minDate to "January" and maxDate to "February" for the "Booking Date" column, and minDate to "March" and maxDate to "April" for the "Appointment Date" column.

Change the format of date value

The following example demonstrates adding placeholder and format for the "Booking Date" and "Appointment Date" columns using edit.params property.