Open Source · React · TypeScript

DevExtreme DataGrid, first-class in React-Admin

ra-devextreme-grid is an open-source integration between React-Admin and the DevExpress DevExtreme React DataGrid. It provides conventional React-Admin-managed lists and a true DevExtreme remote mode for server-side paging, filtering, sorting, grouping and summaries.

View on GitHub View on npm Support the project
pnpm add ra-devextreme-grid
React-Admin DevExtreme TypeScript FastAPI SQLModel SQLAlchemy

The reason for the project

Why another React-Admin grid integration?

React-Admin is an excellent framework for building administration and business applications. React-Admin Enterprise includes an AG Grid integration, while many teams already use or license DevExpress DevExtreme.

DevExtreme DataGrid is particularly capable when the grid itself controls server-side operations. This project keeps React-Admin responsible for application-level concerns while DevExtreme handles advanced grid behaviour.

React-Admin owns the application.
DevExtreme owns the grid.

Managed mode

React-Admin managed

<DatagridDX />

Designed for conventional React-Admin lists. React-Admin owns data fetching, paging, filtering, sorting, selection and resource navigation, while DevExtreme provides the grid interface and column-management experience.

ListContext → DatagridDX → DevExtreme

Remote mode

DevExtreme remote

<DatagridDXRemote />

Designed for larger datasets and richer server-side behaviour. DevExtreme owns native paging, multi-column sorting, nested filtering, grouping, group paging and summaries through the custom getGrid() DataProvider method.

CustomStore → getGrid() → API

A clear boundary

Designed as an adapter, not another framework

React-Admin continues to provide resources, authentication, authorization, navigation, forms, notifications and application structure. DevExtreme provides the grid rendering and remote data interaction.

React-Admin application
↓
ra-devextreme-grid
↓
DevExtreme DataGrid
↓
React-Admin DataProvider
↓
Application API
↓
Database

Built for real server-backed applications

Managed React-Admin integration

ListContext-based records, paging, filtering, selection and navigation.

Native remote mode

DevExtreme CustomStore backed by a React-Admin DataProvider extension.

Multi-column sorting

Native remote ordered sort descriptors.

Secure nested filtering

AND, OR, NOT, typed values and server-side SQL expression compilation.

Remote grouping

Single and multi-level grouping with group paging.

Summaries

Total and per-group summaries over the complete filtered dataset.

Visual layout persistence

Column visibility, order, widths and fixed state stored through React-Admin Store.

Responsive column UX

Column chooser, resizing, reordering, fixing and adaptive hiding.

Reference implementation

A real FastAPI reference backend

The repository includes a complete reference implementation using Python, FastAPI, UV, SQLModel, SQLAlchemy and SQLite. It is not merely a mocked frontend demo.

It demonstrates bounded paging, deterministic sorting, field whitelisting, recursive filtering, strict value validation, bound parameters, filtered counts, summaries, grouping, group paging, complexity limits and fail-closed request validation.

Explore the FastAPI example
The backend executes filtering, sorting, grouping, paging and aggregates in SQL — not by loading the complete dataset into Python.

Remote mode stays close to native DevExtreme

                  const CustomerList = () => (
        <DatagridDXRemote<Customer>
          paging={{ pageSize: 20 }}
          sorting={{ mode: 'multiple' }}
          filterRow={{ visible: true }}
          showBorders
        >
          <Column dataField="name" />
          <Column dataField="company" />
          <Column dataField="country" />
          <Column dataField="active" dataType="boolean" />
        </DatagridDXRemote>
      );

No custom column DSL. Native DevExtreme DataGrid configuration remains available where it does not conflict with React-Admin ownership.

Open-source engineering

Developed as production software, not a proof of concept

The project is verified incrementally with TypeScript unit and integration tests, Python backend tests, real Chromium browser tests using Playwright, clean npm installation tests, React 18 and React 19 consumer builds, and Windows development with Linux CI.

The package is tested as an installed npm dependency, not only inside its own repository.

Peer dependencies remain external. DevExtreme theme CSS remains application-owned, and no DevExpress proprietary assets or licence keys are included.

Free and open source

ra-devextreme-grid is released under the MIT licence and is intended to remain a useful, freely available integration for the React-Admin and DevExtreme communities. DevExtreme is a separate DevExpress product; users remain responsible for its licensing terms.

MIT Licence npm package Open source
GitHub repository npm package

Support continued development

If the project saves you or your organisation development time, GitHub Sponsors is a practical way to support compatibility work, testing, documentation, bug investigation and future improvements.

Sponsor on GitHub

Open Source

ra-devextreme-grid

DevExtreme DataGrid integration for React-Admin, supporting both React-Admin-managed lists and true server-side remote operation.

React · TypeScript · React-Admin · DevExtreme · FastAPI

Integration and support

Need help integrating it?

Commercial assistance is available for teams integrating ra-devextreme-grid into existing React-Admin applications or connecting it to FastAPI, SQLAlchemy and other backend APIs.

  • Adapting an existing DataProvider
  • Server-side filtering and grouping
  • SQLAlchemy query integration
  • Application-specific field security
  • Upgrading existing React-Admin grids
  • Troubleshooting integration
Discuss an integration

Try ra-devextreme-grid

Install it from npm, explore the examples on GitHub, or get in touch if you need help integrating it into an existing application.

View on GitHub View on npm GitHub Sponsors