Introduction

Material UI (MUI) is a React component library that provides a set of components that implement Google's Material Design. It is a great library for building modern web applications. Most of our customers who use React, also use MUI. This is why we have built the datagrid to work seamlessly with MUI. Although, the datagrid is not dependent on MUI, it is designed to work with it. This means that you can use the datagrid with MUI without any issues. You can also use the datagrid with other component libraries like Bootstrap, Ant Design, etc. The datagrid is designed to work with any component library, but we provide and maintain the MUI adapter for the datagrid.

As we have mentioned, the DataGrid uses a highly customizable/pluggable rendering engine. This means that you can customize the look and feel of the grid to your needs. You can also use your own components for the grid. This is where the MUI adapter comes in. The MUI adapter provides a set of helper methods that respond with MUI components whenever the grid asks for them. These components are used by the grid to render itself. The grid is a tree of nodes, and every node returns a React Element. The grid does not really care what that react element is, just needs a react element. It could be a Material UI element, or a Bootstrap element or your own custom renderer.

If you have been following the examples, you will see that you are importing from mostly 2 libraries: @ezgrid/grid-core and @ezgrid/grid-react. Grid Core is a 0 dependency pure logic library. Does not even need react. It takes your data, and converts it into a large tree of nodes. Then there is Grid-React. This knows how to take these nodes, and convert them to React Elements. The only dependency here is react (version 16 or above). We will see how to use plug the material adapter into grid-react, so you can completely swap out the grids built in primitives with Material components which goes to tell you how easy it is to customize our product.