Material-table: how to add new row data manually?

[haqisaurus]

I want to add new row data from outside, not from feature that provide by material-table, I did something like this

actions={[          
                        {
                            icon: 'add',
                            tooltip: 'Add Supplier',
                            isFreeAction: true,
                            onClick: (event) => {
                                // this.props.toggleFormSupplier()
                                this.tableRef.current.setState({data: [...this.tableRef.current.state.data, {_id: "5cd7a3405f2fb02d56479687", name: "test l", phone: "0878653766", address: 'this is address'}]})
                                console.log(this.tableRef.current.renderData)
                                this.tableRef.current.onQueryChange();
                            }
                        }
                    ]}

this code purpose to add new row directly but when echo-ing at console data added but not rendered? someone can help me out this case?

[mbrn]

Hi @haqisaurus

1. Store your data on your state.
2. Add a new row to array that stored on state.
3. Just setState

[haqisaurus]

Hi @haqisaurus

1. Store your data on your state.
2. Add a new row to array that stored on state.
3. Just setState

I use data from remote API not from array state, is there a function to trigger reload data from API server?

[priemd]

Whatever triggers you’re remote call for new data should set the state and you’re all set. Could easily be a custom action inside material-table. I’m using custom actions and redux with redux thunk for custom search, add,modify, delete all works great with reducers updating the state.

[mbrn]

@haqisaurus

if you use data and you want to add new row please check editable feature. It lets you to create a new row with a form.

But if you want to refresh data you can use tableRef and call onQueryChange manually.

[haqisaurus]

@mbrn

Okey I got it now, thank you for helping me 👍