DevExtreme UI and Visualization Components for React

25.2.6 · active · verified Sun Apr 19

DevExtreme React is a comprehensive suite of UI and visualization components for React applications, providing high-performance, enterprise-grade widgets such as data grids, charts, editors, and navigation controls. These components act as React wrappers around the core DevExtreme JavaScript library. The current stable version is 25.2.6. DevExtreme typically follows a structured release cadence with two major updates per year (e.g., 25.1, 25.2) and frequent patch releases, often monthly or bi-monthly, ensuring continuous improvements and bug fixes. Key differentiators include an extensive feature set within components (like advanced data binding, filtering, and grouping in the DataGrid), a consistent API, and comprehensive documentation. It is particularly well-suited for complex business applications requiring a rich, responsive user interface. While the `devextreme-react` package itself is MIT licensed, the underlying DevExtreme components require a commercial license from DevExpress for production use.

Common errors

Warnings

Install

Imports

Quickstart

Demonstrates a basic DevExtreme DataGrid in a React component with local data, paging, and in-grid CRUD operations using a popup form. It also includes necessary theme imports.

import React from 'react';
import DataGrid, { Column, Paging, Pager, Editing, Popup, Form, RequiredRule } from 'devextreme-react/data-grid';
import 'devextreme/dist/css/dx.material.blue.light.css'; // Or another theme

const employees = [
  { id: 1, firstName: 'John', lastName: 'Doe', city: 'New York', position: 'Developer' },
  { id: 2, firstName: 'Jane', lastName: 'Smith', city: 'London', position: 'Designer' },
  { id: 3, firstName: 'Peter', lastName: 'Jones', city: 'Paris', position: 'Manager' },
  // More data...
];

function App() {
  const onRowInserting = (e) => {
    // Simulate API call for adding a new employee
    console.log('Inserting row:', e.data);
    employees.push({ ...e.data, id: employees.length + 1 });
    e.component.refresh(true);
  };

  const onRowUpdating = (e) => {
    // Simulate API call for updating an employee
    console.log('Updating row:', e.newData, 'for:', e.oldData);
    Object.assign(employees.find(emp => emp.id === e.key), e.newData);
    e.component.refresh(true);
  };

  const onRowRemoving = (e) => {
    // Simulate API call for removing an employee
    console.log('Removing row with key:', e.key);
    const index = employees.findIndex(emp => emp.id === e.key);
    if (index > -1) {
      employees.splice(index, 1);
    }
    e.component.refresh(true);
  };

  return (
    <div className="app-container" style={{ margin: '20px' }}>
      <h2>DevExtreme DataGrid with Basic CRUD</h2>
      <DataGrid
        dataSource={employees}
        keyExpr="id"
        showBorders={true}
        onRowInserting={onRowInserting}
        onRowUpdating={onRowUpdating}
        onRowRemoving={onRowRemoving}
      >
        <Paging defaultPageSize={10} />
        <Pager showPageSizeSelector={true} allowedPageSizes={[5, 10, 20]} showInfo={true} />
        <Editing
          mode="popup"
          allowAdding={true}
          allowUpdating={true}
          allowDeleting={true}
          useIcons={true}
        >
          <Popup title="Employee Info" showTitle={true} width={700} height={340} />
          <Form>
            <RequiredRule message="First Name is required" />
            <RequiredRule message="Last Name is required" />
            <RequiredRule message="Position is required" />
          </Form>
        </Editing>

        <Column dataField="firstName" caption="First Name" />
        <Column dataField="lastName" caption="Last Name" />
        <Column dataField="city" caption="City" />
        <Column dataField="position" caption="Position" />
      </DataGrid>
    </div>
  );
}

export default App;

view raw JSON →