Mui-datatables: Add new icon in header of table

[vantsymbalenko]

How can I add new icon with custom handler in header of table near search icon? Is it possible?

[NickToye]

customToolbar is your friend.

[NickToye]

I believe it’s to add more.

Sent from my iPhone

On 10 Aug 2018, at 17:06, SoftwireTimC [e-mail] wrote:

When I add a custom toolbar it adds my new toolbar but it puts it inside the old one instead of remove the previous one. Is the idea of custom toolbar to make a completely new toolbar or is it just for adding extra buttons to the standard toolbar?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or mute the thread.

[vantsymbalenko]

I'm confused how to add this custom toolbar, for this I use example that shown here https://github.com/gregnb/mui-datatables/tree/master/examples/customize-toolbar
but it doesn't work for me.
Here is my code

index.js

 import React, {Component} from 'react';
 import {connect} from 'react-redux';
 import MUIDataTable from "mui-datatables";
 import CustomToolbar from 'Components/MUIDataTable/CustomToolbar';

class Test extends Component{
    constructor(props){
        super(props);
        this.state = {};
    }
    render(){
        const columns = [
             "column 1",
             "column 2",
             "column 3",
        ];
        const data = [
            ["data", "data", "data"],
            ["data", "data", "data"]
        ];

        const options = {
            filterType: 'dropdown',
            responsive: 'stacked',
            customToolbar:  () => <CustomToolbar/>
        };
        return(
            <MUIDataTable
                title={"title"}
                data={data}
                columns={columns}
                options={options}
            />
        );
    }
}
const mapStateToProps = () => {
    return{};
};
const mapDispatchToProps = {};
export default connect(mapStateToProps, mapDispatchToProps)(Test)

CustomToolbar.js

import React from "react";
import IconButton from "@material-ui/core/IconButton";
import Tooltip from "@material-ui/core/Tooltip";
import AddIcon from "@material-ui/icons/Add";
import { withStyles } from "@material-ui/core/styles";

const defaultToolbarStyles = {
    iconButton: {
    },
};

class CustomToolbar extends React.Component {

    handleClick = () => {
        console.log("clicked on icon!");
    };

    render() {
        const { classes } = this.props;
        console.log("classes", classes)

        return (
            <React.Fragment>
                <Tooltip title={"custom icon"}>
                    <IconButton className={classes.iconButton} onClick={this.handleClick}>
                        <AddIcon className={classes.deleteIcon} />
                    </IconButton>
                </Tooltip>
            </React.Fragment>
        );
    }

}

export default withStyles(defaultToolbarStyles, { name: "CustomToolbar" })(CustomToolbar);

[gabrielliwerant]

@vantsymbalenko Your example uses redux, so you need to set up redux properly in your app. This is not a problem with the customToolbar functionality, as it works as intended in the example in the application. If there is a bug with the customToolbar, you can open up a new issue with steps to reproduce it and/or a minimal example.

[DigiGroundJohn]

Hi,

If I pass the function as props, it didn't work for me

onViewStoriesClick(){
console.log("button clikc is working")
this.setStoryDialog(true);
}

and my custom toolbar is

render() {
// const { classes } = this.props;
console.log(this.props)
return (

            <Button onClick={()=>this.props.onClick} className={this.props.cssClasses}>
                {/* <AddIcon className={classes.deleteIcon} /> */}
                {/* <SvgIcon> */}
                  {this.props.text}
                {/* </SvgIcon> */}
            </Button>
    </Tooltip>
  </React.Fragment>
);

}

}

any suggestion, what I am doing wrong

[gabrielliwerant]

You've made things a little more complicated than they need to be. You're passing an anonymous function that runs your click handler, instead of just the function. It's also a bit confusing to assign the prop to the click handler name.

Try something like

myClickHandler = () => console.log('clicked!');

<MyComponent clickHandler={this.myClickHandler />

...

<IconButton onClick={() => this.props.myClickHandler()}>

Or if you wanted to avoid creating a new anonymous function in your toolbar component, you can use something like

myClickHandler = () => () => console.log('clicked!');

<MyComponent clickHandler={this.myClickHandler } />

...

<IconButton onClick={this.props.myClickHandler()}>

[DigiGroundJohn]

@gabrielliwerant
Ahh thanks, to point out this think.

Actually I am doing different action according to parent component that why it becomes complex, but it is working now.

awesome. Thanks

[usahai]

Hello! I've used your tables across 2 projects and found it fantastic! Thanks a lot for building this and the constant support.

I had a question about the custom toolbar - specifically, the tooltip for a new custom action. It does not seem to inherit the properties that the parent component (the table) has. As such, I'm getting a massive tooltip for the new component. Is there anyway it can inherit the CSS of the original?

return (
    <React.Fragment>
        <ThemeProvider theme={theme}>
            <Tooltip title={"Download"}>
                <IconButton
                    className={classes.iconButton}
                    onClick={this.handleClick}
                >
                    <AddIcon />
                </IconButton>
            </Tooltip>
        </ThemeProvider>
    </React.Fragment>
);

I have also tried it by removing the theme provider just in case there was an overriding property, but it didn't work. Any suggestions?