Mui-datatables: Add button "create new row" in toolbar

[jkeruzec]

Hello,

I think someone already did this but I can't find documentation nor issues on that..
I'd like to add a "new" button on datatable's toolbar to create a new line on table (with custom form, rest call etc. reload on top on that and where I will handle it my-self).

I already saw customToolbarSelect but this does not fit to what I want to do...

If someone can give me some information or if I must add a button on top of grid myself...

Please tell me :)
Thanks,

[gregnb]

The option to customize the toolbar is not available as it stands today. It is something I would need to think about. I will add it to the discussion list

[KaRkY]

If you decide to add functionality of adding buttons to toolbar it would be nice to be able to add buttons to rows too.

For now I have my own implementation of this where I can add Open, Edit, Delete etc.

[gregnb]

@KaRkY Could you post a screenshot of what that looks like?

[gregnb]

I've been working on this enhancement and it is finished. I will be doing a release later tonight. I've added an options property called customToolbar that will allow you to load in additional buttons. Usage looks like the following:

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;

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

and then

import React from "react";
import ReactDOM from "react-dom";
import MUIDataTable from "mui-datatables";
import CustomToolbar from "./CustomToolbar";

class Example extends React.Component {

  render() {

    const columns = ["Name", "Title", "Location", "Age", "Salary"];

    let data = [
      ["Gabby George", "Business Analyst", "Minneapolis", 30, 100000],
      ["Aiden Lloyd", "Business Consultant", "Dallas",  55, 200000],
      ["Jaden Collins", "Attorney", "Santa Ana", 27, 500000],
      ["Franky Rees", "Business Analyst", "St. Petersburg", 22, 50000],
      ["Aaren Rose", "Business Consultant", "Toledo", 28, 75000],
      ["Blake Duncan", "Business Management Analyst", "San Diego", 65, 94000],
      ["Frankie Parry", "Agency Legal Counsel", "Jacksonville", 71, 210000],
      ["Lane Wilson", "Commercial Specialist", "Omaha", 19, 65000],
      ["Robin Duncan", "Business Analyst", "Los Angeles", 20, 77000],
      ["Mel Brooks", "Business Consultant", "Oklahoma City", 37, 135000],
      ["Harper White", "Attorney", "Pittsburgh", 52, 420000],
      ["Kris Humphrey", "Agency Legal Counsel", "Laredo", 30, 150000],
      ["Frankie Long", "Industrial Analyst", "Austin", 31, 170000],
      ["Brynn Robbins", "Business Analyst", "Norfolk", 22, 90000],
      ["Justice Mann", "Business Consultant", "Chicago", 24, 133000],
      ["Addison Navarro", "Business Management Analyst", "New York", 50, 295000],
      ["Jesse Welch", "Agency Legal Counsel", "Seattle", 28, 200000],
      ["Eli Mejia", "Commercial Specialist", "Long Beach", 65, 400000],
      ["Gene Leblanc", "Industrial Analyst", "Hartford", 34, 110000],
      ["Danny Leon", "Computer Scientist", "Newark", 60, 220000],
      ["Lane Lee", "Corporate Counselor", "Cincinnati", 52, 180000],
      ["Jesse Hall", "Business Analyst", "Baltimore", 44, 99000],
      ["Danni Hudson", "Agency Legal Counsel", "Tampa", 37, 90000],
      ["Terry Macdonald", "Commercial Specialist", "Miami", 39, 140000],
      ["Justice Mccarthy", "Attorney", "Tucson", 26, 330000],
      ["Silver Carey", "Computer Scientist", "Memphis", 47, 250000],
      ["Franky Miles", "Industrial Analyst", "Buffalo", 49, 190000],
      ["Glen Nixon", "Corporate Counselor", "Arlington", 44, 80000],
      ["Gabby Strickland", "Business Process Consultant", "Scottsdale", 26, 45000],
      ["Mason Ray", "Computer Scientist", "San Francisco", 39, 142000]
    ];

    const options = {
      filter: true,
      selectableRows: true,
      filterType: 'dropdown',
      responsive: 'stacked',
      rowsPerPage: 10,
      customToolbar: () => {
        return (
          <CustomToolbar />
        );
      }
    };

    return (
      <MUIDataTable title={"ACME Employee list"} data={data} columns={columns} options={options} />
    );

  }
}

ReactDOM.render(<Example />, document.getElementById("app-root"));

the end result looks like this:

[gregnb]

This has now been released and available for usage

[jkeruzec]

Thank you !

[NickToye]

Ok this isn't working for me. I've copied your code example pretty much and the component just doesn't get rendered.

These are my dependencies:

"mui-datatables": "^2.0.0-beta-12"

Getting no errors in the console either.

[gregnb]

@NickToye Try taking a look at this sandbox https://codesandbox.io/s/lx35x2pn8m

[NickToye]

@gregnb Yeah I looked at yours, I created my own, all fine - I then integrate the files where I was having an issue and it doesn't work. It must be a dependency that is causing it.

https://codesandbox.io/s/pmzr8wj7pm

[NickToye]

@gregnb ok found my issue.

I have this dependency set as:

"mui-datatables": "^2.0.0-beta-12",

rather than

"mui-datatables": "2.0.0-beta-12",

[gregnb]

Ok great @NickToye glad it's working for you

[KaRkY]

@gregnb Sorry I did not respond earlier but was very bussy. This is how my implementation looks.

[SoftwireTimC]

@KaRkY could you share your source for your inline buttons?

[asharafshahi]

When you select the checkbox on a row, it only shows the delete button on the toolbar. Is it possible to allow other actions?

[asharafshahi]

@KaRkY To get the inline buttons into the table, I simply passed the JSX into the data array:
<MUIDataTable .... data={[field1, field2, ..., <IconButton ... />]}

[kevinglasson]

@asharafshahi Love your inline action buttons, how did you get a reference to the row to do something with it?

[asharafshahi]

@kevinglasson You pass the button component into the data prop of the MUIDataTable component. So just like you'd pass a string content for a given cell, you can also pass a React component.

[arturoribes]

@asharafshahi do you know how could we implement a delete button with confirm? The only way I can think of is adding a custom component which also provides the alert dialog, but I think this is overkill.

[asharafshahi]

@arturoribes I would check out something like https://material-ui.com/demos/dialogs/#confirmation-dialogs

[paianoa]

How can I set the "new button" as first element of the toolbar instead of last? (As shown by @gregnb )

[kalyan542]

How can I set the "new button" as first element of the toolbar instead of last? (As shown by @gregnb )

I am also facing same issue.Any update on this?

[janak-prajapati]

How can I set the "new button" as first element of the toolbar instead of last? (As shown by @gregnb )

I am also facing same issue.Any update on this?

Me too. Please let us know if there is a way.

[gabrielliwerant]

Reordering the toolbar should probably be a feature request in a new issue, so we can track it separately. We'd need a means to reorder all the options so that this doesn't end up overly specific. I'm open to PRs and suggestions on it.

[fouwst]

It would be nice if the custom toolbar icon received the same css classes as its siblings. In the codesandbox example posted by @gregnb above, the icon does not change color on rollover because it is missing the MUIDataTableToolbar-icon class.

[petrkrejcik]

To put a button as a first in the toolbar you can use negative flex order.

  const getMuiTheme = () =>
    createMuiTheme({
      overrides: {
        MUIDataTableToolbar: {
          actions: {
            display: 'flex',
            flexDirection: 'row',
            flex: 'initial',
          },
        },
      },
    });


  const options = {
    customToolbar: () => {
      return (
          <IconButton style={{ order: -1 }}>
            <AddIcon />
          </IconButton>
      );
    },
  };

  return (
    <MuiThemeProvider theme={getMuiTheme()}>
      <MUIDataTable options={options} />
    </MuiThemeProvider>
  );

[ShqipognjaLL]

It would be ideal if basically customToolBar hook passed the children props and allowed you to manipulate them accordingly and return whatever you wanted.