React Data Grid - Overview (2024)

Material Light

Material Blue Light

Material Lime Light

Material Orange Light

Material Purple Light

Material Teal Light

Material Dark

Material Blue Dark

Material Lime Dark

Material Orange Dark

Material Purple Dark

Material Teal Dark

Material Light Compact

Material Blue Light Compact

Material Lime Light Compact

Material Orange Light Compact

Material Purple Light Compact

Material Teal Light Compact

Material Dark Compact

Material Blue Dark Compact

Material Lime Dark Compact

Material Orange Dark Compact

Material Purple Dark Compact

Material Teal Dark Compact

Generic Light

Carmine

Soft Blue

Green Mist

Generic Dark

Contrast

Dark Violet

Dark Moon

Generic Light Compact

Generic Dark Compact

Contrast Dark Compact

Fluent Light

Fluent SaaS Light

Fluent Dark

Fluent SaaS Dark

Fluent Light Compact

Fluent SaaS Light Compact

Fluent Dark Compact

Fluent SaaS Dark Compact

TS JS

Backend API

import React from 'react';import DataGrid, { Column, Export, Selection, GroupPanel, Grouping, DataGridTypes,} from 'devextreme-react/data-grid';import { Workbook } from 'exceljs';import { saveAs } from 'file-saver-es';import { exportDataGrid } from 'devextreme/excel_exporter';import { employees } from './data.ts';const onExporting = (e: DataGridTypes.ExportingEvent) => { const workbook = new Workbook(); const worksheet = workbook.addWorksheet('Main sheet'); exportDataGrid({ component: e.component, worksheet, autoFilterEnabled: true, }).then(() => { workbook.xlsx.writeBuffer().then((buffer) => { saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx'); }); });};const App = () => ( <DataGrid id="gridContainer" dataSource={employees} keyExpr="ID" width="100%" showBorders={true} onExporting={onExporting} > <Selection mode="multiple" /> <GroupPanel visible={true} /> <Grouping autoExpandAll={true} /> <Column dataField="FirstName" /> <Column dataField="LastName" /> <Column dataField="City" /> <Column dataField="State" groupIndex={0} /> <Column dataField="Position" width={130} /> <Column dataField="BirthDate" dataType="date" width={100} /> <Column dataField="HireDate" dataType="date" width={100} /> <Export enabled={true} allowExportSelectedData={true} /> </DataGrid>);export default App;

import React from 'react';import DataGrid, { Column, Export, Selection, GroupPanel, Grouping,} from 'devextreme-react/data-grid';import { Workbook } from 'exceljs';import { saveAs } from 'file-saver-es';import { exportDataGrid } from 'devextreme/excel_exporter';import { employees } from './data.js';const onExporting = (e) => { const workbook = new Workbook(); const worksheet = workbook.addWorksheet('Main sheet'); exportDataGrid({ component: e.component, worksheet, autoFilterEnabled: true, }).then(() => { workbook.xlsx.writeBuffer().then((buffer) => { saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx'); }); });};const App = () => ( <DataGrid id="gridContainer" dataSource={employees} keyExpr="ID" width="100%" showBorders={true} onExporting={onExporting} > <Selection mode="multiple" /> <GroupPanel visible={true} /> <Grouping autoExpandAll={true} /> <Column dataField="FirstName" /> <Column dataField="LastName" /> <Column dataField="City" /> <Column dataField="State" groupIndex={0} /> <Column dataField="Position" width={130} /> <Column dataField="BirthDate" dataType="date" width={100} /> <Column dataField="HireDate" dataType="date" width={100} /> <Export enabled={true} allowExportSelectedData={true} /> </DataGrid>);export default App;

import React from 'react';import ReactDOM from 'react-dom';import App from './App.tsx';ReactDOM.render( <App />, document.getElementById('app'),);

export const employees = [{ ID: 1, FirstName: 'John', LastName: 'Heart', Prefix: 'Mr.', Position: 'CEO', Picture: '../../../../images/employees/01.png', BirthDate: '1964/03/16', HireDate: '1995/01/15', Notes: 'John has been in the Audio/Video industry since 1990. He has led DevAv as its CEO since 2003.\r\n\r\nWhen not working hard as the CEO, John loves to golf and bowl. He once bowled a perfect game of 300.', Address: '351 S Hill St.', State: 'California', City: 'Los Angeles',}, { ID: 2, FirstName: 'Olivia', LastName: 'Peyton', Prefix: 'Mrs.', Position: 'Sales Assistant', Picture: '../../../../images/employees/09.png', BirthDate: '1981/06/03', HireDate: '2012/05/14', Notes: 'Olivia loves to sell. She has been selling DevAV products since 2012. \r\n\r\nOlivia was homecoming queen in high school. She is expecting her first child in 6 months. Good Luck Olivia.', Address: '807 W Paseo Del Mar', State: 'California', City: 'Los Angeles',}, { ID: 3, FirstName: 'Robert', LastName: 'Reagan', Prefix: 'Mr.', Position: 'CMO', Picture: '../../../../images/employees/03.png', BirthDate: '1974/09/07', HireDate: '2002/11/08', Notes: 'Robert was recently voted the CMO of the year by CMO Magazine. He is a proud member of the DevAV Management Team.\r\n\r\nRobert is a championship BBQ chef, so when you get the chance ask him for his secret recipe.', Address: '4 Westmoreland Pl.', State: 'Arkansas', City: 'Bentonville',}, { ID: 4, FirstName: 'Greta', LastName: 'Sims', Prefix: 'Ms.', Position: 'HR Manager', Picture: '../../../../images/employees/04.png', BirthDate: '1977/11/22', HireDate: '1998/04/23', Notes: 'Greta has been DevAV\'s HR Manager since 2003. She joined DevAV from Sonee Corp.\r\n\r\nGreta is currently training for the NYC marathon. Her best marathon time is 4 hours. Go Greta.', Address: '1700 S Grandview Dr.', State: 'Georgia', City: 'Atlanta',}, { ID: 5, FirstName: 'Brett', LastName: 'Wade', Prefix: 'Mr.', Position: 'IT Manager', Picture: '../../../../images/employees/05.png', BirthDate: '1968/12/01', HireDate: '2009/03/06', Notes: 'Brett came to DevAv from Microsoft and has led our IT department since 2012.\r\n\r\nWhen he is not working hard for DevAV, he coaches Little League (he was a high school pitcher).', Address: '1120 Old Mill Rd.', State: 'Idaho', City: 'Boise',}, { ID: 6, FirstName: 'Sandra', LastName: 'Johnson', Prefix: 'Mrs.', Position: 'Controller', Picture: '../../../../images/employees/06.png', BirthDate: '1974/11/15', HireDate: '2005/05/11', Notes: 'Sandra is a CPA and has been our controller since 2008. She loves to interact with staff so if you\'ve not met her, be certain to say hi.\r\n\r\nSandra has 2 daughters both of whom are accomplished gymnasts.', Address: '4600 N Virginia Rd.', State: 'Utah', City: 'Beaver',}, { ID: 7, FirstName: 'Kevin', LastName: 'Carter', Prefix: 'Mr.', Position: 'Shipping Manager', Picture: '../../../../images/employees/07.png', BirthDate: '1978/01/09', HireDate: '2009/08/11', Notes: 'Kevin is our hard-working shipping manager and has been helping that department work like clockwork for 18 months.\r\n\r\nWhen not in the office, he is usually on the basketball court playing pick-up games.', Address: '424 N Main St.', State: 'California', City: 'San Diego',}, { ID: 8, FirstName: 'Cynthia', LastName: 'Stanwick', Prefix: 'Ms.', Position: 'HR Assistant', Picture: '../../../../images/employees/08.png', BirthDate: '1985/06/05', HireDate: '2008/03/24', Notes: 'Cindy joined us in 2008 and has been in the HR department for 2 years. \r\n\r\nShe was recently awarded employee of the month. Way to go Cindy!', Address: '2211 Bonita Dr.', State: 'Arkansas', City: 'Little Rock',}, { ID: 9, FirstName: 'Kent', LastName: 'Samuelson', Prefix: 'Dr.', Position: 'Ombudsman', Picture: '../../../../images/employees/02.png', BirthDate: '1972/09/11', HireDate: '2009/04/22', Notes: 'As our ombudsman, Kent is on the front-lines solving customer problems and helping our partners address issues out in the field. He is a classically trained musician and is a member of the Chamber Orchestra.', Address: '12100 Mora Dr', State: 'Missouri', City: 'St. Louis',}, { ID: 10, FirstName: 'Taylor', LastName: 'Riley', Prefix: 'Mr.', Position: 'Network Admin', Picture: '', BirthDate: '1982/08/14', HireDate: '2012/04/14', Notes: 'If you are like the rest of us at DevAV, then you\'ve probably reached out for help from Taylor. He does a great job as a member of our IT department.', Address: '7776 Torreyson Dr', State: 'California', City: 'San Jose',}];

import React from 'react';import ReactDOM from 'react-dom';import App from './App.js';ReactDOM.render(<App />, document.getElementById('app'));

export const employees = [ { ID: 1, FirstName: 'John', LastName: 'Heart', Prefix: 'Mr.', Position: 'CEO', Picture: '../../../../images/employees/01.png', BirthDate: '1964/03/16', HireDate: '1995/01/15', Notes: 'John has been in the Audio/Video industry since 1990. He has led DevAv as its CEO since 2003.\r\n\r\nWhen not working hard as the CEO, John loves to golf and bowl. He once bowled a perfect game of 300.', Address: '351 S Hill St.', State: 'California', City: 'Los Angeles', }, { ID: 2, FirstName: 'Olivia', LastName: 'Peyton', Prefix: 'Mrs.', Position: 'Sales Assistant', Picture: '../../../../images/employees/09.png', BirthDate: '1981/06/03', HireDate: '2012/05/14', Notes: 'Olivia loves to sell. She has been selling DevAV products since 2012. \r\n\r\nOlivia was homecoming queen in high school. She is expecting her first child in 6 months. Good Luck Olivia.', Address: '807 W Paseo Del Mar', State: 'California', City: 'Los Angeles', }, { ID: 3, FirstName: 'Robert', LastName: 'Reagan', Prefix: 'Mr.', Position: 'CMO', Picture: '../../../../images/employees/03.png', BirthDate: '1974/09/07', HireDate: '2002/11/08', Notes: 'Robert was recently voted the CMO of the year by CMO Magazine. He is a proud member of the DevAV Management Team.\r\n\r\nRobert is a championship BBQ chef, so when you get the chance ask him for his secret recipe.', Address: '4 Westmoreland Pl.', State: 'Arkansas', City: 'Bentonville', }, { ID: 4, FirstName: 'Greta', LastName: 'Sims', Prefix: 'Ms.', Position: 'HR Manager', Picture: '../../../../images/employees/04.png', BirthDate: '1977/11/22', HireDate: '1998/04/23', Notes: "Greta has been DevAV's HR Manager since 2003. She joined DevAV from Sonee Corp.\r\n\r\nGreta is currently training for the NYC marathon. Her best marathon time is 4 hours. Go Greta.", Address: '1700 S Grandview Dr.', State: 'Georgia', City: 'Atlanta', }, { ID: 5, FirstName: 'Brett', LastName: 'Wade', Prefix: 'Mr.', Position: 'IT Manager', Picture: '../../../../images/employees/05.png', BirthDate: '1968/12/01', HireDate: '2009/03/06', Notes: 'Brett came to DevAv from Microsoft and has led our IT department since 2012.\r\n\r\nWhen he is not working hard for DevAV, he coaches Little League (he was a high school pitcher).', Address: '1120 Old Mill Rd.', State: 'Idaho', City: 'Boise', }, { ID: 6, FirstName: 'Sandra', LastName: 'Johnson', Prefix: 'Mrs.', Position: 'Controller', Picture: '../../../../images/employees/06.png', BirthDate: '1974/11/15', HireDate: '2005/05/11', Notes: "Sandra is a CPA and has been our controller since 2008. She loves to interact with staff so if you've not met her, be certain to say hi.\r\n\r\nSandra has 2 daughters both of whom are accomplished gymnasts.", Address: '4600 N Virginia Rd.', State: 'Utah', City: 'Beaver', }, { ID: 7, FirstName: 'Kevin', LastName: 'Carter', Prefix: 'Mr.', Position: 'Shipping Manager', Picture: '../../../../images/employees/07.png', BirthDate: '1978/01/09', HireDate: '2009/08/11', Notes: 'Kevin is our hard-working shipping manager and has been helping that department work like clockwork for 18 months.\r\n\r\nWhen not in the office, he is usually on the basketball court playing pick-up games.', Address: '424 N Main St.', State: 'California', City: 'San Diego', }, { ID: 8, FirstName: 'Cynthia', LastName: 'Stanwick', Prefix: 'Ms.', Position: 'HR Assistant', Picture: '../../../../images/employees/08.png', BirthDate: '1985/06/05', HireDate: '2008/03/24', Notes: 'Cindy joined us in 2008 and has been in the HR department for 2 years. \r\n\r\nShe was recently awarded employee of the month. Way to go Cindy!', Address: '2211 Bonita Dr.', State: 'Arkansas', City: 'Little Rock', }, { ID: 9, FirstName: 'Kent', LastName: 'Samuelson', Prefix: 'Dr.', Position: 'Ombudsman', Picture: '../../../../images/employees/02.png', BirthDate: '1972/09/11', HireDate: '2009/04/22', Notes: 'As our ombudsman, Kent is on the front-lines solving customer problems and helping our partners address issues out in the field. He is a classically trained musician and is a member of the Chamber Orchestra.', Address: '12100 Mora Dr', State: 'Missouri', City: 'St. Louis', }, { ID: 10, FirstName: 'Taylor', LastName: 'Riley', Prefix: 'Mr.', Position: 'Network Admin', Picture: '', BirthDate: '1982/08/14', HireDate: '2012/04/14', Notes: "If you are like the rest of us at DevAV, then you've probably reached out for help from Taylor. He does a great job as a member of our IT department.", Address: '7776 Torreyson Dr', State: 'California', City: 'San Jose', },];

<!DOCTYPE html><html> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/23.2.5/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.tsx"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body></html>

#gridContainer { height: 423px;}

FAQs

React Data Grid - Overview? ›

The Data Grid presents information in a structured format of rows and columns. The data is displayed in a user-friendly, quick-to-scan and interactive way, enabling users to efficiently identify patterns, edit data, and gather insights.

Get More Info Here ›

What is React data grid? ›

React Data Grid - A Flexible Data Table Component with Rich UI. Load millions of records in just a second. Mobile-first design that adapts to any resolution.

Explore More ›

What is the grid concept in React? ›

The grid creates visual consistency between layouts while allowing flexibility across a wide variety of designs. Material Design's responsive UI is based on a 12-column grid layout. The Grid component shouldn't be confused with a data grid; it is closer to a layout grid. For a data grid head to the DataGrid component.

Keep Reading ›

What is the difference between React data grid and data table? ›

In its most basic form, a data grid could be seen as a table - data represented in rows and columns. 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.

Discover More ›

What is the description of data grid? ›

A data grid is a set of computers that directly interact with each other to coordinate the processing of large jobs. The participating computers are typically spread across multiple geographically remote sites.

Get More Info Here ›

What is the best DataGrid 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.

Explore More ›

What is the use of 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.

Does React have a grid system? ›

react-grid-system provides a responsive grid for React inspired by Bootstrap. Moreover, it has various additional powerful features, such as setting breakpoints and gutter widths through React's context. Three components are provided for creating responsive grids: Container , Row , and Col .

Read The Full Story ›

What is the equivalent of Datatables in react? ›

React-datatable is a component which provide ability to create multifunctional table using single component like jQuery Datatable. It's fully customizable and easy to integrate in any react component.

Get More Info Here ›

Is mui DataGrid free? ›

The MUI X Community plan is published under an MIT license and is free forever. This version contains features that we believe are maintainable by contributions from the open-source community. These are the Community MIT-licensed npm packages: @mui/x-data-grid.

What is the data type of column in react data grid? ›

React Column Types

Column types supported are Text column, Numeric column, DateTime column, Image column, ComboBox and Template. Each column binds to data by setting the Field property to the name of the corresponding property on the items of your underlying data source bound to the React data grid.

Know More ›

What are the advantages of a data grid? ›

Data Grids offer several benefits to organizations, including:

Increased processing performance through parallelism and in-memory storage.
Scalability to accommodate growing data volumes and workloads.
Improved fault tolerance and high availability.
Support for real-time analytics and complex event processing.

Learn More ›

What are the different types of data grids? ›

All layout grids can be designed in two ways: symmetric or asymmetric. There are five main types of grid layouts such as manuscript, column, baseline, modular and hierarchical grids.

Get More Info Here ›

How do you show data on a data grid? ›

Select the data grid or list view and click on the Columns property in the Data Source tab. Click the Add Column button to create a new column. Set the Attribute property of the column to a placeholder attribute, such as MyAttribute . Set the Caption property to the desired column header text.

React Data Grid - Overview (2024)

FAQs

React Data Grid - Overview? ›

What is the data type of column in react data grid? ›

References