react-data-gridは行グループ化を実装できません - 可能なアドオンも発行可能

Question

私はreact-data-gridを使用しており、実際にはrow groupingの機能を動作させることはできませんでした。 私はツールバーの設定を渡すことができませんが、私はこれをコメントアウトしても（私は実際には、私はデフォルトでいくつかの列がグループ化され、それはそれですが、まだですが）ツールバーを表示したくない場合でも私はまだこれを動作させることができません。

ので、最初のものは、まず、アドオンがインストールされています

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

最初のエラーは、（ほとんどの例からコピーされた）私のCustomToolbarコンポーネント

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`. 

についてです。しかし、私のCustomToolbarは大丈夫に見えますこれは、addonsのコンポーネントを使用している点を除けば、レポ：

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; 

私はreact-data-grid-addons/README.mdをインポートの参照として使用しましたが、リポジトリのドキュメントで判断して更新されているかどうかはわかりません。

toolbarのプロパティをコメントアウトすると、HeaderRowコンポーネントのエラーが返されますが、これもまたレポのコンポーネントの1つです。

Answer 1

ツールバーではなく、AdvancedToolbarをインポートします。

チェックexample source code

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

それはAdvancedToolbarを輸入している、いないツールバーのコンポーネント。また、the export for the ToolsPanelをチェックすると、Toolbarという名前のコンポーネントがエクスポートされていないことがわかります。そのため、レンダリングメソッドでエラーが発生します。