Override plus button functionality for adding new table row

[iqasim-com]

Instead of using material-table predefined plus icon for adding new row, i want to add plus icon functionality to the Add new region button image attached below

[zuhlke-rex]

you can add a icons props like this

<MaterialTable
    columns={columnData}
    data={data}
    icons={{
        Add: props => <Icon {...props} />
    }}
/>

but one thing is that all the buttons are preset <IconButton /> with a ripple effect. I want it to be overridden by a simple button with text but still finding a way.

[iqasim-com]

Thanks for your reply @nalgritz This is exactly what i want but i want to add this icon outside of this table like in above image, i want to place this in Add new Region location

How can i apply css on Add

`Add: props => { return (

Add new Region

                       )
                     }`

[sabahath786]

@mqasim1990 , I have the same query, but my add row action is on the row itself, i want to add one action on the row add(+) and onclick on this icons i want to create an empty row below the current(selected row) ,

Please find attached image, i have added [+] icon for each row, onClick of [+] ,I am trying to create empty row below or above. I have been stuck from two days. 1.Tried with component over riding, it did not work

I really appreciate your help. Thanks in advance. row.

[zuhlke-rex]

hello @mqasim1990 & @sabahath786 , I guess we are looking for the same feature while this requires material-table to expose the Add click event so that we can apply outside the table. I haven't had time to dig the package so I'm sorry I can't help at the moment.

hope anyone can help or exposing the method is a feature request?

thanks both.

[Nicolas-Medina-Teracode]

I need exactly the same, if anyone made any progress with that please let us know :)

[durgeshsatyam]

I have figured out a naughty solution to do this job. Add a ref in the new overridden icon Add like this.

...
  // initializing a ref in React.

  const myTextIcon = React.useRef(null);
...
<MaterialTable
    ...
    icons={{
        Add: props => (
          <div ref={myTextIcon} className={classes.addButton}>
            <i className="fa fa-plus" />
            Add new Region
          </div>
        ),
      }}
...
/>

Now we accessed our parent of parent element via that ref like shown in code below in the useEffect() where it seems to have an IconButton. and we deleted the class responsible for this ripple: 'MuiIconButton-root' As in code snippet below. (Note: you can also use componentDidMount() instead of useEffect()).

  React.useEffect(() => {

    // removing the class 'MuiIconButton-root' from parent of parent of our ref node.

    myTextIcon.current.parentNode.parentNode.classList.remove('MuiIconButton-root');

  }, []);

I hope it will remove the ripples. Thanks Regards.

[sabahath786]

@durgeshsatyam , Hello Durgesh, if you check my query, I am not trying to override action, im trying to add [+] action on row itself, from which i can able to insert new row after every row on [+] click,

I really appreciate if you can help me out. Thanks in advance.

[antonioiliev]

I need exactly the same feature as @sabahath786, @Nicolas-Medina-Teracode and @nalgritz have pointed out above! Any progress is very welcome.

[sergeycw]

Hi guys! Everything is great, but how I can disable hover on custom add button?

[sabahath786]

Any progress on my query ? or any clue please !

[Inaki-Berra-Teracode]

I'm trying to add a new button to the Add Icon, not an icon. But the problem is that it wraps the icon in a button. Could we have a way to add a component? Or maybe a way to remove the hover effect that it adds.

[masbaehr]

I also had this problem and solved it like this: Plain old javascript comes to the rescue:

First override the add icon manually by setting a custom data attribute for the query selector

icons={{
                Add: props => <Icon data-mycustomid={"add-icon-handler"} />
              }}

then use this code snippet wherever you want to trigger the add. So you can hide the original icon and show the add function at any place

document.querySelector("[data-mycustomid='add-icon-handler']").parentNode.click()

[eborrallo]

Try this

import { forwardRef } from "react";
import Fab from "@material-ui/core/Fab";
import AddIcon from "@material-ui/icons/Add";

<MaterialTable
// ... your other props
icons={{
            Add: forwardRef((props, ref) => (
              <Fab ref={ref} {...props} color="primary" aria-label="add">
                <AddIcon /> 
              </Fab>
            ))
          }}
/>

[hshelbur]

An easy workaround to remove the ripple is to add display: none in your css for the class responsible for the ripple: .MuiTouchRipple-root

[ucka6kabal]

Hello to All, I want to add to the Add button an additional functionality - I want once I click the button to redirect me to the top of the page - on scroll at the moment with CSS I added a "stciky" property of the toolbar and the content of the table is big and when I click the button it adds new row to the top of the page - but the page does not scroll to the top - it stays at the point of scroll - in the middle of the page for example. I want to add something small - an arrow function maybe just once it is cliked to get me to the top of the page

[ucka6kabal]

Hello to All, I want to add to the Add button an additional functionality - I want once I click the button to redirect me to the top of the page - on scroll at the moment with CSS I added a "stciky" property of the toolbar and the content of the table is big and when I click the button it adds new row to the top of the page - but the page does not scroll to the top - it stays at the point of scroll - in the middle of the page for example. I want to add something small - an arrow function maybe just once it is cliked to get me to the top of the page

@mbrn could you please have a look, is there a way to do that?

[thisismydesign]

We'd also like to customize the add button and the current way it works makes that difficult.

[masbaehr]

Hello to All, I want to add to the Add button an additional functionality - I want once I click the button to redirect me to the top of the page - on scroll at the moment with CSS I added a "stciky" property of the toolbar and the content of the table is big and when I click the button it adds new row to the top of the page - but the page does not scroll to the top - it stays at the point of scroll - in the middle of the page for example. I want to add something small - an arrow function maybe just once it is cliked to get me to the top of the page

@mbrn could you please have a look, is there a way to do that?

Note: To scroll something to the top you can simply do a scrollTop = of that element (if it's the page use window.scrollTop, and if inside an element something like this:

document.querySelector(".MuiTable-root").parentNode.scrollTop = 0

[the-lazy-val]

Is there a way, I can override plus [+] button functionality to open a new dialog box.

[chitgoks]

add an icon in actions property and set isFreeAction to true, then you can open the dialog in the onClick() event.

[Solijons]

add an icon in actions property and set isFreeAction to true, then you can open the dialog in the onClick() event.

Thank you for this @chitgoks fixed my issue.

[hardyyb3]

I'm trying to add a new button to the Add Icon, not an icon. But the problem is that it wraps the icon in a button. Could we have a way to add a component? Or maybe a way to remove the hover effect that it adds.

Any solutions to this one yet

[Solijons]

I'm trying to add a new button to the Add Icon, not an icon. But the problem is that it wraps the icon in a button. Could we have a way to add a component? Or maybe a way to remove the hover effect that it adds.

Any solutions to this one yet

<MaterialTable
components={{
Actions: (props) => {
return(
<Button
onClick={() => console.log('click')}
Hello World</Button>
);
}
}}
actions={[
{
icon: 'add',
onClick: (event: any, rowData: any) => {
console.log('Hello World!');
},
isFreeAction: true,
tooltip: 'Add Button',
}
]}
data={[]}
columns={[]}
/>

You are going to have override component. See above how I am doing it. Hope it helps

[vaniatoperich]

I also had this problem and solved it like this: Plain old javascript comes to the rescue:

First override the add icon manually by setting a custom data attribute for the query selector

icons={{
                Add: props => <Icon data-mycustomid={"add-icon-handler"} />
              }}

then use this code snippet wherever you want to trigger the add. So you can hide the original icon and show the add function at any place

document.querySelector("[data-mycustomid='add-icon-handler']").parentNode.click()

I am trying to implement this approach for a "selection" action but not sure where to place the querySelector to?

[agatatocz]

I'm trying to add a new button to the Add Icon, not an icon. But the problem is that it wraps the icon in a button. Could we have a way to add a component? Or maybe a way to remove the hover effect that it adds.

Any solutions to this one yet

 <MaterialTable
              components={{
                Actions: (props) => {
                  return(
                    <Button
                      onClick={() => console.log('click')}
                    >Hello World</Button>
                  );
                }
              }}
              actions={[
                {
                  icon: 'add',
                  onClick: (event: any, rowData: any) => {
                    console.log('Hello World!');
                  },
                  isFreeAction: true,
                  tooltip: 'Add Button',
                }
              ]}
              data={[]}
              columns={[]}
            />

You are going to have override component. See above how I am doing it. Hope it helps

Unfortunately it overrides all the actions so we get the add button instead of edit and delete icons. In my case isFreeAction does not do anything - the behaviour is the same no matter what value I pass.

[masbaehr]

I also had this problem and solved it like this: Plain old javascript comes to the rescue: First override the add icon manually by setting a custom data attribute for the query selector

icons={{
                Add: props => <Icon data-mycustomid={"add-icon-handler"} />
              }}

then use this code snippet wherever you want to trigger the add. So you can hide the original icon and show the add function at any place

document.querySelector("[data-mycustomid='add-icon-handler']").parentNode.click()

I am trying to implement this approach for a "selection" action but not sure where to place the querySelector to?

in the onClick handler of the component you want to perform the add action

[Solijons]

I'm trying to add a new button to the Add Icon, not an icon. But the problem is that it wraps the icon in a button. Could we have a way to add a component? Or maybe a way to remove the hover effect that it adds.

Any solutions to this one yet

 <MaterialTable
              components={{
                Actions: (props) => {
                  return(
                    <Button
                      onClick={() => console.log('click')}
                    >Hello World</Button>
                  );
                }
              }}
              actions={[
                {
                  icon: 'add',
                  onClick: (event: any, rowData: any) => {
                    console.log('Hello World!');
                  },
                  isFreeAction: true,
                  tooltip: 'Add Button',
                }
              ]}
              data={[]}
              columns={[]}
            />

You are going to have override component. See above how I am doing it. Hope it helps

Unfortunately it overrides all the actions so we get the add button instead of edit and delete icons. In my case isFreeAction does not do anything - the behaviour is the same no matter what value I pass.

actions={[ { icon: 'add', onClick: (event: any, rowData: any) => { console.log('Hello World!'); }, isFreeAction: true, tooltip: 'Add Button', } ]}

        <MaterialTable
          title="Some table"
          columns={[
            { field: 'val', title: 'Value' },
            { field: 'number', title: 'Number' },
          ]}
          data={[
            { val: 'Data', number: 0 }
          ]}
          actions={[
            {
              icon: () =>  <span>Button</span>,
              onClick: (event: any, rowData: any) => {
                console.log('Hello World!');
              },
              isFreeAction: true,
              tooltip: 'Add Button',
            }
          ]}
        />

I think if you dont want to lose edit, delete features try doing this way, Override your add icon: () => Button. Unfortunately, you are going to style your span to look like button. Let me know if it works.

[agatatocz]

I'm trying to add a new button to the Add Icon, not an icon. But the problem is that it wraps the icon in a button. Could we have a way to add a component? Or maybe a way to remove the hover effect that it adds.

Any solutions to this one yet

 <MaterialTable
              components={{
                Actions: (props) => {
                  return(
                    <Button
                      onClick={() => console.log('click')}
                    >Hello World</Button>
                  );
                }
              }}
              actions={[
                {
                  icon: 'add',
                  onClick: (event: any, rowData: any) => {
                    console.log('Hello World!');
                  },
                  isFreeAction: true,
                  tooltip: 'Add Button',
                }
              ]}
              data={[]}
              columns={[]}
            />

You are going to have override component. See above how I am doing it. Hope it helps

Unfortunately it overrides all the actions so we get the add button instead of edit and delete icons. In my case isFreeAction does not do anything - the behaviour is the same no matter what value I pass.

actions={[ { icon: 'add', onClick: (event: any, rowData: any) => { console.log('Hello World!'); }, isFreeAction: true, tooltip: 'Add Button', } ]}

        <MaterialTable
          title="Some table"
          columns={[
            { field: 'val', title: 'Value' },
            { field: 'number', title: 'Number' },
          ]}
          data={[
            { val: 'Data', number: 0 }
          ]}
          actions={[
            {
              icon: () =>  <span>Button</span>,
              onClick: (event: any, rowData: any) => {
                console.log('Hello World!');
              },
              isFreeAction: true,
              tooltip: 'Add Button',
            }
          ]}
        />

I think if you dont want to lose edit, delete features try doing this way, Override your add icon: () => Button. Unfortunately, you are going to style your span to look like button. Let me know if it works.

It works, thank you!

[LoicHa]

Hello guys i manage to perform it thanks to this comment on stack : https://stackoverflow.com/questions/55846015/how-to-remove-background-ripple-effect-from-custom-action-button-in-material-tab

I have now a perfect addbutton styled as i wished , without the warning of a button embeded in a button

[oze4]

If I am understanding this correctly, you want to be able to add a new row using a button that lives outside of material-table?

The only way I could get this to work is by using tableRef as well as tying the editable prop to state. The biggest downside to this is that while you are in the process of adding a new row, the toolbar icon is visible (the one you don't want shown). In order to resolve that issue, I had to override the Toolbar component, and filter out which actions are shown.

Please keep in mind this is hacky, but it gets the job done.

You can view a live demo here

import React, { useRef, useState } from "react";
import { render } from "react-dom";
import MaterialTable, { MTableToolbar } from "material-table";
import tableIcons from "./TableIcons.js";

import "./style.css";

const rando = max => Math.floor(Math.random() * max);
const rawData = ["Rock", "Paper", "Scissors"].map(name => ({
  id: rando(100),
  name
}));

const columns = [
  { field: "id", title: "Id" },
  { field: "name", title: "Name" }
];

const App = () => {
  const [editable, setEditable] = useState();
  const [data, setData] = useState(rawData);
  const tableRef = useRef();

  const handleAddRow = () => {
    tableRef.current.state.showAddRow = true;
    setEditable({
      onRowAdd: newData =>
        new Promise((resolve, reject) => {
          setData([...data, newData]);
          setEditable();
          resolve();
        })
    });
  };

  return (
    <div>
      <button onClick={handleAddRow} className="add-row-btn">
        Add New Row
      </button>
      <p>The button above is located outside of material-table</p>

      <MaterialTable
        tableRef={tableRef}
        data={data}
        icons={tableIcons}
        columns={columns}
        editable={editable}
        options={{
          actionsColumnIndex: -1
        }}
        /// IF YOU DONT WANT TO SEE THE ADD ACTION WITHIN 
        /// THE TOOLBAR WHEN YOU ARE ADDING A NEW ROW THEN
        /// YOU WILL NEED TO UNCOMMENT THIS:
        // components={{
        //   Toolbar: props => (
        //     <MTableToolbar
        //       {...props}
        //       actions={props.actions.filter(a => a.tooltip !== "Add")}
        //     />
        //   )
        // }}
      />
    </div>
  );
};

render(<App />, document.querySelector("#root"));

[kobechenyang]

Is there anyway to listen to the onClick event of default add button?

[oze4]

@kobechenyang are you referring to the "default add button" as the button that appears when you set:

<MaterialTable editable={{ 
    onRowAdd: props => { ... }
  }}
/>

If so, I have not found a native way to listen for that onClick event. The best I have been able to do is override components to intercept events..

[kobechenyang]

@oze4 yes. But I want to keep the same behavior. I guess I can do what you do here

    tableRef.current.state.showAddRow = true;
    setEditable({
      onRowAdd: newData =>
        new Promise((resolve, reject) => {
          setData([...data, newData]);
          setEditable();
          resolve();
        })
    });
  };

[oze4]

Hey @kobechenyang I have a similar demo..

It is not complete - the only bug is that you can only select 'Add Row' one time.. If you select "Add Row", then cancel, and try to select "Add Row" again, nothing happens. Need to find a way to reset the state is where I left off, I believe..

Live demo here

import React, { useState, useRef } from "react";
import { render } from "react-dom";
import MaterialTable, { MTableActions, MTableEditRow } from "material-table";
import { AddBox } from "@material-ui/icons";
import tableIcons from "./TableIcons.js";

const originalData = ["Rock", "Paper", "Scissors"].map(word => {
  return {
    id: Math.floor(Math.random() * 300),
    name: word
  };
});

function App() {
  const tableRef = useRef();
  const [isAdding, setIsAdding] = useState(false);
  const [data, setData] = useState(originalData);

  return (
    <MaterialTable
      tableRef={tableRef}
      data={data}
      title="Override onRowAdd Demo"
      icons={tableIcons}
      columns={[
        {
          title: "Id",
          field: "id"
        },
        {
          title: "Name",
          field: "name"
        },
      ]}
      actions={[
        (rowData => ({
          position: "toolbar",
          icon: AddBox,
          tooltip: "Add row",
          onClick: (event, newRow) => {
            tableRef.current.state.showAddRow = true;
            setIsAdding(true)
          }
        }))({ position: 'toolbar' })
      ]}
      components={{
        Actions: (props, rowData) => {
          console.log({ from: 'components.Actions', props, rowData, tableRef });
          return (
            <MTableActions 
              {...props}
              onEditingCanceled={(mode, rowData) => {
                rowData.tableData.editing = undefined;
                forceUpdate();
              }}
              onEditingApproved={(mode, newData, oldData) => {
                const dataCopy = [...data];
                const index = dataCopy.indexOf(oldData);
                dataCopy[index] = newData;
                setData(dataCopy);
              }}
            />
          );
        }
      }}
      options={{
        actionsColumnIndex: -1
      }}
      localization={{
        header: {
          actions: '',
        }
      }}
    />
  );
}

render(<App />, document.querySelector("#root"));

[kobechenyang]

What I want to achieve is pre-populate the rowdata when the add button is clicked. Looks like tableRef.current.state.showAddRow = true; will create a new empty rowData by itself. it would be nice if there is a onEditingStarted event so we can manage the data by ourselves. I ended up with something like this

<MTableEditRow
 {...props}
   data={props.data?props.data:newItem}
   onEditingCanceled={(mode, rowData) => {
     cancelEdit();
     props.onEditingCanceled(mode);
   }}
 />

newItem is a state I manage locally and have the data I want populated.

[oze4]

Hey @kobechenyang you can accomplish this by following these steps:

You can view a live demo here

or here

• Create a default row object (this default object could potentially reside in state as well....something to think about)

  // Keep in mind, this object must have the same shape 
  // as all of the other objects in the main 'data' prop..
  const DEFAULT_ROW_OBJECT = {
  id: "999999",
  name: "Joe Schmoe",
  }

• Use the onRowAdd attribute under the editable prop

  editable={{
  onRowAdd: newRowData => {
  return new Promise((resolve, reject) => {
    setData(oldData => [...oldData, ...newRowData]);
    resolve();
  })
  }
  }}

• Override the EditRow component

  components={{
  EditRow: props => {
  const propsCopy = { ...props };
  propsCopy.data = DEFAULT_ROW_OBJECT;
  return <MTableEditRow {...propsCopy} />
  } 
  }}

  Core of live demo:

import React, { useState } from "react";
import { render } from "react-dom";
import MaterialTable, { MTableEditRow } from "material-table";
import tableIcons from "./TableIcons.js";

const DEFAULT_ROW_OBJECT = {
  id: "Hello, I am",
  name: "the default object!",
}

const originalData = ["Rock", "Paper", "Scissors"].map(word => ({
  id: Math.floor(Math.random() * 300),
  name: word
}));

function App() {
  const [data, setData] = useState(originalData);

  return (
    <MaterialTable
      data={data}
      icons={tableIcons}
      columns={[
        {
          title: "Id",
          field: "id"
        },
        {
          title: "Name",
          field: "name"
        },
      ]}
      editable={{
        onRowAdd: newRowData => {
          return new Promise((resolve, reject) => {
            setData(oldData => [...oldData, ...newRowData]);
            resolve();
          })
        }
      }}
      components={{
        EditRow: props => {
          const propsCopy = { ...props };
          propsCopy.data = DEFAULT_ROW_OBJECT;
          return <MTableEditRow {...propsCopy} />
        } 
      }}
      options={{
        actionsColumnIndex: -1
      }}
    />
  );
}

render(<App />, document.querySelector("#root"));

/mtc::resolved

[oze4]

@kobechenyang actually, it looks like the column.initialEditValue is what you're looking for..

[kobechenyang]

@kobechenyang actually, it looks like the column.initialEditValue is what you're looking for..

ah I missed that. Thanks !

[vallamost]

@LoicHa

Hello guys i manage to perform it thanks to this comment on stack : https://stackoverflow.com/questions/55846015/how-to-remove-background-ripple-effect-from-custom-action-button-in-material-tab

I have now a perfect addbutton styled as i wished , without the warning of a button embeded in a button

Could you please provide an example as to how you were able to Style your AddButton in the upper left?

[LoicHa]

@LoicHa

Hello guys i manage to perform it thanks to this comment on stack : https://stackoverflow.com/questions/55846015/how-to-remove-background-ripple-effect-from-custom-action-button-in-material-tab I have now a perfect addbutton styled as i wished , without the warning of a button embeded in a button

Could you please provide an example as to how you were able to Style your AddButton in the upper left?

@awarmfastbear,

Yes , SASS code bellow

.MuiToolbar-root {
    > div:nth-child(1) {
      order:2;
      text-indent:20px;
    }
    > div:nth-child(2) {
      order:1;
    }
    > div:nth-child(3) {
      order:3;
    }
    > div:nth-child(4) {
      order:4;
    }
}

[oze4]

This issue looks to be resolved. Thanks everyone! Feel free to reopen if you feel it should be open.

[rshashik]

@mqasim1990 , I have the same query, but my add row action is on the row itself, i want to add one action on the row add(+) and onclick on this icons i want to create an empty row below the current(selected row) ,

Please find attached image, i have added [+] icon for each row, onClick of [+] ,I am trying to create empty row below or above. I have been stuck from two days. 1.Tried with component over riding, it did not work

I really appreciate your help. Thanks in advance. row.

@sabahath786 , Were you able to achieve the add [+] functionality on each row?? Could you please share the code??

[sabahath786]

HI,

Nope this was my query how can i add [+] button for each row, this is just a prototype i added when i raised the question for better understanding. it would be more appreciated if i get code how i can add it.

Thanks & regards Sabahath Anjum Software Engineer

On Sun, Jun 14, 2020 at 11:38 AM Developer151947 notifications@github.com wrote:

@mqasim1990 , I have the same query, but my add row action is on the row itself, i want to add one action on the row add(+) and onclick on this icons i want to create an empty row below the current(selected row) ,

Please find attached image, i have added [+] icon for each row, onClick of [+] ,I am trying to create empty row below or above. I have been stuck from two days. 1.Tried with component over riding, it did not work

I really appreciate your help. Thanks in advance. [image: attachedGithub] https://user-images.githubusercontent.com/52918792/61289296-b4830680-a7d1-11e9-9485-2faeaad29d5d.PNG row.

@sabahath786 https://github.com/sabahath786 , Were you able to achieve the add [+] functionality on each row?? Could you please share the code??

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/mbrn/material-table/issues/830#issuecomment-643736512, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMTXUCGLDCSCZ2NEEYGZAWTRWSEBFANCNFSM4IDWHMIA .

[Vinhtu]

If I am understanding this correctly, you want to be able to add a new row using a button that lives outside of material-table?

The only way I could get this to work is by using tableRef as well as tying the editable prop to state. The biggest downside to this is that while you are in the process of adding a new row, the toolbar icon is visible (the one you don't want shown). In order to resolve that issue, I had to override the Toolbar component, and filter out which actions are shown.

Please keep in mind this is hacky, but it gets the job done.

You can view a live demo here

import React, { useRef, useState } from "react";
import { render } from "react-dom";
import MaterialTable, { MTableToolbar } from "material-table";
import tableIcons from "./TableIcons.js";

import "./style.css";

const rando = max => Math.floor(Math.random() * max);
const rawData = ["Rock", "Paper", "Scissors"].map(name => ({
  id: rando(100),
  name
}));

const columns = [
  { field: "id", title: "Id" },
  { field: "name", title: "Name" }
];

const App = () => {
  const [editable, setEditable] = useState();
  const [data, setData] = useState(rawData);
  const tableRef = useRef();

  const handleAddRow = () => {
    tableRef.current.state.showAddRow = true;
    setEditable({
      onRowAdd: newData =>
        new Promise((resolve, reject) => {
          setData([...data, newData]);
          setEditable();
          resolve();
        })
    });
  };

  return (
    <div>
      <button onClick={handleAddRow} className="add-row-btn">
        Add New Row
      </button>
      <p>The button above is located outside of material-table</p>

      <MaterialTable
        tableRef={tableRef}
        data={data}
        icons={tableIcons}
        columns={columns}
        editable={editable}
        options={{
          actionsColumnIndex: -1
        }}
        /// IF YOU DONT WANT TO SEE THE ADD ACTION WITHIN 
        /// THE TOOLBAR WHEN YOU ARE ADDING A NEW ROW THEN
        /// YOU WILL NEED TO UNCOMMENT THIS:
        // components={{
        //   Toolbar: props => (
        //     <MTableToolbar
        //       {...props}
        //       actions={props.actions.filter(a => a.tooltip !== "Add")}
        //     />
        //   )
        // }}
      />
    </div>
  );
};

render(<App />, document.querySelector("#root"));

Hi. thank you . but i want it have button edit and update when i have a checkbox. you have a solution ?

[Vinhtu]

n accomplish this by following these steps:

@oze4 Hi. thank you . but i want it have button edit and update when i have a checkbox. you have a solution ?

[NikhilChugh]

@mqasim1990 , I have the same query, but my add row action is on the row itself, i want to add one action on the row add(+) and onclick on this icons i want to create an empty row below the current(selected row) ,

Please find attached image, i have added [+] icon for each row, onClick of [+] ,I am trying to create empty row below or above. I have been stuck from two days. 1.Tried with component over riding, it did not work

I really appreciate your help. Thanks in advance. row.

Hi, If someone is still looking for a solution, the way is to manipulate the data(with editable props in header) on click of plus icon , instead of manipulating the material table structure.

[DineshPrakasam]

in material table tree view while adding child component under a parent component,need to show that child component after adding in expansion.but it is getting as collapsed,(requirement is after adding child it should be expanded) ,kindly anyone help me on this,thanks.

in the image below like second row i need to show the lastly added child component in expand ,not like first row collapsed