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,
}}
/>
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")
}
]}
/>