react-data-grid cannot implement row grouping - possible addons issue as well

Question

I'm using react-data-grid and I have not really managed to get the row grouping functionality to work. I cannot get pass the toolbar configuration, but even if I comment this out (I actually don't want to show the toolbar because I want by default some columns grouped and that's it, but still) I still cannot get this to work.

So, first things first, addons are installed:

yarn add react-data-grid
yarn add react-data-grid-addons

First error is about my CustomToolbar component (which is pretty much copied from the example)

Uncaught (in promise) Error: Element type is invalid: expected a
string (for built-in components) or a class/function (for 
composite components) but got: undefined. You likely forgot to 
export your component from the file it's defined in. Check the 
render method of `CustomToolbar`.

But my CustomToolbar looks ok, apart from the fact that it uses components from the addons repo:

import React from 'react';
import {ToolsPanel} from 'react-data-grid-addons';

const {Toolbar, GroupedColumnsPanel} = ToolsPanel;    

const CustomToolbar = ({groupBy, onColumnGroupAdded, onColumnGroupDeleted}) => {
    return (<Toolbar>
      <GroupedColumnsPanel 
        groupBy={groupBy} 
        onColumnGroupAdded={onColumnGroupAdded} 
        onColumnGroupDeleted={onColumnGroupDeleted}
      />
    </Toolbar>
  );
};

export default CustomToolbar;

I used the react-data-grid-addons/README.md as a reference for the imports, but I'm not really sure if it's updated, judging by the documentation of the repo.

If I comment the toolbar property out I get the same error for HeaderRow component, which is again one of the repo's components.

Answer 1

You want to import the AdvancedToolbar, not the Toolbar.

Check the example source code

const {
  ToolsPanel: { AdvancedToolbar: Toolbar, GroupedColumnsPanel },
  Data: { Selectors },
  Draggable: { Container: DraggableContainer },
  Formatters: { ImageFormatter }
} = require('react-data-grid-addons');

It is importing the AdvancedToolbar, not the Toolbar component. Also if you check the export for the ToolsPanel you can see that there isn't any component called Toolbar being exported, that is why you get the error in the render method.