{"id":10741,"library":"devextreme-react","title":"DevExtreme UI and Visualization Components for React","description":"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.","status":"active","version":"25.2.6","language":"javascript","source_language":"en","source_url":"https://github.com/DevExpress/DevExtreme","tags":["javascript","React","React grid","react-component","devextreme","devexpress","UI","UX","component","typescript"],"install":[{"cmd":"npm install devextreme-react","lang":"bash","label":"npm"},{"cmd":"yarn add devextreme-react","lang":"bash","label":"yarn"},{"cmd":"pnpm add devextreme-react","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for rendering React components.","package":"react","optional":false},{"reason":"Peer dependency required for rendering React components to the DOM.","package":"react-dom","optional":false},{"reason":"Core DevExtreme library providing the UI components' functionality. This package wraps it.","package":"devextreme","optional":false}],"imports":[{"note":"Most DevExtreme React components are exported as default from their specific path. Sub-components (like Column, Editing) are named exports from the same module.","wrong":"import { DataGrid } from 'devextreme-react'; // Incorrect, specific component path needed","symbol":"DataGrid","correct":"import DataGrid, { Column, Editing, Paging } from 'devextreme-react/data-grid';"},{"note":"For simpler components, the default export is often the component itself. Ensure your build system handles ESM imports correctly.","wrong":"const Button = require('devextreme-react/button'); // CommonJS is not the primary usage pattern for modern React apps with this library.","symbol":"Button","correct":"import Button from 'devextreme-react/button';"},{"note":"The core DevExtreme CSS themes must be imported from the `devextreme` package. Choose one base theme (e.g., `dx.light.css`) and optionally a material or fluent theme.","wrong":"import 'devextreme-react/dist/css/dx.light.css'; // Themes are part of the core 'devextreme' package, not 'devextreme-react'.","symbol":"dx themes","correct":"import 'devextreme/dist/css/dx.light.css';\nimport 'devextreme/dist/css/dx.material.blue.light.css';"}],"quickstart":{"code":"import React from 'react';\nimport DataGrid, { Column, Paging, Pager, Editing, Popup, Form, RequiredRule } from 'devextreme-react/data-grid';\nimport 'devextreme/dist/css/dx.material.blue.light.css'; // Or another theme\n\nconst employees = [\n  { id: 1, firstName: 'John', lastName: 'Doe', city: 'New York', position: 'Developer' },\n  { id: 2, firstName: 'Jane', lastName: 'Smith', city: 'London', position: 'Designer' },\n  { id: 3, firstName: 'Peter', lastName: 'Jones', city: 'Paris', position: 'Manager' },\n  // More data...\n];\n\nfunction App() {\n  const onRowInserting = (e) => {\n    // Simulate API call for adding a new employee\n    console.log('Inserting row:', e.data);\n    employees.push({ ...e.data, id: employees.length + 1 });\n    e.component.refresh(true);\n  };\n\n  const onRowUpdating = (e) => {\n    // Simulate API call for updating an employee\n    console.log('Updating row:', e.newData, 'for:', e.oldData);\n    Object.assign(employees.find(emp => emp.id === e.key), e.newData);\n    e.component.refresh(true);\n  };\n\n  const onRowRemoving = (e) => {\n    // Simulate API call for removing an employee\n    console.log('Removing row with key:', e.key);\n    const index = employees.findIndex(emp => emp.id === e.key);\n    if (index > -1) {\n      employees.splice(index, 1);\n    }\n    e.component.refresh(true);\n  };\n\n  return (\n    <div className=\"app-container\" style={{ margin: '20px' }}>\n      <h2>DevExtreme DataGrid with Basic CRUD</h2>\n      <DataGrid\n        dataSource={employees}\n        keyExpr=\"id\"\n        showBorders={true}\n        onRowInserting={onRowInserting}\n        onRowUpdating={onRowUpdating}\n        onRowRemoving={onRowRemoving}\n      >\n        <Paging defaultPageSize={10} />\n        <Pager showPageSizeSelector={true} allowedPageSizes={[5, 10, 20]} showInfo={true} />\n        <Editing\n          mode=\"popup\"\n          allowAdding={true}\n          allowUpdating={true}\n          allowDeleting={true}\n          useIcons={true}\n        >\n          <Popup title=\"Employee Info\" showTitle={true} width={700} height={340} />\n          <Form>\n            <RequiredRule message=\"First Name is required\" />\n            <RequiredRule message=\"Last Name is required\" />\n            <RequiredRule message=\"Position is required\" />\n          </Form>\n        </Editing>\n\n        <Column dataField=\"firstName\" caption=\"First Name\" />\n        <Column dataField=\"lastName\" caption=\"Last Name\" />\n        <Column dataField=\"city\" caption=\"City\" />\n        <Column dataField=\"position\" caption=\"Position\" />\n      </DataGrid>\n    </div>\n  );\n}\n\nexport default App;\n","lang":"typescript","description":"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."},"warnings":[{"fix":"Purchase a DevExtreme commercial license and apply the provided license key in your application. Instructions are available in the DevExpress Download Manager.","message":"DevExtreme is a commercial product. While `devextreme-react` itself is MIT licensed, using the underlying DevExtreme components in production requires purchasing a commercial license from DevExpress. Without a valid license, trial messages or warnings may appear.","severity":"gotcha","affected_versions":">=18.1"},{"fix":"Always consult the official 'What's New' and 'Breaking Changes' documentation for the specific DevExtreme version you are upgrading to. Update all DevExtreme and `devextreme-react` packages to the matching major version.","message":"Major version upgrades of DevExtreme (e.g., from v24.x to v25.x) often introduce breaking changes in component APIs, behavior, or underlying dependencies. `devextreme-react` versions typically align with the core `devextreme` package, meaning its minor/major versions reflect these breaking changes.","severity":"breaking","affected_versions":">=25.1"},{"fix":"Add appropriate CSS imports at the root of your application, for example: `import 'devextreme/dist/css/dx.light.css';` or `import 'devextreme/dist/css/dx.material.blue.light.css';`. You may also use the ThemeBuilder for custom themes.","message":"DevExtreme themes must be explicitly imported from the `devextreme/dist/css` path. Failing to do so will result in unstyled components, impacting the visual appearance and user experience.","severity":"gotcha","affected_versions":">=16.2"},{"fix":"Ensure your `react`, `react-dom`, and `devextreme` packages match the peer dependency requirements specified for your `devextreme-react` version. For instance, `devextreme-reactive` updated its minimum React version to v17.0.2 in v24.2.","message":"The `devextreme-react` package requires specific React and `devextreme` peer dependency versions. Using incompatible versions can lead to runtime errors or unexpected behavior. For instance, recent versions might require React 17+.","severity":"breaking","affected_versions":">=24.2"},{"fix":"Implement data virtualization (e.g., infinite scrolling, paging), server-side data processing, or utilize `CustomStore` with remote operations for large datasets. Profile your application to identify bottlenecks.","message":"DevExtreme components can have performance implications with very large datasets or complex configurations if not optimized. Features like virtualization, lazy loading, and server-side data processing are crucial for maintaining responsiveness.","severity":"gotcha","affected_versions":">=16.2"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure you have correctly imported the DevExtreme CSS themes (e.g., `import 'devextreme/dist/css/dx.light.css';`) and that your `devextreme` package is installed and accessible. Check for any missing scripts if not using a module bundler.","cause":"This typically means the core DevExtreme JavaScript logic or themes are not properly loaded or initialized before a DevExtreme component is rendered.","error":"TypeError: Cannot read properties of undefined (reading 'setup') / Error: E0024 - 'dx.all.js' or 'dx.web.js' module is not referenced."},{"fix":"Add the correct import statement for the component, typically a default import from its specific path, e.g., `import DataGrid from 'devextreme-react/data-grid';`.","cause":"The specific DevExtreme React component (e.g., `DataGrid`) was not correctly imported into the component file.","error":"ReferenceError: DataGrid is not defined"},{"fix":"Review the documentation for the specific component's `dataSource` or other data-bound properties and ensure the data you are providing matches the expected format and types.","cause":"DevExtreme UI components, especially data-bound ones, expect specific data types (e.g., an array of objects for a DataGrid's dataSource). Providing an incompatible type will cause this error.","error":"E2001 - Data of an unsupported type was provided to a UI component."},{"fix":"Verify that your `react` and `react-dom` versions satisfy the `devextreme-react` peer dependency requirements. Check your component's `render` method for common React pitfalls like returning multiple elements without a fragment, or incorrect state updates.","cause":"This is a generic React error, but with DevExtreme, it can often indicate issues with React version compatibility or incorrect component usage within the React lifecycle.","error":"Invariant Violation: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130"}],"ecosystem":"npm"}