As you may already know - our JavaScript product line includes support for a variety of development
frameworks including Angular, Vue, jQuery, and yes, React.
In this short video, I'll discuss our React Grid component - a feature-rich native React
UI library.
DevExtreme React Grid was built from the ground up using React best practices.
It fully leverages Material-UI and Bootstrap React libraries and offers plugin-based extensibility
and customization.
Simply said, its intuitive UX make it the best choice for those targeting React and
Material-UI or Bootstrap.
As you'll soon see, our React Grid component ships with a comprehensive suite of built-in
data editing, data filtering, and data shaping options...all designed to help you deliver
high-performance web apps in the shortest possible timeframe.
With that brief introduction, let's get into the demo and review our Grid's UI elements
and data management capabilities.
The DevExtreme React Grid allows you to visualize and manage a variety of datasets - from small
local arrays to large remote data sources.
It also supports tree-based data structures and can be rendered as both a Grid and a hierarchical
TreeList.
Our React Grid ships with Virtual Data Scrolling support - when this option is enabled, you
and your end-users can load and scroll thousands of records without any performance degradation.
If you prefer, you can use the grid's built-in data paging option to navigate your dataset
instead.
To manage data types, DevExtreme React Grid ships with a powerful "DataType Provider"
engine.
Our DataType Provider can automatically apply display formatting and set a column's cell
editor.
If you prefer, you can declare your own data types and apply custom display and editing
options when needed.
In this demo app, we're using standard text, date, currency, and Boolean data types.
Since this is a hotel management app, we've also created a custom "room" data type.
DevExtreme React Grid allows you to sort data against an unlimited number of columns.
As you'd expect, column clicks initiate sort operations.
To sort against multiple columns, you simply hold down the Shift or Ctrl key - CMD on Macs
- when clicking column headers.
Of course, sort order can also be applied in code when necessary.
Our React Grid fully support data or record grouping.
End-users can group records via drag & drop and once data is grouped, they can sort information
within groups.
If targeting mobile devices, you can enable our built-in record grouping buttons to improve
usability on small devices.
Like sort operations, you can manage record grouping in code and of course, you can allow
users to group data against multiple columns.
Our React Grid ships with integrated search and data filtering support.
It includes a built-in search panel that can be used to locate values within all columns.
For instance, I can enter "stand" within the search box and our grid will locate all "standard"
room types.
The search panel is intuitive and super easy to use.
For more fine-grain control, you can use the React Grid's Filter Row instead.
The Filter Row allows you or your users to specify filter conditions and filter criteria
for each column individually.
As you'd expect, our Grid allows you to select records with ease.
The record selection checkbox can be used to select/deselect all rows simultaneously
or you can select individual rows as needed.
Once you've selected the appropriate record, you can export contents to Excel.
To initiate export operations, simply click the save icon in the upper right corner of
the grid control.
Note that our built-in Export feature includes menu items for all rows or only those selected
within the grid.
Ok, I've shown you some of the basics - let me turn my attention to a few features designed
to significantly improve both usability and overall appearance.
First, note the down arrow to the left of the Check In column.
When used, this arrow displays a panel with additional information for each grid row.
We call this a Detail Row - a great way to reduce the number of visible columns and retain
a more compact grid layout.
As you can see here, we're using the Detail Row to display customer information for each
individual room reservation.
Very cool.
The DevExtreme React Grid allows you to calculate summary values on the fly and apply the desired
aggregate function with ease.
We ship multiple predefined aggregate types, including sum, max, min, average and count.
Of course, you are free to implement your own summary calculation algorithm when necessary.
Summary values for all rows are displayed at the bottom of the Data Grid within its
Summary Row.
Summary values can also be displayed within the group row if data grouping has been applied
to the contents of the grid.
Our Grid also includes built-in column customization options.
By using our Column chooser, end-users can display or hide columns as needed.
You can also fix important columns on the left or right side of the Data Grid.
With this option, a column will always remain visible, regardless of horizontal scroll position.
OK - we're almost done - a couple of other features to note before I wrap up.
If a column occupies too much space, you can easily resize column width by dragging its
Resize Handle.
Column order can also be modified as needed.
Simply use drag & drop to move columns around when desired.
Our React grid fully supports CRUD operations and ships with numerous editing related options.
You can add, delete and modify data records with ease.
For instance, to delete a record, simply click the Delete button for a given Grid row.
To insert a new record, simply click the New button at the top of the Grid.
DevExtreme React Grid allows you to edit data via its built-in editing row or via inline
cell editing.
In the former, an entire row is made editable and a user commits changes manually.
In the latter, a user modifies values by selecting the appropriate cell and editing content directly.
Once modified, the cell's value is saved automatically when the cell lose focus.
Ok - I think I'll wrap up here.
I hope you liked this brief UI overview of our React Data Grid.
I'll have more React-specific videos to share in the coming weeks.
In the meantime, if you'd like to learn more about our React product line, point your browser
to js.devexpress.com.
Should you have questions, feel free to comment below.
Oh, and don't forget to subscribe to this channel for more great DevExpress videos.