DevExtreme React - First Steps

Angular
IMPORTANT
You should be familiar with basic concepts and patterns of React to use DevExtreme components. If you are not, refer to the React documentation to follow its getting-started tutorial first.
Vue
IMPORTANT
You should be familiar with basic concepts and patterns of React to use DevExtreme components. If you are not, refer to the React documentation to follow its getting-started tutorial first.
React
IMPORTANT
You should be familiar with basic concepts and patterns of React to use DevExtreme components. If you are not, refer to the React documentation to follow its getting-started tutorial first.

In this step-by-step tutorial, you will build a simple task list application with a progress bar. By the end, you will have the following application:

The application includes two DevExtreme components: DataGrid and ProgressBar. The DataGrid displays tasks, and you can mark them as complete or incomplete. The ProgressBar above the DataGrid indicates task completion progress.

You can find the full source code in the GitHub repository:

View on GitHub

Setup Your Project

jQuery

First, create an empty web application. Then add jQuery and DevExtreme source files to the <head>:

index.html
<head>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/25.1.4/js/dx.all.js"></script>
</head>

For complete installation instructions, refer to the following help topic: Add DevExtreme to a jQuery Application.

Angular

First, create an empty Angular application (see Angular Documentation: Set up a new project locally). Then, in the project file directory, run the following DevExtreme CLI command to add DevExtreme to your app:

npx -p devextreme-cli devextreme add devextreme-angular

For complete installation instructions, refer to the following help topic: Add DevExtreme to an Angular CLI Application.

NOTE
For a quick start, try DevExtreme Application Template. This template includes a navigation menu and several sample views in a responsive layout.
Vue

First, create an empty Vue JavaScript application (see Vue Documentation: Creating a Vue Application). Then, in the project file directory, run the following DevExtreme CLI command to add DevExtreme to your app:

npx -p devextreme-cli devextreme add devextreme-vue

For complete installation instructions, refer to the following help topic: Add DevExtreme to a Vue Application.

NOTE
For a quick start, try DevExtreme Application Template. This template includes a navigation menu and several sample views in a responsive layout.
React

First, create an empty React JavaScript application (see React Documentation: Build a React app from Scratch). Then, in the project file directory, run the following DevExtreme CLI command to add DevExtreme to your app:

npx -p devextreme-cli devextreme add devextreme-react

For complete installation instructions, refer to the following help topic: Add DevExtreme to a React Application.

NOTE
For a quick start, try DevExtreme Application Template. This template includes a navigation menu and several sample views in a responsive layout.

Style the App

DevExtreme offers over 40 predefined themes for component styling. You can also create a custom theme with our ThemeBuilder.

In the next step of the tutorial, apply the dx.light theme and add CSS styles to the components.

jQuery

To apply a theme, link its file in the <head> between jQuery and DevExtreme sources (the order is important):

index.html
<head>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/25.1.4/css/dx.light.css" />
    <link rel="stylesheet" type="text/css" href="index.css" />
    <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/25.1.4/js/dx.all.js"></script>
</head>
Angular

To apply a theme, open the angular.json file and reference a stylesheet:

angular.json
{
  "projects": {
    "ProjectName": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "node_modules/devextreme/dist/css/dx.light.css",
              "src/styles.css"
            ],
            ...
          },
          ...
        },
        ...
      }
    },
    ...
  },
  ...
}
Vue

To apply a theme, import a stylesheet where DevExtreme components are used or in the main application file:

import 'devextreme/dist/css/dx.light.css';
React

To apply a theme, import a stylesheet where DevExtreme components are used or in the main application file:

import 'devextreme/dist/css/dx.light.css';

If you want to apply theme colors and typography settings to all page elements (and not only to DevExtreme UI components), add a dx-viewport class to the <body> tag of your application's index.html file.

To configure component styles manually, use CSS:

index.css
#dashboard {
    display: grid;
    gap: 20px;
    max-width: 900px;
    margin: 40px auto;
    padding: 20px;
    box-sizing: border-box;
}

#progress,
#task-grid {
    background: #fff;
    padding: 16px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

Specify the Page Layout

jQuery

Next, specify the component layout in the HTML file:

index.html
<div id="dashboard">
    <div id="progress"></div>
    <div id="task-grid"></div>
</div>
Angular

Next, import components into app.component.ts. For detailed instructions on imports, refer to the Import DevExtreme Components help topic.

app.component.ts
import { Component } from '@angular/core';
import { DxDataGridComponent } from 'devextreme-angular/ui/data-grid';
import { DxProgressBarComponent } from 'devextreme-angular/ui/progress-bar';

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [DxDataGridComponent, DxProgressBarComponent],
    templateUrl: './app.component.html',
    styleUrl: './app.component.css'
})
export class AppComponent { }

Specify the component layout in the HTML file:

app.component.html
<div id="dashboard">
    <dx-progress-bar id="progress"></dx-progress-bar>
    <dx-data-grid id="task-grid"></dx-data-grid>
</div>
Vue

Next, import components and specify their layout. For detailed instructions on imports, refer to the Import DevExtreme Components help topic.

App.vue
<template>
    <div id="dashboard">
        <DxProgressBar id="progress" />
        <DxDataGrid id="task-grid"></DxDataGrid>
    </div>
</template>
<script setup lang="ts">
import DxProgressBar from 'devextreme-vue/progress-bar';
import DxDataGrid from 'devextreme-vue/data-grid';
</script>
React

Next, import components and specify their layout. For detailed instructions on imports, refer to the Import DevExtreme Components help topic.

App.tsx
import DataGrid from 'devextreme-react/data-grid';
import ProgressBar from 'devextreme-react/progress-bar';

function App(): JSX.Element {
    return(
        <div id="dashboard">
            <ProgressBar id="progress" />
            <DataGrid id="task-grid"></DataGrid>
        </div>
    );
}

export default App;

Configure DataGrid

Now, you will create a DataGrid and configure its main functionality.

Bind DataGrid to Data

The DataGrid component can load and update data from different data source types. In this guide, a small local array serves as the data source. Follow these steps:

jQuery
  1. Create the tasks array.
  2. Assign the array to the dataSource property.
  3. Specify keyExpr (id in this case).

  4. In the columns array, define which columns you want to display.

    index.js
    $(() => {
    const tasks = [
        { id: 1, task: "Buy groceries", dueDate: new Date(), done: false },
        { id: 2, task: "Write a blog post", dueDate: new Date(), done: true }
    ];
    $("#task-grid").dxDataGrid({
        dataSource: tasks,
        keyExpr: "id",
        columns: ["task", "dueDate", "done"],
    });
});
Angular

  1. Create the tasks array.

    app.component.ts
    export class AppComponent {
    tasks = [
        { id: 1, task: "Buy groceries", dueDate: new Date(), done: false },
        { id: 2, task: "Write a blog post", dueDate: new Date(), done: true }
    ];
}

  2. Assign the array to the dataSource property.

  3. Specify keyExpr (id in this case).

  4. Use the nested dxi-data-grid-column component to define columns you want to display.

    app.component.html
    <dx-data-grid ...
    [dataSource]="tasks"
    keyExpr="id"
>
    <dxi-data-grid-column dataField="task"></dxi-data-grid-column>
    <dxi-data-grid-column dataField="dueDate"></dxi-data-grid-column>
    <dxi-data-grid-column dataField="done"></dxi-data-grid-column>
</dx-data-grid>

  5. Remember to import the DxiDataGridColumnComponent component.

    app.component.ts
    import { Component } from '@angular/core';
import { DxDataGridComponent, DxiDataGridColumnComponent } from 'devextreme-angular/ui/data-grid';
@Component({
    selector: 'app-root',
    standalone: true,
    imports: [DxDataGridComponent, DxiDataGridColumnComponent],
    templateUrl: './app.component.html',
    styleUrl: './app.component.css'
})
export class AppComponent { ... }

For more information about the nested components, refer to the following help topics:

Vue
  1. Create the tasks array.
  2. Assign the array to the dataSource property.
  3. Specify keyExpr (id in this case).

  4. Use the nested DxColumn component to define columns you want to display. Remember to import the necessary nested components.

    App.vue
    <template>
    <div id="dashboard">
        <DxProgressBar id="progress" />
        <DxDataGrid ...
            :data-source="tasks"
            key-expr="id"
        >
            <DxColumn  
                data-field="task"
            />
            <DxColumn  
                data-field="dueDate"
            />
            <DxColumn 
                data-field="done"
            />
        </DxDataGrid>
    </div>
</template>
<script setup lang="ts">
import DxDataGrid, { DxColumn } from 'devextreme-vue/data-grid';

const tasks = [
    { id: 1, task: "Buy groceries", dueDate: new Date(), done: false },
    { id: 2, task: "Write a blog post", dueDate: new Date(), done: true }
];
</script>

For more information about the nested components, refer to the following help topics:

React
  1. Create the tasks array.
  2. Assign the array to the dataSource property.
  3. Specify keyExpr (id in this case).

  4. Use the nested Column component to define columns you want to display. Remember to import the necessary nested components.

    App.tsx
    import DataGrid, { Column } from 'devextreme-react/data-grid';

const tasks = [
    { id: 1, task: "Buy groceries", dueDate: new Date(), done: false },
    { id: 2, task: "Write a blog post", dueDate: new Date(), done: true }
];

function App(): JSX.Element {
    return(
        <div id="dashboard">
            <ProgressBar id="progress" />
            <DataGrid ... 
                dataSource={tasks}
                keyExpr="id"
            >
                <Column  
                    dataField="task"
                />
                <Column  
                    dataField="dueDate"
                />
                <Column  
                    dataField="done"
                />
            </DataGrid>
        </div>
    );
}

export default App;

For more information about the nested components, refer to the following help topics:

Configure Editing

The DataGrid component allows you to configure core features such as sorting, filtering, search, grouping, selection, and editing. Enable editing to allow users to add, edit, and delete rows.

This guide explains how to create a task list where users can check off tasks, remove them, and add new ones. To do this, specify the following editing options:

  • allowAdding
    Set to true - allows users to add new rows.

  • allowDeleting
    Set to true - allows users to remove rows.

  • allowUpdating
    Set to true - allows users to update rows.

  • mode
    Change the mode from the default "row" to "cell" for easy task status changes.

  • newRowPosition
    Set new rows to appear at the "last" position for a top-to-bottom task list.

jQuery
index.js
$(() => {
    $("#task-grid").dxDataGrid({
        // ...
        editing: {
            mode: "cell",
            allowUpdating: true,
            allowAdding: true,
            allowDeleting: true,
            newRowPosition: "last"
        },
    });
});
Angular
app.component.html
<dx-data-grid ... >
    <dxo-data-grid-editing 
        mode="row" 
        [allowUpdating]="true" 
        [allowDeleting]="true" 
        [allowAdding]="true"
        newRowPosition="last"
    ></dxo-data-grid-editing>
</dx-data-grid>

Remember to import the DxoDataGridEditingComponent component:

app.component.ts
import { Component } from '@angular/core';
import { DxDataGridComponent, DxiDataGridColumnComponent, DxoDataGridEditingComponent } from 'devextreme-angular/ui/data-grid';
@Component({
    selector: 'app-root',
    standalone: true,
    imports: [DxDataGridComponent, DxiDataGridColumnComponent, DxoDataGridEditingComponent],
    templateUrl: './app.component.html',
    styleUrl: './app.component.css'
})
export class AppComponent { ... }
Vue
App.vue
<template>
    <div id="dashboard">
        <DxProgressBar id="progress" />
        <DxDataGrid ... >
            <DxEditing 
                mode="row"
                :allow-updating="true"
                :allow-adding="true"
                :allow-deleting="true"
                new-row-position="last"
            />
        </DxDataGrid>
    </div>
</template>
<script setup lang="ts">
import DxDataGrid, { DxColumn, DxEditing } from 'devextreme-vue/data-grid';
// ...
</script>
React
App.tsx
import DataGrid, { Column, Editing } from 'devextreme-react/data-grid';
// ...

function App(): JSX.Element {
    return(
        <div id="dashboard">
            <ProgressBar id="progress" />
            <DataGrid ... >
                <Editing 
                    mode="row"
                    allowUpdating={true}
                    allowAdding={true}
                    allowDeleting={true}
                    newRowPosition="last"
                />
            </DataGrid>
        </div>
    );
}

export default App;

Show Progress

At this point of the tutorial, you have built a task DataGrid that allows users to edit records. To display task progress, you integrated a ProgressBar into the layout. The next steps are to configure the ProgressBar options and synchronize it with DataGrid updates.

Configure ProgressBar

jQuery

First, create a ProgressBar and save its instance to access its methods later.

Next, set the value option to 50, as half of the tasks in the initial list are completed.

index.js
$(() => {
    const progress = $("#progress").dxProgressBar({
        value: 50,
    }).dxProgressBar("instance");
});
Angular

Create a progressValue variable and set it to 50, as half of the tasks in the initial list are completed.

app.component.ts
export class AppComponent {
    // ...
    progressValue = 50;
}

Then, bind the value option to this variable. Directly assigning 50 will not work, as the variable will synchronize ProgressBar and DataGrid later.

app.component.html
<dx-progress-bar ...
    [value]="progressValue"
>
</dx-progress-bar>
Vue

Create a progressValue variable and set its ref to 50, as half of the tasks in the initial list are completed. Then, bind the value option to this variable. Directly assigning 50 will not work, as the variable will synchronize ProgressBar and DataGrid later.

App.vue
<template>
    <div id="dashboard">
        <DxProgressBar ... 
            :value="progressValue"
        />
        <DxDataGrid ... ></DxDataGrid>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import DxProgressBar from 'devextreme-vue/progress-bar';
//...

const progressValue = ref(50);
</script>
React

Create a progressValue variable and set its state to 50, as half of the tasks in the initial list are completed. Then, bind the value option to this variable. Directly assigning 50 will not work, as the variable will synchronize ProgressBar and DataGrid later.

App.tsx
import { useState } from 'react';
import ProgressBar from 'devextreme-react/progress-bar';

function App(): JSX.Element {
    const [progressValue, setProgressValue] = useState(50);
    return(
        <div id="dashboard">
            <ProgressBar 
                value={progressValue}
            />
            <DataGrid ... ></DataGrid>
        </div>
    );
}

export default App;

Sync ProgressBar with DataGrid

jQuery

To synchronize ProgressBar with DataGrid, define an updateProgress function. This function checks completed tasks and updates the ProgressBar value using the option method. Use this function to handle the following events: onRowUpdated, onRowInserted, and onRowRemoved.

index.js
$(() => {
    $("#task-grid").dxDataGrid({
        // ...
        onRowUpdated: updateProgress,
        onRowInserted: updateProgress,
        onRowRemoved: updateProgress
    });

    function updateProgress() {
        const all = tasks.length;
        const completed = tasks.filter((t) => t.done).length;
        progress.option("value", Math.round((completed / all) * 100));
    }
});
Angular

To synchronize ProgressBar with DataGrid, define an updateProgress function. This function checks completed tasks and updates the ProgressBar value using the progressValue variable.

app.component.ts
export class AppComponent {
    // ...
    updateProgress() {
        const all = this.tasks.length;
        const completed = this.tasks.filter((t) => t.done).length;
        this.progressValue = Math.round((completed / all) * 100);
    };
}

Use this function to handle the following DataGrid events: onRowUpdated, onRowInserted, and onRowRemoved.

app.component.html
<dx-data-grid ...
    (onRowUpdated)="updateProgress($event)"
    (onRowInserted)="updateProgress($event)"
    (onRowRemoved)="updateProgress($event)"
></dx-data-grid>
Vue

To synchronize ProgressBar with DataGrid, define an updateProgress function. This function checks completed tasks and updates the ProgressBar value using the progressValue variable. Use this function to handle the following DataGrid events: onRowUpdated, onRowInserted, and onRowRemoved.

App.vue
    <template>
        <div id="dashboard">
            <DxProgressBar ... />
            <DxDataGrid ...
                @row-updated="updateProgress"
                @row-inserted="updateProgress"
                @row-removed="updateProgress"
            >
            </DxDataGrid>
        </div>
    </template>
    <script setup lang="ts">
    //...
    function updateProgress() {
        const all = tasks.length;
        const completed = tasks.filter((t) => t.done).length;
        progressValue.value = Math.round((completed / all) * 100);
    };
    </script>
React

To synchronize ProgressBar with DataGrid, define an updateProgress function. This function checks completed tasks and updates the ProgressBar value using the progressValue variable. Use this function to handle the following DataGrid events: onRowUpdated, onRowInserted, and onRowRemoved.

App.tsx
function App(): JSX.Element {
    const [progressValue, setProgressValue] = useState(50);
    function updateProgress() {
        const all = tasks.length;
        const completed = tasks.filter((t) => t.done).length;
        setProgressValue(Math.round((completed / all) * 100));
    };
    return(
        <div id="dashboard">
            <ProgressBar ... />
            <DataGrid ...
                onRowUpdated={updateProgress}
                onRowInserted={updateProgress}
                onRowRemoved={updateProgress}
            >
            </DataGrid>
        </div>
    );
}

export default App;

Explore More

To learn more about DevExtreme, refer to the following sources:

jQuery

  1. Learn the basics with Component Configuration Syntax.

  2. Edit and copy code from over 450 DevExtreme demos.

  3. To learn more about a specific component, review guides and API references in the documentation. For common issues, refer to the following resources:

  4. Need help? Submit a ticket to the DevExpress Support Center.

Angular

  1. Learn the basics with Component Configuration Syntax.

  2. Edit and copy code from over 450 DevExtreme demos.

  3. To learn more about a specific component, review guides and API references in the documentation. For common issues, refer to the following resources:

  4. Need help? Submit a ticket to the DevExpress Support Center.

Vue

  1. Learn the basics with Component Configuration Syntax.

  2. Edit and copy code from over 450 DevExtreme demos.

  3. To learn more about a specific component, review guides and API references in the documentation. For common issues, refer to the following resources:

  4. Need help? Submit a ticket to the DevExpress Support Center.

React

  1. Learn the basics of Component Configuration Syntax.

  2. Edit and copy code from over 450 DevExtreme demos.

  3. To learn more about a specific component, review guides and API references in the documentation. For common issues, refer to the following resources:

  4. Need help? Submit a ticket to the DevExpress Support Center.