jQwidgets Grid with React Features
React is a light-weighted library, which is widely used for UI/UX designs of web pages. It provides one of the responsive and flexible grids which display the data in tabular form using jQWidgets.
This article covers the basic steps to create a jQWidgets grid for React using typescript.
Installation of React:
React is an interactive library which renders the right components while the data changes. To install React we will first need to install node.js 8.10 or later versions. Check for node.js and npm versions.
Create React App:
Using npm we will create an application for React as given below. This creates the folder structure and the directory called my-app. Once my-app is created, cd to my-app and type npm start. The project opens in http://localhost:3000.
The folder structure is as below:
Create a Simple jQWidgets Grid Component for React:
Once the required folders and files are created we will work on the settings and imports needed for jQWidgets grid component of React.
App.htm file:
We will add the below links to the </head> section of App.html page.
App.tsx file:
In App.tsx file we will first import jqxGrid from jqwidgets-react. This will provide the jqxGrid component created for React library. We will use a few CSS files for styling the grid.
Next, we will create the App class using jqxGrid, we will first construct the properties by setting the grid with source properties like data field, datatype, id, record, etc. Later we will set the state for this grid.
After you define all your properties and state to the grid we will render this component using the `render()`. Once you run this sample example your grid would look like below.
Grid Features for React:
jQWidgets Data Grid for React is built for professional use with features like sorting, filtering, grouping, paging, editing, drag-drop, nested grids, etc. Before we will look into how to enable these features for better user experience, we need to add bundle.js files for respective features in App.html eg: adding bundle files for sorting in App.htm file
Sorting:
The sortable property enables or disables the data sorting. In the code example below, the Grid data sorting is enabled:
To enable or disable the sorting of a Grid column, you can set its sortable property to false. Also when the sorting data type is Date, Number or Boolean, the ‘type’ property in the ‘datafield’ array should be set.
The ‘sortcolumn’ property specifies the default Grid sort column, i.e. when the grid is displayed, the data will be sorted. The ‘sortdirection’ property specifies the sort order of the sort column.
The “sortby” function can be used to sort the Grid through the API. This function should be called when the grid data is fully loaded. The first parameter is the Column’s DataField. The second parameter is the sort order — ‘asc’ or ‘desc’.
Filtering:
To enable the filtering feature, you need to set the ‘filterable’ property to true. When the value of the filterable property is true, the grid displays a filtering panel in the columns popup menus. Filtering can be done in background or can be customized.
Grid Grouping:
The jqxGrid component supports data grouping against one or more columns. Grouping is allowed if the ‘groupable’ property is set to true. End-users can group data by dragging the column headers to the Group Panel.
The code example below shows a Grid template with one grouping column:
Grid Paging:
The built-in paging capability gives an additional edge to display a large amount of data in tabular format. The `pageable` property is set to true, to make the paging available.
Pagechanged or pagesizechanged events are raised when the page is changed or page size is changed.
The grid paging also displays the drop-down list component in the pager area. By default, the size options are 5, 10 and 20. The “pager” property enables you to set different modes to display the pagination for a grid. You have two modes for “pager” settings, default and simple.
Grid Cell Editing:
Grid cell editing is one of the important features for interactiveness of the grid. This feature resembles the data entering experience in an Excel Spreadsheet — once you select a grid cell, you can enter data when you start typing text. The Grid’s ‘editable’ property specifies whether the editing is enabled or not.
The Grid has APIs for showing and hiding the cell editors. The ‘cellBeginEditEvent’ method allows you to put a specific cell into edit mode.
The ‘cellEndEditEvent’ method ends the edit operation and confirms or cancels the changes.
To confirm the edit mode, we will have to press the `Esc` key. The grid can be customized to display the validation popup message when the new cell’s value is not valid for any column or grid.
Summary:
jQWidgets grid for React is a very flexible and powerful tool to allow you to add lots of data with multiple pages. This article demonstrates the basic steps to create the jQWidgets grid for React using typescript. We have also discussed a few interactive features which are basic and are needed for UI of any website. There are a lot more features of the grid, you will have to explore a bit of these features and use the best needed for the UI/ UX design of your page.
