How to Implement a React Data Grid – Getting Started with the KendoReact Grid

The Data Grid is a fundamental UI component used in most business applications. Learn how to get started with the KendoReact Data Grid and how to implement some of its most used features.

In this video, you’ll find an example of how to implement the KendoReact Grid and how to work the following features:
- Theming and styling
- Paging
- Filtering

The React Data Grid has numerous other features, such as:
- Editing
- Grouping
- Sorting
- Virtualization
- Export to Excel & PDF
- Accessibility
- Globalization
- And many more!

Presenter:
TJ VanToll, KendoReact Developer Advocate

About the KendoReact UI Library:
KendoReact is a commercial UI library designed and built for developing business applications with React. Every UI component in the KendoReact suite has been built from the ground-up specifically for React.

All KendoReact components are distributed through npm packages. Please keep in mind that in order to use the npm packages you should either sign up for a 30-day free trial or be a licensed developer. The trial also grants free access to our outstanding technical support.

The KendoReact library contains UI components that range from advanced components including the data grid, charts and gauges, rich text editor, and scheduler – to form elements such as date pickers, dropdowns, and various inputs. There are also helper libraries such as PDF and Excel processing packages.

All components in KendoReact are fully accessible and come with compliance for WCAG 2.0, Section 508, and WAI-ARIA accessibility
standards.

#React #ReactDataGrid #Tutorial

[davidthilak]

If you could create a video demo of Editing the grid that would be helpful

[harshitbagla]

The <Grid> tag is unable to display data. Can you help me with that?

[snoopxd_]

When using nextJS + KendoUI for the grid component, the grid column headers take the name of the Json column names and not title names?

[sravanimaragani]

How to create the placeholder when use the drop-down inside field tag.

[sayaleemandaokar]

How to navigate to other page on click of any cell in KendoReactGrid?

[origamiandcats]

Paging, sorting and filtering doesn't handle null values. The components don't check if data exists so if you have the nulls sorted so they are on the last page, you get an error when you paginate to the end. I had to manage the filtering and reset the sorting for that column when the filter "isnull" is being used.

I have been tasked to evaluate this tool and I will probably suggest we go with something else.

[zokymasa]

Max Verstappen tutoring Data Grids...not bad :D

[parhamd]

perfect ty for create this video Really helpful to me Corona is really dangerous, take care of your health🙏🙌❤

[vwneink]

Are these instructions outdated? Using process always results in no data being returned.

[lloyd]

i think you should have started with demo