Angular 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

<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.

Angular DataGrid - Getting Started (2024)

FAQs

What is ng grid? ›

Ng-grid is 100% angular grid which has no dependencies other than angular js. It has pagination, sorting, filtering and local data model binding/editing built in allowing for quick and easy integration with any Angular JS application. In this post we will demonstrate few ng-grid features by using REST API over HTTP.

How to get row data in AG-Grid-Angular? ›

When using the default row model - Client Side data is provided to the grid via the rowData property. <ag-grid-angular [rowData]="rowData" /* other grid options ... */> </ag-grid-angular> this.

What does AG Grid stand for? ›

We believe that a datagrid should be framework-agnostic, providing developers with flexibility and future-proofing their work. This philosophy is mirrored in our name; 'AG' stands for agnostic.

What is the best free angular grid? ›

Generic UI Grid is one of the best free angular grid library. It offers many built-in features that work out of the box : editing, sorting, pagination, theming, summaries, column configuration, and many more. Performance is the main focus point, grid is able to present huge sets of data.

How to set data in AG Grid angular? ›

The easiest way to update data inside the grid is to replace the data you gave it with a fresh set of data. This is done by either updating the rowData bound property (if using a framework) or calling api. setGridOption('rowData', newData) .

How to add a checkbox in Angular Grid? ›

This feature is particularly useful when you need to perform bulk actions or operations on selected records within the Grid. To render checkbox in each grid row, you need to use checkbox column with type as checkbox using column type property.

How to use ag grid API in Angular? ›

Grid API. The api can be accessed from the AgGridAngular component via a @ViewChild decorator from within your component. This will be defined after ngAfterViewInit has run. The api is also provided on the params for all grid events and callbacks.

How to get cell value in ag grid angular? ›

field , you can use colDef. valueGetter to provide a function for getting cell values. This is more flexible than providing field values for specific cells. Value Formatters: Use formatters to format values.

What is better than AG Grid? ›

ApexCharts – The Best AG Grid Free Alternative

The powerful charting library ApexCharts has released a brand-new Apex Grid component. It is a free JavaScript data grid with all the core features that developers need.

Is AG Grid free or paid? ›

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 AG Grid a library or framework? ›

AG-Grid, short for “AG-Grid: The Advanced Data Grid,” is a powerful and feature-rich JavaScript data grid library for building interactive and sophisticated data tables or grids in web applications.

How to create a table of data in Angular? ›

Begin by adding the <table mat-table> component to your template and passing in data. The simplest way to provide data to the table is by passing a data array to the table's dataSource input. The table will take the array and render a row for each object in the data array.

How to set data in AG Grid Angular? ›

The easiest way to update data inside the grid is to replace the data you gave it with a fresh set of data. This is done by either updating the rowData bound property (if using a framework) or calling api. setGridOption('rowData', newData) .

How to create form data in Angular? ›

Create the model form controls by including the ngModel command and the name attribute. When you need Angular to access your data from forms, add ngModel to that tag as shown above. Now, if you want to read the email address and password, add ngModel for that field. You can see ngForm added to #userlogin.

Top Articles
Latest Posts
Article information

Author: The Hon. Margery Christiansen

Last Updated:

Views: 6635

Rating: 5 / 5 (70 voted)

Reviews: 93% of readers found this page helpful

Author information

Name: The Hon. Margery Christiansen

Birthday: 2000-07-07

Address: 5050 Breitenberg Knoll, New Robert, MI 45409

Phone: +2556892639372

Job: Investor Mining Engineer

Hobby: Sketching, Cosplaying, Glassblowing, Genealogy, Crocheting, Archery, Skateboarding

Introduction: My name is The Hon. Margery Christiansen, I am a bright, adorable, precious, inexpensive, gorgeous, comfortable, happy person who loves writing and wants to share my knowledge and understanding with you.