Getting Started with the React DataGrid Component
HTML-код
- Опубликовано: 30 сен 2019
- 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: github.com/SyncfusionExamples...
REACT DATAGRID
------------------
Product overview: bit.ly/2nxdkBE
Examples: bit.ly/2oTLobx
Documentation: bit.ly/2oWM8wx
Download free trial: bit.ly/2mCVGfp
GitHub source: bit.ly/2mE6Kcl
npmjs package: bit.ly/2oTHHTc
SUBSCRIBE
----------
Syncfusion on RUclips: bit.ly/syncfusionyoutube
Sign up to receive email updates: bit.ly/syncfusionemail
SOCIAL COMMUNITY
-------------
Facebook: / syncfusion
Twitter: / syncfusion
LinkedIn: / 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: cdn.syncfusion.com/ej2/materi....
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: ej2.syncfusion.com/react/docu....
7. The features of the React DataGrid component are segregated into a number of modules which can be referenced from this documentation page: ej2.syncfusion.com/react/docu.... 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 
Хобби
![Finesse2Tymes - Pretty Ricky [Official Music Video]](http://i.ytimg.com/vi/xIoP_mhYRT0/mqdefault.jpg)
Amazing video. Thank you so much.
Thank you! We're glad you found the video helpful!
Thank you so much for the video it's has helped me big time
We're glad it helped.
Well presented!
Thank you!
Thank you, great video, I have a question, Is there a way to put two data source fields in field property?
We are unclear about your exact requirement. So, please explain this briefly with appropriate image/video representation to validate further.
Hi, man! It helped me a lot, but I just wanna know if there is a way to use a javascript object as a data source instead of a JSON file. I'm trying by creating the same structure as it is in this JSON file used in this video, but no success yet.
We have shared a simple sample with Javascript Object array as dataSource. Please see the below sample and ensure that you are using the valid json or Object format.
Sample: stackblitz.com/edit/react-localdata?file=index.js
Hi I wanted to know that how can we implement infinite scrolling in react-data-grid similar like excel?
We would like to, let you know that, infinite scrolling can be enabled in the Grid by setting the enableInfiniteScrolling property as true. This feature works like the lazy loading concept, which means the buffer data is loaded only when the scrollbar reaches the end of the scroller. In this feature, the Grid will not make a new data request when you visit the same page again.
We have prepared a sample based on this for reference. You can find it below,
Sample: stackblitz.com/edit/react-sk2qv1-szeb91?file=index.js
Please refer to the below documentation link for more details on infinite scrolling in the Grid,
Documentation: ej2.syncfusion.com/react/documentation/grid/infinite-scroll/
What about bigger data can we display them with this ?
Hello Ankit,
Thanks for checking out our video! You can load large datasets with this tool. We recommend checking out the following pages to help get you started:
ej2.syncfusion.com/react/documentation/grid/virtual/
ej2.syncfusion.com/react/documentation/grid/infinite-scroll/
Please let us know if we can be of further assistance.
Context:
[ ] "@syncfusion/ej2-react-grids": "^22.2.10",
[ ] "react": "^18.2.0",
[ ] "react-dom": "^18.2.0"
Clearing the string in a given filter input field automatically refreshes the table only by pressing the ENTER key, but not by pressing the x symbol to the right of that field. Any idea why?
Thank you.
Hi,
Thank you for reaching out. By default, the x symbol in the input element is used to clear the values in the input element. Hence, when you click on the x symbol, it clears the input element and the user can type another keyword to filter on the go, without waiting for the filter to be cleared and the grid refreshes.
@@SyncfusionInc Thank you.
Can you please help me? I am unable to show tooltip on React Grid. I need help on js or jsx (not .tsx) functional component. This Link shows only on .tsx ( ej2.syncfusion.com/react/documentation/grid/how-to/custom-tool-tip-for-columns/ )
You can show the tooltip on React Data Grid. For that, we have prepared sample and attached the sample so please refer the sample for your reference.
Sample Link: stackblitz.com/edit/react-t64b7e-kwphty?file=index.js
Hi, When use Search Toolbar the records not display, I copied this example: stackblitz.com/edit/react-8pnynx?file=index.js
Please Help me
The reported issue is not reproduced in the latest version(v18.3.44) so kindly use the above version. Please refer the below sample for your reference.
Sample: stackblitz.com/edit/react-vagiyz-nwgo7b?file=package.json
is the grid part completely free for react?
Hello Aashiq Ahmed,
Our paid and free versions both have the same features and support. You can check here to see if you qualify for our Community (free) license. It's available for companies with 5 or fewer developers and less than $1 Mil USD in annual revenue.
bit.ly/395t17c
@@SyncfusionInc then what version is this explaned in this video, the npm cli ejs gridPKG comes with all the features right?
Hello Aashiq,
That's a great question. Both our free and paid licenses have the same features and components. This video shows what you can do with either license.
Can i use next js instead of react js
bro??
Yes, you can render EJ2 React DataGrid in nextjs. Please find the attached code example, command, and sample for more information.
import { render } from 'react-dom';
import * as React from 'react';
import { ColumnDirective, ColumnsDirective, Filter, GridComponent, Group } from '@syncfusion/ej2-react-grids';
import { Inject, Page } from '@syncfusion/ej2-react-grids';
import { data } from './datasource';
export class Default extends React.Component {
render() {
return (
. . .
);
}
}
export default Default;
“npm install” command to install the required packages
“npm run dev” command to launch the application in the browser.
www.syncfusion.com/downloads/support/directtrac/general/ze/GridNextjs434867143.zip
Is this free to use?
Hi,
You can either try our 30-day free trial bit.ly/2Uo3YHD or else you can also check our Community License, which provides free access to all the Syncfusion products for individual developers and small businesses www.syncfusion.com/products/communitylicense
Please let us know, if you have any questions.
Is sorting possible?
Yes, sorting is possible in our React Data Grid and you can refer it from this documentation: ej2.syncfusion.com/react/documentation/grid/sorting/ and demo link: ej2.syncfusion.com/react/demos/#/material/grid/sorting
Well this responses came late, I built my own data table. Thanks
Is this product free???
Hello Amanuel Girma,
Our paid and free versions both have the same features and support. You can check here to see if you qualify for our Community (free) license. It's available for companies with 5 or fewer developers and less than $1 Mil USD in annual revenue.
bit.ly/395t17c
@@SyncfusionInc Thank you very much! That's so exciting!!