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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback


Define Columns in React Data Grid.

Define columns

You can define the needed columns explicitly in a Data Grid. You can also enhance the appearance of columns by setting the header text, text alignment, cell value format, and width.


Auto generate columns

When the column collection is not specified, Data Grid will create columns’ definition for the users by creating column object from the data source.

Auto generate columns in React Data Grid.


Auto size in React Data Grid.

Auto size

Users can interactively auto size column width to show its full content by double clicking on column borders. Data Grid also supports triggering auto sizing to the required columns programmatically.


Cell attributes

Users can decorate each cell element of the Data Grid with their own attributes by customizing styles, adding additional class names, etc.

Cell Attributes in React Data Grid.


Text wrap using in React Data Grid.

Text wrap

Wraps the Data Grid cell text to the next line when it is too large to fit a cell. Users can wrap the header or content cell`s text by setting the available wrap mode options.


Column chooser

The column chooser provides a list of column names paired with check boxes that allows the user to toggle visibility on the fly. This helps the users to control the column visibility through an interactive UI.

Choose visible columns using column chooser in React Data Grid.


Reorder columns in React Data Grid.

Reorder

Reorder Data Grid columns either through user interaction or programmatically. Simply dragging a column header to the desired column position will reorder the columns of a Data Grid.


Resize

Column resize allows changing the column width on the fly by simply dragging the right corner of the column header. A scroll bar appears when the Data Grid content width exceeds the element width.

Resize column width in the React Data Grid.


Column menu in React Data Grid.

Column menu

Allows performing various column-based actions with the help of Data Grid column menu. Menu items can also be customized to list only the preferred actions.


Freeze

Frozen rows and columns provide an option to make rows and columns always visible at the top and left side of the grid while scrolling. It is mainly used to compare the cell values.

Freeze rows and columns in React Data Grid.


Cell spanning in React Data Grid.

Column spanning

Span the adjacent Data Grid cells based on the preferred criteria.


Foreign data source

It is possible to show values from external or lookup data sources in a column based on foreign key/value name. Allows all Data Grid actions like sorting, filtering, editing, grouping, and other operations in the foreign data column.

Foreign key column with look-up data in React Data Grid.


Custom value getter using value accessor in React Data Grid.

Value accessors

The value accessors specify how the cell value is to be retrieved from the data. The preferred value accessors can be used when the row data is not just a simple object.


Cell styling

Data Grid cell styles can be customized either by using CSS or programmatically.

Cell styling in React Data Grid.


65+ REACT UI COMPONENTS

Scroll up 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