react-data-grid - 独自のコンポーネントをツールバーに追加できますか？

Question

私は現在反応データグリッドを使用していますが、ほとんど完了しています...私はツールバーにフィルターボタンを表示しています。テーブル内の選択したすべての項目に影響を与える別のボタンが必要です。スペースを節約するために、ツールバーの左側に追加したいと思っていました。誰でも反応データグリッドでこれを行う方法を知っていますか？

私はgithubのコードを見てきましたが、反応データグリッドに非常に特有のツールバーアイテムがありますが、AdvancedToolbarアイテムもあります。あなた自身のカスタムアイテムを反応データグリッドに追加するために使用できるものでした。

反応データグリッドの例でカスタムボタンやコンポーネントを追加する例はありませんが、他の誰かがこのようなことをしていて、それをどのように達成したのか分かりました。ありがとう。

私はGroupedColumnPanelsのようなものを使用しての提案された解決策を試してみましたが、このように、一般的なボタンオブジェクトを追加するようなもののために同じように機能していないよう：誰も私はそれを把握することができた場合

const customToolbar = (<Toolbar> 
      <button type="button" className="btn btn-success" style={{ marginRight: '5px' }} onClick={this.handleRefresh}> 
       <i className="glyphicon glyphicon-refresh" /> Refresh 
      </button> 
      <button type="button" className="btn btn-warning" style={{ marginRight: '5px' }} onClick={this.handleReset}> 
       <i className="glyphicon glyphicon-warning-sign" /> Reset Page 
      </button> 
      <button type="button" className="btn btn-danger" onClick={this.handleHideRows}> 
       <i className="glyphicon glyphicon-eye-close" /> Hide Selected 
      </button> 
     </Toolbar>); 

私はそれを感謝します。

Answer 1

はい、これはRow Grouping Exampleのように行うことができます。

var CustomToolbar = React.createClass({ 
    render() { 
    return (<Toolbar> 
     <GroupedColumnsPanel groupBy={this.props.groupBy} 
          onColumnGroupAdded={this.props.onColumnGroupAdded} 
          onColumnGroupDeleted={this.props.onColumnGroupDeleted}/> 
     </Toolbar>); 
    } 
}); 

Answer 2

あなたの新しい機能を追加するツールバーを拡張しようとした後、renderメソッドをオーバーライドすることができ、例えば：

export class CustomToolbar extends Toolbar { 
    onDeleteRow(e) { 
    if (this.props.onDeleteRow !== null && this.props.onDeleteRow instanceof Function) { 
     this.props.onDeleteRow(e); 
    } 
    } 

    renderDeleteRowButton() { 
    if (this.props.onDeleteRow) { 
     return (<button type="button" className="btn" onClick={this.onDeleteRow.bind(this)}> 
     {this.props.deleteRowButtonText} 
    </button>); 
    } 
    } 

    render() { 
    return (
     <div className="react-grid-Toolbar"> 
     <div className="tools"> 
     {this.renderAddRowButton()} 
     {this.renderDeleteRowButton()} 
     {this.renderToggleFilterButton()} 
     </div> 
     </div>); 
    } 
} 

そして、あなたのコンポーネントは以下のようになり、何かのように：

export class MyGridComponent extends React.Comopnent { 
    // other code 
    handleDeleteRow(e) { 
    console.log("deleting selected rows ", e) 
    // handle the deletion 
    } 
    render() { 
    return (<ReactDataGrid 
     // other properties 
     toolbar={<CustomToolbar onAddRow={this.handleAddRow.bind(this)} 
      onDeleteRow={this.handleDeleteRow.bind(this)} 
      deleteRowButtonText="Delete Selected"></CustomToolbar>} 
    />) 
    } 
} 

AdvancedToolbarはこのようなことをしようとしている可能性がありますが、ツールバーの[行の追加]または[フィルタオプション]を継承していないため、子も空の外側に表示されますlbar div。