DevExpress-Examples · arman-boyakhchyan · Feb 20, 2026 · Feb 18, 2026 · Feb 18, 2026 · Feb 18, 2026
@@ -1,5 +1,4 @@
 <!-- default badges list -->
-![](https://img.shields.io/endpoint?url=https://codecentral.devexpress.com/api/v1/VersionRange/1011863345/25.1.3%2B)
 [![](https://img.shields.io/badge/Open_in_DevExpress_Support_Center-FF7200?style=flat-square&logo=DevExpress&logoColor=white)](https://supportcenter.devexpress.com/ticket/details/T1297944)
 [![](https://img.shields.io/badge/📖_How_to_use_DevExpress_Examples-e9f6fc?style=flat-square)](https://docs.devexpress.com/GeneralInformation/403183)
 [![](https://img.shields.io/badge/💬_Leave_Feedback-feecdd?style=flat-square)](#does-this-example-address-your-development-requirementsobjectives)
@@ -8,7 +7,7 @@

 This repository contains code referenced in the following DevExtreme step-by-step tutorial: [First Steps](https://js.devexpress.com/Documentation/Guide/Common/First_Steps/). 

 The sample application includes two DevExtreme UI components: [DataGrid](https://js.devexpress.com/Documentation/Guide/UI_Components/DataGrid/Overview/) and [ProgressBar](https://js.devexpress.com/Documentation/Guide/UI_Components/ProgressBar/Overview/). Our DataGrid displays task information (you can mark them as complete or incomplete). The ProgressBar above the DataGrid communicates task progress.

 <div align="center"><img src="./first-steps.png" /></div>


@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + React + TS</title>
   </head>
-  <body>
+  <body class="dx-viewport">
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>

@@ -1,16 +1,60 @@
+:root {
+  color-scheme: light; /* Update this property when you switch between light/dark themes. */
+}
+
 #dashboard {
   display: grid;
   gap: 20px;
   max-width: 900px;
   margin: 40px auto;
-  padding: 20px;
+  padding: 80px 20px;
   box-sizing: border-box;
 }
 
-#progress,
-#task-grid {
-  background: #fff;
+#progress, #task-grid {
+  background-color: light-dark(#fff, #383838);
   padding: 16px;
   border-radius: 8px;
-  box-shadow: 0 2px 6px rgba(0 0 0 / 10%);
+  box-shadow: 0 2px 6px rgba(0 0 0 10%);
+}
+
+#progress {
+  padding-top: 32px
+}
+
+#task-grid .dx-datagrid-headers, #task-grid .dx-datagrid .dx-datagrid-table .dx-header-row>td:first-child {
+  border-top-left-radius: 8px;
+}
+
+#task-grid .dx-datagrid-headers, #task-grid .dx-datagrid .dx-datagrid-table .dx-header-row>td:last-child {
+  border-top-right-radius: 8px;
+}
+
+#task-grid .dx-row-lines:nth-last-child(2) > td {
+  border-bottom-style: none;
+}
+
+#task-grid .dx-datagrid-rowsview {
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
+  border-bottom-style: none;
+}
+
+.dx-dialog .dx-toolbar-center {
+  margin: -8px !important;
+  width: calc(100% + 16px);
+  border-spacing: 8px 0;
+  float: none !important;
+}
+
+.dx-toolbar-center .dx-button {
+  width: 100%;
+}
+
+.dx-toolbar-center .dx-item {
+  padding-right: 0 !important;
+}
+
+.dx-link-delete::before {
+  color: var(--dx-color-danger)
 }
@@ -1,10 +1,30 @@
 import { useCallback, useState } from 'react';
-import DataGrid, { Column, Editing } from 'devextreme-react/data-grid';
-import ProgressBar from 'devextreme-react/progress-bar';
+
+import {
+  DataGrid,
+  Column,
+  Editing,
+  Toolbar,
+  type DataGridTypes,
+} from 'devextreme-react/data-grid';
+import { ProgressBar } from 'devextreme-react/progress-bar';
+import { Button } from 'devextreme-react/button';
+
+import type dxDataGrid from 'devextreme/ui/data_grid';
+import { formatDate } from 'devextreme/localization';
+import notify from 'devextreme/ui/notify';
+
 import './App.css';
-import 'devextreme/dist/css/dx.light.css';
+import 'devextreme/dist/css/dx.fluent.blue.light.css';
 
-const tasks = [
+interface taskData {
+  id: number;
+  task: string;
+  dueDate: Date;
+  done: boolean;
+}
+
+const tasks: taskData[] = [
   {
     id: 1,
     task: 'Buy groceries',
@@ -19,8 +39,55 @@ const tasks = [
   },
 ];
 
+function createAddClickHandler(grid: dxDataGrid): () => void {
+  return () => {
+    grid.addRow().catch((error) => {
+      // addRow() returns a promise. This code satisfies the no-floating-promises lint rule.
+      notify(error);
+    });
+  };
+}
+
+function renderTaskCell(data: DataGridTypes.ColumnCellTemplateData): JSX.Element {
+  if (!data.value) {
+    return (
+      <div style={{ color: 'var(--dx-color-icon)' }}>Enter a title...</div>
+    );
+  }
+  return (
+    <div>{data.value}</div>
+  );
+}
+
+function renderDueDateCell(data: DataGridTypes.ColumnCellTemplateData): JSX.Element {
+  if (!data.value) {
+    return (
+      <div style={{ color: 'var(--dx-color-icon)' }}>Enter a date...</div>
+    );
+  }
+  return (
+    <div>{formatDate(data.value, 'shortDate')}</div>
+  );
+}
+
+// This processes `undefined` values to eliminate the Indeterminate state in CheckBox components.
+function calculateDoneValue(row: taskData): boolean {
+  return !!row.done;
+}
+
+function renderButtonColumnHeader(data: DataGridTypes.ColumnHeaderCellTemplateData): JSX.Element {
+  return (
+    <Button
+      icon='add'
+      stylingMode='text'
+      onClick={createAddClickHandler(data.component)}
+    />
+  );
+}
+
 function App(): JSX.Element {
   const [progressValue, setProgressValue] = useState(50);
+
   const updateProgress = useCallback(() => {
     const all = tasks.length;
     const completed = tasks.filter((t) => t.done).length;
@@ -38,16 +105,32 @@ function App(): JSX.Element {
         onRowInserted={updateProgress}
         onRowRemoved={updateProgress}
       >
-        <Column dataField='task' />
-        <Column dataField='dueDate' />
-        <Column dataField='done' />{' '}
+        <Column
+          dataField='task'
+          cellRender={renderTaskCell}
+        />
+        <Column
+          dataField='dueDate'
+          cellRender={renderDueDateCell}
+        />
+        <Column
+          dataField='done'
+          calculateCellValue={calculateDoneValue}
+        />
+        <Column
+          type='buttons'
+          headerCellRender={renderButtonColumnHeader}
+        />
         <Editing
           mode='cell'
           allowUpdating={true}
           allowAdding={true}
           allowDeleting={true}
           newRowPosition='last'
         />
+        <Toolbar
+          visible={false}
+        />
       </DataGrid>
     </div>
   );