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:

• DevExtreme React Grid for Material-UI - renders the Grid's UI elements based on Material-UI components
• DevExtreme React Grid for Bootstrap 4 - renders the Grid's UI elements based on Bootstrap 4 components
• DevExtreme React Grid for Bootstrap 3 - renders the Grid's UI elements based on Bootstrap 3 components

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:

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>