React DataGrid - Getting Started (2024)

The DataGrid component can load and update data from different data source types. To use a local array, assign it to the dataSource property and specify the key field in the keyExpr property. If you want to use another data source type, refer to one of the following articles:

jQuery

index.js

$(function() { $("#dataGrid").dxDataGrid({ dataSource: employees, keyExpr: "EmployeeID", });});
const employees = [{ "EmployeeID": 1, "FullName": "Nancy Davolio", "Position": "Sales Representative", "TitleOfCourtesy": "Ms.", "BirthDate": "1968-12-08T00:00:00.000Z", "HireDate": "2011-05-01T00:00:00.000Z", "Address": "507 - 20th Ave. E.\r\nApt. 2A", "City": "Seattle", "Region": "WA", "PostalCode": "98122", "Country": "USA", "HomePhone": "(206) 555-9857", "Extension": "5467", "Photo": "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/employees/06.png", "Notes": "Education includes a BA in psychology from Colorado State University in 1990. She also completed \"The Art of the Cold Call.\" Nancy is a member of Toastmasters International.", "ReportsTo": 2}, { "EmployeeID": 2, "FullName": "Andrew Fuller", "Position": "Vice President, Sales", "TitleOfCourtesy": "Dr.", "BirthDate": "1972-02-19T00:00:00.000Z", "HireDate": "2011-08-14T00:00:00.000Z", "Address": "908 W. Capital Way", "City": "Tacoma", "Region": "WA", "PostalCode": "98401", "Country": "USA", "HomePhone": "(206) 555-9482", "Extension": "3457", "Photo": "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/employees/02.png", "Notes": "Andrew received his BTS commercial in 1994 and a Ph.D. in international marketing from the University of Dallas in 2001. He is fluent in French and Italian and reads German. He joined the company as a sales representative, was promoted to sales manager in January 2012 and to vice president of sales in March 2013. Andrew is a member of the Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.", "ReportsTo": null}, { "EmployeeID": 3, "FullName": "Janet Leverling", "Position": "Sales Representative", "TitleOfCourtesy": "Ms.", "BirthDate": "1983-08-30T00:00:00.000Z", "HireDate": "2011-04-01T00:00:00.000Z", "Address": "722 Moss Bay Blvd.", "City": "Kirkland", "Region": "WA", "PostalCode": "98033", "Country": "USA", "HomePhone": "(206) 555-3412", "Extension": "3355", "Photo": "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/employees/09.png", "Notes": "Janet has a BS degree in chemistry from Boston College (2004). She has also completed a certificate program in food retailing management. Janet was hired as a sales associate in 2011 and promoted to sales representative in February 2012.", "ReportsTo": 2}, { "EmployeeID": 4, "FullName": "Margaret Peaco*ck", "Position": "Sales Representative", "TitleOfCourtesy": "Mrs.", "BirthDate": "1957-09-19T00:00:00.000Z", "HireDate": "2012-05-03T00:00:00.000Z", "Address": "4110 Old Redmond Rd.", "City": "Redmond", "Region": "WA", "PostalCode": "98052", "Country": "USA", "HomePhone": "(206) 555-8122", "Extension": "5176", "Photo": "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/employees/04.png", "Notes": "Margaret holds a BA in English literature from Concordia College (1978) and an MA from the American Institute of Culinary Arts (1986). She was assigned to the London office temporarily from July through November 2012.", "ReportsTo": 2}, { "EmployeeID": 5, "FullName": "Steven Buchanan", "Position": "Sales Manager", "TitleOfCourtesy": "Mr.", "BirthDate": "1975-03-04T00:00:00.000Z", "HireDate": "2012-10-17T00:00:00.000Z", "Address": "14 Garrett Hill", "City": "London", "Region": "UK", "PostalCode": "SW1 8JR", "Country": "UK", "HomePhone": "(71) 555-4848", "Extension": "3453", "Photo": "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/employees/05.png", "Notes": "Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1996. Upon joining the company as a sales representative in 2012, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent post in London. He was promoted to sales manager in March 2013. Mr. Buchanan has completed the courses \"Successful Telemarketing\" and \"International Sales Management.\" He is fluent in French.", "ReportsTo": 2}, { "EmployeeID": 6, "FullName": "Michael Suyama", "Position": "Sales Representative", "TitleOfCourtesy": "Mr.", "BirthDate": "1983-07-02T00:00:00.000Z", "HireDate": "2012-10-17T00:00:00.000Z", "Address": "Coventry House\r\nMiner Rd.", "City": "London", "Region": "UK", "PostalCode": "EC2 7JR", "Country": "UK", "HomePhone": "(71) 555-7773", "Extension": "428", "Photo": "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/employees/01.png", "Notes": "Michael is a graduate of Sussex University (MA, economics, 2003) and the University of California at Los Angeles (MBA, marketing, 2006). He has also taken the courses \"Multi-Cultural Selling\" and \"Time Management for the Sales Professional.\" He is fluent in Japanese and can read and write French, Portuguese, and Spanish.", "ReportsTo": 5}, { "EmployeeID": 7, "FullName": "Robert King", "Position": "Sales Representative", "TitleOfCourtesy": "Mr.", "BirthDate": "1980-05-29T00:00:00.000Z", "HireDate": "2012-01-02T00:00:00.000Z", "Address": "Edgeham Hollow\r\nWinchester Way", "City": "London", "Region": "UK", "PostalCode": "RG1 9SP", "Country": "UK", "HomePhone": "(71) 555-5598", "Extension": "465", "Photo": "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/employees/07.png", "Notes": "Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the University of Michigan in 2002, the year he joined the company. After completing a course entitled \"Selling in Europe,\" he was transferred to the London office in March 2013.", "ReportsTo": 5}, { "EmployeeID": 8, "FullName": "Laura Callahan", "Position": "Inside Sales Coordinator", "TitleOfCourtesy": "Ms.", "BirthDate": "1978-01-09T00:00:00.000Z", "HireDate": "2012-03-05T00:00:00.000Z", "Address": "4726 - 11th Ave. N.E.", "City": "Seattle", "Region": "WA", "PostalCode": "98105", "Country": "USA", "HomePhone": "(206) 555-1189", "Extension": "2344", "Photo": "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/employees/08.png", "Notes": "Laura received a BA in psychology from the University of Washington. She has also completed a course in business French. She reads and writes French.", "ReportsTo": 2}, { "EmployeeID": 9, "FullName": "Brett Wade", "Position": "Sales Representative", "TitleOfCourtesy": "Mr.", "BirthDate": "1986-01-27T00:00:00.000Z", "HireDate": "2012-11-15T00:00:00.000Z", "Address": "7 Houndstooth Rd.", "City": "London", "Region": "UK", "PostalCode": "WG2 7LT", "Country": "UK", "HomePhone": "(71) 555-4444", "Extension": "452", "Photo": "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/employees/03.png", "Notes": "Brett has a BA degree in English from St. Lawrence College. He is fluent in French and German.", "ReportsTo": 5}];
Angular

app.component.html

app.component.ts

employees.service.ts

<dx-data-grid [dataSource]="employees" keyExpr="EmployeeID"></dx-data-grid>
import { Component } from '@angular/core';import { Employee, EmployeesService } from './employees.service';@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css']})export class AppComponent { employees: Employee[] = []; constructor(service: EmployeesService) { this.employees = service.getEmployees(); }}
import { Injectable } from '@angular/core';export interface Employee { EmployeeID: Number, FullName: String, Position: String, TitleOfCourtesy: String, BirthDate: String, HireDate: String, Address: String, City: String, Region: String, PostalCode: String, Country: String, HomePhone: String, Extension: String, Photo: String, Notes: String, ReportsTo: Number}const employees: Employee[] = [{ "EmployeeID": 1, "FullName": "Nancy Davolio", "Position": "Sales Representative", "TitleOfCourtesy": "Ms.", "BirthDate": "1968-12-08T00:00:00.000Z", "HireDate": "2011-05-01T00:00:00.000Z", "Address": "507 - 20th Ave. E.\r\nApt. 2A", "City": "Seattle", "Region": "WA", "PostalCode": "98122", "Country": "USA", "HomePhone": "(206) 555-9857", "Extension": "5467", "Photo": "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/employees/06.png", "Notes": "Education includes a BA in psychology from Colorado State University in 1990. She also completed \"The Art of the Cold Call.\" Nancy is a member of Toastmasters International.", "ReportsTo": 2}, { "EmployeeID": 2, "FullName": "Andrew Fuller", "Position": "Vice President, Sales", "TitleOfCourtesy": "Dr.", "BirthDate": "1972-02-19T00:00:00.000Z", "HireDate": "2011-08-14T00:00:00.000Z", "Address": "908 W. Capital Way", "City": "Tacoma", "Region": "WA", "PostalCode": "98401", "Country": "USA", "HomePhone": "(206) 555-9482", "Extension": "3457", "Photo": "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/employees/02.png", "Notes": "Andrew received his BTS commercial in 1994 and a Ph.D. in international marketing from the University of Dallas in 2001. He is fluent in French and Italian and reads German. He joined the company as a sales representative, was promoted to sales manager in January 2012 and to vice president of sales in March 2013. Andrew is a member of the Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.", "ReportsTo": null}, { "EmployeeID": 3, "FullName": "Janet Leverling", "Position": "Sales Representative", "TitleOfCourtesy": "Ms.", "BirthDate": "1983-08-30T00:00:00.000Z", "HireDate": "2011-04-01T00:00:00.000Z", "Address": "722 Moss Bay Blvd.", "City": "Kirkland", "Region": "WA", "PostalCode": "98033", "Country": "USA", "HomePhone": "(206) 555-3412", "Extension": "3355", "Photo": "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/employees/09.png", "Notes": "Janet has a BS degree in chemistry from Boston College (2004). She has also completed a certificate program in food retailing management. Janet was hired as a sales associate in 2011 and promoted to sales representative in February 2012.", "ReportsTo": 2}, { "EmployeeID": 4, "FullName": "Margaret Peaco*ck", "Position": "Sales Representative", "TitleOfCourtesy": "Mrs.", "BirthDate": "1957-09-19T00:00:00.000Z", "HireDate": "2012-05-03T00:00:00.000Z", "Address": "4110 Old Redmond Rd.", "City": "Redmond", "Region": "WA", "PostalCode": "98052", "Country": "USA", "HomePhone": "(206) 555-8122", "Extension": "5176", "Photo": "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/employees/04.png", "Notes": "Margaret holds a BA in English literature from Concordia College (1978) and an MA from the American Institute of Culinary Arts (1986). She was assigned to the London office temporarily from July through November 2012.", "ReportsTo": 2}, { "EmployeeID": 5, "FullName": "Steven Buchanan", "Position": "Sales Manager", "TitleOfCourtesy": "Mr.", "BirthDate": "1975-03-04T00:00:00.000Z", "HireDate": "2012-10-17T00:00:00.000Z", "Address": "14 Garrett Hill", "City": "London", "Region": "UK", "PostalCode": "SW1 8JR", "Country": "UK", "HomePhone": "(71) 555-4848", "Extension": "3453", "Photo": "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/employees/05.png", "Notes": "Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1996. Upon joining the company as a sales representative in 2012, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent post in London. He was promoted to sales manager in March 2013. Mr. Buchanan has completed the courses \"Successful Telemarketing\" and \"International Sales Management.\" He is fluent in French.", "ReportsTo": 2}, { "EmployeeID": 6, "FullName": "Michael Suyama", "Position": "Sales Representative", "TitleOfCourtesy": "Mr.", "BirthDate": "1983-07-02T00:00:00.000Z", "HireDate": "2012-10-17T00:00:00.000Z", "Address": "Coventry House\r\nMiner Rd.", "City": "London", "Region": "UK", "PostalCode": "EC2 7JR", "Country": "UK", "HomePhone": "(71) 555-7773", "Extension": "428", "Photo": "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/employees/01.png", "Notes": "Michael is a graduate of Sussex University (MA, economics, 2003) and the University of California at Los Angeles (MBA, marketing, 2006). He has also taken the courses \"Multi-Cultural Selling\" and \"Time Management for the Sales Professional.\" He is fluent in Japanese and can read and write French, Portuguese, and Spanish.", "ReportsTo": 5}, { "EmployeeID": 7, "FullName": "Robert King", "Position": "Sales Representative", "TitleOfCourtesy": "Mr.", "BirthDate": "1980-05-29T00:00:00.000Z", "HireDate": "2012-01-02T00:00:00.000Z", "Address": "Edgeham Hollow\r\nWinchester Way", "City": "London", "Region": "UK", "PostalCode": "RG1 9SP", "Country": "UK", "HomePhone": "(71) 555-5598", "Extension": "465", "Photo": "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/employees/07.png", "Notes": "Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the University of Michigan in 2002, the year he joined the company. After completing a course entitled \"Selling in Europe,\" he was transferred to the London office in March 2013.", "ReportsTo": 5}, { "EmployeeID": 8, "FullName": "Laura Callahan", "Position": "Inside Sales Coordinator", "TitleOfCourtesy": "Ms.", "BirthDate": "1978-01-09T00:00:00.000Z", "HireDate": "2012-03-05T00:00:00.000Z", "Address": "4726 - 11th Ave. N.E.", "City": "Seattle", "Region": "WA", "PostalCode": "98105", "Country": "USA", "HomePhone": "(206) 555-1189", "Extension": "2344", "Photo": "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/employees/08.png", "Notes": "Laura received a BA in psychology from the University of Washington. She has also completed a course in business French. She reads and writes French.", "ReportsTo": 2}, { "EmployeeID": 9, "FullName": "Brett Wade", "Position": "Sales Representative", "TitleOfCourtesy": "Mr.", "BirthDate": "1986-01-27T00:00:00.000Z", "HireDate": "2012-11-15T00:00:00.000Z", "Address": "7 Houndstooth Rd.", "City": "London", "Region": "UK", "PostalCode": "WG2 7LT", "Country": "UK", "HomePhone": "(71) 555-4444", "Extension": "452", "Photo": "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/employees/03.png", "Notes": "Brett has a BA degree in English from St. Lawrence College. He is fluent in French and German.", "ReportsTo": 5}];@Injectable({ providedIn: 'root'})export class EmployeesService { getEmployees(): Employee[] { return employees; }}
Vue

App.vue

employees.service.js

<template> <div id="app-container"> <DxDataGrid :data-source="employees" key-expr="EmployeeID"> </DxDataGrid> </div></template><script>// ...import service from './employees.service';export default { // ... data() { return { employees: service.getEmployees(), } },}</script>
const employees = [{ "EmployeeID": 1, "FullName": "Nancy Davolio", "Position": "Sales Representative", "TitleOfCourtesy": "Ms.", "BirthDate": "1968-12-08T00:00:00.000Z", "HireDate": "2011-05-01T00:00:00.000Z", "Address": "507 - 20th Ave. E.\r\nApt. 2A", "City": "Seattle", "Region": "WA", "PostalCode": "98122", "Country": "USA", "HomePhone": "(206) 555-9857", "Extension": "5467", "Photo": "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/employees/06.png", "Notes": "Education includes a BA in psychology from Colorado State University in 1990. She also completed \"The Art of the Cold Call.\" Nancy is a member of Toastmasters International.", "ReportsTo": 2}, { "EmployeeID": 2, "FullName": "Andrew Fuller", "Position": "Vice President, Sales", "TitleOfCourtesy": "Dr.", "BirthDate": "1972-02-19T00:00:00.000Z", "HireDate": "2011-08-14T00:00:00.000Z", "Address": "908 W. Capital Way", "City": "Tacoma", "Region": "WA", "PostalCode": "98401", "Country": "USA", "HomePhone": "(206) 555-9482", "Extension": "3457", "Photo": "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/employees/02.png", "Notes": "Andrew received his BTS commercial in 1994 and a Ph.D. in international marketing from the University of Dallas in 2001. He is fluent in French and Italian and reads German. He joined the company as a sales representative, was promoted to sales manager in January 2012 and to vice president of sales in March 2013. Andrew is a member of the Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.", "ReportsTo": null}, { "EmployeeID": 3, "FullName": "Janet Leverling", "Position": "Sales Representative", "TitleOfCourtesy": "Ms.", "BirthDate": "1983-08-30T00:00:00.000Z", "HireDate": "2011-04-01T00:00:00.000Z", "Address": "722 Moss Bay Blvd.", "City": "Kirkland", "Region": "WA", "PostalCode": "98033", "Country": "USA", "HomePhone": "(206) 555-3412", "Extension": "3355", "Photo": "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/employees/09.png", "Notes": "Janet has a BS degree in chemistry from Boston College (2004). She has also completed a certificate program in food retailing management. Janet was hired as a sales associate in 2011 and promoted to sales representative in February 2012.", "ReportsTo": 2}, { "EmployeeID": 4, "FullName": "Margaret Peaco*ck", "Position": "Sales Representative", "TitleOfCourtesy": "Mrs.", "BirthDate": "1957-09-19T00:00:00.000Z", "HireDate": "2012-05-03T00:00:00.000Z", "Address": "4110 Old Redmond Rd.", "City": "Redmond", "Region": "WA", "PostalCode": "98052", "Country": "USA", "HomePhone": "(206) 555-8122", "Extension": "5176", "Photo": "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/employees/04.png", "Notes": "Margaret holds a BA in English literature from Concordia College (1978) and an MA from the American Institute of Culinary Arts (1986). She was assigned to the London office temporarily from July through November 2012.", "ReportsTo": 2}, { "EmployeeID": 5, "FullName": "Steven Buchanan", "Position": "Sales Manager", "TitleOfCourtesy": "Mr.", "BirthDate": "1975-03-04T00:00:00.000Z", "HireDate": "2012-10-17T00:00:00.000Z", "Address": "14 Garrett Hill", "City": "London", "Region": "UK", "PostalCode": "SW1 8JR", "Country": "UK", "HomePhone": "(71) 555-4848", "Extension": "3453", "Photo": "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/employees/05.png", "Notes": "Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1996. Upon joining the company as a sales representative in 2012, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent post in London. He was promoted to sales manager in March 2013. Mr. Buchanan has completed the courses \"Successful Telemarketing\" and \"International Sales Management.\" He is fluent in French.", "ReportsTo": 2}, { "EmployeeID": 6, "FullName": "Michael Suyama", "Position": "Sales Representative", "TitleOfCourtesy": "Mr.", "BirthDate": "1983-07-02T00:00:00.000Z", "HireDate": "2012-10-17T00:00:00.000Z", "Address": "Coventry House\r\nMiner Rd.", "City": "London", "Region": "UK", "PostalCode": "EC2 7JR", "Country": "UK", "HomePhone": "(71) 555-7773", "Extension": "428", "Photo": "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/employees/01.png", "Notes": "Michael is a graduate of Sussex University (MA, economics, 2003) and the University of California at Los Angeles (MBA, marketing, 2006). He has also taken the courses \"Multi-Cultural Selling\" and \"Time Management for the Sales Professional.\" He is fluent in Japanese and can read and write French, Portuguese, and Spanish.", "ReportsTo": 5}, { "EmployeeID": 7, "FullName": "Robert King", "Position": "Sales Representative", "TitleOfCourtesy": "Mr.", "BirthDate": "1980-05-29T00:00:00.000Z", "HireDate": "2012-01-02T00:00:00.000Z", "Address": "Edgeham Hollow\r\nWinchester Way", "City": "London", "Region": "UK", "PostalCode": "RG1 9SP", "Country": "UK", "HomePhone": "(71) 555-5598", "Extension": "465", "Photo": "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/employees/07.png", "Notes": "Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the University of Michigan in 2002, the year he joined the company. After completing a course entitled \"Selling in Europe,\" he was transferred to the London office in March 2013.", "ReportsTo": 5}, { "EmployeeID": 8, "FullName": "Laura Callahan", "Position": "Inside Sales Coordinator", "TitleOfCourtesy": "Ms.", "BirthDate": "1978-01-09T00:00:00.000Z", "HireDate": "2012-03-05T00:00:00.000Z", "Address": "4726 - 11th Ave. N.E.", "City": "Seattle", "Region": "WA", "PostalCode": "98105", "Country": "USA", "HomePhone": "(206) 555-1189", "Extension": "2344", "Photo": "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/employees/08.png", "Notes": "Laura received a BA in psychology from the University of Washington. She has also completed a course in business French. She reads and writes French.", "ReportsTo": 2}, { "EmployeeID": 9, "FullName": "Brett Wade", "Position": "Sales Representative", "TitleOfCourtesy": "Mr.", "BirthDate": "1986-01-27T00:00:00.000Z", "HireDate": "2012-11-15T00:00:00.000Z", "Address": "7 Houndstooth Rd.", "City": "London", "Region": "UK", "PostalCode": "WG2 7LT", "Country": "UK", "HomePhone": "(71) 555-4444", "Extension": "452", "Photo": "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/employees/03.png", "Notes": "Brett has a BA degree in English from St. Lawrence College. He is fluent in French and German.", "ReportsTo": 5}];export default { getEmployees() { return employees; }}
React

App.js

employees.js

import React from 'react';import 'devextreme/dist/css/dx.light.css';import { DataGrid} from 'devextreme-react/data-grid';import { employees } from './employees';function App() { return ( <div className="App"> <DataGrid dataSource={employees} keyExpr="EmployeeID"> </DataGrid> </div> );}export default App;
export const employees = [{ "EmployeeID": 1, "FullName": "Nancy Davolio", "Position": "Sales Representative", "TitleOfCourtesy": "Ms.", "BirthDate": "1968-12-08T00:00:00.000Z", "HireDate": "2011-05-01T00:00:00.000Z", "Address": "507 - 20th Ave. E.\r\nApt. 2A", "City": "Seattle", "Region": "WA", "PostalCode": "98122", "Country": "USA", "HomePhone": "(206) 555-9857", "Extension": "5467", "Photo": "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/employees/06.png", "Notes": "Education includes a BA in psychology from Colorado State University in 1990. She also completed \"The Art of the Cold Call.\" Nancy is a member of Toastmasters International.", "ReportsTo": 2}, { "EmployeeID": 2, "FullName": "Andrew Fuller", "Position": "Vice President, Sales", "TitleOfCourtesy": "Dr.", "BirthDate": "1972-02-19T00:00:00.000Z", "HireDate": "2011-08-14T00:00:00.000Z", "Address": "908 W. Capital Way", "City": "Tacoma", "Region": "WA", "PostalCode": "98401", "Country": "USA", "HomePhone": "(206) 555-9482", "Extension": "3457", "Photo": "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/employees/02.png", "Notes": "Andrew received his BTS commercial in 1994 and a Ph.D. in international marketing from the University of Dallas in 2001. He is fluent in French and Italian and reads German. He joined the company as a sales representative, was promoted to sales manager in January 2012 and to vice president of sales in March 2013. Andrew is a member of the Sales Management Roundtable, the Seattle Chamber of Commerce, and the Pacific Rim Importers Association.", "ReportsTo": null}, { "EmployeeID": 3, "FullName": "Janet Leverling", "Position": "Sales Representative", "TitleOfCourtesy": "Ms.", "BirthDate": "1983-08-30T00:00:00.000Z", "HireDate": "2011-04-01T00:00:00.000Z", "Address": "722 Moss Bay Blvd.", "City": "Kirkland", "Region": "WA", "PostalCode": "98033", "Country": "USA", "HomePhone": "(206) 555-3412", "Extension": "3355", "Photo": "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/employees/09.png", "Notes": "Janet has a BS degree in chemistry from Boston College (2004). She has also completed a certificate program in food retailing management. Janet was hired as a sales associate in 2011 and promoted to sales representative in February 2012.", "ReportsTo": 2}, { "EmployeeID": 4, "FullName": "Margaret Peaco*ck", "Position": "Sales Representative", "TitleOfCourtesy": "Mrs.", "BirthDate": "1957-09-19T00:00:00.000Z", "HireDate": "2012-05-03T00:00:00.000Z", "Address": "4110 Old Redmond Rd.", "City": "Redmond", "Region": "WA", "PostalCode": "98052", "Country": "USA", "HomePhone": "(206) 555-8122", "Extension": "5176", "Photo": "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/employees/04.png", "Notes": "Margaret holds a BA in English literature from Concordia College (1978) and an MA from the American Institute of Culinary Arts (1986). She was assigned to the London office temporarily from July through November 2012.", "ReportsTo": 2}, { "EmployeeID": 5, "FullName": "Steven Buchanan", "Position": "Sales Manager", "TitleOfCourtesy": "Mr.", "BirthDate": "1975-03-04T00:00:00.000Z", "HireDate": "2012-10-17T00:00:00.000Z", "Address": "14 Garrett Hill", "City": "London", "Region": "UK", "PostalCode": "SW1 8JR", "Country": "UK", "HomePhone": "(71) 555-4848", "Extension": "3453", "Photo": "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/employees/05.png", "Notes": "Steven Buchanan graduated from St. Andrews University, Scotland, with a BSC degree in 1996. Upon joining the company as a sales representative in 2012, he spent 6 months in an orientation program at the Seattle office and then returned to his permanent post in London. He was promoted to sales manager in March 2013. Mr. Buchanan has completed the courses \"Successful Telemarketing\" and \"International Sales Management.\" He is fluent in French.", "ReportsTo": 2}, { "EmployeeID": 6, "FullName": "Michael Suyama", "Position": "Sales Representative", "TitleOfCourtesy": "Mr.", "BirthDate": "1983-07-02T00:00:00.000Z", "HireDate": "2012-10-17T00:00:00.000Z", "Address": "Coventry House\r\nMiner Rd.", "City": "London", "Region": "UK", "PostalCode": "EC2 7JR", "Country": "UK", "HomePhone": "(71) 555-7773", "Extension": "428", "Photo": "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/employees/01.png", "Notes": "Michael is a graduate of Sussex University (MA, economics, 2003) and the University of California at Los Angeles (MBA, marketing, 2006). He has also taken the courses \"Multi-Cultural Selling\" and \"Time Management for the Sales Professional.\" He is fluent in Japanese and can read and write French, Portuguese, and Spanish.", "ReportsTo": 5}, { "EmployeeID": 7, "FullName": "Robert King", "Position": "Sales Representative", "TitleOfCourtesy": "Mr.", "BirthDate": "1980-05-29T00:00:00.000Z", "HireDate": "2012-01-02T00:00:00.000Z", "Address": "Edgeham Hollow\r\nWinchester Way", "City": "London", "Region": "UK", "PostalCode": "RG1 9SP", "Country": "UK", "HomePhone": "(71) 555-5598", "Extension": "465", "Photo": "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/employees/07.png", "Notes": "Robert King served in the Peace Corps and traveled extensively before completing his degree in English at the University of Michigan in 2002, the year he joined the company. After completing a course entitled \"Selling in Europe,\" he was transferred to the London office in March 2013.", "ReportsTo": 5}, { "EmployeeID": 8, "FullName": "Laura Callahan", "Position": "Inside Sales Coordinator", "TitleOfCourtesy": "Ms.", "BirthDate": "1978-01-09T00:00:00.000Z", "HireDate": "2012-03-05T00:00:00.000Z", "Address": "4726 - 11th Ave. N.E.", "City": "Seattle", "Region": "WA", "PostalCode": "98105", "Country": "USA", "HomePhone": "(206) 555-1189", "Extension": "2344", "Photo": "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/employees/08.png", "Notes": "Laura received a BA in psychology from the University of Washington. She has also completed a course in business French. She reads and writes French.", "ReportsTo": 2}, { "EmployeeID": 9, "FullName": "Brett Wade", "Position": "Sales Representative", "TitleOfCourtesy": "Mr.", "BirthDate": "1986-01-27T00:00:00.000Z", "HireDate": "2012-11-15T00:00:00.000Z", "Address": "7 Houndstooth Rd.", "City": "London", "Region": "UK", "PostalCode": "WG2 7LT", "Country": "UK", "HomePhone": "(71) 555-4444", "Extension": "452", "Photo": "https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/employees/03.png", "Notes": "Brett has a BA degree in English from St. Lawrence College. He is fluent in French and German.", "ReportsTo": 5}];

If you run this code, a DataGrid is created with a column for each data field. All the columns have equal widths and the same order as their data fields.

React DataGrid - Getting Started (2024)

FAQs

Where is the AG Grid used? ›

If you are designing within Figma, you can use the AG Grid Design System to replicate the Quartz and Alpine AG Grid themes within Figma. These default themes can be extended with Figma variables to match any existing visual design or create entirely new AG Grid themes.

What is AG Grid React? ›

AG Grid is a fully-featured and highly customizable JavaScript data grid. It delivers outstanding performance, has no 3rd party dependencies and integrates smoothly with React as React Component.

What is the difference between DataGrid and table in React? ›

Data Grid Features

Differences start already at basic functionality, like scrolling. While a table would not offer much more than a sticky header, usually showing the column definitions, the data grid can be much more sophisticated. The same pattern continues to sort (multi-column with precedence) and data selection.

Can I use AG Grid for free? ›

The AG Grid Enterprise features require a licence and you can find more information here: Data Grid: AG Grid: License and Pricing. AG Grid Community does not require a licence and has many awesome features available for free.

Is React AG Grid free or paid? ›

React Data GridCommunity and Enterprise. AG Grid comes in two forms: AG Grid Community (free for everyone, including production use) and AG Grid Enterprise (you need a license to use). The Enterprise version of AG Grid comes with more features and support via Zendesk.

Is React data grid free? ›

MIT license (free forever)

It's a clean abstraction with basic features like editing, pagination, column grouping, and single-column sorting and filtering.

What is React grid layout? ›

The React GridLayout component allows you to easily arrange its contents into rows and columns in a grid structure. It offers a grid-like system for organizing the content in your app based on the CSS grid layout. You can configure items per row or column, as well as span content across them.

What is the best data table in React? ›

AG-Grid and React Table are excellent choices for complex and feature-rich data tables, while Material-UI Table integrates seamlessly into Material-UI projects. Griddle and React Data Table Component are lightweight options suitable for smaller projects with simpler requirements.

What is the best data fetching library for React? ›

To make data fetching easier and more efficient, there are many libraries and tools that you can use in your React Native & Expo app development. Some of the most popular and widely used ones are Fetch API, Axios, TanStack Query (prev. React Query), Apollo Client, SWR, and tRPC, etc.

References

Top Articles
Latest Posts
Article information

Author: Pres. Lawanda Wiegand

Last Updated:

Views: 5531

Rating: 4 / 5 (71 voted)

Reviews: 86% of readers found this page helpful

Author information

Name: Pres. Lawanda Wiegand

Birthday: 1993-01-10

Address: Suite 391 6963 Ullrich Shore, Bellefort, WI 01350-7893

Phone: +6806610432415

Job: Dynamic Manufacturing Assistant

Hobby: amateur radio, Taekwondo, Wood carving, Parkour, Skateboarding, Running, Rafting

Introduction: My name is Pres. Lawanda Wiegand, I am a inquisitive, helpful, glamorous, cheerful, open, clever, innocent person who loves writing and wants to share my knowledge and understanding with you.