Ant Design Adapter

The Ant Design Adapter is a wrapper around the Ant Design components. It allows you to use the Ant Design UI components in the React Data Grid.

The source code of the adapter is actually very simple and is available here

As you can see, most of the code is just mapping icons to codes, and returning Text, Select and DatePicker components.

Using the Ant Design Adapter

Let's now add the Ant Design adapter in our example. We will use the same example as before, but this time we will use the Ant Design adapter.

Import the Ant Design Adapter

The Ant Design Adapter is not part of the core library. You will need to import it separately. You can do this by importing the ant-design-adapter.tsx file from the adapters folder linked above.

Once you have this imported, all you have do is to set the adapter prop on the GridOptions interface to the Ant Design adapter.

function App() {
  const columns = [
    {
      ...createSelectionColumn({
        itemRenderer: SelectionCheckBoxRenderer,
        headerRenderer: SelectionCheckBoxHeaderRenderer,
      }),
    },
    createColumn("employeeId", "string", "Id"),
    createColumn("firstName", "string", "First Name"),
    createColumn("lastName", "string", "Last Name"),
  ];
  return (
    <ReactDataGrid
      style={{ height: "400px", width: "100%" }}
      gridOptions={{
        dataProvider: Employee.getAllEmployees(),
        uniqueIdentifierOptions: {
          useField: "employeeId",
        },
        columns,
        adapter: antDesignAdapter,
      }}
    ></ReactDataGrid>
  );
}

Ant Design Advanced Example

There is a much more elaborate example of using the Ant Design Adapter in the Ant Design Advanced Example

Running the example

You can download the example from here. You can run the example by running the following commands:

npm install
npm start