Introduction

Ant Design is a React UI library that contains a set of high quality components and demos for building rich, interactive user interfaces. It is developed and maintained by Ant Financial, a large financial services company. Similar to Material UI, Ant Design is a component library that provides a set of pre-built components that you can use in your application. It is a very popular library, and is used by many large companies. It is also very well documented, and has a large community.

As we have mentioned, the ezgrid React 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 Ant Design adapter comes in. The Ant Design adapter provides a set of helper methods that respond with Ant Design 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 Ant Design 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 Ant Design adapter into grid-react, so you can completely swap out the grids built in primitives with Ant Design which goes to tell you how easy it is to customize our product.