React Grid - Plugin Overview

Plugins are components that implement particular Grid features. They should be defined within the Grid component.

Plugin Types

Plugins can be divided into four groups:

  • State Management plugins control a part of the Grid's state internally or provide properties for external state management (see controlled and uncontrolled modes).
  • Data Processing plugins transform data passed to the Grid component before rendering.
  • UI plugins render the transformed data using the current state and configuration. UI plugins can also invoke actions that state management plugins provide to change the Grid's state. In some cases, UI plugins can control a part of the Grid state (instead of State Management plugins).
  • Core plugins are the base building blocks for the first three groups. These plugins can also be used separately in certain scenarios.

Note that the plugins are composable and can be nested into each other.

Refer to the Reference to see the complete plugin list.

UI Plugins

The Grid's UI plugins use special components to render the UI. You can implement your component suite or use a predefined one:

Plugin Order

The Grid plugins adhere to the data piping principle. That is, plugins process Grid data in the same order they are defined in the Grid.

Plugins implementing an interface should be linked before plugins that use it. For example, a data processing plugin is based on some state and should follow the appropriate state plugin. Some visualization plugins extend the Table's functionality and should follow it in the code.

NOTE: Refer to the plugin's reference for information on its dependencies.

Data Processing Plugins

The data processing plugins' order is also important because they process data in the same order they appear. For example, if IntegratedPaging precedes IntegratedSelection, the 'Select All' checkbox selects only the current page's rows and swapping them around allows you to select rows on all pages. See this rule in action in the following demo:

Developing a React App? Check out our updated React UI Suite instead.
If you are considering React for an upcoming software project or have used DevExtreme Reactive components in the past, please visit js.devexpress.com/React
Migrate to DevExtreme React
DevExtreme Reactive product line is now in maintenance support mode. If you're building a React app, consider our up-to-date DevExtreme React UI suite. For more information, visit the Migrate from DevExtreme Reactive help topic on the DevExtreme React site.

Combining Multiple Plugins

Use the Plugin component to wrap multiple plugins into a single component:

const DataTypeProviders = () => (
  <Plugin>
    <CurrencyTypeProvider />
    <DateTypeProvider />
    <BooleanTypeProvider />
  </Plugin>
);
...
<Grid>
  <DataTypeProviders />
</Grid>
This site uses cookies to make your browsing experience more convenient and personal. Cookies store useful information on your computer to help us improve the efficiency and relevance of our site for you. In some cases, they are essential to making the site work properly. By accessing this site, you consent to the use of cookies. For more information, refer to DevExpress’ privacy policy and cookie policy.