React Data Grid - Tutorial Videos

Learn how easily you can create and configure the React Data Grid 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 Data Grid by Syncfusion into it using the ej2-react-grids package. Also, I'll explain the simple customizations that can be done on grid columns, as well as how to enable some important features such as paging, filtering, and grouping.

Download Example: Getting Started with the React Data Grid

Wondering how to bind external data to the React Data Grid? On this episode of React Data Grid, you will see how to bind the React Data Grid with local JSON and remote data using the Data Manager and AJAX libraries.

Download Example: Bind Data to the React Data Grid

In this episode of React Data Grid, you will see how to enable editing. I'll show you different built-in editing types like text box, numeric text box, drop-down list, and date picker. You'll learn how to add custom components to the cell editing types. You'll also learn about the different editing modes, such as normal, batch, and dialog. Finally, you'll see how to add your own custom template for the dialog editing mode.

Download Example: Cell Editing Modes in the React Data Grid

Learn how to perform server-side CRUD operations in the React Data Grid component. This video demonstrates how to create a simple mock server using ExpressJS, and how to create endpoints for communicating with the React Data Grid, including getting data as well as inserting, deleting, and updating records. Finally, you will also learn how to bind the server endpoints to the data manager and handle CRUD operations on the server side.

Learn how to perform server-side CRUD operations in the React Data Grid using Fetch API and client-side events of React Grid. In this video, you will see how to create REST APIs using the Express server and call the endpoints to a custom service using the Fetch API. Finally, learn how to bind the custom service with the React Data Grid using the dataSourceChanged event.

Download Example: Perform CRUD Using the Fetch API and React Data Grid Events

Learn how to enable and work with the different filtering options of React Data Grid. Also, see how to filter diacritic characters with various filter options. In this video, you will learn how to enable different types of filter UI designs like inline, menu, checkboxes and Excel-like filter template. Finally, you will also learn how to add custom components to the inline filer menu of the React Data Grid.

Download Example: Work with Filtering Options in the React Data Grid

Learn the different options available in Grouping and Aggregate features of React Data Grid by Syncfusion. In this video, you will see how to enable Grouping and apply it on Grid's initial render. You will also see different built-in Aggregates and how to add them to the footer of a Data Grid. Additionally, you will also learn how to create and display custom Aggregates and Group Aggregates on the React Data Grid.

Download Example: Grouping and Aggregates in the React Data Grid

Exporting Data Grid to PDF or Excel is simple using Syncfusion EJ2 React Data Grid. Easily export to PDF or Excel with complete customization in a few lines of code. Customization options include adding a header and footer, exporting the current page of the Data Grid, custom themes, and more.

Download Example: Export the React Data Grid with Customization

Learn about different cell selection types and modes in the Syncfusion React Data Grid. In this video, you will learn how to enable cell selection and check box selection and how to perform toggle selection. You will also see how to select a row on initial rendering and get the selected row indexes.

Download Example: Cell and Checkbox Selection in the React Data Grid

Learn how easily you can customize rows and columns in the Syncfusion React Data Grid. In this video, you will learn how to apply custom templates to the rows and columns and how to customize a grid cell based on specific cell values. You will also see how to render conditional templates based on specific conditions.

Download Example: Customize Cells in the React Data Grid with Templates

This video demonstrates how to enable the adaptive UI layout in the Syncfusion React DataGrid component through supported row render modes: horizontal row rendering and vertical row rendering.

This video demonstrates how to perform sorting in the Syncfusion React DataGrid component and explains sorting in initial rendering, multicolumn sorting, and custom sorting.