Getting Started with the React DataGrid Component

Learn how easily you can create and configure the React DataGrid from Syncfusion using the "create-react-app" toolchain. In this video, I’ll create a new React application using the create-react-app toolchain and then add the React DataGrid by Syncfusion into it using the ej2-react-grids package. Also, I’ll explain the simple customization that can be done on grid columns, as well as how to enable some important features such as paging, sorting, filtering, and grouping.

Download the working example from GitHub: https://github.com/SyncfusionExamples/getting-started-with-react-data-grid-by-syncfusion

REACT DATAGRID
------------------
Product overview: http://bit.ly/2nxdkBE
Examples: http://bit.ly/2oTLobx
Documentation: http://bit.ly/2oWM8wx
Download free trial: http://bit.ly/2mCVGfp
GitHub source: http://bit.ly/2mE6Kcl
npmjs package: http://bit.ly/2oTHHTc

SUBSCRIBE
----------
Syncfusion on YouTube: http://bit.ly/syncfusionyoutube
Sign up to receive email updates: http://bit.ly/syncfusionemail

SOCIAL COMMUNITY
-------------
Facebook: https://www.facebook.com/Syncfusion/
Twitter: https://twitter.com/Syncfusion
LinkedIn: https://www.linkedin.com/company/syncfusion

TRANSCRIPT REFERENCE
--------------
1. Before you start to work with React applications, make sure that you have the compatible versions of React and TypeScript on your machine:
• React: 15.5.4 and above
• Typescript: 2.6 and above
Also, use any text editor like VS Code to edit the application code and use any supported web browsers to view the output.

2. Create a new React application using the command “create-react-app my-app –scripts-version=react-scripts-ts” and install its necessary packages using the “npm install” command. To integrate the React DataGrid into this newly created React application, install the Grid component package by Syncfusion into it using the command “npm install -g @syncfusion/ej2-react-grids”.
3. Import the GridComponent from ‘@syncfusion/ej2-react-grids’ package and then return the empty GridComponent within the render method.
4. In the App.css file, import the Material theme from the following CDN link to apply the CSS theme styling to the ReactData Grid: https://cdn.syncfusion.com/ej2/material.css.
5. Now, the grid will not display on the output page due to the empty dataSource. So, let’s define the data for the React DataGrid with a collection of JSON objects and assign it to its dataSource property.
6. Import the ColumnsDirective and ColumnDirective from ej2-react-grids package to start customizing each column of the React DataGrid. Use the “headerText” property to change the header text value, the “textAlign” property to align the column text, and the “width” property to set the width of specific columns. For further information on customizing columns, refer to the following documentation page: https://ej2.syncfusion.com/react/documentation/grid/columns/?no-cache=1.
7. The features of the React DataGrid component are segregated into a number of modules which can be referenced from this documentation page: https://ej2.syncfusion.com/react/documentation/grid/module/. To use any of the specific features like paging, filtering, or grouping, import the appropriate feature modules from the ej2-react-grids package and then inject them into the DataGrid component as well.
8. Check [05:33] to learn how to enable the paging feature in the React DataGrid.
9. Refer to [06:39] to learn how to start working with the filtering options of the React DataGrid.
10. Check [07:06] to learn how to group the DataGrid records based on a single column or multiple columns.

#datagrid #reactdatagrid #reactdatatable