{"id":10743,"library":"devextreme","title":"DevExtreme UI Component Suite","description":"DevExtreme is an enterprise-ready JavaScript/TypeScript UI component suite offering a comprehensive collection of high-performance and responsive UI components for web development. It supports popular front-end frameworks including Angular, React, Vue, and jQuery. The current stable version is 25.2.6, released on April 7, 2026. DevExtreme maintains a consistent release cadence with two major versions annually (e.g., 25.1 and 25.2) and frequent patch updates for bug fixes and minor enhancements. Key differentiators include a vast array of widgets like DataGrid, TreeList, and various charts, alongside an integrated theming engine, client-side data management, and extensive globalization capabilities. It provides a unified API for a consistent developer experience across supported frameworks, abstracting underlying DOM complexities.","status":"active","version":"25.2.6","language":"javascript","source_language":"en","source_url":"https://github.com/DevExpress/DevExtreme","tags":["javascript","devextreme","devexpress","UI","UX","component","Components","ui-components","jQuery","typescript"],"install":[{"cmd":"npm install devextreme","lang":"bash","label":"npm"},{"cmd":"yarn add devextreme","lang":"bash","label":"yarn"},{"cmd":"pnpm add devextreme","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Internal transpilation utilities.","package":"@babel/runtime","optional":false},{"reason":"Used for client-side data export functionalities, particularly to Excel.","package":"jszip","optional":false},{"reason":"Provides robust recurrence rule parsing and generation, essential for the Scheduler component.","package":"rrule","optional":false},{"reason":"Rich text editor functionality.","package":"devextreme-quill","optional":false}],"imports":[{"note":"For vanilla JavaScript or jQuery usage, components are imported directly from their respective UI paths. If using framework wrappers (e.g., devextreme-react), import from the framework-specific package, e.g., 'devextreme-react/ui/data-grid'.","wrong":"import { DataGrid } from 'devextreme';","symbol":"DataGrid","correct":"import DataGrid from 'devextreme/ui/data_grid';"},{"note":"Importing a global theme CSS file is standard practice. Other themes like `dx.material.blue.light.css` are also available. Ensure this import is placed before custom styles to allow overrides.","symbol":"dx.light.css","correct":"import 'devextreme/dist/css/dx.light.css';"},{"note":"Used for setting the current locale and loading custom translation messages, enabling internationalization for components. Named imports are generally preferred for specific functions.","wrong":"import * as localization from 'devextreme/localization';","symbol":"locale","correct":"import { locale, loadMessages } from 'devextreme/localization';"},{"note":"While historically some widgets were prefixed with 'dx' in jQuery-style calls (e.g., `$(...).dxButton()`), the ES module import uses the PascalCase name (e.g., `Button`).","wrong":"import { dxButton } from 'devextreme/ui/button';","symbol":"dxButton","correct":"import Button from 'devextreme/ui/button';"}],"quickstart":{"code":"import Button from 'devextreme/ui/button';\nimport DataGrid from 'devextreme/ui/data_grid';\nimport ArrayStore from 'devextreme/data/array_store';\nimport 'devextreme/dist/css/dx.light.css';\nimport 'devextreme/dist/css/dx.common.css';\n\ndocument.addEventListener('DOMContentLoaded', () => {\n  const data = [\n    { id: 1, firstName: 'John', lastName: 'Doe', city: 'New York' },\n    { id: 2, firstName: 'Jane', lastName: 'Smith', city: 'London' },\n    { id: 3, firstName: 'Peter', lastName: 'Jones', city: 'Paris' },\n  ];\n\n  const buttonElement = document.createElement('div');\n  document.body.appendChild(buttonElement);\n\n  new Button(buttonElement, {\n    text: 'Click Me',\n    onClick: () => {\n      alert('Button clicked!');\n    },\n  });\n\n  const gridElement = document.createElement('div');\n  gridElement.style.marginTop = '20px';\n  document.body.appendChild(gridElement);\n\n  new DataGrid(gridElement, {\n    dataSource: new ArrayStore({\n      key: 'id',\n      data: data,\n    }),\n    columns: [\n      { dataField: 'firstName', caption: 'First Name' },\n      { dataField: 'lastName', caption: 'Last Name' },\n      { dataField: 'city', caption: 'City' },\n    ],\n    showBorders: true,\n    paging: {\n      pageSize: 5,\n    },\n    filterRow: {\n      visible: true,\n      applyFilter: 'auto',\n    },\n    headerFilter: {\n      visible: true,\n    },\n  });\n});","lang":"typescript","description":"This example demonstrates how to initialize a DevExtreme Button and a DataGrid component using vanilla TypeScript, populating the grid with local data and applying a common theme. It showcases direct DOM manipulation and widget instantiation without a framework wrapper."},"warnings":[{"fix":"Review the 'Breaking Changes' section in the official documentation for the specific version you are upgrading to. Update component configurations, property names, and event handlers as instructed. Leverage the deprecated API console warnings for guidance.","message":"Major version upgrades (e.g., v24 to v25) often introduce breaking changes in component APIs, configuration options, and internal structures. Always consult the official migration guides and release notes.","severity":"breaking","affected_versions":">=25.0"},{"fix":"Obtain your license key from DevExpress and follow the instructions to register it in your application, typically via environment variables or a specific configuration file. Refer to the DevExtreme licensing documentation for details.","message":"Since v23.2, a DevExtreme license key is required for commercial use. Failing to register it can lead to warnings or functionality issues in development environments.","severity":"breaking","affected_versions":">=23.2"},{"fix":"To mitigate Module Federation `instanceof` issues, ensure that DevExtreme modules are *not* shared between federated modules, or are shared strictly as singletons. This can lead to larger bundle sizes but prevents runtime errors. Consider using specific import paths or configuring Webpack's `shared` options carefully.","message":"When using module bundlers like Webpack with Module Federation, issues can arise due to `instanceof` checks failing for DevExtreme data source classes, leading to unexpected errors. This occurs when multiple instances of the same DevExtreme module exist in the module graph.","severity":"gotcha","affected_versions":">=19.x"},{"fix":"Ensure jQuery is loaded and available in the global scope before DevExtreme scripts if you are using DevExtreme in a vanilla JS or jQuery-centric application. For modern framework usage (React, Angular, Vue), rely on `devextreme-react`, `devextreme-angular`, or `devextreme-vue` packages which handle framework integration appropriately.","message":"For non-framework (vanilla JavaScript) or jQuery-based usage, DevExtreme often relies on jQuery for its underlying DOM manipulation and widget initialization. Although modern framework wrappers abstract this, direct `devextreme` usage might implicitly expect jQuery to be available, leading to runtime errors if missing.","severity":"gotcha","affected_versions":"<20.0"},{"fix":"Migrate your NuGet package sources from `NuGet.DevExpress.com` to `NuGet.org` for DevExpress packages to ensure continued updates and compatibility with future releases. Update your local and CI/CD environments accordingly.","message":"DevExpress's custom NuGet server (`NuGet.DevExpress.com`) is being deprecated. While still operational for v25.1+, future versions (starting v26.1) will exclusively publish NuGet packages to `NuGet.org`.","severity":"deprecated","affected_versions":">=25.1"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Verify that jQuery is included in your project and loaded before DevExtreme scripts. If using ES modules, ensure the specific widget is imported correctly, e.g., `import DataGrid from 'devextreme/ui/data_grid';`. If using framework wrappers, ensure the wrapper component is correctly imported and rendered.","cause":"This error typically occurs when attempting to initialize a DevExtreme widget (like DataGrid) using jQuery syntax (e.g., `$(element).dxDataGrid(...)`) but the DevExtreme jQuery integration script or jQuery itself is not loaded, or the widget module is not imported correctly for modular setups.","error":"TypeError: Cannot read properties of undefined (reading 'dxDataGrid')"},{"fix":"Set the `keyExpr` property in the DataGrid/TreeList configuration to the name of the field that uniquely identifies data objects (e.g., `keyExpr: 'id'`). If using a `DataSource` with an `ArrayStore`, specify the `key` option in the `ArrayStore` configuration.","cause":"The DataGrid and TreeList components require a `keyExpr` (or `key` for ArrayStore) to uniquely identify data rows, which is crucial for internal operations like selection, editing, and state restoration.","error":"E1042 - The 'keyExpr' option is not specified for the DataGrid (or TreeList)"},{"fix":"Configure your server to allow longer URL query strings. Alternatively, for large or complex filters, consider using the `POST` method for data requests, if supported by your data service, by configuring the `load` method of your `CustomStore` to send data in the request body instead of the URL.","cause":"When using server-side data processing with DevExtreme's `DataSource`, load parameters (filter, sort, skip, take) are sent via the URL query string. If the query string becomes excessively long, the server might reject the request due to URL length limits.","error":"A request error occurs after filtering or searching (e.g., 'Query string is too long', '404.15')"},{"fix":"Ensure that your `CustomStore`'s `load` method consistently returns an object with both `data` (the array of items) and `totalCount` (the total number of items, usually from the server response). If `totalCount` is not directly available from the server, you might need to fetch it separately or ensure the server-side logic provides it.","cause":"When implementing a `CustomStore` for server-side data, the `load` method's promise must resolve to an object containing `data` and `totalCount` properties. If `totalCount` is missing or undefined, this error occurs.","error":"E4021 - CustomStore.load returns an undefined LoadResultObject.totalCount, or CustomStore.totalCount is not specified."}],"ecosystem":"npm"}