javascript - react-data-grid - Can you add your own components to the Toolbar? - Stack Overflow

admin管理员组

文章数量:1316842

I am currently using the react-data-grid and I have it almost plete... I have the filters button showing in the Toolbar. I need another button to affect all the selected items in the table, and I wanted to add it to the left side of the toolbar, to conserve space. Does anyone know of a way to do this with the react-data-grid?

I have looked over the code in github, and I see the Toolbar item, which seems to be very specific to the react-data-grid, but there is also the AdvancedToolbar item, and I wasn't sure if that was something that could be used to add your own custom items to the react-data-grid.

There aren't any examples of adding custom buttons or ponents with the react-data-grid examples, but I was wondering if anyone else has done something like this and could share how you acplished it. Thanks.

I tried the suggested solution of using something like the GroupedColumnPanels but it doesn't seem to work the same for something like adding generic button objects, like this:

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>);

If anyone can help me figure THAT out... I would appreciate it.

I am currently using the react-data-grid and I have it almost plete... I have the filters button showing in the Toolbar. I need another button to affect all the selected items in the table, and I wanted to add it to the left side of the toolbar, to conserve space. Does anyone know of a way to do this with the react-data-grid?

I have looked over the code in github, and I see the Toolbar item, which seems to be very specific to the react-data-grid, but there is also the AdvancedToolbar item, and I wasn't sure if that was something that could be used to add your own custom items to the react-data-grid.

There aren't any examples of adding custom buttons or ponents with the react-data-grid examples, but I was wondering if anyone else has done something like this and could share how you acplished it. Thanks.

I tried the suggested solution of using something like the GroupedColumnPanels but it doesn't seem to work the same for something like adding generic button objects, like this:

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>);

If anyone can help me figure THAT out... I would appreciate it.

• javascript
• reactjs
• toolbar

Share Improve this question Follow edited Sep 15, 2017 at 12:55 Jurriaan 17111 silver badge88 bronze badges asked Jul 29, 2016 at 14:25 DraekaneDraekane 3122 silver badges66 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

You could try extending the Toolbar to add your new functionality, and then override the render method, eg:

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>);
  }
}

And then your ponent would be something like:

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>}
    />)
  }
}

It looks like the AdvancedToolbar might be trying to do something like this, but it doesn't inherit the Toolbar's Add Row or Filter options, and the children are rendered outside the empty toolbar div.

If you look at the repo for react data grid add on:

https://github./adazzle/react-data-grid/blob/next/packages/react-data-grid-addons/src/toolbars/Toolbar.js

It renders any children you pass to the Toolbar ponent.

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

So you can pass in any buttons you want like this:

<Toolbar> <ButtonComponent /></Toolbar>

As long as you button has its own self contained state this should work.

Cheers,

Matt

Yes, you can do it as done in Row Grouping Example.

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

Try to use flexibleSpaceComponent prop according to the docs

const ToolbarFlexibleSpace = () => (
  <div>
    <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>
  </div>
);

const MyToolbar = (
  <Toolbar
    flexibleSpaceComponent={ToolbarFlexibleSpace}
  />
);

本文标签： javascriptreactdatagridCan you add your own components to the ToolbarStack Overflow