Overriding add row function in material table

Question

I want to execute a function before the add row editable opens. Before this UI opens up I want to execute a function. (like console.log('Hello')) This is my current material table code.

            <MaterialTable
                title="Timesheet"
                columns={columns}
                data={DataArray}
                icons={tableIcons}
                editable={{
                onRowAddCancelled: rowData => console.log('Row adding cancelled'),
                onRowUpdateCancelled: rowData => console.log('Row editing cancelled'),
                onRowAdd: newData =>
                    new Promise((resolve, reject) => {
                        
                        setTimeout(() => {
                            // add row
                        }, 1000);
                    }),    

                }}
                options={{
                    actionsColumnIndex: -1,
                    addRowPosition: "first",
                    search:false,
                    exportButton: true,
                    
                }}
                
            />

OK. There is a + button on top which enables me to add rows. But when i click on the button i want it to execute a function (maybe console.log('Hello') ) then execute the add row function. Is it clear enough? — user16985442
– user16985442, Commented Oct 20, 2021 at 7:47

srgbnd · Accepted Answer · 2021-10-20 10:25:58Z

1

You can put the code you want to execute in the onRowAdd callback function, for example

    <MaterialTable
      title="Timesheet"
      columns={columns}
      data={DataArray}
      icons={tableIcons}
      editable={{
        onRowAddCancelled: rowData => console.log('Row adding cancelled'),
        onRowUpdateCancelled: rowData => console.log('Row editing cancelled'),
        onRowAdd: newData => {
            console.log('Hello');
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    // add row
                }, 1000);
            });  
        }
      }}
      options={{
        actionsColumnIndex: -1,
        addRowPosition: "first",
        search:false,
        exportButton: true,
      }}
    />
  );

If you want to call your function on the + button click, you need to add the actions. For example

    <MaterialTable      
      actions={[
        {
          icon: 'add',
          tooltip: 'Add User',
          isFreeAction: true,
          onClick: (event) => alert("You want to add a new row")
        }
      ]}
    />

edited Oct 20, 2021 at 10:25

answered Oct 20, 2021 at 8:04

srgbnd

5,65210 gold badges46 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user16985442 Over a year ago

This console.log('Hello') is executed when I add data to the row and click save. I want to execute the console.log('Hello') when I click on the + button but before the add row opens.

srgbnd Over a year ago

@SohanReddy where is the code for the + button? I don't see it in the code that you provided. In MaterialTable you can add buttons to the table toolbar by using the actions property. Read more here material-table.com/#/docs/features/actions

Collectives™ on Stack Overflow

Overriding add row function in material table

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related