Mixing
react-data-grid - Can you add your own components to the Toolbar?
I am currently using the react-data-grid and I have it almost complete... 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 components with the react-data-grid examples, but I was wondering if anyone else has done something like this and could share how you accomplished 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
edited Sep 15 '17 at 12:55
Fastjur
405
asked Jul 29 '16 at 14:25
DraekaneDraekane
116
add a comment |
I am currently using the react-data-grid and I have it almost complete... 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 components with the react-data-grid examples, but I was wondering if anyone else has done something like this and could share how you accomplished 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
edited Sep 15 '17 at 12:55
Fastjur
405
asked Jul 29 '16 at 14:25
DraekaneDraekane
116
add a comment |
I am currently using the react-data-grid and I have it almost complete... 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 components with the react-data-grid examples, but I was wondering if anyone else has done something like this and could share how you accomplished 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
edited Sep 15 '17 at 12:55
Fastjur
405
asked Jul 29 '16 at 14:25
DraekaneDraekane
116
I am currently using the react-data-grid and I have it almost complete... 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 components with the react-data-grid examples, but I was wondering if anyone else has done something like this and could share how you accomplished 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
javascript reactjs toolbar
edited Sep 15 '17 at 12:55
Fastjur
405
asked Jul 29 '16 at 14:25
DraekaneDraekane
116
edited Sep 15 '17 at 12:55
Fastjur
405
asked Jul 29 '16 at 14:25
DraekaneDraekane
116
edited Sep 15 '17 at 12:55
Fastjur
405
edited Sep 15 '17 at 12:55
Fastjur
405
edited Sep 15 '17 at 12:55
Fastjur
405
405
asked Jul 29 '16 at 14:25
DraekaneDraekane
116
asked Jul 29 '16 at 14:25
DraekaneDraekane
116
asked Jul 29 '16 at 14:25
DraekaneDraekane
116
116
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
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 component 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.
answered Oct 24 '16 at 1:08
supamandasupamanda
16923
The solution work great only when you want replace everything inside toolbar in my case I want to add a button beside default filter button of toolbar
– Carlos
Dec 20 '18 at 2:51
add a comment |
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>);
}
});
edited Sep 15 '17 at 12:47
Zhaph - Ben Duguid
23.9k462105
answered Aug 1 '16 at 15:28
Diego MurakamiDiego Murakami
715
Thanks! I will try that out. I missed that as I don't think I was looking at that specific one. Appreciate pointing that out though!
– Draekane
Aug 2 '16 at 16:02
I added more information in the original post, but the above didn't work for something other than the GroupedColumnsPanel.
– Draekane
Aug 3 '16 at 16:16
add a comment |
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}
/>
);
answered Nov 19 '18 at 23:31
Roman MaksimovRoman Maksimov
1,0311413
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f38661269%2freact-data-grid-can-you-add-your-own-components-to-the-toolbar%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
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 component 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.
answered Oct 24 '16 at 1:08
supamandasupamanda
16923
The solution work great only when you want replace everything inside toolbar in my case I want to add a button beside default filter button of toolbar
– Carlos
Dec 20 '18 at 2:51
add a comment |
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 component 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.
answered Oct 24 '16 at 1:08
supamandasupamanda
16923
The solution work great only when you want replace everything inside toolbar in my case I want to add a button beside default filter button of toolbar
– Carlos
Dec 20 '18 at 2:51
add a comment |
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 component 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.
answered Oct 24 '16 at 1:08
supamandasupamanda
16923
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 component 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.
answered Oct 24 '16 at 1:08
supamandasupamanda
16923
answered Oct 24 '16 at 1:08
supamandasupamanda
16923
answered Oct 24 '16 at 1:08
supamandasupamanda
16923
answered Oct 24 '16 at 1:08
supamandasupamanda
16923
16923
The solution work great only when you want replace everything inside toolbar in my case I want to add a button beside default filter button of toolbar
– Carlos
Dec 20 '18 at 2:51
add a comment |
The solution work great only when you want replace everything inside toolbar in my case I want to add a button beside default filter button of toolbar
– Carlos
Dec 20 '18 at 2:51
The solution work great only when you want replace everything inside toolbar in my case I want to add a button beside default filter button of toolbar
– Carlos
Dec 20 '18 at 2:51
The solution work great only when you want replace everything inside toolbar in my case I want to add a button beside default filter button of toolbar
– Carlos
Dec 20 '18 at 2:51
add a comment |
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>);
}
});
edited Sep 15 '17 at 12:47
Zhaph - Ben Duguid
23.9k462105
answered Aug 1 '16 at 15:28
Diego MurakamiDiego Murakami
715
Thanks! I will try that out. I missed that as I don't think I was looking at that specific one. Appreciate pointing that out though!
– Draekane
Aug 2 '16 at 16:02
I added more information in the original post, but the above didn't work for something other than the GroupedColumnsPanel.
– Draekane
Aug 3 '16 at 16:16
add a comment |
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>);
}
});
edited Sep 15 '17 at 12:47
Zhaph - Ben Duguid
23.9k462105
answered Aug 1 '16 at 15:28
Diego MurakamiDiego Murakami
715
Thanks! I will try that out. I missed that as I don't think I was looking at that specific one. Appreciate pointing that out though!
– Draekane
Aug 2 '16 at 16:02
I added more information in the original post, but the above didn't work for something other than the GroupedColumnsPanel.
– Draekane
Aug 3 '16 at 16:16
add a comment |
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>);
}
});
edited Sep 15 '17 at 12:47
Zhaph - Ben Duguid
23.9k462105
answered Aug 1 '16 at 15:28
Diego MurakamiDiego Murakami
715
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>);
}
});
edited Sep 15 '17 at 12:47
Zhaph - Ben Duguid
23.9k462105
answered Aug 1 '16 at 15:28
Diego MurakamiDiego Murakami
715
edited Sep 15 '17 at 12:47
Zhaph - Ben Duguid
23.9k462105
edited Sep 15 '17 at 12:47
Zhaph - Ben Duguid
23.9k462105
edited Sep 15 '17 at 12:47
Zhaph - Ben Duguid
23.9k462105
23.9k462105
answered Aug 1 '16 at 15:28
Diego MurakamiDiego Murakami
715
answered Aug 1 '16 at 15:28
Diego MurakamiDiego Murakami
715
answered Aug 1 '16 at 15:28
Diego MurakamiDiego Murakami
715
715
Thanks! I will try that out. I missed that as I don't think I was looking at that specific one. Appreciate pointing that out though!
– Draekane
Aug 2 '16 at 16:02
I added more information in the original post, but the above didn't work for something other than the GroupedColumnsPanel.
– Draekane
Aug 3 '16 at 16:16
add a comment |
Thanks! I will try that out. I missed that as I don't think I was looking at that specific one. Appreciate pointing that out though!
– Draekane
Aug 2 '16 at 16:02
I added more information in the original post, but the above didn't work for something other than the GroupedColumnsPanel.
– Draekane
Aug 3 '16 at 16:16
Thanks! I will try that out. I missed that as I don't think I was looking at that specific one. Appreciate pointing that out though!
– Draekane
Aug 2 '16 at 16:02
Thanks! I will try that out. I missed that as I don't think I was looking at that specific one. Appreciate pointing that out though!
– Draekane
Aug 2 '16 at 16:02
I added more information in the original post, but the above didn't work for something other than the GroupedColumnsPanel.
– Draekane
Aug 3 '16 at 16:16
I added more information in the original post, but the above didn't work for something other than the GroupedColumnsPanel.
– Draekane
Aug 3 '16 at 16:16
add a comment |
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}
/>
);
answered Nov 19 '18 at 23:31
Roman MaksimovRoman Maksimov
1,0311413
add a comment |
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}
/>
);
answered Nov 19 '18 at 23:31
Roman MaksimovRoman Maksimov
1,0311413
add a comment |
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}
/>
);
answered Nov 19 '18 at 23:31
Roman MaksimovRoman Maksimov
1,0311413
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}
/>
);
answered Nov 19 '18 at 23:31
Roman MaksimovRoman Maksimov
1,0311413
answered Nov 19 '18 at 23:31
Roman MaksimovRoman Maksimov
1,0311413
answered Nov 19 '18 at 23:31
Roman MaksimovRoman Maksimov
1,0311413
answered Nov 19 '18 at 23:31
Roman MaksimovRoman Maksimov
1,0311413
1,0311413
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f38661269%2freact-data-grid-can-you-add-your-own-components-to-the-toolbar%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
