DOCSEARCHbyAlgolia
Submit Docs

DevExtreme UI Components

repository·main·Indexed 23 days ago

https://github.com/devexpress/devextreme

An enterprise-grade suite of responsive and accessible UI components, including data grids, charts, and editors. DevExtreme provides a core engine with framework-specific wrappers for Angular (devextreme-angular), React (devextreme-react), Vue (devextreme-vue), and jQuery (devextreme-dist). The suite also includes ThemeBuilder for visual customization and tools for generating Software Bill of Materials (SBOM) in CycloneDX format.

Tokens
527.4K
Snippets
1.1K
Records
1.6K
Agent score
84%

What's inside DevExtreme

  1. Overview of the DevExtreme core package

    main
    The devextreme package serves as the core engine of the DevExtreme library. It provides the fundamental logic and enterprise-ready UI component suite used across different front-end frameworks. While devextreme contains the core functionality, framework-specific implementations (wrappers) are provided in separate packages.

  2. Overview of DevExtreme UI Components

    main
    DevExtreme is an enterprise-ready suite of responsive and accessible UI components designed for modern front-end development. It provides a wide range of JavaScript components including data grids, interactive charts, data editors, and various widgets. The components are built to work across different devices, screen sizes, and input methods (including screen readers) for frameworks such as Angular, React, Vue, and jQuery.

  4. Access DevExtreme for React resources

    main

    To get started with DevExtreme in React, you can use the following resources:

    • Documentation: Detailed guides and API references for React components.
    • Demo Gallery: Interactive examples of various widgets (e.g., DataGrid).
    • Responsive UI Templates: Pre-built templates for responsive layouts.
    • Application Template: Guidance on structuring full applications using DevExtreme components.

  5. Create tabbed UIs with the dxTabs component

    main

    The dxTabs component enables the creation of tabbed interfaces for navigating between different pages or views. You can define the tabs in two ways:

    1. Manually: Provide an array of objects to the items configuration property.
    2. Data-driven: Populate the tabs automatically by providing a dataSource.

    To customize the visual content of each tab (such as text, icons, or badges) using data from your objects, you can use the itemTemplate property.

  7. Create custom DevExtreme themes with ThemeBuilder

    main

    DevExtreme ThemeBuilder allows you to create custom themes for your applications. You can use it via a web-based interface or through the DevExtreme Command Line Interface (CLI).

    Use the ThemeBuilder on the ([web](https://devexpress.github.io/ThemeBuilder/) or in the [command line](https://js.devexpress.com/Documentation/Guide/Common/DevExtreme_CLI/#ThemeBuilder)) to create custom DevExtreme themes.

  8. Integrate DevExtreme Stepper with MultiView and Form

    main

    The DevExtreme Stepper does not include a built-in form. To create a multi-step guided process (like a registration form), you should compose it with other components:

    1. Stepper: Acts as the navigation guide.
    2. MultiView: Used to display different content views corresponding to each step.
    3. Form: Placed within each view of the MultiView to manage the input fields for that specific step.

    This pattern allows you to decouple the navigation logic (Stepper) from the data entry logic (Form).

  9. Configure PivotGrid fields and areas

    main

    To display data in the PivotGrid, define an array of field objects in the fields[] property of the PivotGridDataSource.

    Each field object uses the dataField property to map to the underlying data. You can organize fields into four specific areas using the area property:

    • data: Used for measures (the values being calculated/aggregated).
    • row: Used for dimensions displayed in rows.
    • column: Used for dimensions displayed in columns.
    • filter: Used for dimensions used to filter the data.

    Fields that are not assigned to one of these four areas will be available in the field chooser for the user to add manually.

  10. Configure toast stack position and direction

    main

    When using the stack object in the notify method, you can control the layout of the notification stack:

    Position

    The position field can be:

    • A string (e.g., predefined positions).
    • An object specifying coordinates. If using coordinates, you must specify exactly one vertical and one horizontal coordinate.

    Direction

    The direction field determines how the stack grows and where new notifications appear. Options are provided as pairs (e.g., 'up-push', 'up-stack'):

    • [direction]-push: New toasts push the previous toasts in that direction (e.g., 'up-push' pushes existing toasts upwards).
    • [direction]-stack: Toasts stack on top of each other in that direction (e.g., 'up-stack').

  11. Create custom annotations in dxChart

    main

    Custom annotations in DevExtreme Charts allow you to display images, text blocks, or custom SVG content to provide additional context for visualized data. To implement custom annotations, you must configure the annotations array and use the commonAnnotationSettings object to define the type as 'custom'. You then provide the visual representation using the template property.

    Key configuration properties:

    • annotations[]: An array of annotation objects. Each object typically uses an argument to position itself and a data object to store source information.
    • commonAnnotationSettings: A configuration object for settings shared across all annotations. Set type: 'custom' here to enable custom rendering.
    • template: A function or markup that defines the custom SVG content for the annotation.
    • series: Used within commonAnnotationSettings to anchor annotations to specific series points.

    Note: Settings defined within individual annotation objects in the annotations array will override those defined in commonAnnotationSettings.

  12. Manage Chat dataSource with reloadOnChange: false

    main

    When integrating the DevExtreme Chat component with an AI service, the dataSource should be a CustomStore implementing load and insert functions.

    To allow for manual control over the conversation flow (e.g., pushing updates directly into the store after an AI response), set reloadOnChange to false. This prevents the component from automatically reloading the entire data source on every change, allowing you to manage data transfer manually via the onMessageEntered event handler and custom logic (such as a processMessageSending function).